update 天然气数据

2023-11-30 17:01:30 +08:00
parent d65fc0e3ed
commit a880f62393
4 changed files with 144 additions and 115 deletions
--- a/src/components/Common/NatGasFlow/gasChart/index.jsx
+++ b/src/components/Common/NatGasFlow/gasChart/index.jsx
@@ -1,37 +1,34 @@
-import cls from './index.module.css';
-import ReactECharts from 'echarts-for-react';
-import getOptions from './chart.config';
-// import SocketContext from '../../../../store/socket-data-provider';
-import { useContext } from 'react';
+import cls from "./index.module.css";
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+import { useSelector, useDispatch } from "react-redux";

 function GasChart(props) {
-	const { dataSource } = props;
-	// const { hisState } = useContext(SocketContext);
-	const hisState = null;
-	const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
+  const { dataSource } = props;
+  const hisState = useSelector((state) => state.combustionAir.runtime);
+  const dataName = dataSource == "gas-i" ? "hisGas1" : "hisGas2";

-	// keys() 的结果不是按照顺序的，需要 sort()
-	const seriesData = hisState?.[dataName]
-		? Object.keys(hisState?.[dataName])
-				.sort()
-				.map((key, index) => hisState?.[dataName][key])
-		: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
+  const seriesData = hisState?.[dataName]
+    ? Object.keys(hisState?.[dataName])
+        .sort()
+        .map((key, index) => hisState?.[dataName][key])
+    : Array(dataSource == "gas-i" ? 8 : 4).fill(Array(7).fill(0));

-	// debug
-	console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
+  // // debug
+  // console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);

-	return (
-		<div className={cls.gasChart}>
-			<ReactECharts
-				key={Math.random()}
-				option={getOptions(
-					seriesData,
-					dataSource == 'gas-i' ? '天然气I' : '天然气II',
-				)}
-				style={{ height: '100%' }}
-			/>
-		</div>
-	);
+  return (
+    <div className={cls.gasChart}>
+      <ReactECharts
+        key={Math.random()}
+        option={getOptions(
+          seriesData,
+          dataSource == "gas-i" ? "天然气I" : "天然气II"
+        )}
+        style={{ height: "100%" }}
+      />
+    </div>
+  );
 }

 export default GasChart;
--- a/src/components/Common/NatGasFlow/index.jsx
+++ b/src/components/Common/NatGasFlow/index.jsx
@@ -1,71 +1,71 @@
 // 天然气流量
-import cls from './index.module.css';
-import BottomBarItem from '../BottomItemBackground';
+import cls from "./index.module.css";
+import BottomBarItem from "../BottomItemBackground";

-import { Switch, Radio } from 'antd';
-import { useState } from 'react';
-import GridList from './gridList';
-import GasChart from './gasChart';
+import { Switch, Radio } from "antd";
+import { useState } from "react";
+import GridList from "./gridList";
+import GasChart from "./gasChart";

 function GasII(props) {
-	const [dataSource, setDataSource] = useState('gas-i'); // gas-i , gas-ii
-	const [showChart, setShowChart] = useState(true);
+  const [dataSource, setDataSource] = useState("gas-i"); // gas-i , gas-ii
+  const [showChart, setShowChart] = useState(true);

-	function handleSwitchChange(val) {
-		if (val) {
-			setShowChart(true);
-		} else {
-			setShowChart(false);
-		}
-	}
+  function handleSwitchChange(val) {
+    if (val) {
+      setShowChart(true);
+    } else {
+      setShowChart(false);
+    }
+  }

-	function handleSourceChange(e) {
-		console.log('val', e.target.value);
-		if (e.target.value == 'ii') {
-			// 天然气II
-			setDataSource('gas-ii');
-		} else if (e.target.value == 'i') {
-			// 天然气 I
-			setDataSource('gas-i');
-		}
-	}
+  function handleSourceChange(e) {
+    console.log("val", e.target.value);
+    if (e.target.value == "ii") {
+      // 天然气II
+      setDataSource("gas-ii");
+    } else if (e.target.value == "i") {
+      // 天然气 I
+      setDataSource("gas-i");
+    }
+  }

-	return (
-		<BottomBarItem
-			icon="pause"
-			title="天然气流量"
-			className={`${cls.gas} ${props.className}`}
-			style={props.style}
-		>
-			{/* legend */}
-			<div className={cls.headWidget}>
-				<div className="flex items-center">
-					<Switch size="small" defaultChecked onChange={handleSwitchChange} />
-					{showChart && <span className={cls.switchLabel}>历史详情</span>}
-					{!showChart && <span className={cls.switchLabel}>实时流量</span>}
-				</div>
+  return (
+    <BottomBarItem
+      icon="pause"
+      title="天然气流量"
+      className={`${cls.gas} ${props.className}`}
+      style={props.style}
+    >
+      {/* legend */}
+      <div className={cls.headWidget}>
+        <div className="flex items-center">
+          <Switch size="small" defaultChecked onChange={handleSwitchChange} />
+          {showChart && <span className={cls.switchLabel}>历史详情</span>}
+          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
+        </div>

-				<Radio.Group
-					defaultValue="i"
-					buttonStyle="solid"
-					className={cls.radioGroup}
-					onChange={handleSourceChange}
-				>
-					<Radio.Button value="i" className="radio-group__item">
-						天然气 I
-					</Radio.Button>
-					<Radio.Button value="ii" className="radio-group__item">
-						天然气 II
-					</Radio.Button>
-				</Radio.Group>
-			</div>
+        <Radio.Group
+          defaultValue="i"
+          buttonStyle="solid"
+          className={cls.radioGroup}
+          onChange={handleSourceChange}
+        >
+          <Radio.Button value="i" className="radio-group__item">
+            天然气 I
+          </Radio.Button>
+          <Radio.Button value="ii" className="radio-group__item">
+            天然气 II
+          </Radio.Button>
+        </Radio.Group>
+      </div>

-			<div className={cls.chart}>
-				{showChart && <GasChart dataSource={dataSource} />}
-				{!showChart && <GridList dataSource={dataSource} />}
-			</div>
-		</BottomBarItem>
-	);
+      <div className={cls.chart}>
+        {showChart && <GasChart dataSource={dataSource} />}
+        {!showChart && <GridList dataSource={dataSource} />}
+      </div>
+    </BottomBarItem>
+  );
 }

 export default GasII;
--- a/src/store/features/gasSlice.js
+++ b/src/store/features/gasSlice.js
@@ -1,47 +1,56 @@
-// 风机运行频率
+// 天然气流量
 import { createSlice } from "@reduxjs/toolkit";

-/**
- * 由于接口并没有经过合理的评审，所以这里的数据结构是不确定的，需要根据实际情况进行调整
- */
-
 export const initialState = {
-  history: {
+  gasIHistory: {
    // 历史数据
-    GAS1: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS2: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS3: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS4: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS5: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS6: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS7: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
-    GAS8: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+    // GAS1: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+    GAS1: [...Array.from({ length: 7 }, () => 0)],
+    GAS2: [...Array.from({ length: 7 }, () => 0)],
+    GAS3: [...Array.from({ length: 7 }, () => 0)],
+    GAS4: [...Array.from({ length: 7 }, () => 0)],
+    GAS5: [...Array.from({ length: 7 }, () => 0)],
+    GAS6: [...Array.from({ length: 7 }, () => 0)],
+    GAS7: [...Array.from({ length: 7 }, () => 0)],
+    GAS8: [...Array.from({ length: 7 }, () => 0)],
+  },
+  gasIIHistory: {
+    GAS1: [...Array.from({ length: 7 }, () => 0)],
+    GAS2: [...Array.from({ length: 7 }, () => 0)],
+    GAS3: [...Array.from({ length: 7 }, () => 0)],
+    GAS4: [...Array.from({ length: 7 }, () => 0)],
  },

-  runtime: [
+  gasIRuntime: [
    // 实时数据
    ...Array.from(
      { length: 8 },
-      () => Math.floor(Math.random() * 100) + "m³/h"
+      // () => Math.floor(Math.random() * 100) + "m³/h"
+      () => "0m³/h"
    ),
  ],
+
+  gasIIRuntime: [
+    // 实时数据
+    ...Array.from({ length: 8 }, () => "0m³/h"),
+  ],
 };

-// export const stateNameMap = {
-//   lastFireChangeTime: "10分20秒",
-//   fireChangeTime: "10:23",
-//   fireDirection: "东火",
-// };
-
 const gasSlice = createSlice({
-  name: "wind",
+  name: "natGas",
  initialState,
  reducers: {
-    setHistory: (state, action) => {
-      state.history = action.payload;
+    setGasIHistory: (state, action) => {
+      state.gasIHistory = action.payload;
    },
-    setRuntime: (state, action) => {
-      state.runtime = action.payload;
+    setGasIIHistory: (state, action) => {
+      state.gasIIHistory = action.payload;
+    },
+    setGasIIRuntime: (state, action) => {
+      state.gasIRuntime = action.payload;
+    },
+    setGasIRuntime: (state, action) => {
+      state.gasIIRuntime = action.payload;
    },
  },
 });
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -48,6 +48,29 @@ export class WsClient {
          });
          break;
        }
+		case "GasInfo": {
+			// 天然气流量 1 实时
+			store.dispatch({
+				type: 'gas/setGasIRuntime',
+				payload: serializedData.data.gas1Now
+			})
+			// 天然气流量 1 历史
+			store.dispatch({
+				type: 'gas/setGasIHistory',
+				payload: serializedData.data.hisGas1
+			})
+			// 天然气流量 2 实时
+			store.dispatch({
+				type: 'gas/setGasIIRuntime',
+				payload: serializedData.data.gas2Now
+			})
+			// 天然气流量 2 历史
+			store.dispatch({
+				type: 'gas/setGasIIHistory',
+				payload: serializedData.data.hisGas2
+			})
+			break;
+		}
        default: {
          console.log("websocket message: [unknown] --->  ", e.data);
        }