projects/mesxc-zhp #277
@@ -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}`
|
||||
// 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) => [
|
||||
`<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
|
||||
|
||||
@@ -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:
|
||||
-->
|
||||
|
||||
@@ -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
|
||||
|
||||
64
src/views/OperationalOverview/ws.js
Arquivo normal
64
src/views/OperationalOverview/ws.js
Arquivo normal
@@ -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;
|
||||
Referência em uma nova issue
Block a user