update 天然气流量

src/components/Common/NatGasFlow/gasChart/index.jsx

@@ -5,8 +5,8 @@ import { useSelector, useDispatch } from "react-redux";
 
 function GasChart(props) {
   const { dataSource } = props;
-  const hisState = useSelector((state) => state.combustionAir.runtime);
-  const dataName = dataSource == "gas-i" ? "hisGas1" : "hisGas2";
+  const hisState = useSelector((state) => state.natGas.history);
+  const dataName = dataSource == "gas-i" ? "gasIHistory" : "gasIIHistory";
 
   const seriesData = hisState?.[dataName]
     ? Object.keys(hisState?.[dataName])

src/components/Common/NatGasFlow/gridList/index.jsx

@@ -1,5 +1,5 @@
 import cls from "./index.module.css";
-import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 
 function getData(type) {
   let data = [];
@@ -30,14 +30,16 @@ function getData(type) {
 }
 
 function GridList(props) {
-  // const { runState } = useContext(SocketContext);
-  const runState = null;
+  const runState = useSelector((state) => state.natGas.runtime);
 
-  const key = props.dataSource == "gas-i" ? "gasFlowArr" : "furnaceGasFlowArr";
+  const key = props.dataSource == "gas-i" ? "gasIRuntime" : "gasIIRuntime";
 
   let dataList = getData(props.dataSource);
   dataList = runState?.[key]
-    ? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? "/" }))
+    ? dataList.map((v, i) => ({
+        ...v,
+        value: (runState[key][i] || 0) + "m³/h",
+      }))
     : dataList;
 
   return (

src/store/features/combustionAirSlice.js

@@ -4,17 +4,17 @@ import { createSlice } from "@reduxjs/toolkit";
 export const initialState = {
   history: {
     // 历史数据
-    "1#天然气流量": [
+    "1#助燃风流量": [
       // ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
       ...Array.from({ length: 7 }, () => 0),
     ],
-    "2#天然气流量": [...Array.from({ length: 7 }, () => 0)],
-    "3#天然气流量": [...Array.from({ length: 7 }, () => 0)],
-    "4#天然气流量": [...Array.from({ length: 7 }, () => 0)],
-    "5#天然气流量": [...Array.from({ length: 7 }, () => 0)],
-    "6#天然气流量": [...Array.from({ length: 7 }, () => 0)],
-    "7#天然气流量": [...Array.from({ length: 7 }, () => 0)],
-    "8#天然气流量": [...Array.from({ length: 7 }, () => 0)],
+    "2#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
+    "3#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
+    "4#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
+    "5#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
+    "6#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
+    "7#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
+    "8#助燃风流量": [...Array.from({ length: 7 }, () => 0)],
   },
 
   runtime: [

src/store/features/gasSlice.js

@@ -2,38 +2,41 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 export const initialState = {
-  gasIHistory: {
-    // 历史数据
-    // 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)],
+  history: {
+    gasIHistory: {
+      // 历史数据
+      // 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)],
+    },
   },
-  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"
+        () => "0m³/h"
+      ),
+    ],
+
+    gasIIRuntime: [
+      // 实时数据
+      ...Array.from({ length: 8 }, () => "0m³/h"),
+    ],
   },
-
-  gasIRuntime: [
-    // 实时数据
-    ...Array.from(
-      { length: 8 },
-      // () => Math.floor(Math.random() * 100) + "m³/h"
-      () => "0m³/h"
-    ),
-  ],
-
-  gasIIRuntime: [
-    // 实时数据
-    ...Array.from({ length: 8 }, () => "0m³/h"),
-  ],
 };
 
 const gasSlice = createSlice({
@@ -41,16 +44,16 @@ const gasSlice = createSlice({
   initialState,
   reducers: {
     setGasIHistory: (state, action) => {
-      state.gasIHistory = action.payload;
+      state.history.gasIHistory = action.payload;
     },
     setGasIIHistory: (state, action) => {
-      state.gasIIHistory = action.payload;
-    },
-    setGasIIRuntime: (state, action) => {
-      state.gasIRuntime = action.payload;
+      state.history.gasIIHistory = action.payload;
     },
     setGasIRuntime: (state, action) => {
-      state.gasIIRuntime = action.payload;
+      state.runtime.gasIRuntime = action.payload;
+    },
+    setGasIIRuntime: (state, action) => {
+      state.runtime.gasIIRuntime = action.payload;
     },
   },
 });

src/store/index.js

@@ -14,7 +14,7 @@ export const store = configureStore({
     // 风机运行频率
     fanFrequence: fanFrequenceReducer,
     // 天然气流量
-    wind: gasReducer,
+    natGas: gasReducer,
     // 助燃风流量
     combustionAir: combustionAirReducer,
   },

src/utils/index.js

@@ -51,22 +51,22 @@ export class WsClient {
 		case "GasInfo": {
 			// 天然气流量 1 实时
 			store.dispatch({
-				type: 'gas/setGasIRuntime',
+				type: 'natGas/setGasIRuntime',
 				payload: serializedData.data.gas1Now
 			})
 			// 天然气流量 1 历史
 			store.dispatch({
-				type: 'gas/setGasIHistory',
+				type: 'natGas/setGasIHistory',
 				payload: serializedData.data.hisGas1
 			})
 			// 天然气流量 2 实时
 			store.dispatch({
-				type: 'gas/setGasIIRuntime',
+				type: 'natGas/setGasIIRuntime',
 				payload: serializedData.data.gas2Now
 			})
 			// 天然气流量 2 历史
 			store.dispatch({
-				type: 'gas/setGasIIHistory',
+				type: 'natGas/setGasIIHistory',
 				payload: serializedData.data.hisGas2
 			})
 			break;