From cacfdf53c2e25c47071ba9fed89c9751e833c048 Mon Sep 17 00:00:00 2001 From: lb Date: Tue, 12 Sep 2023 17:28:58 +0800 Subject: [PATCH] bugfix --- src/components/BottomBar/gasi/index.jsx | 11 +++-- .../BottomBar/gasii/gasChart/chart.config.js | 13 ++++-- .../BottomBar/gasii/gasChart/index.jsx | 2 +- .../CenterTopData/LeftBoxes/index.jsx | 44 +++++++++++++------ src/components/LeftBar/Kiln.jsx | 2 +- .../GoodRateChart/index.jsx | 2 +- .../EnergyCost/EnergyCostChart/index.jsx | 2 +- src/components/RightBar/EnergyCost/index.jsx | 6 +-- src/store/socket-data-provider.js | 6 +-- websocket/server.ts | 2 + 10 files changed, 59 insertions(+), 31 deletions(-) diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx index 23e0215..1233678 100644 --- a/src/components/BottomBar/gasi/index.jsx +++ b/src/components/BottomBar/gasi/index.jsx @@ -36,7 +36,7 @@ function GasI(props) { .map((_) => Array(7).fill(0)); // debug - console.log('助燃风 chart series data', hisState?.wind, seriesData); + // console.log('助燃风 chart series data', hisState?.wind, seriesData); options = { color: colors, grid: { top: 32, right: 12, bottom: 20, left: 48 }, @@ -60,7 +60,8 @@ function GasI(props) { axisLine: { lineStyle: { width: 1, - color: '#213259', + color: '#4561AE', + // color: '#213259', }, }, }, @@ -79,12 +80,14 @@ function GasI(props) { axisLine: { show: true, lineStyle: { - color: '#213259', + color: '#4561AE', + // color: '#213259', }, }, splitLine: { lineStyle: { - color: '#213259a0', + color: '#4561AEa0', + // color: '#213259a0', }, }, // interval: 10, diff --git a/src/components/BottomBar/gasii/gasChart/chart.config.js b/src/components/BottomBar/gasii/gasChart/chart.config.js index 00a670a..08dfdf2 100644 --- a/src/components/BottomBar/gasii/gasChart/chart.config.js +++ b/src/components/BottomBar/gasii/gasChart/chart.config.js @@ -50,7 +50,8 @@ export default function getOptions(seriesData, name) { axisLine: { lineStyle: { width: 1, - color: '#213259', + // color: '#213259', + color: '#4561AE', }, }, }, @@ -69,18 +70,22 @@ export default function getOptions(seriesData, name) { }, axisLine: { show: true, + // lineStyle: { + // color: '#213259', + // }, lineStyle: { - color: '#213259', + color: '#4561AE', }, }, splitLine: { lineStyle: { - color: '#213259a0', + // color: '#213259a0', + color: '#4561AEa0', }, }, }, series: seriesData.map((arr, index) => ({ - name: index ? index + 1 + '#' + name : '天然气总流量', + name: index !== 0 ? index + '#' + name : '天然气总流量', data: arr, type: 'line', areaStyle: { diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx index 2ab0b4c..3ba907b 100644 --- a/src/components/BottomBar/gasii/gasChart/index.jsx +++ b/src/components/BottomBar/gasii/gasChart/index.jsx @@ -18,7 +18,7 @@ function GasChart(props) { : Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0)); // debug - console.log('天然气 series data', dataName, hisState?.[dataName], seriesData); + // console.log('天然气 series data', dataName, hisState?.[dataName], seriesData); return (
diff --git a/src/components/CenterTopData/LeftBoxes/index.jsx b/src/components/CenterTopData/LeftBoxes/index.jsx index cdabaad..2ec0538 100644 --- a/src/components/CenterTopData/LeftBoxes/index.jsx +++ b/src/components/CenterTopData/LeftBoxes/index.jsx @@ -1,18 +1,21 @@ -import React, { useState, useContext, useEffect } from 'react'; +import React, { useState, useContext, useEffect, useMemo } from 'react'; import SocketContext from '../../../store/socket-data-provider'; import icon1 from '@/assets/CenterChart2icon1.svg'; import icon2 from '@/assets/CenterChart2icon2.svg'; import icon3 from '@/assets/CenterChart2icon3.svg'; -import icon4 from '@/assets/CenterChart2icon4.svg'; +// import icon4 from '@/assets/CenterChart2icon4.svg'; import cls from './leftbox.module.less'; const Chart2 = () => { - const ctx = useContext(SocketContext); - let [time, setTime] = useState([0, 0]); + const { runState } = useContext(SocketContext); + const [time, setTime] = useState([0, 0]); + + // console.clear(); + // console.log('>>>>>>>> runstate 更新 (', runState, ')'); useEffect(() => { - const restTime = ctx.runState?.lastFireChangeTime; + const restTime = runState?.lastFireChangeTime; if (restTime == null) return; console.log('restTime is:', restTime); let timer = null; @@ -71,23 +74,38 @@ const Chart2 = () => { return () => { clearInterval(timer); }; - }, [ctx.runState?.lastFireChangeTime]); + }, [runState?.lastFireChangeTime, runState?.updateKey]); + + const lastFireChangeTime = { + icon: icon3, + label: '剩余时间', + value: `${time[0]}分${time[1]}秒`, + }; + + const fireChangeTime = useMemo(() => { + return runState?.fireChangeTime || '00:00'; + }, [runState?.fireChangeTime]); + + const fireDirection = useMemo(() => { + // let lastValue = null; + // if (runState?.fireDirection) { + // lastValue = runState?.fireDirection; + // } + // console.log('换火方向： <', runState?.fireDirection, '>') + return runState?.fireDirection || '南火'; + }, [runState?.fireDirection]); const data = [ { icon: icon1, label: '换火时间', - value: ctx.runState?.fireChangeTime || '00:00', - }, - { - icon: icon3, - label: '剩余时间', - value: `${time[0]}分${time[1]}秒`, + value: fireChangeTime, }, + lastFireChangeTime, { icon: icon2, label: '当前火向', - value: ctx.runState?.fireDirection || '南火', + value: fireDirection, }, ]; diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx index 74e4ef5..872b34d 100644 --- a/src/components/LeftBar/Kiln.jsx +++ b/src/components/LeftBar/Kiln.jsx @@ -18,7 +18,7 @@ export default function Kiln() { label: '压缩气压力', value: ctx.kilnInfo?.gasPressure || '0Pa', }, - { label: '融化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' }, + { label: '熔化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' }, ]; return ( diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx index 13ccc67..8968b8c 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx @@ -112,7 +112,7 @@ const GoodRateChart = (props) => { function handleSwitchChange(val) { // val: boolean - console.log('switch change', val); + // console.log('switch change', val); } return ( diff --git a/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx b/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx index b12bfd7..600a67e 100644 --- a/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx +++ b/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx @@ -85,7 +85,7 @@ const EnergyCostChart = (props) => { function handleSwitchChange(val) { // val: boolean - console.log('switch change', val); + // console.log('switch change', val); } return ( diff --git a/src/components/RightBar/EnergyCost/index.jsx b/src/components/RightBar/EnergyCost/index.jsx index 0189f50..bd4ce7b 100644 --- a/src/components/RightBar/EnergyCost/index.jsx +++ b/src/components/RightBar/EnergyCost/index.jsx @@ -7,7 +7,7 @@ import { useContext } from 'react'; function EnergyCost(props) { const { energyState = {} } = useContext(SocketContext); - console.log('energyState', energyState); + // console.log('energyState', energyState); // let { // restHeat = '0kWh', // water = '0Km³', @@ -33,9 +33,9 @@ function EnergyCost(props) {
水 耗 量 : {water}
-
天 然 气 I : {gasi}
+
天 然 气 : {gasi}
电 耗 量 : {electricity}
-
天 然 气 II: {gasii}
+ {/*
天 然 气 II: {gasii}
*/}
diff --git a/src/store/socket-data-provider.js b/src/store/socket-data-provider.js index 1a3c4bc..4b3193a 100644 --- a/src/store/socket-data-provider.js +++ b/src/store/socket-data-provider.js @@ -20,7 +20,6 @@ export const SocketContextProvider = (props) => { }; socket.onmessage = (e) => { if ('data' in e) { - console.log('[ws] data ===> ', e.data); if (e.data == '连接成功') return; let incommingData = JSON.parse(e.data); @@ -28,9 +27,10 @@ export const SocketContextProvider = (props) => { case 'kiln-info': console.log('设置窑炉信息'); setkilnInfo(incommingData.data); + break; case 'run-state': console.log('设置运行时数据'); - setRunState(incommingData.data); + setRunState({ ...incommingData.data, updateKey: Math.random() }); break; case 'energy-cost': console.log('设置能耗数据'); @@ -41,7 +41,7 @@ export const SocketContextProvider = (props) => { setRealtimeState(incommingData.data); break; case 'his-trend': - console.log('his data arrived, set 历史数据'); + console.log('设置历史数据'); setHisState(incommingData.data); break; } diff --git a/websocket/server.ts b/websocket/server.ts index 3900627..2f161f8 100644 --- a/websocket/server.ts +++ b/websocket/server.ts @@ -85,6 +85,8 @@ function sendMsg(ws: WebSocket, type: MsgType) { break; case 'run-state': data = template.runState; + data.fireDirection = + Math.floor(Math.random() * 10) % 2 === 0 ? '南火' : '北火'; break; case 'realtime': /** 天然气 实时流量 */