src/views/OperationalOverview/coldBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-01-29 16:50:26
- * @LastEditTime: 2024-03-26 16:30:12
+ * @LastEditTime: 2024-03-26 09:56:20
  * @LastEditors: zhp
  * @Description:
 -->
@@ -143,7 +143,6 @@ 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: {
@@ -224,13 +223,8 @@ export default {
       containerWidth: 111111,
       isFullScreen: false,
       cutWsData: {},
-      Cutws: undefined,
-      funWs: undefined,
-      SJGws: undefined,
       funWsData: {},
       SJGWsData: {},
-      cxNameList:[],
-      cxDataList:[],
       // orderProcessList: [],
       dateType: '0',
       wsIsOpen:false,
@@ -277,9 +271,9 @@ export default {
     }, 86400000)
   },
   destroyed() {
-    this.CutWebsocketClose()
+    this.funInitWebSocket()
+    this.CutInitWebSocket()
     this.SJGWebsocketClose()
-    this.funWebSocketClose()
     if (this.wsIsOpen) {
       closeDcsMsg()
       this.wsIsOpen = false
@@ -313,13 +307,13 @@ export default {
   },
   methods: {
     CutWebsocketClose(e) {
-      this.Cutws.ws.onclose = (event) => { console.log(event );}
+      console.log('WebSocket 断开连接', e)
     },
     SJGWebsocketClose(e) {
-      this.SJGws.ws.onclose = (event) => { console.log(event); }
+      console.log('WebSocket 断开连接', e)
     },
     funWebSocketClose(e) {
-      this.funWs.ws.onclose = (event) => { console.log(event); }
+      console.log('WebSocket 断开连接', e)
     },
     formatTime(time, option) {
       console.log(time);
@@ -363,63 +357,126 @@ 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.SJGws = new WebSocketHeartbeat(SJGWsUrl);
+        this.SJGWebsocket = new WebSocket(SJGWsUrl)
-
+        // 监听 WebSocket 连接
-      // 处理收到的消息
+        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
-      this.SJGws.ws.onmessage = (event) => {
+        // 监听 WebSocket 错误信息
-        this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
+        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
-        if (this.SJGWsData.type === 'isra') {
+        // 监听 WebSocket 消息
-          console.log('222222', this.SJGWsData.detData)
+        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
-          console.log(this.SJGWsData.detData);
+        // 监听 webSocket 断开信息
-          let chartData = this.SJGWsData.detData.map((item, index) => {
+        this.SJGWebsocket.onclose = this.SJGWebsocketClose
-            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()
         const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
-      // const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
-      this.Cutws = new WebSocketHeartbeat(cutWsUrl);
 
-      // 处理收到的消息
+        this.cutWebsocket = new WebSocket(cutWsUrl)
-      this.Cutws.ws.onmessage = (event) => {
+        // 监听 WebSocket 连接
-        console.log(event)
+        this.cutWebsocket.onopen = this.cutWebsocketOnOpen
-        this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
+        // 监听 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([
+            `
+          <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 => {
+        return parseFloat(ele)
+     })
+      // console.log(size[0] + '*' + size[1] + '*' + size[2]);
+      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 || ''}
@@ -456,217 +513,40 @@ export default {
         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() {
+    SJGWebsocketOnOpen() {
-      let date = new Date().valueOf()
+      console.log('socket连接成功')
-      const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
+      this.SJGWebsocket.onmessage()
-      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>`,
-                `<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)
-        }
-      };
-      // 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 => {
-        return parseFloat(ele)
-     })
-      // console.log(size[0] + '*' + size[1] + '*' + size[2]);
-      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()
-    // },
     // 连接建立失败重连
-    // SJGWebsocketOnError(e) {
+    SJGWebsocketOnError(e) {
-    //   this.SJGInitWebSocket()
+      this.SJGInitWebSocket()
-    // },
+    },
     // 数据接收
-    // SJGWebsocketOnMessage(e) {
+    SJGWebsocketOnMessage(e) {
-    //   this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
+      this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
-    //   if (this.SJGWsData.type === 'isra') {
+      if (this.SJGWsData.type === 'isra') {
-    //     console.log('222222', this.SJGWsData.detData)
+        console.log('222222', this.SJGWsData.detData)
-    //     console.log(this.SJGWsData.detData);
+        console.log(this.SJGWsData.detData);
-    //     let chartData = this.SJGWsData.detData.map((item, index) => {
+        let chartData = this.SJGWsData.detData.map((item, index) => {
-    //       return {
+          return {
-    //         name: item.type,
+            name: item.type,
-    //         num:item.num
+            num:item.num
-    //       }
+          }
-    //     })
+        })
-    //     this.$refs['ISRAChart'].updateChart(chartData)
+        this.$refs['ISRAChart'].updateChart(chartData)
-    //   } else if (this.SJGWsData.type === 'equipment') {
+      } else if (this.SJGWsData.type === 'equipment') {
-    //     this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
+        this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
-    //         // console.log(item)
+            // console.log(item)
-    //         `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
-    //         </span>`,
+            </span>`,
-    //       `<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</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>`,
+          `<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
-    //       ])
+          ])
-    //   }
+      }
-    //   this.realEqConfig.data = this.realEqList
+      this.realEqConfig.data = this.realEqList
-    //   this.$refs['realEqScrollBoard'].updateRows(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-26 16:16:50
+ * @LastEditTime: 2024-03-13 08:51:12
  * @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 15:43:27
+ * @LastEditTime: 2024-03-26 10:06:54
  * @Description:
 -->
 <template>
@@ -76,9 +76,6 @@ 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: '否'
@@ -218,8 +215,6 @@ export default {
         rowNum: 10
       },
       // cxDataList,
-      SJGws: undefined,
-      wsHeartbeat:undefined,
       productLineList:[],
       qualityYearList,
       clientWidth: 0,
@@ -392,58 +387,58 @@ 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}`
-      this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);
+        // 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.wsHeartbeat.ws.onmessage = (event) => {
+        this.websocket = new WebSocket(wsUrl)
-        console.log('收到消息:', event.data)
+        // 监听 WebSocket 连接
-        this.wsData = event?.data ? JSON.parse(event?.data) : {}
+        this.websocket.onopen = this.websocketOnOpen
-        // console.log('22222', this.wsData.data)
+        // 监听 WebSocket 错误信息
-        if (this.wsData.type === 'EnergyMonitoring') {
+        this.websocket.onerror = this.websocketOnError
-          let EnergyNameList = []
+        // 监听 WebSocket 消息
-          this.wsData.data.forEach((ele) => {
+        this.websocket.onmessage = this.websocketOnMessage
-            EnergyNameList.push(ele.lineName)
+        // 监听 webSocket 断开信息
-          })
+        this.websocket.onclose = this.websocketClose
-          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.SJGws = new WebSocketHeartbeat(SJGWsUrl);
+        this.SJGWebsocket = new WebSocket(SJGWsUrl)
-
+        // 监听 WebSocket 连接
-      // 处理收到的消息
+        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
-      this.SJGws.ws.onmessage = (event) => {
+        // 监听 WebSocket 错误信息
-        console.log('收到消息:', event.data)
+        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
-        this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
+        // 监听 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') {
@@ -488,125 +483,48 @@ export default {
         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) {
-      this.SJGws.ws.onclose = (event) => { console.log(event); }
+      console.log('WebSocket 断开连接', e)
     },
     // // 连接建立之后执行send方法发送数据
-    // websocketOnOpen() {
+    websocketOnOpen() {
-    //   console.log('socket连接成功')
+      console.log('socket连接成功')
-    //   this.websocket.onmessage()
+      this.websocket.onmessage()
-    // },
+    },
     // 连接建立失败重连
-    // websocketOnError(e) {
+    websocketOnError(e) {
-    //   console.log('11111', e)
+      console.log('11111', e)
-    //   this.initWebSocket()
+      this.initWebSocket()
-    // },
+    },
     // 数据接收
-    // websocketOnMessage(e) {
+    websocketOnMessage(e) {
-    //   // console.log(1111, e)
+      // console.log(1111, e)
-    //   this.wsData = e?.data ? JSON.parse(e?.data) : {}
+      this.wsData = e?.data ? JSON.parse(e?.data) : {}
-    //   // console.log('22222', this.wsData.data)
+      // console.log('22222', this.wsData.data)
-    //   if (this.wsData.type === 'EnergyMonitoring') {
+      if (this.wsData.type === 'EnergyMonitoring') {
-    //     let EnergyNameList = []
+        let EnergyNameList = []
-    //     this.wsData.data.forEach((ele) => {
+        this.wsData.data.forEach((ele) => {
-    //       EnergyNameList.push(ele.lineName)
+          EnergyNameList.push(ele.lineName)
-    //     })
+        })
-    //     this.EnergyMonitoringNameList = EnergyNameList
+        this.EnergyMonitoringNameList = EnergyNameList
-    //     let EnergyDataList = []
+        let EnergyDataList = []
-    //     this.wsData.data.forEach((ele) => {
+        this.wsData.data.forEach((ele) => {
-    //       EnergyDataList.push(ele.useQuantity
+          EnergyDataList.push(ele.useQuantity
-    //       )
+          )
-    //     })
+        })
-    //     this.EnergyMonitoringList = EnergyDataList
+        this.EnergyMonitoringList = EnergyDataList
-    //     console.log(EnergyDataList)
+        console.log(EnergyDataList)
-    //     this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
+        this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
-    //   }
+      }
-    // },
+    },
     // 数据发送
-    // websocketSend() {
+    websocketSend() {
-    //   this.websocket.send('11111')
+      this.websocket.send('11111')
-    // },
+    },
-    // // 关闭
+    // 关闭
     websocketClose(e) {
-      this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
+      // console.log('WebSocket 断开连接', e)
     },
     windowWidth(value) {
       this.clientWidth = value

src/views/OperationalOverview/ws.js

@@ -1,64 +0,0 @@
-/*
- * @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;