From f20ec273a2b20f49dff80a2810ab699181ac5b6d Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Wed, 22 May 2024 17:50:40 +0800
Subject: [PATCH] =?UTF-8?q?websocket=E6=9B=B4=E6=96=B0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/App.vue                          |  4 +-
 ruoyi-ui/src/main.js                          |  1 +
 .../pages/service/board/index.vue             | 35 ++++++++--
 .../pages/service/boardRecord/index.vue       |  5 +-
 ruoyi-ui/src/views/websocket.vue              | 66 ++++++-------------
 5 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index d6ee8eb4..946843cf 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -54,7 +54,9 @@ export default {
   },
   methods:{
     onNewEvent(para){
-      this.$refs["notifyShow"].showNotify(para);
+      if (para.subEvent == "0" || para.subEvent == "1"){
+        this.$refs["notifyShow"].showNotify(para);
+      }
     }
   }
 };
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 776547fc..71ba395a 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -107,6 +107,7 @@ Vue.prototype.socket = Socket;
 Vue.prototype.numberMul = numberMul;
 Vue.prototype.emitter = emitter;
 
+Vue.prototype.EventBus = new Vue();
 // gis
 Vue.prototype.$GlobalConfig = config.GlobalConfig;
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 1a452783..f3e8b960 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -64,20 +64,21 @@
                 <div v-if="item.list.length > 0">
                   <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
                     <el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index"
-                      :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null">
+                      :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
                       <el-tooltip content="设备未接入" placement="top"
                         v-if="!itm.iotDeviceId || itm.iotDeviceId.includes('null_')">
                         <div class="title">{{ itm.deviceName }}</div>
                       </el-tooltip>
                       <el-tooltip content="设备离线" placement="top"
-                        v-else-if="itm.deviceState == 0 || itm.deviceState == null">
+                        v-else-if="deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
                         <div class="title">{{ itm.deviceName }}</div>
                       </el-tooltip>
                       <div v-else class="title">{{ itm.deviceName }}</div>
-                      <el-tooltip :content="(itm.deviceState == 0 || itm.deviceState == null) ? '离线' : '在线'"
+                      <el-tooltip
+                        :content="(deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)) ? '离线' : '在线'"
                         placement="top">
                         <img src="@/assets/jihe/images/offline.svg" class="state"
-                          v-if="itm.deviceState == '0' || itm.deviceState == null">
+                          v-if="deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null) ">
                         <img src="@/assets/jihe/images/online.svg" class="state" v-else>
                       </el-tooltip>
                       <el-tooltip content="回读" placement="top">
@@ -308,6 +309,7 @@ export default {
       scrollOptions,
       boardItemEdtingIndex: -1,
       isHideCtt: false,
+      deviceStateLatest:{}
     };
   },
   watch: {
@@ -345,10 +347,27 @@ export default {
       this.____getIotBoard();
     });
   },
-  mounted() {
+  mounted(){
+    this.EventBus.$on("deviceState", deviceList => {
+      deviceList.forEach(item=>{
+        if(item.deviceType == "2"){
+          let bool;
+          if (item.deviceState === '0' || item.deviceState===null){
+              bool = false;
+            }else{
+              bool = true;
+            }
+          this.$set(this.deviceStateLatest, item.iotDeviceId, bool);
+        }
+      })
+      
+    });
     // this.rowDrop();
     this.hideScrollFn();
   },
+  destroyed(){
+    this.EventBus.$off("deviceState");
+  },
   computed: {
     ____boardScale() {
       let arr = this.selectedSize.split("*");
@@ -513,6 +532,12 @@ export default {
           this.$message.warning("设备未接入！");
           return;
         }
+
+        if (this.deviceStateLatest[deviceFrom.iotDeviceId] === false){
+          this.$message.warning("设备已离线！");
+          return;
+        }
+
         this.selectedBdMsg = [];
         getBoardDeviceInfo(deviceFrom.iotDeviceId, deviceFrom.id)
           .then((res) => {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue
index a15163ac..d0bec67b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue
@@ -230,7 +230,10 @@ export default {
   ::v-deep .el-carousel__indicators--horizontal{
     line-height: 0; height: 16px;
     .el-carousel__indicator--horizontal{
-      padding: 7px 4px;
+      padding: 7px 2px;
+      .el-carousel__button {
+          width: 20px;
+        }
     }
   }
   ::v-deep .el-table__cell div.cell {
diff --git a/ruoyi-ui/src/views/websocket.vue b/ruoyi-ui/src/views/websocket.vue
index d7e12c1c..09c02aa5 100644
--- a/ruoyi-ui/src/views/websocket.vue
+++ b/ruoyi-ui/src/views/websocket.vue
@@ -56,10 +56,11 @@ export default {
         const params = message.params;
         const subEvent = params.subEvent;
         const content = params.content;
+        let contentList;
         if(_.isString(content)){
-          var contentList = JSON.parse(content);
+           contentList = JSON.parse(content);
         }else{
-          var contentList = content;
+          contentList = content;
         }
 
         switch (subEvent) {
@@ -104,6 +105,9 @@ export default {
           case "1":
             this.$emit("newEvent", params);
             break;
+          case "deviceState":
+            this.EventBus.$emit("deviceState", contentList );
+            break;
           default:
         }
       };
@@ -114,61 +118,29 @@ export default {
   mounted(){
     let _this = this;
     if (process.env.NODE_ENV == "development"){
+      //测试websocket用的
       return
-      let et = 1;
+      let deviceState = "0";
       document.onkeydown = function (e) {
-        let tp = _.sample(["0", "1", "0", "1", "0", "0", "0", "1", "0"]);
-          
+        deviceState == "0" ? deviceState = "1" : deviceState = "0";
           if (e.code == 'Space') {
             let params = {
-              "subEvent": tp,
-              "content": {
-                "event": {
-                  "id": "1555c6599eb14e3fb68d04e512182ee7",
-                  "deptId": 103,
-                  "stakeMark": "K059+289",
-                  "endStakeMark": "",
-                  "direction": "1",
-                  "userId": 1,
-                  "estimatedEndTime": "2024-04-11 00:00:00",
-                  "eventType": et,
-                  "eventSubclass": "3-2",
-                  "eventState": 0,
-                  "eventSource": 1,
-                  "inTunnel": 0,
-                  "roadId": 1,
-                  "occurrenceTime": "2024-04-10 16:56:02",
-                  "warningTime": "2024-04-10 16:56:02",
-                  "lang": "",
-                  "dcEventTrafficControl": {
-                    "controlType": 1,
-                    "controlCause": 1,
-                    "exitsInlets": 2,
-                    "facilityId": 11,
-                    "measure": 1,
-                    "classify": 1,
-                    "facilityIds": [
-                      11
-                    ]
-                  },
-                  "createTime": "2024-05-08 18:02:40"
-                },
-                "content": "菏泽方向 K059+289 发生收费站封闭和限行事件"
-              }
+              "subEvent": "deviceState",
+              "content": [
+                {
+                  "id": 896, 
+                  "iotDeviceId": "8162-65535", 
+                  "deviceType":"2",
+                  deviceState
+                }
+              ]
             };
-            _this.$emit("newEvent", params);
+            _this.EventBus.$emit("deviceState", params.content );
           }
 
-          if(tp == "0"){
-            et++;
-            if (et >= 12) {
-              et = 1;
-            }
-          }
         }
       }
   }
 };
 </script>
 
-