From cea8b8704b4d370c386f6d84f56e399844d52849 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Sat, 7 Jun 2025 15:18:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/index.vue | 149 ++++++++++++++++++++++++++++----------
 1 file changed, 110 insertions(+), 39 deletions(-)

diff --git a/src/views/board/index.vue b/src/views/board/index.vue
index e636452..c727c5e 100644
--- a/src/views/board/index.vue
+++ b/src/views/board/index.vue
@@ -26,18 +26,30 @@
       <div style="margin: 4px 0 ;">
         <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>
+        <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 style="margin: 4px 0 ;">
         <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>
+        <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 style="margin: 4px 0 ;">
         <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>
+        <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 style="margin: 4px 0 ;">
         <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>
+        <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 class="leftTop">
@@ -99,16 +111,21 @@
             <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0013)">
               <div class="td1">{{ i }}</div>
               <div class="td2">
-                <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">
-                  <div>
-                    <div class="info1">
-                      {{ deviceMap[ii] }}
-                    </div>
-                    <div class="span">
-                      :
-                    </div>
-                    <div class="info2">
-                      {{ deviceData.E0013[i][ii] }}
+                <div v-if="new Date().getTime() - (isOnline[i] || 0) > (1000*60*3)">
+                  离线
+                </div>
+                <div v-else>
+                  <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">
+                    <div>
+                      <div class="info1">
+                        {{ deviceMap[ii] }}
+                      </div>
+                      <div class="span">
+                        :
+                      </div>
+                      <div class="info2">
+                        {{ deviceData.E0013[i][ii] }}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -117,7 +134,9 @@
           </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="line"></div>
           <div class="table1">
@@ -141,7 +160,9 @@
           </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="line"></div>
           <div class="table1">
@@ -165,7 +186,9 @@
           </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="line"></div>
           <div class="table1">
@@ -189,7 +212,9 @@
           </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="line"></div>
           <div class="table1">
@@ -213,7 +238,9 @@
           </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="line"></div>
           <div class="table1">
@@ -237,7 +264,9 @@
           </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="line"></div>
           <div class="table1">
@@ -261,7 +290,9 @@
           </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="line"></div>
           <div class="table1">
@@ -285,7 +316,9 @@
           </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="line"></div>
           <div class="table1">
@@ -309,7 +342,9 @@
           </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="line"></div>
           <div class="table1">
@@ -333,7 +368,9 @@
           </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="line"></div>
           <div class="table1">
@@ -357,7 +394,9 @@
           </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="line"></div>
           <div class="table1">
@@ -381,7 +420,9 @@
           </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="line"></div>
           <div class="table1">
@@ -405,7 +446,9 @@
           </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="line"></div>
           <div class="table1">
@@ -429,7 +472,9 @@
           </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="line"></div>
           <div class="table1">
@@ -453,7 +498,9 @@
           </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="line"></div>
           <div class="table1">
@@ -477,7 +524,9 @@
           </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="line"></div>
           <div class="table1">
@@ -501,7 +550,9 @@
           </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="line"></div>
           <div class="table1">
@@ -525,7 +576,9 @@
           </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="line"></div>
           <div class="table1">
@@ -549,7 +602,9 @@
           </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="line"></div>
           <div class="table1">
@@ -573,7 +628,9 @@
           </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="line"></div>
           <div class="table1">
@@ -597,7 +654,9 @@
           </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="line"></div>
           <div class="table1">
@@ -621,7 +680,9 @@
           </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="line"></div>
           <div class="table1">
@@ -645,7 +706,9 @@
           </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="line"></div>
           <div class="table1">
@@ -669,7 +732,9 @@
           </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="line"></div>
           <div class="table1">
@@ -693,7 +758,9 @@
           </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="line"></div>
           <div class="table1">
@@ -717,7 +784,9 @@
           </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="line"></div>
           <div class="table1">
@@ -741,7 +810,9 @@
           </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="line"></div>
           <div class="table1">
@@ -825,7 +896,7 @@ export default {
         vibrationAcceleration: '振动-加速度',
         vibrationTemp: '振动-温度',
       },
-
+      isOnline: {}
 
     }
   },
@@ -833,6 +904,7 @@ export default {
     console.log(document.getElementsByClassName('scTable1')[0])
     document.getElementsByClassName('scTable1')[0].style.display = 'block'
     this.$bus.$on('websocket-device-data', (e) => {
+      this.isOnline[e.deviceParam.monitorId] = new Date().getTime()
       let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
       if (Object.keys(this.deviceData).includes(deviceID)) {
         this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
@@ -852,7 +924,6 @@ export default {
   },
   methods: {},
   beforeDestroy() {
-    console.log(1122, '31231')
     document.getElementsByClassName('scTable1')[0].style.display = 'none'
   }
 }