Merge pull request 'projects/mesxc-zhp' (#277) from projects/mesxc-zhp into projects/mesxc-test
Reviewed-on: #277
This commit is contained in:
commit
1dd8be72e0
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-29 16:50:26
|
* @Date: 2024-01-29 16:50:26
|
||||||
* @LastEditTime: 2024-03-26 09:56:20
|
* @LastEditTime: 2024-03-26 16:30:12
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -143,6 +143,7 @@ import { parseTime } from '../core/mixins/code-filter';
|
|||||||
import ISRAChart from './components/ISRAChart.vue';
|
import ISRAChart from './components/ISRAChart.vue';
|
||||||
import { getDcsMsg, closeDcsMsg } from "./wsInterface"
|
import { getDcsMsg, closeDcsMsg } from "./wsInterface"
|
||||||
import LinearBarChart from './components/linearBarChart'
|
import LinearBarChart from './components/linearBarChart'
|
||||||
|
import WebSocketHeartbeat from './ws.js';
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductionMonitoringCockpit',
|
name: 'ProductionMonitoringCockpit',
|
||||||
components: {
|
components: {
|
||||||
@ -223,8 +224,13 @@ export default {
|
|||||||
containerWidth: 111111,
|
containerWidth: 111111,
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
cutWsData: {},
|
cutWsData: {},
|
||||||
|
Cutws: undefined,
|
||||||
|
funWs: undefined,
|
||||||
|
SJGws: undefined,
|
||||||
funWsData: {},
|
funWsData: {},
|
||||||
SJGWsData: {},
|
SJGWsData: {},
|
||||||
|
cxNameList:[],
|
||||||
|
cxDataList:[],
|
||||||
// orderProcessList: [],
|
// orderProcessList: [],
|
||||||
dateType: '0',
|
dateType: '0',
|
||||||
wsIsOpen:false,
|
wsIsOpen:false,
|
||||||
@ -271,9 +277,9 @@ export default {
|
|||||||
}, 86400000)
|
}, 86400000)
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.funInitWebSocket()
|
this.CutWebsocketClose()
|
||||||
this.CutInitWebSocket()
|
|
||||||
this.SJGWebsocketClose()
|
this.SJGWebsocketClose()
|
||||||
|
this.funWebSocketClose()
|
||||||
if (this.wsIsOpen) {
|
if (this.wsIsOpen) {
|
||||||
closeDcsMsg()
|
closeDcsMsg()
|
||||||
this.wsIsOpen = false
|
this.wsIsOpen = false
|
||||||
@ -307,13 +313,13 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
CutWebsocketClose(e) {
|
CutWebsocketClose(e) {
|
||||||
console.log('WebSocket 断开连接', e)
|
this.Cutws.ws.onclose = (event) => { console.log(event );}
|
||||||
},
|
},
|
||||||
SJGWebsocketClose(e) {
|
SJGWebsocketClose(e) {
|
||||||
console.log('WebSocket 断开连接', e)
|
this.SJGws.ws.onclose = (event) => { console.log(event); }
|
||||||
},
|
},
|
||||||
funWebSocketClose(e) {
|
funWebSocketClose(e) {
|
||||||
console.log('WebSocket 断开连接', e)
|
this.funWs.ws.onclose = (event) => { console.log(event); }
|
||||||
},
|
},
|
||||||
formatTime(time, option) {
|
formatTime(time, option) {
|
||||||
console.log(time);
|
console.log(time);
|
||||||
@ -357,74 +363,126 @@ export default {
|
|||||||
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||||
},
|
},
|
||||||
SJGInitWebSocket() {
|
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()
|
let date = new Date().valueOf()
|
||||||
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
|
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
|
||||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
|
||||||
// 监听 WebSocket 连接
|
|
||||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
// 处理收到的消息
|
||||||
// 监听 WebSocket 错误信息
|
this.SJGws.ws.onmessage = (event) => {
|
||||||
this.SJGWebsocket.onerror = this.SJGWebsocketOnError
|
this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
|
||||||
// 监听 WebSocket 消息
|
if (this.SJGWsData.type === 'isra') {
|
||||||
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
|
console.log('222222', this.SJGWsData.detData)
|
||||||
// 监听 webSocket 断开信息
|
console.log(this.SJGWsData.detData);
|
||||||
this.SJGWebsocket.onclose = this.SJGWebsocketClose
|
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() {
|
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 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.Cutws.ws.onmessage = (event) => {
|
||||||
this.cutWebsocket.onopen = this.cutWebsocketOnOpen
|
console.log(event)
|
||||||
// 监听 WebSocket 错误信息
|
this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
|
||||||
this.cutWebsocket.onerror = this.cutWebsocketOnError
|
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
||||||
// 监听 WebSocket 消息
|
let cutArr = this.cutWsData.productHourData.map((item, index) => [
|
||||||
this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
|
`<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
|
||||||
// 监听 webSocket 断开信息
|
</span>`,
|
||||||
this.cutWebsocket.onclose = this.cutWebsocketClose
|
`<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() {
|
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()
|
let date = new Date().valueOf()
|
||||||
const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
|
const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
|
||||||
this.funWebsocket = new WebSocket(funWsUrl)
|
this.funWs = new WebSocketHeartbeat(funWsUrl);
|
||||||
// 监听 WebSocket 连接
|
// 处理收到的消息
|
||||||
this.funWebsocket.onopen = this.funWebsocketOnOpen
|
this.funWs.ws.onmessage = (event) => {
|
||||||
// 监听 WebSocket 错误信息
|
this.funWsData = event?.data ? JSON.parse(event?.data) : {}
|
||||||
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
|
// FanInfo
|
||||||
if (this.funWsData.type === 'AnnealFanInfo') {
|
if (this.funWsData.type === 'AnnealFanInfo') {
|
||||||
let arr = []
|
let arr = []
|
||||||
@ -457,15 +515,77 @@ export default {
|
|||||||
this.funConfig.data = arr
|
this.funConfig.data = arr
|
||||||
this.$refs['funScrollBoard'].updateRows(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
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
cutWebsocketOnOpen() {
|
// funWebsocketOnOpen() {
|
||||||
console.log('socket连接成功')
|
// console.log('socket连接成功')
|
||||||
this.SJGWebsocket.onmessage()
|
// this.SJGWebsocket.onmessage()
|
||||||
},
|
// },
|
||||||
// 连接建立失败重连
|
// // 连接建立失败重连
|
||||||
cutWebsocketOnError(e) {
|
// funWebsocketOnError(e) {
|
||||||
this.CutInitWebSocket()
|
// 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) {
|
getSize(str) {
|
||||||
// console.log(str.match(/\d+(\.\d+)?/g))
|
// console.log(str.match(/\d+(\.\d+)?/g))
|
||||||
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
|
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
|
||||||
@ -475,78 +595,78 @@ export default {
|
|||||||
return size[0] + '*' + size[1] + '*' + size[2]
|
return size[0] + '*' + size[1] + '*' + size[2]
|
||||||
},
|
},
|
||||||
// 数据接收
|
// 数据接收
|
||||||
cutWebsocketOnMessage(e) {
|
// cutWebsocketOnMessage(e) {
|
||||||
this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
|
// this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
|
||||||
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
// if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
||||||
let cutArr = this.cutWsData.productHourData.map((item, index) => [
|
// let cutArr = this.cutWsData.productHourData.map((item, index) => [
|
||||||
`<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
|
// `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
|
||||||
</span>`,
|
// </span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
|
// `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
|
||||||
</span>`,
|
// </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.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)">${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.productArea + '㎡' || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</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:#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>`
|
// <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.cutConfig.data = cutArr
|
||||||
this.$refs['cutScrollBoard'].updateRows(cutArr)
|
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||||||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
// } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||||||
let nameList = []
|
// let nameList = []
|
||||||
let nameWasteList = []
|
// let nameWasteList = []
|
||||||
let topNameList = []
|
// let topNameList = []
|
||||||
let productList = []
|
// let productList = []
|
||||||
let wasteList = []
|
// let wasteList = []
|
||||||
let sumAreaList = []
|
// let sumAreaList = []
|
||||||
let yieldList = []
|
// let yieldList = []
|
||||||
// this.cutTableDataList =
|
// // this.cutTableDataList =
|
||||||
this.cutWsData.coldDetData.forEach((ele, index) => {
|
// this.cutWsData.coldDetData.forEach((ele, index) => {
|
||||||
nameList.push(ele.lineName)
|
// nameList.push(ele.lineName)
|
||||||
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
|
// topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
|
||||||
productList.push(ele.productArea)
|
// productList.push(ele.productArea)
|
||||||
wasteList.push(ele.wastArea)
|
// wasteList.push(ele.wastArea)
|
||||||
nameWasteList.push('缺陷面积:' + ele.wastArea)
|
// nameWasteList.push('缺陷面积:' + ele.wastArea)
|
||||||
sumAreaList.push(ele.sumArea)
|
// sumAreaList.push(ele.sumArea)
|
||||||
yieldList.push((ele.yield *100).toFixed(3))
|
// yieldList.push((ele.yield *100).toFixed(3))
|
||||||
})
|
// })
|
||||||
this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
|
// this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
|
||||||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
SJGWebsocketOnOpen() {
|
// SJGWebsocketOnOpen() {
|
||||||
console.log('socket连接成功')
|
// console.log('socket连接成功')
|
||||||
this.SJGWebsocket.onmessage()
|
// 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) {
|
windowWidth(value) {
|
||||||
this.clientWidth = value
|
this.clientWidth = value
|
||||||
this.beilv2 = this.clientWidth / 1920
|
this.beilv2 = this.clientWidth / 1920
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2024-03-13 08:51:12
|
* @LastEditTime: 2024-03-26 16:16:50
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-03-26 10:06:54
|
* @LastEditTime: 2024-03-26 15:43:27
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -76,6 +76,9 @@ import baseTable1 from './components/baseTable'
|
|||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
import doubleYChart from './components/doubleYChart '
|
import doubleYChart from './components/doubleYChart '
|
||||||
import LinearBarChart from './components/linearBarChart'
|
import LinearBarChart from './components/linearBarChart'
|
||||||
|
import WebSocketHeartbeat from './ws.js';
|
||||||
|
|
||||||
|
// 创建WebSocketHeartbeat实例
|
||||||
const qualityYearList = [
|
const qualityYearList = [
|
||||||
{
|
{
|
||||||
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否'
|
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否'
|
||||||
@ -215,6 +218,8 @@ export default {
|
|||||||
rowNum: 10
|
rowNum: 10
|
||||||
},
|
},
|
||||||
// cxDataList,
|
// cxDataList,
|
||||||
|
SJGws: undefined,
|
||||||
|
wsHeartbeat:undefined,
|
||||||
productLineList:[],
|
productLineList:[],
|
||||||
qualityYearList,
|
qualityYearList,
|
||||||
clientWidth: 0,
|
clientWidth: 0,
|
||||||
@ -387,58 +392,58 @@ export default {
|
|||||||
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||||
},
|
},
|
||||||
initWebSocket() {
|
initWebSocket() {
|
||||||
if (typeof (WebSocket) === 'undefined') {
|
|
||||||
alert('您的浏览器不支持WebSocket')
|
|
||||||
} else {
|
|
||||||
let date = new Date().valueOf()
|
let date = new Date().valueOf()
|
||||||
const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
|
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'
|
this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);
|
||||||
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
|
|
||||||
// 实例化 WebSocket
|
// 处理收到的消息
|
||||||
this.websocket = new WebSocket(wsUrl)
|
this.wsHeartbeat.ws.onmessage = (event) => {
|
||||||
// 监听 WebSocket 连接
|
console.log('收到消息:', event.data)
|
||||||
this.websocket.onopen = this.websocketOnOpen
|
this.wsData = event?.data ? JSON.parse(event?.data) : {}
|
||||||
// 监听 WebSocket 错误信息
|
// console.log('22222', this.wsData.data)
|
||||||
this.websocket.onerror = this.websocketOnError
|
if (this.wsData.type === 'EnergyMonitoring') {
|
||||||
// 监听 WebSocket 消息
|
let EnergyNameList = []
|
||||||
this.websocket.onmessage = this.websocketOnMessage
|
this.wsData.data.forEach((ele) => {
|
||||||
// 监听 webSocket 断开信息
|
EnergyNameList.push(ele.lineName)
|
||||||
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() {
|
SJGInitWebSocket() {
|
||||||
if (typeof (WebSocket) === 'undefined') {
|
|
||||||
alert('您的浏览器不支持WebSocket')
|
|
||||||
} else {
|
|
||||||
let date = new Date().valueOf()
|
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}`
|
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
|
||||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
|
||||||
// 监听 WebSocket 连接
|
|
||||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
// 处理收到的消息
|
||||||
// 监听 WebSocket 错误信息
|
this.SJGws.ws.onmessage = (event) => {
|
||||||
this.SJGWebsocket.onerror = this.SJGWebsocketOnError
|
console.log('收到消息:', event.data)
|
||||||
// 监听 WebSocket 消息
|
this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
|
||||||
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(this.wsData.detData);
|
||||||
// console.log('22222', this.wsData.data)
|
// console.log('22222', this.wsData.data)
|
||||||
if (this.SJGWsData.type === 'order') {
|
if (this.SJGWsData.type === 'order') {
|
||||||
@ -483,48 +488,125 @@ export default {
|
|||||||
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
|
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
|
||||||
} else if (this.SJGInitWebSocket === 'inspection') {
|
} 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) {
|
SJGWebsocketClose(e) {
|
||||||
console.log('WebSocket 断开连接', e)
|
this.SJGws.ws.onclose = (event) => { console.log(event); }
|
||||||
},
|
},
|
||||||
// // 连接建立之后执行send方法发送数据
|
// // 连接建立之后执行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) {
|
websocketClose(e) {
|
||||||
// console.log('WebSocket 断开连接', e)
|
this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
|
||||||
},
|
},
|
||||||
windowWidth(value) {
|
windowWidth(value) {
|
||||||
this.clientWidth = value
|
this.clientWidth = value
|
||||||
|
|||||||
64
src/views/OperationalOverview/ws.js
Normal file
64
src/views/OperationalOverview/ws.js
Normal file
@ -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;
|
||||||
Loading…
Reference in New Issue
Block a user