add more slices

2023-11-10 10:09:50 +08:00
parent a18cb7a1c7
commit 3821121a6f
8 changed files with 487 additions and 285 deletions
--- a/src/components/Common/FanRunFrequence/index.jsx
+++ b/src/components/Common/FanRunFrequence/index.jsx
@@ -2,17 +2,59 @@
 import cls from "./index.module.css";
 import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
-import { Switch } from "antd";
 import GraphBase from "../../Common/GraphBase";
-import { useState, useContext } from "react";
-// import SocketContext from '../../../store/socket-data-provider';
+import { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+function mockData(type = "runtime") {
+  const RUNTIME_DATA_LENGTH = 16;
+  const MAX_HISTORY_DATA_LENGTH = 10;
+  const WEEK = 7;
+
+  switch (type) {
+    case "runtime":
+      return [
+        ...Array.from(
+          { length: RUNTIME_DATA_LENGTH },
+          () => Math.floor(Math.random() * 100) + "m³/h"
+        ),
+      ];
+    case "history":
+      return {
+        ...Array.from(
+          { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
+          (_, index) => ({
+            ["FAIIA" + index]: [
+              ...Array.from({ length: WEEK }, () =>
+                Math.floor(Math.random() * 100)
+              ),
+            ],
+          })
+        ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
+      };
+    default:
+      break;
+  }
+}

 function WindFrequence(props) {
  const [showChart, setShowChart] = useState(true);
-  // const { runState, hisState } = useContext(SocketContext);
+  const dispath = useDispatch();
+  const runState = useSelector((state) => state.fanFrequence.runtime);
+  const hisState = useSelector((state) => state.fanFrequence.history);

-  const runState = null;
-  const hisState = null;
+  useEffect(() => {
+    setInterval(() => {
+      dispath({
+        type: "fanFrequence/setRuntime",
+        payload: mockData("runtime"),
+      });
+      dispath({
+        type: "fanFrequence/setHistory",
+        payload: mockData("history"),
+      });
+    }, 50000);
+  }, [dispath]);

  let dataList = [];
  let seriesData = [];
@@ -29,20 +71,15 @@ function WindFrequence(props) {
  let options = null;
  if (showChart) {
    // keys() 结果不是按照顺序，需要 sort()
-    seriesData = hisState?.combustionAir
-      ? Object.keys(hisState.combustionAir)
-          .sort()
-          .map((key) => hisState.combustionAir[key])
-      : Array(8)
-          .fill(1)
-          .map((_) => Array(7).fill(0));
+    seriesData =
+      hisState != null
+        ? Object.keys(hisState)
+            .sort()
+            .map((key) => hisState[key])
+        : Array(8)
+            .fill(1)
+            .map((_) => Array(7).fill(0));

-    // debug
-    console.log(
-      "助燃风 chart series data",
-      hisState?.combustionAir,
-      seriesData
-    );
    options = {
      color: colors,
      grid: { top: 32, right: 12, bottom: 20, left: 48 },
@@ -104,9 +141,10 @@ function WindFrequence(props) {
        symbol: "circle",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: colors[i] + "40" },
-            { offset: 0.5, color: colors[i] + "20" },
-            { offset: 1, color: colors[i] + "00" },
+            // i % 8 避免超过8个数据时无颜色的问题
+            { offset: 0, color: colors[i % 8] + "40" },
+            { offset: 0.5, color: colors[i % 8] + "20" },
+            { offset: 1, color: colors[i % 8] + "00" },
          ]),
        },
      })),
@@ -115,46 +153,47 @@ function WindFrequence(props) {
      },
    };
  } else {
-    dataList = runState?.combustionAirPressureArr
-      ? [
-          { id: 1, name: "1#风机", value: "0m³/h" },
-          { id: 2, name: "2#风机", value: "0m³/h" },
-          { id: 3, name: "3#风机", value: "0m³/h" },
-          { id: 4, name: "4#风机", value: "0m³/h" },
-          { id: 5, name: "5#风机", value: "0m³/h" },
-          { id: 6, name: "6#风机", value: "0m³/h" },
-          { id: 7, name: "7#风机", value: "0m³/h" },
-          { id: 8, name: "8#风机", value: "0m³/h" },
-          { id: 9, name: "9#风机", value: "0m³/h" },
-          { id: 10, name: "10#风机", value: "0m³/h" },
-          { id: 11, name: "11#风机", value: "0m³/h" },
-          { id: 12, name: "12#风机", value: "0m³/h" },
-          { id: 13, name: "13#风机", value: "0m³/h" },
-          { id: 14, name: "14#风机", value: "0m³/h" },
-          { id: 15, name: "15#风机", value: "0m³/h" },
-          { id: 16, name: "16#风机", value: "0m³/h" },
-        ].map((item, index) => ({
-          ...item,
-          value: runState.combustionAirPressureArr[index] ?? "/",
-        }))
-      : [
-          { id: 1, name: "1#风机", value: "0m³/h" },
-          { id: 2, name: "2#风机", value: "0m³/h" },
-          { id: 3, name: "3#风机", value: "0m³/h" },
-          { id: 4, name: "4#风机", value: "0m³/h" },
-          { id: 5, name: "5#风机", value: "0m³/h" },
-          { id: 6, name: "6#风机", value: "0m³/h" },
-          { id: 7, name: "7#风机", value: "0m³/h" },
-          { id: 8, name: "8#风机", value: "0m³/h" },
-          { id: 9, name: "9#风机", value: "0m³/h" },
-          { id: 10, name: "10#风机", value: "0m³/h" },
-          { id: 11, name: "11#风机", value: "0m³/h" },
-          { id: 12, name: "12#风机", value: "0m³/h" },
-          { id: 13, name: "13#风机", value: "0m³/h" },
-          { id: 14, name: "14#风机", value: "0m³/h" },
-          { id: 15, name: "15#风机", value: "0m³/h" },
-          { id: 16, name: "16#风机", value: "0m³/h" },
-        ];
+    dataList =
+      runState != null
+        ? [
+            { id: 1, name: "1#风机", value: "0m³/h" },
+            { id: 2, name: "2#风机", value: "0m³/h" },
+            { id: 3, name: "3#风机", value: "0m³/h" },
+            { id: 4, name: "4#风机", value: "0m³/h" },
+            { id: 5, name: "5#风机", value: "0m³/h" },
+            { id: 6, name: "6#风机", value: "0m³/h" },
+            { id: 7, name: "7#风机", value: "0m³/h" },
+            { id: 8, name: "8#风机", value: "0m³/h" },
+            { id: 9, name: "9#风机", value: "0m³/h" },
+            { id: 10, name: "10#风机", value: "0m³/h" },
+            { id: 11, name: "11#风机", value: "0m³/h" },
+            { id: 12, name: "12#风机", value: "0m³/h" },
+            { id: 13, name: "13#风机", value: "0m³/h" },
+            { id: 14, name: "14#风机", value: "0m³/h" },
+            { id: 15, name: "15#风机", value: "0m³/h" },
+            { id: 16, name: "16#风机", value: "0m³/h" },
+          ].map((item, index) => ({
+            ...item,
+            value: runState[index] ?? "/",
+          }))
+        : [
+            { id: 1, name: "1#风机", value: "0m³/h" },
+            { id: 2, name: "2#风机", value: "0m³/h" },
+            { id: 3, name: "3#风机", value: "0m³/h" },
+            { id: 4, name: "4#风机", value: "0m³/h" },
+            { id: 5, name: "5#风机", value: "0m³/h" },
+            { id: 6, name: "6#风机", value: "0m³/h" },
+            { id: 7, name: "7#风机", value: "0m³/h" },
+            { id: 8, name: "8#风机", value: "0m³/h" },
+            { id: 9, name: "9#风机", value: "0m³/h" },
+            { id: 10, name: "10#风机", value: "0m³/h" },
+            { id: 11, name: "11#风机", value: "0m³/h" },
+            { id: 12, name: "12#风机", value: "0m³/h" },
+            { id: 13, name: "13#风机", value: "0m³/h" },
+            { id: 14, name: "14#风机", value: "0m³/h" },
+            { id: 15, name: "15#风机", value: "0m³/h" },
+            { id: 16, name: "16#风机", value: "0m³/h" },
+          ];
  }

  function handleSwitchChange(val) {
--- a/src/components/Common/GasFlow/index.jsx
+++ b/src/components/Common/GasFlow/index.jsx
@@ -1,187 +1,223 @@
 // 助燃风流量
-import cls from './index.module.css';
-import BottomBarItem from '../BottomItemBackground';
-import ReactECharts from 'echarts-for-react';
-import * as echarts from 'echarts';
-import { randomInt } from '../../../utils';
-import { Switch } from 'antd';
-import { useState, useContext } from 'react';
-// import SocketContext from '../../../store/socket-data-provider';
+import cls from "./index.module.css";
+import BottomBarItem from "../BottomItemBackground";
+import ReactECharts from "echarts-for-react";
+import * as echarts from "echarts";
+import { Switch } from "antd";
+import { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+function mockData(type = "runtime") {
+  const RUNTIME_DATA_LENGTH = 8;
+  const MAX_HISTORY_DATA_LENGTH = 8;
+  const WEEK = 7;
+
+  switch (type) {
+    case "runtime":
+      return [
+        ...Array.from(
+          { length: RUNTIME_DATA_LENGTH },
+          () => Math.floor(Math.random() * 100) + "m³/h"
+        ),
+      ];
+    case "history":
+      return {
+        ...Array.from(
+          { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
+          (_, index) => ({
+            ["GAS_" + index]: [
+              ...Array.from({ length: WEEK }, () =>
+                Math.floor(Math.random() * 100)
+              ),
+            ],
+          })
+        ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
+      };
+    default:
+      break;
+  }
+}

 function GasI(props) {
-	const [showChart, setShowChart] = useState(true);
-	// const { runState, hisState } = useContext(SocketContext);
+  const [showChart, setShowChart] = useState(true);
+  const dispath = useDispatch();
+  const runState = useSelector((state) => state.wind.runtime);
+  const hisState = useSelector((state) => state.wind.history);

-	const runState = null;
-	const hisState = null;
+  useEffect(() => {
+    setInterval(() => {
+      dispath({
+        type: "fanFrequence/setRuntime",
+        payload: mockData("runtime"),
+      });
+      dispath({
+        type: "fanFrequence/setHistory",
+        payload: mockData("history"),
+      });
+    }, 60000);
+  }, [dispath]);

-	let dataList = [];
-	let seriesData = [];
-	const colors = [
-		'#12FFF5',
-		'#2760FF',
-		'#FFD160',
-		'#E80091',
-		'#8064ff',
-		'#ff8a3b',
-		'#8cd26d',
-		'#2aa1ff',
-	];
-	let options = null;
-	if (showChart) {
-		// keys() 结果不是按照顺序，需要 sort()
-		seriesData = hisState?.combustionAir
-			? Object.keys(hisState.combustionAir)
-					.sort()
-					.map((key) => hisState.combustionAir[key])
-			: Array(8)
-					.fill(1)
-					.map((_) => Array(7).fill(0));
+  let dataList = [];
+  let seriesData = [];
+  const colors = [
+    "#12FFF5",
+    "#2760FF",
+    "#FFD160",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  let options = null;
+  if (showChart) {
+    // keys() 结果不是按照顺序，需要 sort()
+    seriesData =
+      hisState != null
+        ? Object.keys(hisState)
+            .sort()
+            .map((key) => hisState[key])
+        : Array(8)
+            .fill(1)
+            .map((_) => Array(7).fill(0));

-		// debug
-		console.log(
-			'助燃风 chart series data',
-			hisState?.combustionAir,
-			seriesData,
-		);
-		options = {
-			color: colors,
-			grid: { top: 32, right: 12, bottom: 20, left: 48 },
-			xAxis: {
-				type: 'category',
-				data: Array(7)
-					.fill(1)
-					.map((_, index) => {
-						const today = new Date();
-						const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-						return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-							dtimestamp,
-						).getDate()}`;
-					})
-					.reverse(),
-				axisLabel: {
-					color: '#fff',
-					fontSize: 12,
-				},
-				axisTick: { show: false },
-				axisLine: {
-					lineStyle: {
-						width: 1,
-						color: '#213259',
-					},
-				},
-			},
-			yAxis: {
-				name: '单位/m³',
-				nameTextStyle: {
-					color: '#fff',
-					fontSize: 10,
-					align: 'right',
-				},
-				type: 'value',
-				axisLabel: {
-					color: '#fff',
-					fontSize: 12,
-				},
-				axisLine: {
-					show: true,
-					lineStyle: {
-						color: '#213259',
-					},
-				},
-				splitLine: {
-					lineStyle: {
-						color: '#213259a0',
-					},
-				},
-				// 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' },
-						{ offset: 0.5, color: colors[i] + '20' },
-						{ offset: 1, color: colors[i] + '00' },
-					]),
-				},
-			})),
-			tooltip: {
-				trigger: 'axis',
-			},
-		};
-	} else {
-		dataList = runState?.combustionAirPressureArr
-			? [
-					{ id: 1, name: '1#助燃风', value: '0m³/h' },
-					{ id: 2, name: '2#助燃风', value: '0m³/h' },
-					{ id: 3, name: '3#助燃风', value: '0m³/h' },
-					{ id: 4, name: '4#助燃风', value: '0m³/h' },
-					{ id: 5, name: '5#助燃风', value: '0m³/h' },
-					{ id: 6, name: '6#助燃风', value: '0m³/h' },
-					{ id: 7, name: '7#助燃风', value: '0m³/h' },
-					{ id: 8, name: '8#助燃风', value: '0m³/h' },
-			  ].map((item, index) => ({
-					...item,
-					value: runState.combustionAirPressureArr[index] ?? '/',
-			  }))
-			: [
-					{ id: 1, name: '1#助燃风', value: '0m³/h' },
-					{ id: 2, name: '2#助燃风', value: '0m³/h' },
-					{ id: 3, name: '3#助燃风', value: '0m³/h' },
-					{ id: 4, name: '4#助燃风', value: '0m³/h' },
-					{ id: 5, name: '5#助燃风', value: '0m³/h' },
-					{ id: 6, name: '6#助燃风', value: '0m³/h' },
-					{ id: 7, name: '7#助燃风', value: '0m³/h' },
-					{ id: 8, name: '8#助燃风', value: '0m³/h' },
-			  ];
-		// debug
-		console.log('助燃风 实时 data', runState?.combustionAirPressureArr);
-	}
+    options = {
+      color: colors,
+      grid: { top: 32, right: 12, bottom: 20, left: 48 },
+      xAxis: {
+        type: "category",
+        data: Array(7)
+          .fill(1)
+          .map((_, index) => {
+            const today = new Date();
+            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+              dtimestamp
+            ).getDate()}`;
+          })
+          .reverse(),
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+        },
+        axisTick: { show: false },
+        axisLine: {
+          lineStyle: {
+            width: 1,
+            color: "#213259",
+          },
+        },
+      },
+      yAxis: {
+        name: "单位/m³",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 10,
+          align: "right",
+        },
+        type: "value",
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#213259",
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#213259a0",
+          },
+        },
+        // 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 % colors.length] + "40" },
+            { offset: 0.5, color: colors[i % colors.length] + "20" },
+            { offset: 1, color: colors[i % colors.length] + "00" },
+          ]),
+        },
+      })),
+      tooltip: {
+        trigger: "axis",
+      },
+    };
+  } else {
+    dataList =
+      runState != null
+        ? [
+            { id: 1, name: "1#助燃风", value: "0m³/h" },
+            { id: 2, name: "2#助燃风", value: "0m³/h" },
+            { id: 3, name: "3#助燃风", value: "0m³/h" },
+            { id: 4, name: "4#助燃风", value: "0m³/h" },
+            { id: 5, name: "5#助燃风", value: "0m³/h" },
+            { id: 6, name: "6#助燃风", value: "0m³/h" },
+            { id: 7, name: "7#助燃风", value: "0m³/h" },
+            { id: 8, name: "8#助燃风", value: "0m³/h" },
+          ].map((item, index) => ({
+            ...item,
+            value: runState[index] ?? "/",
+          }))
+        : [
+            { id: 1, name: "1#助燃风", value: "0m³/h" },
+            { id: 2, name: "2#助燃风", value: "0m³/h" },
+            { id: 3, name: "3#助燃风", value: "0m³/h" },
+            { id: 4, name: "4#助燃风", value: "0m³/h" },
+            { id: 5, name: "5#助燃风", value: "0m³/h" },
+            { id: 6, name: "6#助燃风", value: "0m³/h" },
+            { id: 7, name: "7#助燃风", value: "0m³/h" },
+            { id: 8, name: "8#助燃风", value: "0m³/h" },
+          ];
+  }

-	function handleSwitchChange(val) {
-		if (val) {
-			setShowChart(true);
-		} else {
-			setShowChart(false);
-		}
-	}
-	return (
-		<BottomBarItem
-			icon="pause"
-			title="助燃风流量"
-			className={cls.gas}
-			style={props.style}
-		>
-			<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>
-			</div>
+  function handleSwitchChange(val) {
+    if (val) {
+      setShowChart(true);
+    } else {
+      setShowChart(false);
+    }
+  }
+  return (
+    <BottomBarItem
+      icon="pause"
+      title="助燃风流量"
+      className={cls.gas}
+      style={props.style}
+    >
+      <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>
+      </div>

-			<div className={cls.chart}>
-				{showChart && (
-					<ReactECharts option={options} style={{ height: '100%' }} />
-				)}
-				{!showChart && (
-					<div className={cls.gridList}>
-						{dataList.map((item) => (
-							<div key={item.id} className={cls.listItem}>
-								{item.name}: {item.value}
-							</div>
-						))}
-					</div>
-				)}
-			</div>
-		</BottomBarItem>
-	);
+      <div className={cls.chart}>
+        {showChart && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )}
+        {!showChart && (
+          <div className={cls.gridList}>
+            {dataList.map((item) => (
+              <div key={item.id} className={cls.listItem}>
+                {item.name}: {item.value}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </BottomBarItem>
+  );
 }

 export default GasI;
--- a/src/components/Common/KilnInfo/Kiln.jsx
+++ b/src/components/Common/KilnInfo/Kiln.jsx
@@ -7,7 +7,6 @@ import { stateNameMap } from "../../../store/features/kilnSlice";
 export default function Kiln() {
  const kilnInfo = useSelector((state) => state.kiln);
  const dispatch = useDispatch();
-  console.log("state: ", kilnInfo, stateNameMap);

  const infos = Object.keys(kilnInfo).map((key) => ({
    label: stateNameMap[key],
@@ -30,7 +29,7 @@ export default function Kiln() {
        },
      });
    }, 30000);
-  }, []);
+  }, [dispatch]);

  // const infos = [
  //   { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
--- a/src/components/Common/NatGasFlow/gridList/index.jsx
+++ b/src/components/Common/NatGasFlow/gridList/index.jsx
@@ -1,55 +1,54 @@
-import cls from './index.module.css';
-import { useContext, useEffect, useState } from 'react';
-// import SocketContext from '../../../../store/socket-data-provider';
+import cls from "./index.module.css";
+import { useEffect, useState } from "react";

 function getData(type) {
-	let data = [];
-	switch (type) {
-		case 'gas-i':
-			data = [
-				{ 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: '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;
-	}
-	return data;
+  let data = [];
+  switch (type) {
+    case "gas-i":
+      data = [
+        { 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: "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;
+  }
+  return data;
 }

 function GridList(props) {
-	// const { runState } = useContext(SocketContext);
-	const runState = null;
-	
-	const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
+  // const { runState } = useContext(SocketContext);
+  const runState = null;

-	let dataList = getData(props.dataSource);
-	dataList = runState?.[key]
-		? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
-		: dataList;
+  const key = props.dataSource == "gas-i" ? "gasFlowArr" : "furnaceGasFlowArr";

-	return (
-		<div className={cls.gridList}>
-			{dataList.map((item) => (
-				<div key={item.id} className={cls.listItem}>
-					{item.name}: {item.value}
-				</div>
-			))}
-		</div>
-	);
+  let dataList = getData(props.dataSource);
+  dataList = runState?.[key]
+    ? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? "/" }))
+    : dataList;
+
+  return (
+    <div className={cls.gridList}>
+      {dataList.map((item) => (
+        <div key={item.id} className={cls.listItem}>
+          {item.name}: {item.value}
+        </div>
+      ))}
+    </div>
+  );
 }

 export default GridList;
--- a/src/hooks/useTimeCounter.js
+++ b/src/hooks/useTimeCounter.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";

 function useTimeCounter(time) {
+  console.log('time counter executed...')
  // time: 8分12秒 这种
  const [timeTuple, setTimeTuple] = useState([0, 0]);

--- a/src/store/features/fanFrequenceSlice.js
+++ b/src/store/features/fanFrequenceSlice.js
@@ -0,0 +1,74 @@
+// 风机运行频率
+import { createSlice } from "@reduxjs/toolkit";
+
+/**
+ * 由于接口并没有经过合理的评审，所以这里的数据结构是不确定的，需要根据实际情况进行调整
+ */
+
+export const initialState = {
+  history: {
+    // 历史数据
+    FLIIA1: [
+      // 帮我生成7个随机整数
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    // 帮我重复上面的模式十次
+    FLIIA2: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIA3: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIA4: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIA5: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIA6: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIA7: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIA8: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIB1: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+    FLIIB2: [
+      ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+    ],
+  },
+
+  runtime: [
+    // 实时数据
+    ...Array.from(
+      { length: 16 },
+      () => Math.floor(Math.random() * 100) + "m³/h"
+    ),
+  ],
+};
+
+// export const stateNameMap = {
+//   lastFireChangeTime: "10分20秒",
+//   fireChangeTime: "10:23",
+//   fireDirection: "东火",
+// };
+
+const fanFrequenceSlice = createSlice({
+  name: "fanFrequence",
+  initialState,
+  reducers: {
+    setHistory: (state, action) => {
+      state.history = action.payload;
+    },
+    setRuntime: (state, action) => {
+      state.runtime = action.payload;
+    },
+  },
+});
+
+export default fanFrequenceSlice.reducer;
+export const { setHistory, setRuntime } = fanFrequenceSlice.actions;
--- a/src/store/features/gasSlice.js
+++ b/src/store/features/gasSlice.js
@@ -0,0 +1,50 @@
+// 风机运行频率
+import { createSlice } from "@reduxjs/toolkit";
+
+/**
+ * 由于接口并没有经过合理的评审，所以这里的数据结构是不确定的，需要根据实际情况进行调整
+ */
+
+export const initialState = {
+  history: {
+    // 历史数据
+    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))],
+  },
+
+  runtime: [
+    // 实时数据
+    ...Array.from(
+      { length: 8 },
+      () => Math.floor(Math.random() * 100) + "m³/h"
+    ),
+  ],
+};
+
+// export const stateNameMap = {
+//   lastFireChangeTime: "10分20秒",
+//   fireChangeTime: "10:23",
+//   fireDirection: "东火",
+// };
+
+const gasSlice = createSlice({
+  name: "wind",
+  initialState,
+  reducers: {
+    setHistory: (state, action) => {
+      state.history = action.payload;
+    },
+    setRuntime: (state, action) => {
+      state.runtime = action.payload;
+    },
+  },
+});
+
+export default gasSlice.reducer;
+export const { setHistory, setRuntime } = gasSlice.actions;
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,10 +1,14 @@
 import { configureStore } from "@reduxjs/toolkit";
 import kilnReducer from "./features/kilnSlice";
 import fireReducer from "./features/fireSlice";
+import fanFrequenceReducer from "./features/fanFrequenceSlice";
+import gasReducer from "./features/gasSlice";

 export const store = configureStore({
  reducer: {
    kiln: kilnReducer,
    fireInfo: fireReducer,
+    fanFrequence: fanFrequenceReducer,
+    wind: gasReducer,
  },
 });