From e531907301c0e2c8ed79c3b08daf8f7a51b865bc Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 13 Jul 2023 16:56:01 +0800 Subject: [PATCH] update gas --- src/components/BottomBar/gasi/index.jsx | 26 ++++++++++++------- .../BottomBar/gasii/gridList/index.jsx | 26 +++++++++---------- src/components/BottomBar/gasii/index.jsx | 4 ++- src/components/Slider/index.jsx | 2 +- src/pages/index.jsx | 11 +++----- src/store/socket-data-provider.js | 5 ++-- 6 files changed, 38 insertions(+), 36 deletions(-) diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx index e9f90a2..a4b8fd5 100644 --- a/src/components/BottomBar/gasi/index.jsx +++ b/src/components/BottomBar/gasi/index.jsx @@ -1,3 +1,4 @@ +// 助燃风流量 import cls from './index.module.css'; import BottomBarItem from '../BottomBarItem'; import ReactECharts from 'echarts-for-react'; @@ -26,7 +27,7 @@ function GasI(props) { let options = null; if (showChart) { // keys() 结果不是按照顺序，需要 sort() - hisState?.combustionAir + seriesData = hisState?.combustionAir ? Object.keys(hisState.combustionAir) .sort() .map((key) => hisState.combustionAir[key]) @@ -35,7 +36,11 @@ function GasI(props) { .map((_) => Array(7).fill(0)); // debug - console.log('gasI series data', hisState?.combustionAir, seriesData); + console.log( + '助燃风 chart series data', + hisState?.combustionAir, + seriesData, + ); options = { color: colors, grid: { top: 32, right: 12, bottom: 20, left: 48 }, @@ -74,7 +79,6 @@ function GasI(props) { axisLabel: { color: '#fff', fontSize: 12, - formatter: '{value} %', }, axisLine: { show: true, @@ -87,14 +91,15 @@ function GasI(props) { color: '#213259a0', }, }, - interval: 10, - min: 0, - max: 100, + // interval: 10, + // min: 0, + // max: 100, }, series: seriesData.map((v, i) => ({ name: i + 1 + '#助燃风', data: v, type: 'line', + symbol: 'circle', areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colors[i] + '40' }, @@ -108,7 +113,7 @@ function GasI(props) { }, }; } else { - runState?.combustionAirFlow + dataList = runState?.combustionAirPressureArr ? [ { id: 1, name: '1#助燃风', value: '0m³/h' }, { id: 2, name: '2#助燃风', value: '0m³/h' }, @@ -120,7 +125,7 @@ function GasI(props) { { id: 8, name: '8#助燃风', value: '0m³/h' }, ].map((item, index) => ({ ...item, - value: runState.combustionAirFlow[index], + value: runState.combustionAirPressureArr[index] ?? '/', })) : [ { id: 1, name: '1#助燃风', value: '0m³/h' }, @@ -133,7 +138,7 @@ function GasI(props) { { id: 8, name: '8#助燃风', value: '0m³/h' }, ]; // debug - console.log('gasI grid data', runState?.combustionAirFlow); + console.log('助燃风 实时 data', runState?.combustionAirPressureArr); } function handleSwitchChange(val) { @@ -148,7 +153,8 @@ function GasI(props) {
- 历史详情 + {showChart && 历史详情} + {!showChart && 实时流量}
diff --git a/src/components/BottomBar/gasii/gridList/index.jsx b/src/components/BottomBar/gasii/gridList/index.jsx index 2cbcccd..72ea02a 100644 --- a/src/components/BottomBar/gasii/gridList/index.jsx +++ b/src/components/BottomBar/gasii/gridList/index.jsx @@ -6,23 +6,23 @@ function getData(type) { switch (type) { case 'gas-i': data = [ - { id: 1, name: '1#天然气I', value: '122m³/h' }, - { id: 2, name: '2#天然气I', value: '200m³/h' }, - { id: 3, name: '3#天然气I', value: '112m³/h' }, - { id: 4, name: '4#天然气I', value: '189m³/h' }, - { id: 5, name: '5#天然气I', value: '109m³/h' }, - { id: 6, name: '6#天然气I', value: '167m³/h' }, - { id: 7, name: '7#天然气I', value: '172m³/h' }, - { id: 8, name: '8#天然气I', value: '145m³/h' }, + { id: 1, name: '1#天然气I', value: '0m³/h' }, + { id: 2, name: '2#天然气I', value: '0m³/h' }, + { id: 3, name: '3#天然气I', value: '0m³/h' }, + { id: 4, name: '4#天然气I', value: '0m³/h' }, + { id: 5, name: '5#天然气I', value: '0m³/h' }, + { id: 6, name: '6#天然气I', value: '0m³/h' }, + { id: 7, name: '7#天然气I', value: '0m³/h' }, + { id: 8, name: '8#天然气I', value: '0m³/h' }, ]; break; case 'gas-ii': data = [ - { id: 11, name: '1#天然气II', value: '85m³/h' }, - { id: 12, name: '2#天然气II', value: '45m³/h' }, - { id: 13, name: '3#天然气II', value: '6m³/h' }, - { id: 14, name: '4#天然气II', value: '72m³/h' }, - { id: 15, name: '5#天然气II', value: '83m³/h' }, + { id: 11, name: '1#天然气II', value: '0m³/h' }, + { id: 12, name: '2#天然气II', value: '0m³/h' }, + { id: 13, name: '3#天然气II', value: '0m³/h' }, + { id: 14, name: '4#天然气II', value: '0m³/h' }, + { id: 15, name: '5#天然气II', value: '0m³/h' }, ]; break; } diff --git a/src/components/BottomBar/gasii/index.jsx b/src/components/BottomBar/gasii/index.jsx index 8630877..329103c 100644 --- a/src/components/BottomBar/gasii/index.jsx +++ b/src/components/BottomBar/gasii/index.jsx @@ -1,3 +1,4 @@ +// 天然气流量 import cls from './index.module.css'; import BottomBarItem from '../BottomBarItem'; @@ -35,7 +36,8 @@ function GasII(props) {
- 历史详情 + {showChart && 历史详情} + {!showChart && 实时流量}
{ }; return (
- + {}} />
); }; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index ba8184a..080035b 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,6 +1,4 @@ -import React from 'react'; import { useEffect, useState } from 'react'; - import './global.less'; import './index.less'; import Head from '../components/Head'; @@ -9,15 +7,12 @@ import BottomBar from '../components/BottomBar'; import RightBar from '../components/RightBar'; import CenterTopData from '../components/CenterTopData'; import Slider from '../components/Slider'; - -import V3DBG from '../assets/V3DBG.png'; - -import V3D from './V3D'; - import { SocketContextProvider } from '../store/socket-data-provider'; +import V3DBG from '../assets/V3DBG.png'; +// import V3D from './V3D'; + export default function index() { - const [width, setWidth] = useState(window.innerWidth); const [value, setValue] = useState(100); const v = (value / 100).toFixed(2); diff --git a/src/store/socket-data-provider.js b/src/store/socket-data-provider.js index 49857bc..f98e72f 100644 --- a/src/store/socket-data-provider.js +++ b/src/store/socket-data-provider.js @@ -21,12 +21,11 @@ export const SocketContextProvider = (props) => { let incommingData = JSON.parse(e.data); switch (incommingData.type) { case 'RunData': - console.log('run data arrived, set RunData'); + console.log('run data arrived, set 运行时数据'); setRunState(incommingData.data); break; case 'HisData': - console.log('his data arrived, set HisData'); - // setHisState(prevHisState => ({ ...prevHisState, ...incommingData.data })); + console.log('his data arrived, set 历史数据'); setHisState(incommingData.data); break; }