From 6ef1d50911a8a9be49465c8e932804a75d159954 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 11 May 2023 16:05:55 +0800 Subject: [PATCH] update --- src/components/boxes/FanRuntime.vue | 4 +- src/components/boxes/HistoryTemp.vue | 2 +- src/components/boxes/TopTemp.vue | 15 ++- src/components/charts/BarChart.vue | 1 + src/components/charts/LineChart.vue | 132 +++++++++++++++------------ src/components/icons/clockSvg.vue | 14 ++- src/components/icons/fireSvg.vue | 14 ++- src/components/icons/sandSvg.vue | 14 ++- src/components/icons/switchSvg.vue | 14 ++- src/components/icons/tempSvg.vue | 13 ++- src/components/layout/Main.vue | 34 ++++++- src/store/index.js | 78 ++++++++++++++++ src/utils/wsClass.js | 22 ++++- 13 files changed, 273 insertions(+), 84 deletions(-) diff --git a/src/components/boxes/FanRuntime.vue b/src/components/boxes/FanRuntime.vue index 70d0be6..6ba8d48 100644 --- a/src/components/boxes/FanRuntime.vue +++ b/src/components/boxes/FanRuntime.vue @@ -6,7 +6,7 @@ - + @@ -38,7 +38,7 @@
序号 设备名称 运行频率
- + diff --git a/src/components/boxes/HistoryTemp.vue b/src/components/boxes/HistoryTemp.vue index e8c46fc..15b2059 100644 --- a/src/components/boxes/HistoryTemp.vue +++ b/src/components/boxes/HistoryTemp.vue @@ -37,6 +37,6 @@ h3 { font-size: adjust(10px); letter-spacing: adjust(1px); color: #52fff8; - margin: 8px 0; + margin: adjust(12px) 0; } diff --git a/src/components/boxes/TopTemp.vue b/src/components/boxes/TopTemp.vue index b880750..96e30f7 100644 --- a/src/components/boxes/TopTemp.vue +++ b/src/components/boxes/TopTemp.vue @@ -3,9 +3,9 @@
- +
- +
@@ -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 { diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue index f417b6f..312d5ba 100644 --- a/src/components/charts/BarChart.vue +++ b/src/components/charts/BarChart.vue @@ -76,6 +76,7 @@ export default { color: "#ffffff", fontSize: adjust(7), lineHeight: adjust(1), + margin: adjust(8) }, }, yAxis: { diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue index 3238183..764c203 100644 --- a/src/components/charts/LineChart.vue +++ b/src/components/charts/LineChart.vue @@ -1,17 +1,31 @@ @@ -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; } diff --git a/src/components/icons/clockSvg.vue b/src/components/icons/clockSvg.vue index 577ce4e..bf4a6cf 100644 --- a/src/components/icons/clockSvg.vue +++ b/src/components/icons/clockSvg.vue @@ -1,7 +1,7 @@ + + diff --git a/src/components/icons/fireSvg.vue b/src/components/icons/fireSvg.vue index 7f35084..a4f9542 100644 --- a/src/components/icons/fireSvg.vue +++ b/src/components/icons/fireSvg.vue @@ -1,7 +1,7 @@ + + diff --git a/src/components/icons/sandSvg.vue b/src/components/icons/sandSvg.vue index 952c77a..f2218a4 100644 --- a/src/components/icons/sandSvg.vue +++ b/src/components/icons/sandSvg.vue @@ -1,7 +1,7 @@ + + diff --git a/src/components/icons/switchSvg.vue b/src/components/icons/switchSvg.vue index c26e6cd..0a21367 100644 --- a/src/components/icons/switchSvg.vue +++ b/src/components/icons/switchSvg.vue @@ -1,7 +1,7 @@ + + diff --git a/src/components/icons/tempSvg.vue b/src/components/icons/tempSvg.vue index c4eac1a..903bf58 100644 --- a/src/components/icons/tempSvg.vue +++ b/src/components/icons/tempSvg.vue @@ -1,7 +1,7 @@ + diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue index a769e77..a0ca4c7 100644 --- a/src/components/layout/Main.vue +++ b/src/components/layout/Main.vue @@ -47,7 +47,7 @@
- +
@@ -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"]), + }, }; diff --git a/src/store/index.js b/src/store/index.js index ceffa8e..43bce86 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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: { }, diff --git a/src/utils/wsClass.js b/src/utils/wsClass.js index 4248711..19eca7f 100644 --- a/src/utils/wsClass.js +++ b/src/utils/wsClass.js @@ -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 }
序号 设备名称 运行频率