@@ -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]) | |||
@@ -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 ( | |||
@@ -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: [ | |||
@@ -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)], | |||
}, | |||
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)], | |||
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)], | |||
}, | |||
}, | |||
runtime: { | |||
gasIRuntime: [ | |||
// 实时数据 | |||
...Array.from( | |||
{ length: 8 }, | |||
// () => Math.floor(Math.random() * 100) + "m³/h" | |||
() => "0m³/h" | |||
), | |||
], | |||
gasIRuntime: [ | |||
// 实时数据 | |||
...Array.from( | |||
{ length: 8 }, | |||
// () => Math.floor(Math.random() * 100) + "m³/h" | |||
() => "0m³/h" | |||
), | |||
], | |||
gasIIRuntime: [ | |||
// 实时数据 | |||
...Array.from({ length: 8 }, () => "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; | |||
}, | |||
}, | |||
}); | |||
@@ -14,7 +14,7 @@ export const store = configureStore({ | |||
// 风机运行频率 | |||
fanFrequence: fanFrequenceReducer, | |||
// 天然气流量 | |||
wind: gasReducer, | |||
natGas: gasReducer, | |||
// 助燃风流量 | |||
combustionAir: combustionAirReducer, | |||
}, | |||
@@ -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; | |||