diff --git a/src/views/OperationalOverview/coldBoard.vue b/src/views/OperationalOverview/coldBoard.vue index 7bcf2aed..167e68c8 100644 --- a/src/views/OperationalOverview/coldBoard.vue +++ b/src/views/OperationalOverview/coldBoard.vue @@ -1,7 +1,7 @@ @@ -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) + `${index + 1 || ''} + `, + `${ele.name || ''}`, + `${ele.run || ''}`, + ]) + } + 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}` + // const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}` + this.Cutws = new WebSocketHeartbeat(cutWsUrl); - 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 - } + // 处理收到的消息 + 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) => [ + `${index + 1 || ''} + `, + `${item.lineName || ''} + `, + `${this.formatTime(item.time) || ''}`, + `${this.getSize(item.size) || ''}`, + `${item.productArea + '㎡' || ''}`, + `${item.wasteArea + '㎡' || ''}`, + `
+ ` + ]) + 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([ + ` ${index || ''} `, - `${i || ''} + `${i || ''} `, - `${this.funWsData.data.annealFanInfo[i] || ''}`, - ]) + `${this.funWsData.data.annealFanInfo[i] || ''}`, + ]) + } + 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([ - `${index || ''}`, - `${i || ''}`, - `${this.funWsData.data.fanInfo[i] || ''}`, - ]) + if (this.funWsData.type === 'FanInfo') { + let arr = [] + let index = 0 + for (let i in this.funWsData.data.fanInfo) { + index++, + arr.push([ + `${index || ''}`, + `${i || ''}`, + `${this.funWsData.data.fanInfo[i] || ''}`, + ]) + } + 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([ + // ` + // ${index || ''} + // `, + // `${i || ''} + // `, + // `${this.funWsData.data.annealFanInfo[i] || ''}`, + // ]) + // } + // 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([ + // `${index || ''}`, + // `${i || ''}`, + // `${this.funWsData.data.fanInfo[i] || ''}`, + // ]) + // } + // 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) => [ - `${index + 1 || ''} - `, - `${item.lineName || ''} - `, - `${this.formatTime(item.time) || ''}`, - `${this.getSize(item.size) || ''}`, - `${item.productArea + '㎡' || ''}`, - `${item.wasteArea + '㎡' || ''}`, - ` - ` - ]) - 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) => [ + // `${index + 1 || ''} + // `, + // `${item.lineName || ''} + // `, + // `${this.formatTime(item.time) || ''}`, + // `${this.getSize(item.size) || ''}`, + // `${item.productArea + '㎡' || ''}`, + // `${item.wasteArea + '㎡' || ''}`, + // ` + // ` + // ]) + // 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) - `${index + 1 || ''} - `, - `${ele.name || ''}`, - `${ele.run || ''}`, - ]) - } - 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) + // `${index + 1 || ''} + // `, + // `${ele.name || ''}`, + // `${ele.run || ''}`, + // ]) + // } + // this.realEqConfig.data = this.realEqList + // this.$refs['realEqScrollBoard'].updateRows(this.realEqList) + // }, windowWidth(value) { this.clientWidth = value this.beilv2 = this.clientWidth / 1920 diff --git a/src/views/OperationalOverview/components/doubleYChart .vue b/src/views/OperationalOverview/components/doubleYChart .vue index 2bff2e31..532bf265 100644 --- a/src/views/OperationalOverview/components/doubleYChart .vue +++ b/src/views/OperationalOverview/components/doubleYChart .vue @@ -1,7 +1,7 @@ diff --git a/src/views/OperationalOverview/processingBoard.vue b/src/views/OperationalOverview/processingBoard.vue index 7c9cff35..656f274b 100644 --- a/src/views/OperationalOverview/processingBoard.vue +++ b/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: --> @@ -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) => [ - `${index + 1 || ''} + }); + console.log(this.orderList) + } else if (this.SJGWsData.type === 'equipment') { + let eqArr = this.SJGWsData.detData.map((item, index) => [ + `${index + 1 || ''} `, - `${item.name || ''} + `${item.name || ''} `, - `${item.code || ''}`, - `${item.status || ''}`, - `${item.error || ''}`, - ]) - 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 = [] + `${item.code || ''}`, + `${item.status || ''}`, + `${item.error || ''}`, + ]) + 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) => [ + // `${index + 1 || ''} + // `, + // `${item.name || ''} + // `, + // `${item.code || ''}`, + // `${item.status || ''}`, + // `${item.error || ''}`, + // ]) + // 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 diff --git a/src/views/OperationalOverview/ws.js b/src/views/OperationalOverview/ws.js new file mode 100644 index 00000000..96699737 --- /dev/null +++ b/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;