完善设备报警的对接

src/App.vue

@@ -17,9 +17,82 @@ export default {
       titleTemplate: title => {
         return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
       },
-      websocket:null
+      websocket:null,
+      interval:null,
+      index:null,
+      heartbeat : null,
+      retryStatus:false
     }
   },
+  methods: {
+    initWebSocket() {
+      console.log("正在进行连接设备日志反馈WS")
+      let url = process.env.VUE_APP_BASE_API.replace("https://", "wss://").replace("http://", "ws://") + "/websocket/device/"+ this.index;
+      this.websocket = new WebSocket(url);
+      this.websocket.onopen = this.websocketonopen;
+      this.websocket.onmessage = this.websocketonmessage;
+      this.websocket.onerror = this.websocketonerror;
+      // this.websocket.
+      this.websocket.onclose = this.websocketclose;
+    },
+    // 连接成功后调用
+    websocketonopen: function () {
+      console.log("WebSocket连接成功");
+      clearInterval(this.interval)
+      const websocket = this.websocket;
+      this.retryStatus =false;
+      this.heartbeat = setInterval(function () {
+          websocket.send("T")
+      }, 5000);
+    },
+    // 发生错误时调用
+    websocketonerror: function (e) {
+      console.log("WebSocket连接发生错误");
+      clearInterval(this.heartbeat)
+      if (!this.retryStatus){
+        this.interval = setInterval(()=>{
+          this.initWebSocket()
+        },5000)
+        this.retryStatus = true;
+      }
+
+    },
+    websocketonmessage: function (e) {
+      const notify =  JSON.parse(e.data)
+      if (notify.type=="notify"){
+        if (notify.content.status=="1"){
+          this.$notify.info({
+            title: notify.content.deviceName,
+            message: notify.content.content,
+            showClose: false
+          });
+        }else {
+          this.$notify.error({
+            title:  notify.content.deviceName,
+            message: notify.content.content,
+            duration: 0
+          });
+        }
+      }
+    },
+    // 关闭连接时调用
+    websocketclose: function (e) {
+      console.log("connection closed (" + e.code + ")");
+      clearInterval(this.heartbeat)
+      if (!this.retryStatus){
+        this.interval = setInterval(()=>{
+          this.initWebSocket()
+        },5000)
+        this.retryStatus = true;
+      }
+    },
+  },
+  created() {
+    this.index = Math.round(Math.random() * 100000000)
+    setTimeout(()=>{
+      this.initWebSocket()
+    },5000)
+  }
 };
 </script>
 <style scoped>

src/api/trace/device.js

@@ -8,7 +8,7 @@ export function getDeviceList() {
   })
 }
 
-//获取设备列表
+//获取设备日志列表
 export function getDeviceLog(data) {
   return request({
     url: '/device/log/list',

src/layout/components/processTableView/index.vue

@@ -22,7 +22,7 @@
           <span>{{ parseTime(scope.row.updateTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remake" width="180"/>
+      <el-table-column label="备注" align="center" prop="remake" fixed-width/>
     </el-table>
   </div>
 </template>

src/store/modules/user.js

@@ -1,5 +1,5 @@
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import {getInfo, login, logout} from '@/api/login'
+import {getToken, removeToken, setToken} from '@/utils/auth'
 
 const user = {
   state: {

src/views/index.vue

@@ -10,52 +10,6 @@ export default {
     return {
     };
   },
-  methods: {
-    initWebSocket() {
-      let name = this.$store.state.user.name
-      let url = process.env.VUE_APP_BASE_API.replace("https://", "wss://").replace("http://", "ws://") + "/websocket/device/" + name;
-      this.websocket = new WebSocket(url);
-      this.websocket.addEventListener('beforeSend', function (event) {
-        event.target.setRequestHeader('Authorization', 'Bearer ' + this.$store.state.user.token);
-      });
-      this.websocket.onopen = this.websocketonopen;
-      this.websocket.onerror = this.websocketonerror;
-      this.websocket.onmessage = this.websocketonmessage;
-      this.websocket.onclose = this.websocketclose;
-    },
-    // 连接成功后调用
-    websocketonopen: function () {
-      console.log("WebSocket连接成功");
-    },
-    // 发生错误时调用
-    websocketonerror: function (e) {
-      console.log("WebSocket连接发生错误");
-    },
-    websocketonmessage: function (e) {
-      const  notify =  JSON.parse(e.data)
-      console.log(e.data)
-      if (notify.status=="1"){
-        this.$notify.info({
-          title: notify.deviceId,
-          message: notify.content,
-          showClose: false
-        });
-      }else {
-        this.$notify.error({
-          title:  notify.deviceId,
-          message: notify.content,
-          duration: 0
-        });
-      }
-    },
-    // 关闭连接时调用
-    websocketclose: function (e) {
-      console.log("connection closed (" + e.code + ")");
-    }
-  },
-  created() {
-    this.initWebSocket()
-  }
 };
 </script>
 

src/views/trace/process/index.vue

@@ -95,7 +95,7 @@
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remake" width="180"/>
+      <el-table-column label="备注" align="center" prop="remake" fixed-width/>
 
     </el-table>