修改bug

This commit is contained in:
‘937886381’
2024-03-26 16:45:16 +08:00
parent 2b4ed2d03a
commit 328ed8ae63
4 changed files with 562 additions and 296 deletions

View File

@@ -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