From 328ed8ae630a0c5c4bdc8e33fc8b7f9c066bb58c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Tue, 26 Mar 2024 16:45:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/OperationalOverview/coldBoard.vue | 466 +++++++++++------- .../components/doubleYChart .vue | 2 +- .../OperationalOverview/processingBoard.vue | 326 +++++++----- src/views/OperationalOverview/ws.js | 64 +++ 4 files changed, 562 insertions(+), 296 deletions(-) create mode 100644 src/views/OperationalOverview/ws.js 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 + '㎡' || ''}`, + `
${(item.product * 100).toFixed(2) + '%' || ''}
+
${(item.product * 100).toFixed(2) + '%' || ''}
` + ]) + 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 + '㎡' || ''}`, - `
${(item.product * 100).toFixed(2) + '%' || ''}
-
${(item.product * 100).toFixed(2) + '%' || ''}
` - ]) - 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 + '㎡' || ''}`, + // `
${(item.product * 100).toFixed(2) + '%' || ''}
+ //
${(item.product * 100).toFixed(2) + '%' || ''}
` + // ]) + // 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: -->