zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
boardTest
夜笙歌 3 weeks ago
parent 25f2e39ef1
commit cea8b8704b
1 changed files with 110 additions and 39 deletions
Show Stats Download Patch File Download Diff File

149
src/views/board/index.vue
Unescape Escape View File

@ -26,18 +26,30 @@
<div style="margin: 4px 0 ;"> <div style="margin: 4px 0 ;">
<img :src="icon2" alt="" style="width: 2vw"> <img :src="icon2" alt="" style="width: 2vw">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">温度设备</span> <span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">温度设备</span>
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; ">( </span>
<img :src="icon2" alt="" style="width: 2vw;filter:grayscale(100%) ">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; "> 离线)</span>
</div> </div>
<div style="margin: 4px 0 ;"> <div style="margin: 4px 0 ;">
<img :src="icon3" alt="" style="width: 2vw"> <img :src="icon3" alt="" style="width: 2vw">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">温湿度设备</span> <span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">温湿度设备</span>
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; ">( </span>
<img :src="icon3" alt="" style="width: 2vw;filter:grayscale(100%) ">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; "> 离线)</span>
</div> </div>
<div style="margin: 4px 0 ;"> <div style="margin: 4px 0 ;">
<img :src="icon4" alt="" style="width: 2vw"> <img :src="icon4" alt="" style="width: 2vw">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">振动设备</span> <span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">振动设备</span>
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; ">( </span>
<img :src="icon4" alt="" style="width: 2vw;filter:grayscale(100%) ">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; "> 离线)</span>
</div> </div>
<div style="margin: 4px 0 ;"> <div style="margin: 4px 0 ;">
<img :src="icon5" alt="" style="width: 2vw"> <img :src="icon5" alt="" style="width: 2vw">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">报警设备</span> <span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">报警设备</span>
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; ">( </span>
<img :src="icon5" alt="" style="width: 2vw;filter:grayscale(100%) ">
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px; "> 离线)</span>
</div> </div>
</div> </div>
<div class="leftTop"> <div class="leftTop">
@ -99,16 +111,21 @@
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0013)"> <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0013)">
<div class="td1">{{ i }}</div> <div class="td1">{{ i }}</div>
<div class="td2"> <div class="td2">
<div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0"> <div v-if="new Date().getTime() - (isOnline[i] || 0) > (1000*60*3)">
<div> 离线
<div class="info1"> </div>
{{ deviceMap[ii] }} <div v-else>
</div> <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">
<div class="span"> <div>
: <div class="info1">
</div> {{ deviceMap[ii] }}
<div class="info2"> </div>
{{ deviceData.E0013[i][ii] }} <div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0013[i][ii] }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -117,7 +134,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_0200||{}).isAlm?'icon5':'icon2'" style="top: 74%;left: 94%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_0200 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_0200||{}).isAlm?'icon5':'icon2'" style="top: 74%;left: 94%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -141,7 +160,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_1600||{}).isAlm?'icon5':'icon2'" style="top: 74%;left: 90%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_1600 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_1600||{}).isAlm?'icon5':'icon2'" style="top: 74%;left: 90%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -165,7 +186,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_0100||{}).isAlm?'icon5':'icon2'" style="top: 74%;left: 76%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_0100 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_0100||{}).isAlm?'icon5':'icon2'" style="top: 74%;left: 76%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -189,7 +212,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_3500||{}).isAlm?'icon5_1':'icon4'" style="top: 74%;left: 92.4%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_3500 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_3500||{}).isAlm?'icon5_1':'icon4'" style="top: 74%;left: 92.4%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -213,7 +238,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_3700||{}).isAlm?'icon5_1':'icon4'" style="top: 74%;left: 77.7%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_3700 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_3700||{}).isAlm?'icon5_1':'icon4'" style="top: 74%;left: 77.7%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -237,7 +264,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0004.E0004_0800||{}).isAlm?'icon5':'icon2'" style="top: 88%;left: 55%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0004_0800 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0004.E0004_0800||{}).isAlm?'icon5':'icon2'" style="top: 88%;left: 55%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -261,7 +290,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0004.E0004_3800||{}).isAlm?'icon5_1':'icon4'" style="top: 88.2%;left: 52.7%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0004_3800 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0004.E0004_3800||{}).isAlm?'icon5_1':'icon4'" style="top: 88.2%;left: 52.7%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -285,7 +316,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0004.E0004_3400||{}).isAlm?'icon5_1':'icon4'" style="top: 77.6%;left: 57.8%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0004_3400 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0004.E0004_3400||{}).isAlm?'icon5_1':'icon4'" style="top: 77.6%;left: 57.8%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -309,7 +342,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0004.E0004_3600||{}).isAlm?'icon5_1':'icon4'" style="top: 85.6%;left: 63.8%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0004_3600 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0004.E0004_3600||{}).isAlm?'icon5_1':'icon4'" style="top: 85.6%;left: 63.8%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -333,7 +368,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0002.E0002_2400||{}).isAlm?'icon5':'icon2'" style="top: 75%;left: 29%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0002_2400 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0002.E0002_2400||{}).isAlm?'icon5':'icon2'" style="top: 75%;left: 29%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -357,7 +394,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0003.E0003_2900||{}).isAlm?'icon5':'icon2'" style="top: 79%;left: 35%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0003_2900 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0003.E0003_2900||{}).isAlm?'icon5':'icon2'" style="top: 79%;left: 35%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -381,7 +420,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0003.E0003_2700||{}).isAlm?'icon5':'icon2'" style="top: 77%;left: 38%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0003_2700 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0003.E0003_2700||{}).isAlm?'icon5':'icon2'" style="top: 77%;left: 38%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -405,7 +446,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0001.E0001_1900||{}).isAlm?'icon5':'icon2'" style="top: 77%;left: 23%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0001_1900 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0001.E0001_1900||{}).isAlm?'icon5':'icon2'" style="top: 77%;left: 23%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -429,7 +472,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0001.E0001_0400||{}).isAlm?'icon5':'icon2'" style="top: 55%;left: 25.5%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0001_0400 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0001.E0001_0400||{}).isAlm?'icon5':'icon2'" style="top: 55%;left: 25.5%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -453,7 +498,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0001.E0001_2100||{}).isAlm?'icon5':'icon2'" style="top: 35.5%;left: 26.6%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0001_2100 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0001.E0001_2100||{}).isAlm?'icon5':'icon2'" style="top: 35.5%;left: 26.6%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -477,7 +524,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0005.E0005_0300||{}).isAlm?'icon5':'icon2'" style="top: 38.5%;left: 11.6%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0005_0300 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0005.E0005_0300||{}).isAlm?'icon5':'icon2'" style="top: 38.5%;left: 11.6%;">
<div class="deviceInfo1"> <div class="deviceInfo1">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -501,7 +550,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0006.E0006_0600||{}).isAlm?'icon5':'icon2'" style="top: 38.5%;left: 18.6%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0006_0600 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0006.E0006_0600||{}).isAlm?'icon5':'icon2'" style="top: 38.5%;left: 18.6%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -525,7 +576,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_1200||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 80.8%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_1200 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_1200||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 80.8%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -549,7 +602,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_2300||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 84.3%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_2300 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_2300||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 84.3%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -573,7 +628,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_3200||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 91%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_3200 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_3200||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 91%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -597,7 +654,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0014.E0014_1300||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 94.3%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0014_1300 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0014.E0014_1300||{}).isAlm?'icon5':'icon2'" style="top: 82%;left: 94.3%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -621,7 +680,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0004.E0004_0500||{}).isAlm?'icon5':'icon2'" style="top: 85%;left: 66%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0004_0500 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0004.E0004_0500||{}).isAlm?'icon5':'icon2'" style="top: 85%;left: 66%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -645,7 +706,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0002.E0002_1100||{}).isAlm?'icon5':'icon2'" style="top: 86%;left: 34%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0002_1100 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0002.E0002_1100||{}).isAlm?'icon5':'icon2'" style="top: 86%;left: 34%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -669,7 +732,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0002.E0002_1800||{}).isAlm?'icon5':'icon2'" style="top: 79%;left: 32%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0002_1800 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0002.E0002_1800||{}).isAlm?'icon5':'icon2'" style="top: 79%;left: 32%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -693,7 +758,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0001.E0001_0700||{}).isAlm?'icon5':'icon2'" style="top: 50.5%;left: 26.2%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0001_0700 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0001.E0001_0700||{}).isAlm?'icon5':'icon2'" style="top: 50.5%;left: 26.2%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -717,7 +784,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0001.E0001_1400||{}).isAlm?'icon5':'icon2'" style="top: 46.5%;left: 26.7%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0001_1400 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0001.E0001_1400||{}).isAlm?'icon5':'icon2'" style="top: 46.5%;left: 26.7%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -741,7 +810,9 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="(deviceData.E0001.E0001_2200||{}).isAlm?'icon5':'icon2'" style="top: 42.5%;left: 27.2%;"> <div
:style="{filter:(new Date().getTime() - (isOnline.E0001_2200 || 0) > (1000*60*3))?'grayscale(100%)':'grayscale(0%)'}"
:class="(deviceData.E0001.E0001_2200||{}).isAlm?'icon5':'icon2'" style="top: 42.5%;left: 27.2%;">
<div class="deviceInfo"> <div class="deviceInfo">
<div class="line"></div> <div class="line"></div>
<div class="table1"> <div class="table1">
@ -825,7 +896,7 @@ export default {
vibrationAcceleration: '振动-加速度', vibrationAcceleration: '振动-加速度',
vibrationTemp: '振动-温度', vibrationTemp: '振动-温度',
}, },
isOnline: {}
} }
}, },
@ -833,6 +904,7 @@ export default {
console.log(document.getElementsByClassName('scTable1')[0]) console.log(document.getElementsByClassName('scTable1')[0])
document.getElementsByClassName('scTable1')[0].style.display = 'block' document.getElementsByClassName('scTable1')[0].style.display = 'block'
this.$bus.$on('websocket-device-data', (e) => { this.$bus.$on('websocket-device-data', (e) => {
this.isOnline[e.deviceParam.monitorId] = new Date().getTime()
let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0] let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
if (Object.keys(this.deviceData).includes(deviceID)) { if (Object.keys(this.deviceData).includes(deviceID)) {
this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, { this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
@ -852,7 +924,6 @@ export default {
}, },
methods: {}, methods: {},
beforeDestroy() { beforeDestroy() {
console.log(1122, '31231')
document.getElementsByClassName('scTable1')[0].style.display = 'none' document.getElementsByClassName('scTable1')[0].style.display = 'none'
} }
} }

Write Preview
Loading…
Cancel
Save