mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

projects/mesxc-zhp #277

Merged
juzi merged 2 commits from projects/mesxc-zhp into projects/mesxc-test 2024-03-26 16:47:20 +08:00
Conversation 0 Commits 2 Files Changed 4 +562 -296
4 changed files with 562 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

466
src/views/OperationalOverview/coldBoard.vue
View File

@ -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,115 +363,229 @@ export default {
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}, },
SJGInitWebSocket() { SJGInitWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
} else { this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
// 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() this.SJGws.ws.onmessage = (event) => {
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}` this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
this.SJGWebsocket = new WebSocket(SJGWsUrl) if (this.SJGWsData.type === 'isra') {
// 监听 WebSocket 连接 console.log('222222', this.SJGWsData.detData)
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen console.log(this.SJGWsData.detData);
// 监听 WebSocket 错误信息 let chartData = this.SJGWsData.detData.map((item, index) => {
this.SJGWebsocket.onerror = this.SJGWebsocketOnError return {
// 监听 WebSocket 消息 name: item.type,
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage num: item.num
// 监听 webSocket 断开信息 }
this.SJGWebsocket.onclose = this.SJGWebsocketClose })
} 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') { let date = new Date().valueOf()
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}` 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') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
} else { this.funWs = new WebSocketHeartbeat(funWsUrl);
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111' // 处理收到的消息
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' this.funWs.ws.onmessage = (event) => {
let date = new Date().valueOf() this.funWsData = event?.data ? JSON.parse(event?.data) : {}
const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}` // FanInfo
this.funWebsocket = new WebSocket(funWsUrl) if (this.funWsData.type === 'AnnealFanInfo') {
// 监听 WebSocket 连接 let arr = []
this.funWebsocket.onopen = this.funWebsocketOnOpen let index = 0
// 监听 WebSocket 错误信息 for (let i in this.funWsData.data.annealFanInfo) {
this.funWebsocket.onerror = this.funWebsocketOnError index++,
// 监听 WebSocket 消息 arr.push([
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 style="color:rgba(255,255,255,0.5)" >${index || ''}
</span>`, </span>`,
`<span style="color:rgba(255,255,255,0.5)" >${i || ''} `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`, </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 if (this.funWsData.type === 'FanInfo') {
this.$refs['annealFunScrollBoard'].updateRows(arr) let arr = []
} let index = 0
if (this.funWsData.type === 'FanInfo') { for (let i in this.funWsData.data.fanInfo) {
let arr = [] index++,
let index = 0 arr.push([
for (let i in this.funWsData.data.fanInfo) { `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
index++, `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
arr.push([ `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
`<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) // if (typeof (WebSocket) === 'undefined') {
} // alert('您的浏览器不支持WebSocket')
}, // } else {
cutWebsocketOnOpen() { // // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
console.log('socket连接成功') // // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
this.SJGWebsocket.onmessage() // let date = new Date().valueOf()
}, // const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
// 连接建立失败重连 // this.funWebsocket = new WebSocket(funWsUrl)
cutWebsocketOnError(e) { // // 监听 WebSocket 连接
this.CutInitWebSocket() // 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) { 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

2
src/views/OperationalOverview/components/doubleYChart .vue
View File

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

326
src/views/OperationalOverview/processingBoard.vue
View File

@ -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,144 +392,221 @@ export default {
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}, },
initWebSocket() { initWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
} else { this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);
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' this.wsHeartbeat.ws.onmessage = (event) => {
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111' console.log('收到消息:', event.data)
// 实例化 WebSocket this.wsData = event?.data ? JSON.parse(event?.data) : {}
this.websocket = new WebSocket(wsUrl) // console.log('22222', this.wsData.data)
// 监听 WebSocket 连接 if (this.wsData.type === 'EnergyMonitoring') {
this.websocket.onopen = this.websocketOnOpen let EnergyNameList = []
// 监听 WebSocket 错误信息 this.wsData.data.forEach((ele) => {
this.websocket.onerror = this.websocketOnError EnergyNameList.push(ele.lineName)
// 监听 WebSocket 消息 })
this.websocket.onmessage = this.websocketOnMessage this.EnergyMonitoringNameList = EnergyNameList
// 监听 webSocket 断开信息 let EnergyDataList = []
this.websocket.onclose = this.websocketClose 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') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
} else { this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
let date = new Date().valueOf()
// console.log(date); // 处理收到的消息
console.log(process.env); this.SJGws.ws.onmessage = (event) => {
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}` console.log('收到消息:', event.data)
this.SJGWebsocket = new WebSocket(SJGWsUrl) this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
// 监听 WebSocket 连接 // console.log(this.wsData.detData);
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen // console.log('22222', this.wsData.data)
// 监听 WebSocket 错误信息 if (this.SJGWsData.type === 'order') {
this.SJGWebsocket.onerror = this.SJGWebsocketOnError this.orderList = this.SJGWsData.detData.map((ele, index) => {
// 监听 WebSocket 消息 if (ele.progressRate != 1) {
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage return {
// 监听 webSocket 断开信息 id: ele.id,
this.SJGWebsocket.onclose = this.SJGWebsocketClose name: ele.name,
} progressRate: ele.progressRate.toFixed(3)
}, }
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)
console.log(this.orderList) } else if (this.SJGWsData.type === 'equipment') {
} else if (this.SJGWsData.type === 'equipment') { let eqArr = this.SJGWsData.detData.map((item, index) => [
let eqArr = this.SJGWsData.detData.map((item, index) => [ `<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)" >${item.name || ''} `<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
</span>`, </span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</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.status || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`, `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
]) ])
this.eqConfig.data = eqArr this.eqConfig.data = eqArr
this.$refs['eqScrollBoard'].updateRows(eqArr) this.$refs['eqScrollBoard'].updateRows(eqArr)
// console.log(SJGWsData.orderList) // console.log(SJGWsData.orderList)
} else if (this.SJGWsData.type === 'productline') { } else if (this.SJGWsData.type === 'productline') {
console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData); console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
let nameList = [] let nameList = []
let passRateList = [] let passRateList = []
let outputNumList = [] let outputNumList = []
this.SJGWsData.detData.forEach((ele) => { this.SJGWsData.detData.forEach((ele) => {
// if (item.id == ele.productionLineId) { // if (item.id == ele.productionLineId) {
// if (item.name.substr(0, 1) == "D") { // if (item.name.substr(0, 1) == "D") {
// console.log(ele) // console.log(ele)
nameList.push(ele.lineName) nameList.push(ele.lineName)
outputNumList.push(ele.outputNum) outputNumList.push(ele.outputNum)
passRateList.push(ele.passRate) passRateList.push(ele.passRate)
// } // }
// } // }
}) })
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
View 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;