connect 助燃风流量

src/components/Common/GasFlow/index.jsx

@@ -7,55 +7,56 @@ import { Switch } from "antd";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 
-function mockData(type = "runtime") {
+// function mockData(type = "runtime") {
-  const RUNTIME_DATA_LENGTH = 8;
+//   const RUNTIME_DATA_LENGTH = 8;
-  const MAX_HISTORY_DATA_LENGTH = 8;
+//   const MAX_HISTORY_DATA_LENGTH = 8;
-  const WEEK = 7;
+//   const WEEK = 7;
 
-  switch (type) {
+//   switch (type) {
-    case "runtime":
+//     case "runtime":
-      return [
+//       return [
-        ...Array.from(
+//         ...Array.from(
-          { length: RUNTIME_DATA_LENGTH },
+//           { length: RUNTIME_DATA_LENGTH },
-          () => Math.floor(Math.random() * 100) + "m³/h"
+//           () => Math.floor(Math.random() * 100) + "m³/h"
-        ),
+//         ),
-      ];
+//       ];
-    case "history":
+//     case "history":
-      return {
+//       return {
-        ...Array.from(
+//         ...Array.from(
-          { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
+//           { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
-          (_, index) => ({
+//           (_, index) => ({
-            ["GAS_" + index]: [
+//             ["GAS_" + index]: [
-              ...Array.from({ length: WEEK }, () =>
+//               ...Array.from({ length: WEEK }, () =>
-                Math.floor(Math.random() * 100)
+//                 Math.floor(Math.random() * 100)
-              ),
+//               ),
-            ],
+//             ],
-          })
+//           })
-        ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
+//         ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
-      };
+//       };
-    default:
+//     default:
-      break;
+//       break;
-  }
+//   }
-}
+// }
 
+/** 助燃风流量 */
 function GasI(props) {
   const [showChart, setShowChart] = useState(true);
-  const dispath = useDispatch();
+  // const dispath = useDispatch();
-  const runState = useSelector((state) => state.wind.runtime);
+  const runState = useSelector((state) => state.combustionAir.runtime);
-  const hisState = useSelector((state) => state.wind.history);
+  const hisState = useSelector((state) => state.combustionAir.history);
 
-  useEffect(() => {
+  // useEffect(() => {
-    setInterval(() => {
+  //   setInterval(() => {
-      dispath({
+  //     dispath({
-        type: "fanFrequence/setRuntime",
+  //       type: "combustionAir/setRuntime",
-        payload: mockData("runtime"),
+  //       payload: mockData("runtime"),
-      });
+  //     });
-      dispath({
+  //     dispath({
-        type: "fanFrequence/setHistory",
+  //       type: "combustionAir/setHistory",
-        payload: mockData("history"),
+  //       payload: mockData("history"),
-      });
+  //     });
-    }, 60000);
+  //   }, 60000);
-  }, [dispath]);
+  // }, [dispath]);
 
   let dataList = [];
   let seriesData = [];
@@ -136,7 +137,7 @@ function GasI(props) {
         // max: 100,
       },
       series: seriesData.map((v, i) => ({
-        name: i + 1 + "#助燃风",
+        name: i + 1 + "#助燃风流量",
         data: v,
         type: "line",
         symbol: "circle",
@@ -156,27 +157,27 @@ function GasI(props) {
     dataList =
       runState != null
         ? [
-            { id: 1, name: "1#助燃风", value: "0m³/h" },
+            { id: 1, name: "1#助燃风流量", value: "0m³/h" },
-            { id: 2, name: "2#助燃风", value: "0m³/h" },
+            { id: 2, name: "2#助燃风流量", value: "0m³/h" },
-            { id: 3, name: "3#助燃风", value: "0m³/h" },
+            { id: 3, name: "3#助燃风流量", value: "0m³/h" },
-            { id: 4, name: "4#助燃风", value: "0m³/h" },
+            { id: 4, name: "4#助燃风流量", value: "0m³/h" },
-            { id: 5, name: "5#助燃风", value: "0m³/h" },
+            { id: 5, name: "5#助燃风流量", value: "0m³/h" },
-            { id: 6, name: "6#助燃风", value: "0m³/h" },
+            { id: 6, name: "6#助燃风流量", value: "0m³/h" },
-            { id: 7, name: "7#助燃风", value: "0m³/h" },
+            { id: 7, name: "7#助燃风流量", value: "0m³/h" },
-            { id: 8, name: "8#助燃风", 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: 1, name: "1#助燃风流量", value: "0m³/h" },
-            { id: 2, name: "2#助燃风", value: "0m³/h" },
+            { id: 2, name: "2#助燃风流量", value: "0m³/h" },
-            { id: 3, name: "3#助燃风", value: "0m³/h" },
+            { id: 3, name: "3#助燃风流量", value: "0m³/h" },
-            { id: 4, name: "4#助燃风", value: "0m³/h" },
+            { id: 4, name: "4#助燃风流量", value: "0m³/h" },
-            { id: 5, name: "5#助燃风", value: "0m³/h" },
+            { id: 5, name: "5#助燃风流量", value: "0m³/h" },
-            { id: 6, name: "6#助燃风", value: "0m³/h" },
+            { id: 6, name: "6#助燃风流量", value: "0m³/h" },
-            { id: 7, name: "7#助燃风", value: "0m³/h" },
+            { id: 7, name: "7#助燃风流量", value: "0m³/h" },
-            { id: 8, name: "8#助燃风", value: "0m³/h" },
+            { id: 8, name: "8#助燃风流量", value: "0m³/h" },
           ];
   }
 

src/store/features/combustionAirSlice.js

@@ -0,0 +1,44 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+/** 助燃风流量 */
+export const initialState = {
+  history: {
+    // 历史数据
+    "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)],
+  },
+
+  runtime: [
+    // 实时数据
+    ...Array.from(
+      { length: 16 },
+      () => "0m³/h"
+      // () => Math.floor(Math.random() * 100) + "m³/h"
+    ),
+  ],
+};
+
+const combustionAir = createSlice({
+  name: "combustionAir",
+  initialState,
+  reducers: {
+    setHistory: (state, action) => {
+      state.history = action.payload;
+    },
+    setRuntime: (state, action) => {
+      state.runtime = action.payload;
+    },
+  },
+});
+
+export default combustionAir.reducer;
+export const { setHistory, setRuntime } = combustionAir.actions;

src/store/index.js

@@ -2,13 +2,20 @@ import { configureStore } from "@reduxjs/toolkit";
 import kilnReducer from "./features/kilnSlice";
 import fireReducer from "./features/fireSlice";
 import fanFrequenceReducer from "./features/fanFrequenceSlice";
+import combustionAirReducer from "./features/combustionAirSlice";
 import gasReducer from "./features/gasSlice";
 
 export const store = configureStore({
   reducer: {
+    // 窑炉信息
     kiln: kilnReducer,
+    // 火向信息
     fireInfo: fireReducer,
+    // 风机运行频率
     fanFrequence: fanFrequenceReducer,
+    // 天然气流量
     wind: gasReducer,
+    // 助燃风流量
+    combustionAir: combustionAirReducer,
   },
 });

src/utils/index.js

@@ -10,7 +10,7 @@ export function randomInt(min, max, includeMax = false) {
 }
 
 export class WsClient {
-  static wsServer = "ws://192.168.1.12:8081/xc-screen/websocket/info";
+  static wsServer = "ws://192.168.1.12:8081/xc-screen/websocket/xc001";
   static socket = null;
   static tryCount = 0;
 
@@ -35,6 +35,19 @@ export class WsClient {
           });
           break;
         }
+        case "CombustionAirInfo": {
+          // 助燃风流量 实时
+          store.dispatch({
+            type: "combustionAir/setRuntime",
+            payload: serializedData.data.combustionAirNow, // []
+          });
+          // 助燃风流量 历史
+          store.dispatch({
+            type: "combustionAir/setHistory",
+            payload: serializedData.data.combustionAirHis, // {}
+          });
+          break;
+        }
         default: {
           console.log("websocket message: [unknown] --->  ", e.data);
         }
@@ -46,8 +59,7 @@ export class WsClient {
     WsClient.socket.onclose = (e) => {
       let timer = setTimeout(() => {
         if (WsClient.tryCount < 3) {
-          const wsc = new WsClient();
+          new WsClient();
-          wsc.init();
           WsClient.tryCount += 1;
         } else clearTimeout(timer);
       }, 30000);