<template>
|
<div style="width: 100%;height: 250px;margin-top: 10px;display: flex;">
|
<div style="width: 24%;display: flex;margin-left: 16px;">
|
<div style="width: 32%;height: 250px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1010').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1010').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1010').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1010').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1010').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
1号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1010').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1010').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
|
|
<div style="width: 32%;background-color: #000;height: 250px;margin-left: 2px;">
|
<div>
|
<div style="height: 80px; position: relative;" :style="{
|
background: plcData4.find(item => item.plcStation === '1011').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1011').handShake " style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1011').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1012').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1012').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1012').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1013').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1013').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1013').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
</div>
|
|
<div style="width: 32%;height: 250px;margin-left: 2px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1014').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1014').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1014').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1014').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1014').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
2号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1014').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1014').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
</div>
|
|
<!--=========================================================第一检修台=======================================================-->
|
|
<!--=========================================================第二检修台=======================================================-->
|
<div style="width: 24%;display: flex;margin-left: 16px;">
|
<div style="width: 32%;height: 250px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1020').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1020').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1020').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1020').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1020').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
3号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1020').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1020').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
|
|
<div style="width: 32%;background-color: #000;height: 250px;margin-left: 2px;">
|
<div>
|
<div style="height: 80px; position: relative;" :style="{
|
background: plcData4.find(item => item.plcStation === '1021').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1021').handShake " style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1021').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1022').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1022').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1022').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1023').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1023').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1023').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
</div>
|
|
<div style="width: 32%;height: 250px;margin-left: 2px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1024').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src=" plcData4.find(item => item.plcStation === '1024').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1024').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1024').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1024').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
4号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1024').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src=" plcData4.find(item => item.plcStation === '1024').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
</div>
|
<!--=========================================================第二检修台=======================================================-->
|
|
<!--=========================================================第三检修台=======================================================-->
|
<div style="width: 24%;display: flex;margin-left: 16px;">
|
<div style="width: 32%;height: 250px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1030').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1030').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1030').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1030').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1030').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
5号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1030').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1030').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
|
|
<div style="width: 32%;background-color: #000;height: 250px;margin-left: 2px;">
|
<div>
|
<div style="height: 80px; position: relative;" :style="{
|
background: plcData4.find(item => item.plcStation === '1031').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1031').handShake " style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1031').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1032').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1032').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1032').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1033').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1033').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1033').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
</div>
|
|
<div style="width: 32%;height: 250px;margin-left: 2px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1034').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1034').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1034').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1034').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1034').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
6号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1034').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1034').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
</div>
|
<!--=========================================================第三检修台=======================================================-->
|
|
<!--=========================================================第四检修台=======================================================-->
|
<div style="width: 24%;display: flex;margin-left: 16px;">
|
<div style="width: 32%;height: 250px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1040').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1040').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1040').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1040').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1040').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
7号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1040').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1040').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
|
|
<div style="width: 32%;background-color: #000;height: 250px;margin-left: 2px;">
|
<div>
|
<div style="height: 80px; position: relative;" :style="{
|
background: plcData4.find(item => item.plcStation === '1041').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1041').handShake " style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1041').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1042').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1042').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1042').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
|
<div>
|
<div style="height: 80px; position: relative;margin-top: 2px;" :style="{
|
background: plcData4.find(item => item.plcStation === '1043').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1043').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1043').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 80px;" />
|
</div>
|
</div>
|
|
</div>
|
|
<div style="width: 32%;height: 250px;margin-left: 2px;">
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1044').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1044').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
|
|
<div>
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: plcData4.find(item => item.plcStation === '1044').handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="plcData4.find(item => item.plcStation === '1044').handShake" style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!plcData4.find(item => item.plcStation === '1044').handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
8号检修台
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
|
<div :style="{
|
background: plcData4.find(item => item.plcStation === '1044').handShake ? 'yellow' : 'orange',
|
height: '55px',
|
width: '60%',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
margin: '12px auto',
|
borderRadius: '10px'
|
}">
|
<img :src="plcData4.find(item => item.plcStation === '1044').handShake ? require('../assets/wx.png') : require('../assets/gzt.png')" class="image"
|
style="height: 55px;" />
|
</div>
|
</div>
|
</div>
|
<!--=========================================================第四检修台=======================================================-->
|
|
</div>
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import { formatTime } from '../utils/index.js'
|
|
export default {
|
mixins: [drawMixin],
|
props: {
|
plcData4: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
|
}
|
},
|
mounted() {
|
this.cancelLoading()
|
},
|
methods: {
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false
|
}, 5000)
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '../assets/scss/index.scss';
|
|
/* 添加渐现动画 */
|
@keyframes fadeIn {
|
0% {
|
opacity: 0;
|
}
|
100% {
|
opacity: 1;
|
}
|
}
|
|
.scroll-container {
|
width: 85%;
|
height: 95px;
|
margin: 5px auto;
|
border: 1px solid #fff;
|
overflow-y: auto;
|
/* 添加垂直滚动条 */
|
display: flex;
|
flex-direction: column;
|
/* 垂直排列子元素 */
|
}
|
|
.scroll-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 95px;
|
border-bottom: 1px solid #ddd;
|
background-color: aqua;
|
}
|
|
.scroll-item img {
|
height: 70%;
|
margin-right: 10px;
|
}
|
|
.scroll-item p {
|
margin: 0;
|
}
|
|
|
</style>
|
