修改ui
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-03-28 15:31:07
|
||||
* @LastEditTime: 2024-03-28 16:10:47
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -16,10 +16,10 @@
|
||||
许昌安彩深加工看板
|
||||
<h3 class="unit">单位:河南汇融数字科技有限公司</h3>
|
||||
<h3 class="time">{{ times }}</h3>
|
||||
<el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px', fontSize: '32px' }"
|
||||
<el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px',fontSize:'32px'}"
|
||||
@click="changeFullScreen">
|
||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon v-else icon-class="fullScreenView" />
|
||||
<svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row class="container-main flex-col" type="flex">
|
||||
@@ -238,7 +238,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['sidebar']),
|
||||
styles() {
|
||||
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
|
||||
return {
|
||||
@@ -247,7 +246,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
isFullScreen: function (val) {
|
||||
if (val) {
|
||||
@@ -269,12 +267,10 @@ export default {
|
||||
_this.timer = false
|
||||
}, 500)
|
||||
}
|
||||
// 这里可以添加修改时的方法
|
||||
this.windowWidth(val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
this.init()
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
@@ -285,67 +281,67 @@ export default {
|
||||
this.SJGWebsocketClose()
|
||||
},
|
||||
mounted() {
|
||||
let detData = [
|
||||
{
|
||||
id:'1',
|
||||
name: '测试工单',
|
||||
progressRate:0.933333
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '测试工单2',
|
||||
progressRate: 0.932323
|
||||
}, {
|
||||
id: '3',
|
||||
name: '测试工单3',
|
||||
progressRate: 0.23232
|
||||
}, {
|
||||
id: '4',
|
||||
name: '测试工单4',
|
||||
progressRate: 0.32323
|
||||
}
|
||||
// {
|
||||
// id: '5',
|
||||
// name: '测试工单',
|
||||
// progressRate: 0.5555
|
||||
// }, {
|
||||
// id: '6',
|
||||
// name: '测试工单',
|
||||
// progressRate: 0.66564
|
||||
// },
|
||||
]
|
||||
this.orderList = detData.map((ele, index) => {
|
||||
if (ele.progressRate && ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
name: ele.name,
|
||||
progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
|
||||
}
|
||||
}
|
||||
});
|
||||
let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',]
|
||||
this.EnergyMonitoringNameList = EnergyNameList
|
||||
let EnergyDataList = [1, 2, 3, 4, 5]
|
||||
// this.wsData.data.forEach((ele) => {
|
||||
// EnergyDataList.push(ele.useQuantity)
|
||||
// })
|
||||
this.EnergyMonitoringList = EnergyDataList
|
||||
// console.log(EnergyDataList)
|
||||
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
||||
let eqArr = this.qualityYearList.map((item, index) => [
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<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)
|
||||
this.$refs.productLineChart.initChart(['D61', 'D62', 'D63', 'D64', 'D65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
|
||||
// let detData = [
|
||||
// {
|
||||
// id:'1',
|
||||
// name: '测试工单',
|
||||
// progressRate:0.933333
|
||||
// },
|
||||
// {
|
||||
// id: '2',
|
||||
// name: '测试工单2',
|
||||
// progressRate: 0.932323
|
||||
// }, {
|
||||
// id: '3',
|
||||
// name: '测试工单3',
|
||||
// progressRate: 0.23232
|
||||
// }, {
|
||||
// id: '4',
|
||||
// name: '测试工单4',
|
||||
// progressRate: 0.32323
|
||||
// }
|
||||
// // {
|
||||
// // id: '5',
|
||||
// // name: '测试工单',
|
||||
// // progressRate: 0.5555
|
||||
// // }, {
|
||||
// // id: '6',
|
||||
// // name: '测试工单',
|
||||
// // progressRate: 0.66564
|
||||
// // },
|
||||
// ]
|
||||
// this.orderList = detData.map((ele, index) => {
|
||||
// if (ele.progressRate && ele.progressRate != 1) {
|
||||
// return {
|
||||
// id: ele.id,
|
||||
// name: ele.name,
|
||||
// progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',]
|
||||
// this.EnergyMonitoringNameList = EnergyNameList
|
||||
// let EnergyDataList = [1, 2, 3, 4, 5]
|
||||
// // this.wsData.data.forEach((ele) => {
|
||||
// // EnergyDataList.push(ele.useQuantity)
|
||||
// // })
|
||||
// this.EnergyMonitoringList = EnergyDataList
|
||||
// // console.log(EnergyDataList)
|
||||
// this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
||||
// let eqArr = this.qualityYearList.map((item, index) => [
|
||||
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
// </span>`,
|
||||
// // formatDate(item.planStartTime) || '',
|
||||
// `
|
||||
// <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)
|
||||
// this.$refs.productLineChart.initChart(['D61', 'D62', 'D63', 'D64', 'D65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
|
||||
// this.getList()
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
@@ -359,7 +355,9 @@ export default {
|
||||
this.beilv2 = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// beforeDestroy() {
|
||||
// //离开页面删除检测器和所有侦听器
|
||||
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
|
||||
@@ -550,122 +548,10 @@ export default {
|
||||
} 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) {
|
||||
this.SJGws.ws.onclose = (event) => { console.log(event); }
|
||||
},
|
||||
// // 连接建立之后执行send方法发送数据
|
||||
// websocketOnOpen() {
|
||||
// console.log('socket连接成功')
|
||||
// this.websocket.onmessage()
|
||||
// },
|
||||
// 连接建立失败重连
|
||||
// websocketOnError(e) {
|
||||
// console.log('11111', e)
|
||||
// this.initWebSocket()
|
||||
// },
|
||||
// 数据接收
|
||||
// websocketOnMessage(e) {
|
||||
// // console.log(1111, e)
|
||||
// this.wsData = e?.data ? JSON.parse(e?.data) : {}
|
||||
// // console.log('22222', this.wsData.data)
|
||||
// if (this.wsData.type === 'EnergyMonitoring') {
|
||||
// let EnergyNameList = []
|
||||
// this.wsData.data.forEach((ele) => {
|
||||
// EnergyNameList.push(ele.lineName)
|
||||
// })
|
||||
// this.EnergyMonitoringNameList = EnergyNameList
|
||||
// let EnergyDataList = []
|
||||
// this.wsData.data.forEach((ele) => {
|
||||
// EnergyDataList.push(ele.useQuantity
|
||||
// )
|
||||
// })
|
||||
// this.EnergyMonitoringList = EnergyDataList
|
||||
// console.log(EnergyDataList)
|
||||
// this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
||||
// }
|
||||
// },
|
||||
// 数据发送
|
||||
// websocketSend() {
|
||||
// this.websocket.send('11111')
|
||||
// },
|
||||
// // 关闭
|
||||
websocketClose(e) {
|
||||
this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
|
||||
},
|
||||
@@ -674,10 +560,14 @@ export default {
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
},
|
||||
change() {
|
||||
console.log(this.isFullScreen);
|
||||
debugger;
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
console.log(screenfull.isEnabled);
|
||||
if (screenfull.isEnabled) {
|
||||
debugger;
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
@@ -687,7 +577,7 @@ export default {
|
||||
}
|
||||
},
|
||||
changeFullScreen() {
|
||||
this.containerWidth = 223223223
|
||||
// this.containerWidth = 223223223
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
|
||||
Reference in New Issue
Block a user