This commit is contained in:
lb 2023-05-11 16:05:55 +08:00
parent bdccab85c9
commit 6ef1d50911
13 changed files with 273 additions and 84 deletions

View File

@ -6,7 +6,7 @@
<table class="table-1 flex-1 align-start"> <table class="table-1 flex-1 align-start">
<thead> <thead>
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> --> <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
<tr> <tr class="t-row">
<th>序号</th> <th>序号</th>
<th>设备名称</th> <th>设备名称</th>
<th>运行频率</th> <th>运行频率</th>
@ -38,7 +38,7 @@
<div class="vertical-line"></div> <div class="vertical-line"></div>
<table class="table-2 flex-1 align-start"> <table class="table-2 flex-1 align-start">
<thead> <thead>
<tr> <tr class="t-row">
<th>序号</th> <th>序号</th>
<th>设备名称</th> <th>设备名称</th>
<th>运行频率</th> <th>运行频率</th>

View File

@ -37,6 +37,6 @@ h3 {
font-size: adjust(10px); font-size: adjust(10px);
letter-spacing: adjust(1px); letter-spacing: adjust(1px);
color: #52fff8; color: #52fff8;
margin: 8px 0; margin: adjust(12px) 0;
} }
</style> </style>

View File

@ -3,9 +3,9 @@
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="窑顶温度" icon="oil" padding="34px"> <SubContainer title="窑顶温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%"> <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> <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> </div>
</SubContainer> </SubContainer>
</Container> </Container>
@ -18,7 +18,16 @@ import SubContainer from "../layout/SubContainer.vue";
export default { export default {
name: "TopTemp", name: "TopTemp",
props: {}, props: {
chartOne: {
type: Object,
default: () => ({})
},
chartTwo: {
type: Object,
default: () => ({})
}
},
components: { Container, SubContainer, LineChart }, components: { Container, SubContainer, LineChart },
data() { data() {
return { return {

View File

@ -76,6 +76,7 @@ export default {
color: "#ffffff", color: "#ffffff",
fontSize: adjust(7), fontSize: adjust(7),
lineHeight: adjust(1), lineHeight: adjust(1),
margin: adjust(8)
}, },
}, },
yAxis: { yAxis: {

View File

@ -1,17 +1,31 @@
<template> <template>
<!-- line chart --> <!-- line chart -->
<div class="line-chart__wrapper"> <div class="line-chart__wrapper" style="overflow: hidden;">
<div class="line-chart__custom-legend flex"> <div class="line-chart__custom-legend flex" v-if="legend.length">
<span>产线1 - 产线5</span> <!-- <span>产线1 - 产线5</span> -->
<ul style="" class="flex"> <ul style="" class="flex">
<li>产线1</li> <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
<li>产线2</li>
<li>产线3</li>
<li>产线4</li>
<li>产线5</li>
</ul> </ul>
</div> </div>
<div :id="id" style="width: 100%; height: 100%"></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> </div>
</template> </template>
@ -56,6 +70,14 @@ export default {
title: { text: "default chart" }, title: { text: "default chart" },
}), }),
}, },
legend: {
type: Array,
default: () => [],
},
series: {
type: Object,
default: () => ({}),
},
}, },
data() { data() {
return { return {
@ -66,7 +88,7 @@ export default {
"#F31868", "#F31868",
"#30E89A", "#30E89A",
"#2760FF", "#2760FF",
"#2f0fff", "#723fff",
"#ee3fff", "#ee3fff",
"#800f77", "#800f77",
"#f77", "#f77",
@ -84,30 +106,18 @@ export default {
if (!this.chart) if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({ this.chart.setOption({
// title: {
// text: "ECharts ",
// },
grid: { grid: {
top: adjust(32), top: adjust(32),
left: adjust(32), left: adjust(32),
bottom: adjust(24), bottom: adjust(24),
right: adjust(12), right: adjust(12),
}, },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// lineStyle: {
// color: "#eee3",
// },
// },
// },
xAxis: { xAxis: {
data: Array(31) data: Array(24)
.fill(1) .fill(1)
.map((_, index) => index + 1), .map((_, index) => index + 1),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// width: 1,
color: "#5982b2a0", color: "#5982b2a0",
}, },
}, },
@ -118,6 +128,7 @@ export default {
color: "#ffffff", color: "#ffffff",
fontSize: adjust(6), fontSize: adjust(6),
lineHeight: adjust(1), lineHeight: adjust(1),
margin: adjust(8),
}, },
}, },
yAxis: { yAxis: {
@ -126,9 +137,6 @@ export default {
nameTextStyle: { nameTextStyle: {
color: "#fff9", color: "#fff9",
fontSize: adjust(6), fontSize: adjust(6),
// lineHeight: 6,
// height: 6,
// padding: 0,
align: "right", align: "right",
}, },
axisLine: { axisLine: {
@ -154,10 +162,34 @@ export default {
// data: [100, 200, 300, 400, 500], // data: [100, 200, 300, 400, 500],
}, },
color: this.colors, 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) .fill(1)
.map((_, index) => ({ .map((lgd, index) => ({
name: Math.random(), name: lgd,
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: adjust(3), symbolSize: adjust(3),
@ -165,35 +197,12 @@ export default {
width: adjust(1), width: adjust(1),
}, },
areaStyle: { 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, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.colors[index] + "33" }, { offset: 0, color: this.colors[index] + "33" },
{ offset: 1, color: "transparent" }, { offset: 1, color: "transparent" },
]), ]),
}, },
data: Array(31) data: this.series[this.legend],
.fill(1)
.map(() => {
let v = Math.floor(Math.random() * 5000);
while (v < 3000) v = Math.floor(Math.random() * 5000);
return v;
}),
})), })),
}); });
}, },
@ -253,30 +262,33 @@ li:nth-child(1)::before {
background: #18c7f3; background: #18c7f3;
} }
li:nth-child(2)::before { li:nth-child(2)::before {
background: #f31868; background: #ffd160;
} }
li:nth-child(3)::before { li:nth-child(3)::before {
background: #30e89a; background: #f31868;
} }
li:nth-child(4)::before { li:nth-child(4)::before {
background: #2760ff; background: #30e89a;
} }
li:nth-child(5)::before { li:nth-child(5)::before {
background: #ee3fff; background: #2760ff;
} }
li:nth-child(6)::before { li:nth-child(6)::before {
background: #2f0fff; background: #723fff;
} }
li:nth-child(7)::before { li:nth-child(7)::before {
background: #800f77; background: #ee3fff;
} }
li:nth-child(8)::before { li:nth-child(8)::before {
background: #f77; background: #800f77;
} }
li:nth-child(9)::before { li:nth-child(9)::before {
background: #19f; background: #f77;
} }
li:nth-child(10)::before { li:nth-child(10)::before {
background: #19f;
}
li:nth-child(11)::before {
background: #98f; background: #98f;
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="adjust(64px)" :width="adjust('64px')"
height="adjust(64px)" :height="adjust('64px')"
viewBox="0 0 95 96" viewBox="0 0 95 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -78,3 +78,13 @@
</g> </g>
</svg> </svg>
</template> </template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="adjust(64px)" :width="adjust('64px')"
height="adjust(64px)" :height="adjust('64px')"
viewBox="0 0 94 96" viewBox="0 0 94 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -78,3 +78,13 @@
</g> </g>
</svg> </svg>
</template> </template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="adjust(64px)" :width="adjust('64px')"
height="adjust(64px)" :height="adjust('64px')"
viewBox="0 0 95 96" viewBox="0 0 95 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -78,3 +78,13 @@
</g> </g>
</svg> </svg>
</template> </template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="adjust(64px)" :width="adjust('64px')"
height="adjust(64px)" :height="adjust('64px')"
viewBox="0 0 122 122" viewBox="0 0 122 122"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -97,3 +97,13 @@
</g> </g>
</svg> </svg>
</template> </template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="adjust(64px)" :width="adjust('64px')"
height="adjust(64px)" :height="adjust('64px')"
viewBox="0 0 94 96" viewBox="0 0 94 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -78,3 +78,12 @@
</g> </g>
</svg> </svg>
</template> </template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

View File

@ -47,7 +47,7 @@
<GasFlow /> <GasFlow />
</div> </div>
<div class="absolute left top-temp"> <div class="absolute left top-temp">
<TopTemp /> <TopTemp :chart-one="kilnTop1" :chart-two="kilnTop2" />
</div> </div>
<div class="absolute left bottom-temp"> <div class="absolute left bottom-temp">
<BottomTemp /> <BottomTemp />
@ -77,12 +77,10 @@ import OutWater from "../boxes/OutWater.vue";
import FanRuntime from "../boxes/FanRuntime.vue"; import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue"; import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue' // import Container from './Container.vue'
import { mapMutations, mapState } from "vuex";
import WsClient from "../../utils/wsClass"; import WsClient from "../../utils/wsClass";
const wsc = new WsClient();
wsc.registerListeners();
export default { export default {
name: "Main", name: "Main",
components: { components: {
@ -102,6 +100,34 @@ export default {
data() { data() {
return {}; 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> </script>

View File

@ -5,10 +5,88 @@ Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
kilnPressure: 999,
oilTable1: {},
oilTable2: {},
gasTable1: {},
gasTable2: {},
kilnTop1: {},
kilnTop2: {},
kilnBtm1: {},
kilnBtm2: {},
xiCao1: {},
xiCao2: {},
kilnWaterIn: {},
kilnWaterOut: {}
}, },
getters: { getters: {
}, },
mutations: { 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: { actions: {
}, },

View File

@ -10,8 +10,9 @@ function handleData(e) {
try { try {
const latestData = JSON.parse(e.data) const latestData = JSON.parse(e.data)
console.log('处理数据: ', latestData) console.log('处理数据: ', latestData)
for ([value, key] in Object.entries(latestData)) { for (const [key, value] of Object.entries(latestData)) {
console.log('k, v', key, value) console.log('kkk', key, WsClient.tableMap[key])
this.update({ target: WsClient.tableMap[key], data: value })
} }
} catch (err) { } catch (err) {
console.log(e) console.log(e)
@ -36,11 +37,24 @@ export default class WsClient {
static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1' static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
static tableMap = { 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 static socket = null
constructor() { constructor(vm) {
WsClient.socket = WsClient.createSocket() WsClient.socket = WsClient.createSocket()
this.vueInstance = vm
} }
closeSocket() { closeSocket() {
@ -53,7 +67,7 @@ export default class WsClient {
WsClient.createSocket() WsClient.createSocket()
} }
if (!WsClient.socket.onopen) WsClient.socket.onopen = handleOpen 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.onerror) WsClient.socket.onerror = handleError
if (!WsClient.socket.onclose) WsClient.socket.onclose = handleClose if (!WsClient.socket.onclose) WsClient.socket.onclose = handleClose
} }