修改bug

src/views/OperationalOverview/coldBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-01-29 16:50:26
- * @LastEditTime: 2024-03-26 09:56:20
+ * @LastEditTime: 2024-03-26 16:30:12
  * @LastEditors: zhp
  * @Description:
 -->
@@ -143,6 +143,7 @@ import { parseTime } from '../core/mixins/code-filter';
 import ISRAChart from './components/ISRAChart.vue';
 import { getDcsMsg, closeDcsMsg } from "./wsInterface"
 import LinearBarChart from './components/linearBarChart'
+import WebSocketHeartbeat from './ws.js';
 export default {
   name: 'ProductionMonitoringCockpit',
   components: {
@@ -223,8 +224,13 @@ export default {
       containerWidth: 111111,
       isFullScreen: false,
       cutWsData: {},
+      Cutws: undefined,
+      funWs: undefined,
+      SJGws: undefined,
       funWsData: {},
       SJGWsData: {},
+      cxNameList:[],
+      cxDataList:[],
       // orderProcessList: [],
       dateType: '0',
       wsIsOpen:false,
@@ -271,9 +277,9 @@ export default {
     }, 86400000)
   },
   destroyed() {
-    this.funInitWebSocket()
-    this.CutInitWebSocket()
+    this.CutWebsocketClose()
     this.SJGWebsocketClose()
+    this.funWebSocketClose()
     if (this.wsIsOpen) {
       closeDcsMsg()
       this.wsIsOpen = false
@@ -307,13 +313,13 @@ export default {
   },
   methods: {
     CutWebsocketClose(e) {
-      console.log('WebSocket 断开连接', e)
+      this.Cutws.ws.onclose = (event) => { console.log(event );}
     },
     SJGWebsocketClose(e) {
-      console.log('WebSocket 断开连接', e)
+      this.SJGws.ws.onclose = (event) => { console.log(event); }
     },
     funWebSocketClose(e) {
-      console.log('WebSocket 断开连接', e)
+      this.funWs.ws.onclose = (event) => { console.log(event); }
     },
     formatTime(time, option) {
       console.log(time);
@@ -357,115 +363,229 @@ export default {
       this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
     },
     SJGInitWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        alert('您的浏览器不支持WebSocket')
-      } else {
-        // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
-        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
-        let date = new Date().valueOf()
-        const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
-        this.SJGWebsocket = new WebSocket(SJGWsUrl)
-        // 监听 WebSocket 连接
-        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
-        // 监听 WebSocket 消息
-        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
-        // 监听 webSocket 断开信息
-        this.SJGWebsocket.onclose = this.SJGWebsocketClose
-      }
+      let date = new Date().valueOf()
+      const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
+       this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
+
+      // 处理收到的消息
+      this.SJGws.ws.onmessage = (event) => {
+        this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
+        if (this.SJGWsData.type === 'isra') {
+          console.log('222222', this.SJGWsData.detData)
+          console.log(this.SJGWsData.detData);
+          let chartData = this.SJGWsData.detData.map((item, index) => {
+            return {
+              name: item.type,
+              num: item.num
+            }
+          })
+          this.$refs['ISRAChart'].updateChart(chartData)
+        } else if (this.SJGWsData.type === 'equipment') {
+          this.realEqList = this.SJGWsData.detData.map((ele, index) => [
+            // console.log(item)
+            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
+          ])
+        }
+        this.realEqConfig.data = this.realEqList
+        this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
+      };
+      // if (typeof (WebSocket) === 'undefined') {
+      //   alert('您的浏览器不支持WebSocket')
+      // } else {
+      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
+      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+      //   let date = new Date().valueOf()
+      //   const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
+      //   this.SJGWebsocket = new WebSocket(SJGWsUrl)
+      //   // 监听 WebSocket 连接
+      //   this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
+      //   // 监听 WebSocket 错误信息
+      //   this.SJGWebsocket.onerror = this.SJGWebsocketOnError
+      //   // 监听 WebSocket 消息
+      //   this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
+      //   // 监听 webSocket 断开信息
+      //   this.SJGWebsocket.onclose = this.SJGWebsocketClose
+      // }
     },
     CutInitWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        alert('您的浏览器不支持WebSocket')
-      } else {
-        // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
-        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
-        let date = new Date().valueOf()
+      let date = new Date().valueOf()
         const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
-
-        this.cutWebsocket = new WebSocket(cutWsUrl)
-        // 监听 WebSocket 连接
-        this.cutWebsocket.onopen = this.cutWebsocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.cutWebsocket.onerror = this.cutWebsocketOnError
-        // 监听 WebSocket 消息
-        this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
-        // 监听 webSocket 断开信息
-        this.cutWebsocket.onclose = this.cutWebsocketClose
-      }
+      // const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
+      this.Cutws = new WebSocketHeartbeat(cutWsUrl);
+
+      // 处理收到的消息
+      this.Cutws.ws.onmessage = (event) => {
+        console.log(event)
+        this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
+        if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
+          let cutArr = this.cutWsData.productHourData.map((item, index) => [
+            `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
+            </span>`,
+            `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
+            </span>`,
+            `<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
+            `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
+           <div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
+          ])
+          this.cutConfig.data = cutArr
+          this.$refs['cutScrollBoard'].updateRows(cutArr)
+        } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
+          let nameList = []
+          let nameWasteList = []
+          let topNameList = []
+          let productList = []
+          let wasteList = []
+          let sumAreaList = []
+          let yieldList = []
+          // this.cutTableDataList =
+          this.cutWsData.coldDetData.forEach((ele, index) => {
+            nameList.push(ele.lineName)
+            topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea)
+            productList.push(ele.productArea)
+            wasteList.push(ele.wastArea)
+            nameWasteList.push('缺陷面积:' + ele.wastArea)
+            sumAreaList.push(ele.sumArea)
+            yieldList.push((ele.yield * 100).toFixed(3))
+          })
+          this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
+          this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
+        }
+      };
+      // if (typeof (WebSocket) === 'undefined') {
+      //   alert('您的浏览器不支持WebSocket')
+      // } else {
+      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
+      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+      //   let date = new Date().valueOf()
+      //   const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
+
+      //   this.cutWebsocket = new WebSocket(cutWsUrl)
+      //   // 监听 WebSocket 连接
+      //   this.cutWebsocket.onopen = this.cutWebsocketOnOpen
+      //   // 监听 WebSocket 错误信息
+      //   this.cutWebsocket.onerror = this.cutWebsocketOnError
+      //   // 监听 WebSocket 消息
+      //   this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
+      //   // 监听 webSocket 断开信息
+      //   this.cutWebsocket.onclose = this.cutWebsocketClose
+      // }
     },
     funInitWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        alert('您的浏览器不支持WebSocket')
-      } else {
-        // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
-        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
-        let date = new Date().valueOf()
-        const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
-        this.funWebsocket = new WebSocket(funWsUrl)
-        // 监听 WebSocket 连接
-        this.funWebsocket.onopen = this.funWebsocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.funWebsocket.onerror = this.funWebsocketOnError
-        // 监听 WebSocket 消息
-        this.funWebsocket.onmessage = this.funWebsocketOnMessage
-        // 监听 webSocket 断开信息
-        this.funWebsocket.onclose = this.funWebsocketClose
-      }
-    },
-    funWebsocketOnOpen() {
-      console.log('socket连接成功')
-      this.SJGWebsocket.onmessage()
-    },
-    // 连接建立失败重连
-    funWebsocketOnError(e) {
-      this.funInitWebSocket()
-    },
-    // 数据接收
-    funWebsocketOnMessage(e) {
-      this.funWsData = e?.data ? JSON.parse(e?.data) : {}
-      // FanInfo
-      if (this.funWsData.type === 'AnnealFanInfo') {
-        let arr = []
-        let index = 0
-        for (let i in this.funWsData.data.annealFanInfo) {
-          index++,
-          arr.push([
-            `
+      let date = new Date().valueOf()
+      const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
+      this.funWs = new WebSocketHeartbeat(funWsUrl);
+      // 处理收到的消息
+      this.funWs.ws.onmessage = (event) => {
+        this.funWsData = event?.data ? JSON.parse(event?.data) : {}
+        // FanInfo
+        if (this.funWsData.type === 'AnnealFanInfo') {
+          let arr = []
+          let index = 0
+          for (let i in this.funWsData.data.annealFanInfo) {
+            index++,
+              arr.push([
+                `
           <span style="color:rgba(255,255,255,0.5)" >${index || ''}
             </span>`,
-            `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
+                `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
             </span>`,
-            `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
-          ])
+                `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
+              ])
+          }
+          this.annealFunConfig.data = arr
+          this.$refs['annealFunScrollBoard'].updateRows(arr)
         }
-        this.annealFunConfig.data = arr
-        this.$refs['annealFunScrollBoard'].updateRows(arr)
-      }
-      if (this.funWsData.type === 'FanInfo') {
-        let arr = []
-        let index = 0
-        for (let i in this.funWsData.data.fanInfo) {
-          index++,
-          arr.push([
-            `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
-            `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
-            `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
-          ])
+        if (this.funWsData.type === 'FanInfo') {
+          let arr = []
+          let index = 0
+          for (let i in this.funWsData.data.fanInfo) {
+            index++,
+              arr.push([
+                `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
+                `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
+                `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
+              ])
+          }
+          this.funConfig.data = arr
+          this.$refs['funScrollBoard'].updateRows(arr)
         }
-        this.funConfig.data = arr
-        this.$refs['funScrollBoard'].updateRows(arr)
-      }
-    },
-    cutWebsocketOnOpen() {
-      console.log('socket连接成功')
-      this.SJGWebsocket.onmessage()
-    },
-    // 连接建立失败重连
-    cutWebsocketOnError(e) {
-      this.CutInitWebSocket()
+      };
+      // if (typeof (WebSocket) === 'undefined') {
+      //   alert('您的浏览器不支持WebSocket')
+      // } else {
+      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
+      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+      //   let date = new Date().valueOf()
+      //   const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
+      //   this.funWebsocket = new WebSocket(funWsUrl)
+      //   // 监听 WebSocket 连接
+      //   this.funWebsocket.onopen = this.funWebsocketOnOpen
+      //   // 监听 WebSocket 错误信息
+      //   this.funWebsocket.onerror = this.funWebsocketOnError
+      //   // 监听 WebSocket 消息
+      //   this.funWebsocket.onmessage = this.funWebsocketOnMessage
+      //   // 监听 webSocket 断开信息
+      //   this.funWebsocket.onclose = this.funWebsocketClose
+      // }
     },
+    // funWebsocketOnOpen() {
+    //   console.log('socket连接成功')
+    //   this.SJGWebsocket.onmessage()
+    // },
+    // // 连接建立失败重连
+    // funWebsocketOnError(e) {
+    //   this.funInitWebSocket()
+    // },
+    // 数据接收
+    // funWebsocketOnMessage(e) {
+    //   this.funWsData = e?.data ? JSON.parse(e?.data) : {}
+    //   // FanInfo
+    //   if (this.funWsData.type === 'AnnealFanInfo') {
+    //     let arr = []
+    //     let index = 0
+    //     for (let i in this.funWsData.data.annealFanInfo) {
+    //       index++,
+    //       arr.push([
+    //         `
+    //       <span style="color:rgba(255,255,255,0.5)" >${index || ''}
+    //         </span>`,
+    //         `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
+    //         </span>`,
+    //         `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
+    //       ])
+    //     }
+    //     this.annealFunConfig.data = arr
+    //     this.$refs['annealFunScrollBoard'].updateRows(arr)
+    //   }
+    //   if (this.funWsData.type === 'FanInfo') {
+    //     let arr = []
+    //     let index = 0
+    //     for (let i in this.funWsData.data.fanInfo) {
+    //       index++,
+    //       arr.push([
+    //         `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
+    //         `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
+    //         `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
+    //       ])
+    //     }
+    //     this.funConfig.data = arr
+    //     this.$refs['funScrollBoard'].updateRows(arr)
+    //   }
+    // },
+    // cutWebsocketOnOpen() {
+    //   console.log('socket连接成功')
+    //   this.SJGWebsocket.onmessage()
+    // },
+    // // 连接建立失败重连
+    // cutWebsocketOnError(e) {
+    //   this.CutInitWebSocket()
+    // },
     getSize(str) {
       // console.log(str.match(/\d+(\.\d+)?/g))
      let size =  str.match(/\d+(\.\d+)?/g).map(ele => {
@@ -475,78 +595,78 @@ export default {
       return size[0] + '*' + size[1] + '*' + size[2]
     },
     // 数据接收
-    cutWebsocketOnMessage(e) {
-      this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
-      if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
-        let cutArr = this.cutWsData.productHourData.map((item, index) => [
-          `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
-            </span>`,
-          `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
-            </span>`,
-          `<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
-          `<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
-          `<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
-          `<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
-          `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
-           <div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
-        ])
-        this.cutConfig.data = cutArr
-        this.$refs['cutScrollBoard'].updateRows(cutArr)
-      } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
-        let nameList = []
-        let nameWasteList = []
-        let topNameList = []
-        let productList = []
-        let wasteList = []
-        let sumAreaList = []
-        let yieldList = []
-        // this.cutTableDataList =
-        this.cutWsData.coldDetData.forEach((ele, index) => {
-          nameList.push(ele.lineName)
-          topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea)
-          productList.push(ele.productArea)
-          wasteList.push(ele.wastArea)
-          nameWasteList.push('缺陷面积:' + ele.wastArea)
-          sumAreaList.push(ele.sumArea)
-          yieldList.push((ele.yield *100).toFixed(3))
-        })
-        this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
-        this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
-      }
-    },
-    SJGWebsocketOnOpen() {
-      console.log('socket连接成功')
-      this.SJGWebsocket.onmessage()
-    },
+    // cutWebsocketOnMessage(e) {
+    //   this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
+    //   if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
+    //     let cutArr = this.cutWsData.productHourData.map((item, index) => [
+    //       `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
+    //         </span>`,
+    //       `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
+    //         </span>`,
+    //       `<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
+    //       `<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
+    //       `<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
+    //       `<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
+    //       `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
+    //        <div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
+    //     ])
+    //     this.cutConfig.data = cutArr
+    //     this.$refs['cutScrollBoard'].updateRows(cutArr)
+    //   } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
+    //     let nameList = []
+    //     let nameWasteList = []
+    //     let topNameList = []
+    //     let productList = []
+    //     let wasteList = []
+    //     let sumAreaList = []
+    //     let yieldList = []
+    //     // this.cutTableDataList =
+    //     this.cutWsData.coldDetData.forEach((ele, index) => {
+    //       nameList.push(ele.lineName)
+    //       topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea)
+    //       productList.push(ele.productArea)
+    //       wasteList.push(ele.wastArea)
+    //       nameWasteList.push('缺陷面积:' + ele.wastArea)
+    //       sumAreaList.push(ele.sumArea)
+    //       yieldList.push((ele.yield *100).toFixed(3))
+    //     })
+    //     this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
+    //     this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
+    //   }
+    // },
+    // SJGWebsocketOnOpen() {
+    //   console.log('socket连接成功')
+    //   this.SJGWebsocket.onmessage()
+    // },
     // 连接建立失败重连
-    SJGWebsocketOnError(e) {
-      this.SJGInitWebSocket()
-    },
+    // SJGWebsocketOnError(e) {
+    //   this.SJGInitWebSocket()
+    // },
     // 数据接收
-    SJGWebsocketOnMessage(e) {
-      this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
-      if (this.SJGWsData.type === 'isra') {
-        console.log('222222', this.SJGWsData.detData)
-        console.log(this.SJGWsData.detData);
-        let chartData = this.SJGWsData.detData.map((item, index) => {
-          return {
-            name: item.type,
-            num:item.num
-          }
-        })
-        this.$refs['ISRAChart'].updateChart(chartData)
-      } else if (this.SJGWsData.type === 'equipment') {
-        this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
-            // console.log(item)
-            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
-            </span>`,
-          `<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</span>`,
-          `<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
-          ])
-      }
-      this.realEqConfig.data = this.realEqList
-      this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
-    },
+    // SJGWebsocketOnMessage(e) {
+    //   this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
+    //   if (this.SJGWsData.type === 'isra') {
+    //     console.log('222222', this.SJGWsData.detData)
+    //     console.log(this.SJGWsData.detData);
+    //     let chartData = this.SJGWsData.detData.map((item, index) => {
+    //       return {
+    //         name: item.type,
+    //         num:item.num
+    //       }
+    //     })
+    //     this.$refs['ISRAChart'].updateChart(chartData)
+    //   } else if (this.SJGWsData.type === 'equipment') {
+    //     this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
+    //         // console.log(item)
+    //         `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+    //         </span>`,
+    //       `<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</span>`,
+    //       `<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
+    //       ])
+    //   }
+    //   this.realEqConfig.data = this.realEqList
+    //   this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
+    // },
     windowWidth(value) {
       this.clientWidth = value
       this.beilv2 = this.clientWidth / 1920

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-03-13 08:51:12
+ * @LastEditTime: 2024-03-26 16:16:50
  * @LastEditors: zhp
  * @Description:
 -->

src/views/OperationalOverview/processingBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-03-26 10:06:54
+ * @LastEditTime: 2024-03-26 15:43:27
  * @Description:
 -->
 <template>
@@ -76,6 +76,9 @@ import baseTable1 from './components/baseTable'
 import screenfull from 'screenfull'
 import doubleYChart from './components/doubleYChart '
 import LinearBarChart from './components/linearBarChart'
+import WebSocketHeartbeat from './ws.js';
+
+// 创建WebSocketHeartbeat实例
 const qualityYearList = [
   {
     name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否'
@@ -215,6 +218,8 @@ export default {
         rowNum: 10
       },
       // cxDataList,
+      SJGws: undefined,
+      wsHeartbeat:undefined,
       productLineList:[],
       qualityYearList,
       clientWidth: 0,
@@ -387,144 +392,221 @@ export default {
       this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
     },
     initWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        alert('您的浏览器不支持WebSocket')
-      } else {
-        let date = new Date().valueOf()
-        const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
-        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
-        // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
-        // 实例化 WebSocket
-        this.websocket = new WebSocket(wsUrl)
-        // 监听 WebSocket 连接
-        this.websocket.onopen = this.websocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.websocket.onerror = this.websocketOnError
-        // 监听 WebSocket 消息
-        this.websocket.onmessage = this.websocketOnMessage
-        // 监听 webSocket 断开信息
-        this.websocket.onclose = this.websocketClose
-      }
+      let date = new Date().valueOf()
+      const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
+      this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);
+
+      // 处理收到的消息
+      this.wsHeartbeat.ws.onmessage = (event) => {
+        console.log('收到消息:', event.data)
+        this.wsData = event?.data ? JSON.parse(event?.data) : {}
+        // console.log('22222', this.wsData.data)
+        if (this.wsData.type === 'EnergyMonitoring') {
+          let EnergyNameList = []
+          this.wsData.data.forEach((ele) => {
+            EnergyNameList.push(ele.lineName)
+          })
+          this.EnergyMonitoringNameList = EnergyNameList
+          let EnergyDataList = []
+          this.wsData.data.forEach((ele) => {
+            EnergyDataList.push(ele.useQuantity
+            )
+          })
+          this.EnergyMonitoringList = EnergyDataList
+          console.log(EnergyDataList)
+          this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
+        }
+      };
+      // if (typeof (WebSocket) === 'undefined') {
+      //   alert('您的浏览器不支持WebSocket')
+      // } else {
+      //   const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
+      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+      //   // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
+      //   // 实例化 WebSocket
+      //   this.websocket = new WebSocket(wsUrl)
+      //   // 监听 WebSocket 连接
+      //   this.websocket.onopen = this.websocketOnOpen
+      //   // 监听 WebSocket 错误信息
+      //   this.websocket.onerror = this.websocketOnError
+      //   // 监听 WebSocket 消息
+      //   this.websocket.onmessage = this.websocketOnMessage
+      //   // 监听 webSocket 断开信息
+      //   this.websocket.onclose = this.websocketClose
+      // }
     },
     SJGInitWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        alert('您的浏览器不支持WebSocket')
-      } else {
-        let date = new Date().valueOf()
-        // console.log(date);
-        console.log(process.env);
-        const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
-        this.SJGWebsocket = new WebSocket(SJGWsUrl)
-        // 监听 WebSocket 连接
-        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
-        // 监听 WebSocket 消息
-        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
-        // 监听 webSocket 断开信息
-        this.SJGWebsocket.onclose = this.SJGWebsocketClose
-      }
-    },
-    SJGWebsocketOnOpen() {
-      console.log('socket连接成功')
-      // console.log(this.SJGWebsocket.onmessage);
-      this.SJGWebsocket.onmessage()
-    },
-    // 连接建立失败重连
-    SJGWebsocketOnError(e) {
-      // console.log('11111', e)
-      this.SJGInitWebSocket()
-    },
-    // 数据接收
-    SJGWebsocketOnMessage(e) {
-      // console.log(1111, e)
-      this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
-      // console.log(this.wsData.detData);
-      // console.log('22222', this.wsData.data)
-      if (this.SJGWsData.type === 'order') {
-        this.orderList = this.SJGWsData.detData.map((ele, index) => {
-          if (ele.progressRate != 1) {
-            return {
-              id: ele.id,
-              name: ele.name,
-              progressRate: ele.progressRate.toFixed(3)
+      let date = new Date().valueOf()
+      const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
+      this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
+
+      // 处理收到的消息
+      this.SJGws.ws.onmessage = (event) => {
+        console.log('收到消息:', event.data)
+        this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
+        // console.log(this.wsData.detData);
+        // console.log('22222', this.wsData.data)
+        if (this.SJGWsData.type === 'order') {
+          this.orderList = this.SJGWsData.detData.map((ele, index) => {
+            if (ele.progressRate != 1) {
+              return {
+                id: ele.id,
+                name: ele.name,
+                progressRate: ele.progressRate.toFixed(3)
+              }
             }
-          }
-        });
-        console.log(this.orderList)
-      } else if (this.SJGWsData.type === 'equipment') {
-        let eqArr = this.SJGWsData.detData.map((item, index) => [
-          `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+          });
+          console.log(this.orderList)
+        } else if (this.SJGWsData.type === 'equipment') {
+          let eqArr = this.SJGWsData.detData.map((item, index) => [
+            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
             </span>`,
-          `<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
+            `<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
             </span>`,
-          `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
-          `<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
-          `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
-        ])
-        this.eqConfig.data = eqArr
-        this.$refs['eqScrollBoard'].updateRows(eqArr)
-        // console.log(SJGWsData.orderList)
-      } else if (this.SJGWsData.type === 'productline') {
-        console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
-        let nameList = []
-        let passRateList = []
-        let outputNumList = []
+            `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
+          ])
+          this.eqConfig.data = eqArr
+          this.$refs['eqScrollBoard'].updateRows(eqArr)
+          // console.log(SJGWsData.orderList)
+        } else if (this.SJGWsData.type === 'productline') {
+          console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
+          let nameList = []
+          let passRateList = []
+          let outputNumList = []
           this.SJGWsData.detData.forEach((ele) => {
             // if (item.id == ele.productionLineId) {
-              // if (item.name.substr(0, 1) == "D") {
-                // console.log(ele)
-                nameList.push(ele.lineName)
-                outputNumList.push(ele.outputNum)
-                passRateList.push(ele.passRate)
-              // }
+            // if (item.name.substr(0, 1) == "D") {
+            // console.log(ele)
+            nameList.push(ele.lineName)
+            outputNumList.push(ele.outputNum)
+            passRateList.push(ele.passRate)
+            // }
             // }
           })
-        this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
-      } else if (this.SJGInitWebSocket === 'inspection') {
-      }
+          this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
+        } else if (this.SJGInitWebSocket === 'inspection') {
+        }
+      };
+      // if (typeof (WebSocket) === 'undefined') {
+      //   alert('您的浏览器不支持WebSocket')
+      // } else {
+      //   let date = new Date().valueOf()
+      //   // console.log(date);
+      //   console.log(process.env);
+      //   const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
+      //   this.SJGWebsocket = new WebSocket(SJGWsUrl)
+      //   // 监听 WebSocket 连接
+      //   this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
+      //   // 监听 WebSocket 错误信息
+      //   this.SJGWebsocket.onerror = this.SJGWebsocketOnError
+      //   // 监听 WebSocket 消息
+      //   this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
+      //   // 监听 webSocket 断开信息
+      //   this.SJGWebsocket.onclose = this.SJGWebsocketClose
+      // }
     },
+    // SJGWebsocketOnOpen() {
+    //   console.log('socket连接成功')
+    //   // console.log(this.SJGWebsocket.onmessage);
+    //   this.SJGWebsocket.onmessage()
+    // },
+    // // 连接建立失败重连
+    // SJGWebsocketOnError(e) {
+    //   // console.log('11111', e)
+    //   this.SJGInitWebSocket()
+    // },
+    // 数据接收
+    // SJGWebsocketOnMessage(e) {
+      // console.log(1111, e)
+      // this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
+      // // console.log(this.wsData.detData);
+      // // console.log('22222', this.wsData.data)
+      // if (this.SJGWsData.type === 'order') {
+      //   this.orderList = this.SJGWsData.detData.map((ele, index) => {
+      //     if (ele.progressRate != 1) {
+      //       return {
+      //         id: ele.id,
+      //         name: ele.name,
+      //         progressRate: ele.progressRate.toFixed(3)
+      //       }
+      //     }
+      //   });
+      //   console.log(this.orderList)
+      // } else if (this.SJGWsData.type === 'equipment') {
+      //   let eqArr = this.SJGWsData.detData.map((item, index) => [
+      //     `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+      //       </span>`,
+      //     `<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
+      //       </span>`,
+      //     `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
+      //     `<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
+      //     `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
+      //   ])
+      //   this.eqConfig.data = eqArr
+      //   this.$refs['eqScrollBoard'].updateRows(eqArr)
+      //   // console.log(SJGWsData.orderList)
+      // } else if (this.SJGWsData.type === 'productline') {
+      //   console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
+      //   let nameList = []
+      //   let passRateList = []
+      //   let outputNumList = []
+      //     this.SJGWsData.detData.forEach((ele) => {
+      //       // if (item.id == ele.productionLineId) {
+      //         // if (item.name.substr(0, 1) == "D") {
+      //           // console.log(ele)
+      //           nameList.push(ele.lineName)
+      //           outputNumList.push(ele.outputNum)
+      //           passRateList.push(ele.passRate)
+      //         // }
+      //       // }
+      //     })
+      //   this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
+      // } else if (this.SJGInitWebSocket === 'inspection') {
+      // }
+    // },
     SJGWebsocketClose(e) {
-      console.log('WebSocket 断开连接', e)
+      this.SJGws.ws.onclose = (event) => { console.log(event); }
     },
     // // 连接建立之后执行send方法发送数据
-    websocketOnOpen() {
-      console.log('socket连接成功')
-      this.websocket.onmessage()
-    },
+    // websocketOnOpen() {
+    //   console.log('socket连接成功')
+    //   this.websocket.onmessage()
+    // },
     // 连接建立失败重连
-    websocketOnError(e) {
-      console.log('11111', e)
-      this.initWebSocket()
-    },
+    // websocketOnError(e) {
+    //   console.log('11111', e)
+    //   this.initWebSocket()
+    // },
     // 数据接收
-    websocketOnMessage(e) {
-      // console.log(1111, e)
-      this.wsData = e?.data ? JSON.parse(e?.data) : {}
-      // console.log('22222', this.wsData.data)
-      if (this.wsData.type === 'EnergyMonitoring') {
-        let EnergyNameList = []
-        this.wsData.data.forEach((ele) => {
-          EnergyNameList.push(ele.lineName)
-        })
-        this.EnergyMonitoringNameList = EnergyNameList
-        let EnergyDataList = []
-        this.wsData.data.forEach((ele) => {
-          EnergyDataList.push(ele.useQuantity
-          )
-        })
-        this.EnergyMonitoringList = EnergyDataList
-        console.log(EnergyDataList)
-        this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
-      }
-    },
+    // websocketOnMessage(e) {
+    //   // console.log(1111, e)
+    //   this.wsData = e?.data ? JSON.parse(e?.data) : {}
+    //   // console.log('22222', this.wsData.data)
+    //   if (this.wsData.type === 'EnergyMonitoring') {
+    //     let EnergyNameList = []
+    //     this.wsData.data.forEach((ele) => {
+    //       EnergyNameList.push(ele.lineName)
+    //     })
+    //     this.EnergyMonitoringNameList = EnergyNameList
+    //     let EnergyDataList = []
+    //     this.wsData.data.forEach((ele) => {
+    //       EnergyDataList.push(ele.useQuantity
+    //       )
+    //     })
+    //     this.EnergyMonitoringList = EnergyDataList
+    //     console.log(EnergyDataList)
+    //     this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
+    //   }
+    // },
     // 数据发送
-    websocketSend() {
-      this.websocket.send('11111')
-    },
-    // 关闭
+    // websocketSend() {
+    //   this.websocket.send('11111')
+    // },
+    // // 关闭
     websocketClose(e) {
-      // console.log('WebSocket 断开连接', e)
+      this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
     },
     windowWidth(value) {
       this.clientWidth = value

src/views/OperationalOverview/ws.js

@@ -0,0 +1,64 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-03-26 14:38:14
+ * @LastEditTime: 2024-03-26 15:45:20
+ * @LastEditors: zhp
+ * @Description:
+ */
+class WebSocketHeartbeat {
+    constructor(url) {
+        this.url = url;
+        this.ws = null;
+        this.heartBeatTimer = null;
+        this.isReconnecting = false;
+        this.initWebSocket();
+    }
+
+    initWebSocket() {
+        this.ws = new WebSocket(this.url);
+
+        this.ws.onopen = () => {
+            console.log('WebSocket连接已打开');
+            this.startHeartBeat();
+        };
+
+        this.ws.onmessage = (event) => {
+            console.log('收到消息:', event.data);
+            // 在这里处理收到的消息，可以根据具体需求进行处理
+        };
+
+        this.ws.onclose = () => {
+            console.log('WebSocket连接已关闭');
+            this.stopHeartBeat();
+            if (!this.isReconnecting) {
+                this.reconnectWebSocket();
+            }
+        };
+    }
+
+    startHeartBeat() {
+        this.heartBeatTimer = setInterval(() => {
+            if (this.ws.readyState === WebSocket.OPEN) {
+                // this.ws.send('ping');
+            }
+        }, 5000);
+    }
+
+    stopHeartBeat() {
+        clearInterval(this.heartBeatTimer);
+    }
+
+    reconnectWebSocket() {
+        this.isReconnecting = true;
+        setTimeout(() => {
+            this.initWebSocket();
+            this.isReconnecting = false;
+        }, 3000);
+    }
+
+    closeWebSocket() {
+        this.ws.close();
+    }
+}
+
+export default WebSocketHeartbeat;