Compare commits
6 Commits
b6f801c6ce
...
1c5e77258e
| Author | SHA1 | Date | |
|---|---|---|---|
|
1c5e77258e | ||
|
|
ebd7cb02ff | ||
| 0789decfd9 | |||
| 75aa253a29 | |||
| 14967cbf67 | |||
| 35bcb23920 |
@ -1,6 +1,10 @@
|
||||
const state = {
|
||||
fanFrequencyInfo:{},
|
||||
kilnInfo:{}
|
||||
fanFrequencyInfo:{},// 分机运行频率
|
||||
kilnInfo:{},// 窑炉信息
|
||||
gasInfo:{},// 天然气
|
||||
|
||||
israKiln:[],// ISRA缺陷检测
|
||||
material:[]// 原料
|
||||
};
|
||||
const mutations = {
|
||||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
|
||||
@ -8,6 +12,17 @@ const mutations = {
|
||||
},
|
||||
SET_KILNINFO: (state, kilnInfo) => {
|
||||
state.kilnInfo = kilnInfo
|
||||
},
|
||||
SET_GASINFO: (state, gasInfo) => {
|
||||
state.gasInfo = gasInfo
|
||||
},
|
||||
|
||||
|
||||
SET_ISRAKILN: (state, israKiln) => {
|
||||
state.israKiln = israKiln
|
||||
},
|
||||
SET_MATERIAL: (state, material) => {
|
||||
state.material = material
|
||||
}
|
||||
};
|
||||
const actions = {
|
||||
@ -16,7 +31,18 @@ const actions = {
|
||||
},
|
||||
setKilnInfo({ commit }, kilnInfo) {
|
||||
commit('SET_KILNINFO', kilnInfo.payload)
|
||||
}
|
||||
},
|
||||
setGasInfo({ commit }, gasInfo) {
|
||||
commit('SET_GASINFO', gasInfo.payload)
|
||||
},
|
||||
|
||||
|
||||
setIsraKiln({ commit }, israKiln) {
|
||||
commit('SET_ISRAKILN', israKiln.payload)
|
||||
},
|
||||
setMaterial({ commit }, material) {
|
||||
commit('SET_MATERIAL', material.payload)
|
||||
},
|
||||
};
|
||||
export default {
|
||||
namespaced: true,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-28 11:52:08
|
||||
* @LastEditTime: 2023-12-29 16:19:38
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -132,6 +132,8 @@ import doubleYChart from './components/doubleYChart '
|
||||
// import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
// var erd = elementResizeDetectorMaker(); //创建实例
|
||||
// let resizeFun = null
|
||||
import { parseTime } from '../core/mixins/code-filter';
|
||||
|
||||
|
||||
import LinearBarChart from './components/linearBarChart'
|
||||
const qualityYearTableProps= []
|
||||
@ -153,7 +155,10 @@ const EqMonitoringProps = [
|
||||
]
|
||||
const cutProps = [
|
||||
{ prop: 'lineName', label: '产线' },
|
||||
{ prop: 'time', label: '时间' },
|
||||
{
|
||||
prop: 'time', label: '时间',
|
||||
filter: parseTime
|
||||
},
|
||||
{ prop: 'size', label: '规格' },
|
||||
{ prop: 'productArea', label: '良品面积' },
|
||||
{ prop: 'wasteArea', label: '废片面积' },
|
||||
@ -303,7 +308,10 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
this.initWebSocket()
|
||||
this.funInitWebSocket()
|
||||
this.CutInitWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
|
||||
this.getTimes()
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
@ -353,13 +361,13 @@ export default {
|
||||
// status: obj.data.FanFrequencyInfo[i]
|
||||
// })
|
||||
// }
|
||||
this.funList = arr``
|
||||
// this.funList = arr``
|
||||
this.$axios.get(
|
||||
'/monitoring/equipment-monitor/realtime-page',
|
||||
'get',
|
||||
this.queryParams
|
||||
).then((res) => {
|
||||
console.log(res);
|
||||
console.log('222222222222222', res);
|
||||
this.realEqList = res.data.list;
|
||||
// this.total = response.data.total;
|
||||
// this.loading = false;
|
||||
@ -389,7 +397,7 @@ export default {
|
||||
//拼接格式化当前时间
|
||||
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||
},
|
||||
initWebSocket() {
|
||||
SJGInitWebSocket() {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
alert('您的浏览器不支持WebSocket')
|
||||
} else {
|
||||
@ -397,7 +405,7 @@ export default {
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
console.log(date);
|
||||
const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=COLD${date}`
|
||||
const SJGWsUrl = `ws://192.168.0.30:8888/websocket/message?userId=COLD${date}`
|
||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
||||
@ -407,7 +415,17 @@ export default {
|
||||
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
|
||||
// 监听 webSocket 断开信息
|
||||
this.SJGWebsocket.onclose = this.SJGWebsocketClose
|
||||
const cutWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=CUTTING${date}`
|
||||
}
|
||||
},
|
||||
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()
|
||||
console.log(date);
|
||||
const cutWsUrl = `ws://192.168.0.30:8888/websocket/message?userId=CUTTING${date}`
|
||||
|
||||
this.cutWebsocket = new WebSocket(cutWsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
@ -418,29 +436,27 @@ export default {
|
||||
this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
|
||||
// 监听 webSocket 断开信息
|
||||
this.cutWebsocket.onclose = this.cutWebsocketClose
|
||||
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
|
||||
// const wsUrl = 'ws://192.168.0.33:48082/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
|
||||
}
|
||||
},
|
||||
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.2.2:8080/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连接成功')
|
||||
// console.log(this.SJGWebsocket.onmessage);
|
||||
@ -449,23 +465,23 @@ export default {
|
||||
// 连接建立失败重连
|
||||
funWebsocketOnError(e) {
|
||||
console.log('222222', e)
|
||||
this.initWebSocket()
|
||||
this.funInitWebSocket()
|
||||
},
|
||||
// 数据接收
|
||||
funWebsocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
// console.log(this.wsData)
|
||||
// console.log('22222', this.wsData.data)
|
||||
this.wsData = JSON.parse(e.data)
|
||||
if (this.wsData.type === 'FanFrequencyInfo') {
|
||||
// let arr = []
|
||||
// for (let i in this.wsData.FanFrequencyInfo) {
|
||||
// arr.push({
|
||||
// equipmentName: i,
|
||||
// status: obj.data.FanFrequencyInfo[i]
|
||||
// })
|
||||
// }
|
||||
// this.funList = arr
|
||||
this.funWsData = JSON.parse(e.data)
|
||||
if (this.funWsData.type === 'FanFrequencyInfo') {
|
||||
let arr = []
|
||||
for (let i in this.funWsData.FanFrequencyInfo) {
|
||||
arr.push({
|
||||
equipmentName: i,
|
||||
status: obj.data.FanFrequencyInfo[i]
|
||||
})
|
||||
}
|
||||
this.funList = arr
|
||||
}
|
||||
},
|
||||
cutWebsocketOnOpen() {
|
||||
@ -476,16 +492,16 @@ export default {
|
||||
// 连接建立失败重连
|
||||
cutWebsocketOnError(e) {
|
||||
console.log('11111', e)
|
||||
this.initWebSocket()
|
||||
this.CutInitWebSocket()
|
||||
},
|
||||
// 数据接收
|
||||
cutWebsocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
this.wsData = JSON.parse(e.data)
|
||||
console.log(this.wsData)
|
||||
this.cutWsData = JSON.parse(e.data)
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.wsData.type === 'cutting' && this.wsData.name === 'table' ) {
|
||||
this.cutTableDataList = this.wsData.productHourData.map((ele, index) => {
|
||||
console.log('table', this.cutWsData)
|
||||
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
||||
this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
@ -500,7 +516,7 @@ export default {
|
||||
// }
|
||||
});
|
||||
// console.log(this.orderList)
|
||||
} else if (this.wsData.type === 'cutting' && this.wsData.name === 'chart') {
|
||||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||||
let nameList = []
|
||||
let nameWasteList = []
|
||||
let topNameList = []
|
||||
@ -508,14 +524,18 @@ export default {
|
||||
let wasteList = []
|
||||
let sumAreaList = []
|
||||
let yieldList = []
|
||||
this.cutTableDataList = this.wsData.detData.forEach((ele, index) => {
|
||||
this.cutTableDataList = this.cutWsData.coldDetData.forEach((ele, index) => {
|
||||
nameList.push(ele.lineName)
|
||||
topNameList.push(ele.lineName + ' ' + '总面积' + ele.sumArea)
|
||||
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
|
||||
productList.push(ele.productArea)
|
||||
wasteList.push(ele.wastArea)
|
||||
nameWasteList.push('缺陷面积:'+ele.wastArea)
|
||||
nameWasteList.push('缺陷面积:' + ele.wastArea)
|
||||
sumAreaList.push(ele.sumArea)
|
||||
yieldList.push(ele.yield)
|
||||
})
|
||||
this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
|
||||
// console.log(this.cutWsData)
|
||||
// console.log('chart',nameList, topNameList, nameWasteList, productList, wasteList);
|
||||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||
// this.$refs.pileChart.initWebSocket
|
||||
// console.log(this.orderList)
|
||||
@ -529,7 +549,7 @@ export default {
|
||||
// 连接建立失败重连
|
||||
SJGWebsocketOnError(e) {
|
||||
console.log('11111', e)
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
},
|
||||
// 数据接收
|
||||
SJGWebsocketOnMessage(e) {
|
||||
@ -538,11 +558,11 @@ export default {
|
||||
// let data = { "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }
|
||||
// let obj = JSON.parse(data.data)
|
||||
// console.log(obj);
|
||||
this.wsData = JSON.parse(e.data)
|
||||
console.log(this.wsData)
|
||||
this.SJGWsData = JSON.parse(e.data)
|
||||
console.log(this.SJGWsData)
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.wsData.type === 'isra') {
|
||||
this.ISRAList = this.wsData.detData.map((ele, index) => {
|
||||
if (this.SJGWsData.type === 'isra') {
|
||||
this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
@ -557,63 +577,6 @@ export default {
|
||||
// console.log(this.orderList)
|
||||
}
|
||||
},
|
||||
// 数据发送
|
||||
// SJGWebsocketSend() {
|
||||
// this.websocket.send('11111')
|
||||
// },
|
||||
// // 关闭
|
||||
// SJGWebsocketClose(e) {
|
||||
// console.log('WebSocket 断开连接', e)
|
||||
// },
|
||||
// // 连接建立之后执行send方法发送数据
|
||||
// websocketOnOpen() {
|
||||
// console.log('socket连接成功')
|
||||
// this.websocket.onmessage()
|
||||
// },
|
||||
// // 连接建立失败重连
|
||||
// websocketOnError(e) {
|
||||
// console.log('11111', e)
|
||||
// this.initWebSocket()
|
||||
// },
|
||||
// // 数据接收
|
||||
// websocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
// this.wsData = 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
|
||||
// // {
|
||||
// // type: 'bar',
|
||||
// // data: ele.useQuantity,
|
||||
// // barWidth: 6
|
||||
|
||||
// // }
|
||||
// )
|
||||
// })
|
||||
// this.EnergyMonitoringList = EnergyDataList
|
||||
// console.log(EnergyDataList)
|
||||
// // console.log(this.EnergyMonitoringNameList)
|
||||
// // console.log(this.EnergyMonitoringList)
|
||||
// // this.$nextTick(() => {
|
||||
// this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
||||
// // })
|
||||
// }
|
||||
// },
|
||||
// // 数据发送
|
||||
// websocketSend() {
|
||||
// this.websocket.send('11111')
|
||||
// },
|
||||
// // 关闭
|
||||
// websocketClose(e) {
|
||||
// console.log('WebSocket 断开连接', e)
|
||||
// },
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2023-12-27 18:28:45
|
||||
* @LastEditTime: 2023-12-29 16:18:17
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -138,7 +138,7 @@ export default {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
width: 'auto',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2023-12-27 19:47:27
|
||||
* @LastEditTime: 2023-12-29 16:28:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -93,54 +93,50 @@ export default {
|
||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||
// console.log(1)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
let series = [{
|
||||
name: '成品面积',
|
||||
let series = [
|
||||
{
|
||||
// 辅助系列
|
||||
name: '良品',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
// label: {
|
||||
// show: true
|
||||
// silent: true,
|
||||
// itemStyle: {
|
||||
color: '#0fdedb',
|
||||
// },
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: passRateList,
|
||||
itemStyle: {
|
||||
normal: { color: '#2359ec' }
|
||||
}
|
||||
barWidth: 10,
|
||||
data: passRateList
|
||||
},
|
||||
{
|
||||
name: '废片面积',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
// label: {
|
||||
// show: true
|
||||
// },
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
barWidth: 12,
|
||||
name: '废品',
|
||||
data: wasteList,
|
||||
itemStyle: {
|
||||
normal: { color: '#745fe4' }
|
||||
barWidth: 10,
|
||||
// barWidth: 15,
|
||||
// label: {
|
||||
// position: [10, 10],
|
||||
// normal: {
|
||||
// position: [800, -24],
|
||||
// show: true,
|
||||
// textStyle: {
|
||||
// color: '#2359ec',
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
}
|
||||
},]
|
||||
]
|
||||
// for (i = 0; i < 5; i++) {
|
||||
// series.push({
|
||||
|
||||
// })
|
||||
// }
|
||||
const yAxisDataLeft = topNameList;
|
||||
// const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
|
||||
const yAxisDataRight = nameWasteList
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
// legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
@ -149,73 +145,38 @@ export default {
|
||||
height: 'auto',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
data: yAxisDataLeft,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 12,
|
||||
align: 'left',
|
||||
},
|
||||
formatter: '{value}\n{a|占位}\n{a|占位}',
|
||||
rich: {
|
||||
a: {
|
||||
color: 'transparent',
|
||||
lineHeight: 24,
|
||||
}
|
||||
padding: [0, 0, 15, -5]
|
||||
}
|
||||
},
|
||||
//offset: 30,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
data: topNameList
|
||||
},
|
||||
{
|
||||
inverse: false,
|
||||
data: yAxisDataRight,
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
align: 'right',
|
||||
},
|
||||
formatter: '{value}\n{a|占位}\n{a|占位}',
|
||||
rich: {
|
||||
a: {
|
||||
color: 'transparent',
|
||||
lineHeight: 24,
|
||||
fontFamily: 'digital'
|
||||
}
|
||||
}
|
||||
},
|
||||
offset: 0,
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
@ -224,10 +185,29 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 12,
|
||||
align: 'right',
|
||||
padding: [0, 0, 15, -5]
|
||||
}
|
||||
},
|
||||
data: nameWasteList
|
||||
}
|
||||
],
|
||||
series: series
|
||||
xAxis: {
|
||||
// max: 120,
|
||||
show: false,
|
||||
},
|
||||
series:series
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-28 10:22:06
|
||||
* @LastEditTime: 2023-12-29 15:15:50
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -557,6 +557,7 @@ export default {
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
this.getTimes()
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
@ -597,14 +598,14 @@ export default {
|
||||
'get',
|
||||
this.queryParams
|
||||
).then((res) => {
|
||||
console.log('11111', res);
|
||||
// console.log('11111', res);
|
||||
this.productLineList = res.data
|
||||
})
|
||||
this.$axios.get(
|
||||
'base/quality-inspection-record/dayStatistics',
|
||||
'get',
|
||||
).then((res) => {
|
||||
console.log('11111', res);
|
||||
// console.log('11111', res);
|
||||
this.qualityMonthList = res.data
|
||||
})
|
||||
},
|
||||
@ -639,17 +640,6 @@ export default {
|
||||
const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
console.log(date);
|
||||
const SJGWsUrl = `ws://192.168.0.33:48082/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
|
||||
// const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111'
|
||||
// 实例化 WebSocket
|
||||
this.websocket = new WebSocket(wsUrl)
|
||||
@ -663,6 +653,26 @@ export default {
|
||||
this.websocket.onclose = this.websocketClose
|
||||
}
|
||||
},
|
||||
SJGInitWebSocket() {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
alert('您的浏览器不支持WebSocket')
|
||||
} else {
|
||||
// const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
// console.log(date);
|
||||
const SJGWsUrl = `ws://192.168.0.33:48082/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);
|
||||
@ -671,16 +681,16 @@ export default {
|
||||
// 连接建立失败重连
|
||||
SJGWebsocketOnError(e) {
|
||||
// console.log('11111', e)
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
},
|
||||
// 数据接收
|
||||
SJGWebsocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
this.wsData = JSON.parse(e.data)
|
||||
this.SJGWsData = JSON.parse(e.data)
|
||||
// console.log(this.wsData.detData);
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.wsData.type === 'order') {
|
||||
this.orderList = this.wsData.detData.map((ele, index) => {
|
||||
if (this.SJGWsData.type === 'order') {
|
||||
this.orderList = this.SJGWsData.detData.map((ele, index) => {
|
||||
if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
@ -690,8 +700,8 @@ export default {
|
||||
}
|
||||
});
|
||||
console.log(this.orderList)
|
||||
} else if (this.wsData.type === 'equipment') {
|
||||
this.equipmentList = this.wsData.detData.map((ele, index) => {
|
||||
} else if (this.SJGWsData.type === 'equipment') {
|
||||
this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
@ -702,16 +712,16 @@ export default {
|
||||
}
|
||||
// }
|
||||
});
|
||||
// console.log(this.orderList)
|
||||
} else if (this.wsData.type === 'productline') {
|
||||
console.log(this.wsData.detData);
|
||||
// console.log(SJGWsData.orderList)
|
||||
} else if (this.SJGWsData.type === 'productline') {
|
||||
// console.log(this.wsData.detData);
|
||||
let nameList = []
|
||||
let passRateList = []
|
||||
let outputNumList = []
|
||||
|
||||
// console.log('2222222222', this.productLineList);
|
||||
this.productLineList.forEach((item) => {
|
||||
this.wsData.detData.forEach((ele) => {
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
if (item.id == ele.productionLineId) {
|
||||
nameList.push(item.name)
|
||||
}
|
||||
@ -720,11 +730,11 @@ export default {
|
||||
console.log(Array.from(new Set(nameList)))
|
||||
// progressRateList = EnergyNameList
|
||||
// let EnergyDataList = []
|
||||
this.wsData.detData.forEach((ele) => {
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
passRateList.push(ele.passRate *100
|
||||
)
|
||||
})
|
||||
this.wsData.detData.forEach((ele) => {
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
outputNumList.push(ele.outputNum
|
||||
)
|
||||
})
|
||||
|
||||
@ -116,6 +116,9 @@ export default {
|
||||
sidebarStatus() {
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
},
|
||||
gasChartMsg() {
|
||||
return this.$store.state.websocket.gasInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sidebarStatus(val) {
|
||||
@ -127,6 +130,14 @@ export default {
|
||||
this.chart.setOption(this.option);
|
||||
}, 500);
|
||||
},
|
||||
gasChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
// this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
// this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
|
||||
@ -7,9 +7,7 @@
|
||||
|
||||
<template>
|
||||
<header class="kiln-header">
|
||||
<h1>
|
||||
窑炉生产运行驾驶舱
|
||||
</h1>
|
||||
<h1>{{topTitle}}</h1>
|
||||
<!-- left: 312px; -->
|
||||
<div
|
||||
class="firm">
|
||||
@ -38,7 +36,9 @@ export default {
|
||||
name: 'KilnHeader',
|
||||
// components: { DateBtnGroup },
|
||||
props: {
|
||||
isFullScreen:false
|
||||
isFullScreen:false,
|
||||
topTitle: ''
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -21,8 +21,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
chartData: [],
|
||||
option: {
|
||||
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
@ -35,7 +36,7 @@ export default {
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 11234,
|
||||
text: 0,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
left: '49%',
|
||||
@ -47,11 +48,62 @@ export default {
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff7',
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
series: []
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
computed: {
|
||||
israChartMsg() {
|
||||
return this.$store.state.websocket.israKiln
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
israChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
updateChart() {
|
||||
console.log('update')
|
||||
let num = 0
|
||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||
num+=i.num
|
||||
})
|
||||
this.chart.setOption({
|
||||
title:{
|
||||
text: num,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
lineHeight: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series:[{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['45%', '65%'],
|
||||
@ -60,10 +112,6 @@ export default {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: ({ dataIndex, percent }) => {
|
||||
// console.log(
|
||||
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
|
||||
// percent
|
||||
// );
|
||||
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
||||
return `{${styleName}|${percent}%}`;
|
||||
},
|
||||
@ -98,141 +146,28 @@ export default {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 12,
|
||||
// borderColor: 'transparent',
|
||||
// borderWidth: 20
|
||||
borderRadius: 12
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 1048,
|
||||
name: '缺陷1',
|
||||
itemStyle: {
|
||||
color: {
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name:item.name,
|
||||
value: item.num,
|
||||
itemStyle:{
|
||||
color:{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#2760ff', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 80% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2760ff33', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 735,
|
||||
name: '缺陷2',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#518eec', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 80% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#518eec33', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 580,
|
||||
name: '缺陷3',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0ee8e4', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 80% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0ee8e433', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 484,
|
||||
name: '缺陷4',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#ddb523', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 70% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ddb52333', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
activated() {
|
||||
// this.initChart();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
global: false,
|
||||
colorStops:[
|
||||
{offset: 0,color: this.colors[index%4]},
|
||||
{offset: 1,color: this.colors[index%4]+'33'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}))}]
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -29,7 +29,9 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
29
src/views/databoard/deepProcessing/BottomTwo.vue
Normal file
29
src/views/databoard/deepProcessing/BottomTwo.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="bottom-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'BottomTwo',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/deepProcessing/OrderStatus.vue
Normal file
14
src/views/databoard/deepProcessing/OrderStatus.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
digndna
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
29
src/views/databoard/deepProcessing/TopThree.vue
Normal file
29
src/views/databoard/deepProcessing/TopThree.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="top-three"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'TopThree',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/deepProcessing/YieldRate.vue
Normal file
14
src/views/databoard/deepProcessing/YieldRate.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="本日生产良品率" size="small" style="">
|
||||
0000987
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
145
src/views/databoard/deepProcessing/index.vue
Normal file
145
src/views/databoard/deepProcessing/index.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
id='deepProcessingContainer'
|
||||
ref='deepProcessingContainer'
|
||||
class="deepProcessingBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 1">
|
||||
<TopThree />
|
||||
</div>
|
||||
<div class="middle-side" style="flex: 1">
|
||||
<BottomTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import TopThree from './TopThree';
|
||||
import BottomTwo from './BottomTwo';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'deepProcessingBoard',
|
||||
components: {
|
||||
KHeader,
|
||||
TopThree,
|
||||
BottomTwo
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroy() {
|
||||
this.destroy()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// closeWebsocket()
|
||||
// getDcsMsg()
|
||||
// getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
console.log('全屏')
|
||||
wx = rw / bw
|
||||
hx = rh / bh
|
||||
console.log(this.scaleNum)
|
||||
}else{
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.deepProcessingBoard {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@ -31,8 +31,8 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['电耗能', '天然气I', '天然气II']" />
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" />
|
||||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
|
||||
</div>
|
||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
||||
<GasChart />
|
||||
@ -65,7 +65,16 @@ export default {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
// 切换能源
|
||||
toggleType() {
|
||||
|
||||
},
|
||||
// 切换时间
|
||||
toggleDate() {
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
import MaterialCost from './MaterialCost.vue';
|
||||
import FanSequence from './FanSequence.vue';
|
||||
import IsraCheck from './IsraCheck.vue';
|
||||
import EnergeCost from './EnergeCost.vue';
|
||||
import EnergeCost from './EnergeCost';
|
||||
export default {
|
||||
name: 'LeftFour',
|
||||
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
|
||||
|
||||
@ -7,36 +7,66 @@
|
||||
|
||||
<template>
|
||||
<Container name="原料用量统计" size="middle" style="">
|
||||
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
|
||||
<div
|
||||
class="absolute"
|
||||
style="
|
||||
padding: 12px;
|
||||
flex:3;
|
||||
padding: 12px 12px 0 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
grid-auto-rows: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
">
|
||||
<ShadowRect v-for="n in 9" :key="n" :rounded="false">
|
||||
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
|
||||
<div
|
||||
class="material"
|
||||
style="
|
||||
flex: 1;
|
||||
padding: 12px 6px 20px;
|
||||
padding-bottom: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
|
||||
234
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||
{{item.materialUsed}}
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- 原料1/吨 -
|
||||
- {{item.materialName}} -
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<div style="flex:1;
|
||||
padding: 0 12px 12px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;">
|
||||
<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
|
||||
<div
|
||||
class="material"
|
||||
style="
|
||||
flex: 1;
|
||||
padding-bottom: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||
{{item.materialUsed}}
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- {{item.materialName}} -
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@ -50,7 +80,14 @@ export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
materialMsg1() {
|
||||
return this.$store.state.websocket.material.slice(0,9)
|
||||
},
|
||||
materialMsg2() {
|
||||
return this.$store.state.websocket.material.slice(9)
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div id='kilnContainer' style="width: 100%;height: 100%;">
|
||||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
id='kilnContainerB'
|
||||
id='kilnContainer'
|
||||
ref='kilnContainer'
|
||||
class="KilnDataBoard"
|
||||
style="
|
||||
@ -24,7 +24,7 @@
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange'/>
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
@ -45,7 +45,7 @@ import LeftFour from './LeftFour';
|
||||
import RightTwo from './RightTwo.vue';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg } from './../utils/dcs'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'KilnDataBoard',
|
||||
@ -82,6 +82,7 @@ export default {
|
||||
// this.getMes()
|
||||
// closeWebsocket()
|
||||
getDcsMsg()
|
||||
// getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
@ -112,13 +113,10 @@ export default {
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.kilnContainer)
|
||||
console.log('11111')
|
||||
// this.resetSize()
|
||||
console.log('2222')
|
||||
screenfull.toggle(this.$refs.kilnContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let kilnContainerBox = document.querySelector('#kilnContainerB')
|
||||
let kilnContainerBox = document.querySelector('#kilnContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(kilnContainerBox.style.width)
|
||||
@ -142,25 +140,6 @@ export default {
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
},
|
||||
// 获取ws
|
||||
getMes() {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('成功的回调函数, 接收到的data数据: ', data)
|
||||
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
console.log('++++++++')
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
console.log('++++++++')
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
100
src/views/databoard/utils/wsInterface.js
Normal file
100
src/views/databoard/utils/wsInterface.js
Normal file
@ -0,0 +1,100 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('dcs成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
case "GasInfo": {
|
||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 创建mes链接
|
||||
export const getMesMsg = () => {
|
||||
const sj = new Date().getTime()
|
||||
// ISRA
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "israKiln": {
|
||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
break;
|
||||
}
|
||||
// case "KilnInfo": {
|
||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
// 原料 MA
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "material": {
|
||||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
||||
break;
|
||||
}
|
||||
// case "KilnInfo": {
|
||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
29
src/views/databoard/wholePlant/LeftTwo.vue
Normal file
29
src/views/databoard/wholePlant/LeftTwo.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="left-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'LeftFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
29
src/views/databoard/wholePlant/MiddleTwo.vue
Normal file
29
src/views/databoard/wholePlant/MiddleTwo.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="middle-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'MiddleFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/wholePlant/OrderStatus.vue
Normal file
14
src/views/databoard/wholePlant/OrderStatus.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
digndna
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
29
src/views/databoard/wholePlant/RightTwo.vue
Normal file
29
src/views/databoard/wholePlant/RightTwo.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="right-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'RightFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/wholePlant/YieldRate.vue
Normal file
14
src/views/databoard/wholePlant/YieldRate.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="本日生产良品率" size="small" style="">
|
||||
0000987
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
150
src/views/databoard/wholePlant/index.vue
Normal file
150
src/views/databoard/wholePlant/index.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
id='wholePlantContainer'
|
||||
ref='wholePlantContainer'
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 1">
|
||||
<LeftTwo />
|
||||
</div>
|
||||
<div class="middle-side" style="flex: 1">
|
||||
<MiddleTwo />
|
||||
</div>
|
||||
<div class="right-side" style="flex: 1">
|
||||
<RightTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import LeftTwo from './LeftTwo';
|
||||
import MiddleTwo from './MiddleTwo';
|
||||
import RightTwo from './RightTwo';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'wholePlantBoard',
|
||||
components: {
|
||||
KHeader,
|
||||
LeftTwo,
|
||||
MiddleTwo,
|
||||
RightTwo
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroy() {
|
||||
this.destroy()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// closeWebsocket()
|
||||
// getDcsMsg()
|
||||
// getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
console.log('全屏')
|
||||
wx = rw / bw
|
||||
hx = rh / bh
|
||||
console.log(this.scaleNum)
|
||||
}else{
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user