update
This commit is contained in:
lb
parent
bdccab85c9
commit
6ef1d50911
@ -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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user