diff --git a/src/components/Common/GasFlow/index.jsx b/src/components/Common/GasFlow/index.jsx index 9905e28..8f47b1e 100644 --- a/src/components/Common/GasFlow/index.jsx +++ b/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") { - const RUNTIME_DATA_LENGTH = 8; - const MAX_HISTORY_DATA_LENGTH = 8; - const WEEK = 7; +// 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; - } -} +// 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 dispath = useDispatch(); - const runState = useSelector((state) => state.wind.runtime); - const hisState = useSelector((state) => state.wind.history); + // const dispath = useDispatch(); + const runState = useSelector((state) => state.combustionAir.runtime); + const hisState = useSelector((state) => state.combustionAir.history); - useEffect(() => { - setInterval(() => { - dispath({ - type: "fanFrequence/setRuntime", - payload: mockData("runtime"), - }); - dispath({ - type: "fanFrequence/setHistory", - payload: mockData("history"), - }); - }, 60000); - }, [dispath]); + // useEffect(() => { + // setInterval(() => { + // dispath({ + // type: "combustionAir/setRuntime", + // payload: mockData("runtime"), + // }); + // dispath({ + // type: "combustionAir/setHistory", + // payload: mockData("history"), + // }); + // }, 60000); + // }, [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: 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: 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" }, + { 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" }, ]; } diff --git a/src/store/features/combustionAirSlice.js b/src/store/features/combustionAirSlice.js new file mode 100644 index 0000000..5f38dae --- /dev/null +++ b/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; diff --git a/src/store/index.js b/src/store/index.js index 3b9edc0..8c4e3d9 100644 --- a/src/store/index.js +++ b/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, }, }); diff --git a/src/utils/index.js b/src/utils/index.js index 858223f..4867d29 100644 --- a/src/utils/index.js +++ b/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(); - wsc.init(); + new WsClient(); WsClient.tryCount += 1; } else clearTimeout(timer); }, 30000);