@@ -6,7 +6,7 @@ | |||
<table class="table-1 flex-1 align-start"> | |||
<thead> | |||
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> --> | |||
<tr> | |||
<tr class="t-row"> | |||
<th>序号</th> | |||
<th>设备名称</th> | |||
<th>运行频率</th> | |||
@@ -38,7 +38,7 @@ | |||
<div class="vertical-line"></div> | |||
<table class="table-2 flex-1 align-start"> | |||
<thead> | |||
<tr> | |||
<tr class="t-row"> | |||
<th>序号</th> | |||
<th>设备名称</th> | |||
<th>运行频率</th> | |||
@@ -37,6 +37,6 @@ h3 { | |||
font-size: adjust(10px); | |||
letter-spacing: adjust(1px); | |||
color: #52fff8; | |||
margin: 8px 0; | |||
margin: adjust(12px) 0; | |||
} | |||
</style> |
@@ -3,9 +3,9 @@ | |||
<Container usage="Charts"> | |||
<SubContainer title="窑顶温度" icon="oil" padding="34px"> | |||
<div class="tables flex" style="height: 100%"> | |||
<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" /> | |||
<LineChart key="1" id="line-chart-5" class="flex-1" :legend="Object.keys(chartOne)" :series="chartOne" /> | |||
<div class="vertical-line"></div> | |||
<LineChart key="2" id="line-chart-6" class="flex-1" :config="chartConfig" /> | |||
<LineChart key="2" id="line-chart-6" class="flex-1" :legend="Object.keys(chartTwo)" :series="chartTwo" /> | |||
</div> | |||
</SubContainer> | |||
</Container> | |||
@@ -18,7 +18,16 @@ import SubContainer from "../layout/SubContainer.vue"; | |||
export default { | |||
name: "TopTemp", | |||
props: {}, | |||
props: { | |||
chartOne: { | |||
type: Object, | |||
default: () => ({}) | |||
}, | |||
chartTwo: { | |||
type: Object, | |||
default: () => ({}) | |||
} | |||
}, | |||
components: { Container, SubContainer, LineChart }, | |||
data() { | |||
return { | |||
@@ -76,6 +76,7 @@ export default { | |||
color: "#ffffff", | |||
fontSize: adjust(7), | |||
lineHeight: adjust(1), | |||
margin: adjust(8) | |||
}, | |||
}, | |||
yAxis: { | |||
@@ -1,17 +1,31 @@ | |||
<template> | |||
<!-- line chart --> | |||
<div class="line-chart__wrapper"> | |||
<div class="line-chart__custom-legend flex"> | |||
<span>产线1 - 产线5</span> | |||
<div class="line-chart__wrapper" style="overflow: hidden;"> | |||
<div class="line-chart__custom-legend flex" v-if="legend.length"> | |||
<!-- <span>产线1 - 产线5</span> --> | |||
<ul style="" class="flex"> | |||
<li>产线1</li> | |||
<li>产线2</li> | |||
<li>产线3</li> | |||
<li>产线4</li> | |||
<li>产线5</li> | |||
<li v-for="(v, i) in legend" :key="i">{{ v }}</li> | |||
</ul> | |||
</div> | |||
<div :id="id" style="width: 100%; height: 100%"></div> | |||
<div | |||
v-show="legend.length === 0" | |||
style=" | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
background: #eee0; | |||
width: 100%; | |||
height: 100%; | |||
display: grid; | |||
place-items: center; | |||
font-size: 24px; | |||
color: #eee8; | |||
user-select: none; | |||
" | |||
> | |||
无数据 | |||
</div> | |||
</div> | |||
</template> | |||
@@ -56,6 +70,14 @@ export default { | |||
title: { text: "default chart" }, | |||
}), | |||
}, | |||
legend: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
series: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
}, | |||
data() { | |||
return { | |||
@@ -66,7 +88,7 @@ export default { | |||
"#F31868", | |||
"#30E89A", | |||
"#2760FF", | |||
"#2f0fff", | |||
"#723fff", | |||
"#ee3fff", | |||
"#800f77", | |||
"#f77", | |||
@@ -84,30 +106,18 @@ export default { | |||
if (!this.chart) | |||
this.chart = echarts.init(document.getElementById(this.id)); | |||
this.chart.setOption({ | |||
// title: { | |||
// text: "ECharts 入门示例", | |||
// }, | |||
grid: { | |||
top: adjust(32), | |||
left: adjust(32), | |||
bottom: adjust(24), | |||
right: adjust(12), | |||
}, | |||
// tooltip: { | |||
// trigger: "axis", | |||
// axisPointer: { | |||
// lineStyle: { | |||
// color: "#eee3", | |||
// }, | |||
// }, | |||
// }, | |||
xAxis: { | |||
data: Array(31) | |||
data: Array(24) | |||
.fill(1) | |||
.map((_, index) => index + 1), | |||
axisLine: { | |||
lineStyle: { | |||
// width: 1, | |||
color: "#5982b2a0", | |||
}, | |||
}, | |||
@@ -118,6 +128,7 @@ export default { | |||
color: "#ffffff", | |||
fontSize: adjust(6), | |||
lineHeight: adjust(1), | |||
margin: adjust(8), | |||
}, | |||
}, | |||
yAxis: { | |||
@@ -126,9 +137,6 @@ export default { | |||
nameTextStyle: { | |||
color: "#fff9", | |||
fontSize: adjust(6), | |||
// lineHeight: 6, | |||
// height: 6, | |||
// padding: 0, | |||
align: "right", | |||
}, | |||
axisLine: { | |||
@@ -154,10 +162,34 @@ export default { | |||
// data: [100, 200, 300, 400, 500], | |||
}, | |||
color: this.colors, | |||
series: Array(5) | |||
// series: Array(5) | |||
// .fill(1) | |||
// .map((_, index) => ({ | |||
// name: Math.random(), | |||
// type: "line", | |||
// symbol: "circle", | |||
// symbolSize: adjust(3), | |||
// lineStyle: { | |||
// width: adjust(1), | |||
// }, | |||
// areaStyle: { | |||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
// { offset: 0, color: this.colors[index] + "33" }, | |||
// { offset: 1, color: "transparent" }, | |||
// ]), | |||
// }, | |||
// data: Array(31) | |||
// .fill(1) | |||
// .map(() => { | |||
// let v = Math.floor(Math.random() * 5000); | |||
// while (v < 3000) v = Math.floor(Math.random() * 5000); | |||
// return v; | |||
// }), | |||
// })), | |||
series: Array(this.legend) | |||
.fill(1) | |||
.map((_, index) => ({ | |||
name: Math.random(), | |||
.map((lgd, index) => ({ | |||
name: lgd, | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: adjust(3), | |||
@@ -165,35 +197,12 @@ export default { | |||
width: adjust(1), | |||
}, | |||
areaStyle: { | |||
// color: { | |||
// type: "linear", | |||
// x: 0, | |||
// y: 0, | |||
// x2: 0, | |||
// y2: 1, | |||
// colorStops: [ | |||
// { | |||
// offset: 0, | |||
// color: this.colors[index]+'66', | |||
// }, | |||
// // { offset: 0.3, color: this.colors[index]+'aa' }, | |||
// // { offset: 0.35, color: this.colors[index]+'77' }, | |||
// // { offset: 1, color: this.colors[index]+'00' }, | |||
// { offset: .5, color: 'transparent' }, | |||
// ], | |||
// }, | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: this.colors[index] + "33" }, | |||
{ offset: 1, color: "transparent" }, | |||
]), | |||
}, | |||
data: Array(31) | |||
.fill(1) | |||
.map(() => { | |||
let v = Math.floor(Math.random() * 5000); | |||
while (v < 3000) v = Math.floor(Math.random() * 5000); | |||
return v; | |||
}), | |||
data: this.series[this.legend], | |||
})), | |||
}); | |||
}, | |||
@@ -253,30 +262,33 @@ li:nth-child(1)::before { | |||
background: #18c7f3; | |||
} | |||
li:nth-child(2)::before { | |||
background: #f31868; | |||
background: #ffd160; | |||
} | |||
li:nth-child(3)::before { | |||
background: #30e89a; | |||
background: #f31868; | |||
} | |||
li:nth-child(4)::before { | |||
background: #2760ff; | |||
background: #30e89a; | |||
} | |||
li:nth-child(5)::before { | |||
background: #ee3fff; | |||
background: #2760ff; | |||
} | |||
li:nth-child(6)::before { | |||
background: #2f0fff; | |||
background: #723fff; | |||
} | |||
li:nth-child(7)::before { | |||
background: #800f77; | |||
background: #ee3fff; | |||
} | |||
li:nth-child(8)::before { | |||
background: #f77; | |||
background: #800f77; | |||
} | |||
li:nth-child(9)::before { | |||
background: #19f; | |||
background: #f77; | |||
} | |||
li:nth-child(10)::before { | |||
background: #19f; | |||
} | |||
li:nth-child(11)::before { | |||
background: #98f; | |||
} | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<svg | |||
width="adjust(64px)" | |||
height="adjust(64px)" | |||
:width="adjust('64px')" | |||
:height="adjust('64px')" | |||
viewBox="0 0 95 96" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -78,3 +78,13 @@ | |||
</g> | |||
</svg> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
adjust(v) { | |||
return +(v.slice(0, -2)) * 2 + 'px' ; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<svg | |||
width="adjust(64px)" | |||
height="adjust(64px)" | |||
:width="adjust('64px')" | |||
:height="adjust('64px')" | |||
viewBox="0 0 94 96" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -78,3 +78,13 @@ | |||
</g> | |||
</svg> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
adjust(v) { | |||
return +(v.slice(0, -2)) * 2 + 'px' ; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<svg | |||
width="adjust(64px)" | |||
height="adjust(64px)" | |||
:width="adjust('64px')" | |||
:height="adjust('64px')" | |||
viewBox="0 0 95 96" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -78,3 +78,13 @@ | |||
</g> | |||
</svg> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
adjust(v) { | |||
return +(v.slice(0, -2)) * 2 + 'px' ; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<svg | |||
width="adjust(64px)" | |||
height="adjust(64px)" | |||
:width="adjust('64px')" | |||
:height="adjust('64px')" | |||
viewBox="0 0 122 122" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -97,3 +97,13 @@ | |||
</g> | |||
</svg> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
adjust(v) { | |||
return +(v.slice(0, -2)) * 2 + 'px' ; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<svg | |||
width="adjust(64px)" | |||
height="adjust(64px)" | |||
:width="adjust('64px')" | |||
:height="adjust('64px')" | |||
viewBox="0 0 94 96" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -78,3 +78,12 @@ | |||
</g> | |||
</svg> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
adjust(v) { | |||
return +(v.slice(0, -2)) * 2 + 'px' ; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -47,7 +47,7 @@ | |||
<GasFlow /> | |||
</div> | |||
<div class="absolute left top-temp"> | |||
<TopTemp /> | |||
<TopTemp :chart-one="kilnTop1" :chart-two="kilnTop2" /> | |||
</div> | |||
<div class="absolute left bottom-temp"> | |||
<BottomTemp /> | |||
@@ -77,12 +77,10 @@ import OutWater from "../boxes/OutWater.vue"; | |||
import FanRuntime from "../boxes/FanRuntime.vue"; | |||
import AreaOne from "../isolate-area-1/Area.vue"; | |||
// import Container from './Container.vue' | |||
import { mapMutations, mapState } from "vuex"; | |||
import WsClient from "../../utils/wsClass"; | |||
const wsc = new WsClient(); | |||
wsc.registerListeners(); | |||
export default { | |||
name: "Main", | |||
components: { | |||
@@ -102,6 +100,34 @@ export default { | |||
data() { | |||
return {}; | |||
}, | |||
computed: mapState([ | |||
"kilnPressure", | |||
"oilTable1", | |||
"oilTable2", | |||
"gasTable1", | |||
"gasTable2", | |||
"kilnTop1", | |||
"kilnTop2", | |||
"kilnBtm1", | |||
"kilnBtm2", | |||
"xiCao1", | |||
"xiCao2", | |||
"kilnWaterIn", | |||
"kilnWaterOut", | |||
]), | |||
mounted() { | |||
const wsc = new WsClient(this); | |||
wsc.registerListeners(); | |||
}, | |||
// watch: { | |||
// // works | |||
// 'kilnTop1': val => { | |||
// console.log('val', val) | |||
// } | |||
// }, | |||
methods: { | |||
...mapMutations(["update"]), | |||
}, | |||
}; | |||
</script> | |||
@@ -5,10 +5,88 @@ Vue.use(Vuex) | |||
export default new Vuex.Store({ | |||
state: { | |||
kilnPressure: 999, | |||
oilTable1: {}, | |||
oilTable2: {}, | |||
gasTable1: {}, | |||
gasTable2: {}, | |||
kilnTop1: {}, | |||
kilnTop2: {}, | |||
kilnBtm1: {}, | |||
kilnBtm2: {}, | |||
xiCao1: {}, | |||
xiCao2: {}, | |||
kilnWaterIn: {}, | |||
kilnWaterOut: {} | |||
}, | |||
getters: { | |||
}, | |||
mutations: { | |||
update(state, payload) { | |||
switch (payload.target) { | |||
case 'oil-1': { | |||
state.oilTable1 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'oil-2': { | |||
state.oilTable2 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'gas-1': { | |||
state.gasTable1 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'gas-2': { | |||
state.gasTable2 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'kiln-top-1': { | |||
state.kilnTop1 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'kiln-top-2': { | |||
state.kilnTop2 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'kiln-btm-1': { | |||
state.kilnBtm1 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'kiln-btm-2': { | |||
state.kilnBtm2 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'kiln-water-in': { | |||
state.kilnWaterIn = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'kiln-water-out': { | |||
state.kilnWaterOut = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'xicao-1': { | |||
state.xiCao1 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
case 'xicao-2': { | |||
state.xiCao2 = payload.data | |||
console.log('更换' + payload.target + '的数据') | |||
break | |||
} | |||
} | |||
} | |||
}, | |||
actions: { | |||
}, | |||
@@ -10,8 +10,9 @@ function handleData(e) { | |||
try { | |||
const latestData = JSON.parse(e.data) | |||
console.log('处理数据: ', latestData) | |||
for ([value, key] in Object.entries(latestData)) { | |||
console.log('k, v', key, value) | |||
for (const [key, value] of Object.entries(latestData)) { | |||
console.log('kkk', key, WsClient.tableMap[key]) | |||
this.update({ target: WsClient.tableMap[key], data: value }) | |||
} | |||
} catch (err) { | |||
console.log(e) | |||
@@ -36,11 +37,24 @@ export default class WsClient { | |||
static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1' | |||
static tableMap = { | |||
// 窑顶温度 | |||
'kilnTempTopT1': 'kiln-top-1', | |||
'kilnTempTopT2': 'kiln-top-2', | |||
'kilnTempBottomT1': 'kiln-btm-1', | |||
'kilnTempBottomT2': 'kiln-btm-2', | |||
'kilnTempWaterT1': 'kiln-water-in', | |||
'kilnTempWaterT2': 'kiln-water-out', | |||
'kilnTempTinbathT1': 'kiln-water-in', | |||
'kilnTempTinbathT2': 'kiln-water-out', | |||
'kilnGasT1': 'gas-1', | |||
'kilnGasT2': 'gas-2', | |||
'kilnOilT1': 'oil-1', | |||
'kilnOilT2': 'oil-2', | |||
} | |||
static socket = null | |||
constructor() { | |||
constructor(vm) { | |||
WsClient.socket = WsClient.createSocket() | |||
this.vueInstance = vm | |||
} | |||
closeSocket() { | |||
@@ -53,7 +67,7 @@ export default class WsClient { | |||
WsClient.createSocket() | |||
} | |||
if (!WsClient.socket.onopen) WsClient.socket.onopen = handleOpen | |||
if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData | |||
if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData.bind(this.vueInstance) | |||
if (!WsClient.socket.onerror) WsClient.socket.onerror = handleError | |||
if (!WsClient.socket.onclose) WsClient.socket.onclose = handleClose | |||
} | |||