diff --git a/src/components/Common/FanRunFrequence/index.jsx b/src/components/Common/FanRunFrequence/index.jsx index a2db858..7486193 100644 --- a/src/components/Common/FanRunFrequence/index.jsx +++ b/src/components/Common/FanRunFrequence/index.jsx @@ -6,55 +6,55 @@ import GraphBase from "../../Common/GraphBase"; 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; +// 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; - } -} +// 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 dispath = useDispatch(); + const [showChart, setShowChart] = useState(false); + // const dispath = useDispatch(); const runState = useSelector((state) => state.fanFrequence.runtime); const hisState = useSelector((state) => state.fanFrequence.history); - useEffect(() => { - setInterval(() => { - dispath({ - type: "fanFrequence/setRuntime", - payload: mockData("runtime"), - }); - dispath({ - type: "fanFrequence/setHistory", - payload: mockData("history"), - }); - }, 50000); - }, [dispath]); + // useEffect(() => { + // setInterval(() => { + // dispath({ + // type: "fanFrequence/setRuntime", + // payload: mockData("runtime"), + // }); + // dispath({ + // type: "fanFrequence/setHistory", + // payload: mockData("history"), + // }); + // }, 50000); + // }, [dispath]); let dataList = []; let seriesData = []; @@ -155,26 +155,10 @@ function WindFrequence(props) { } 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" }, - { 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] ?? "/", + ? Object.keys(runState).map((fan) => ({ + id: Math.random(), + name: fan, + value: runState[fan], })) : [ { id: 1, name: "1#风机", value: "0m³/h" }, @@ -208,19 +192,35 @@ function WindFrequence(props) { icon="kiln" title="风机运行频率" size={["middle", "long"]} - switchOptions={true} + switchOptions={false} switchPosition={[null, 200]} // [top, left] onSwitch={handleSwitchChange} >
- {showChart && ( + {/* {showChart && ( - )} + )} */} {!showChart && (
{dataList.map((item) => ( -
- {item.name}: {item.value} +
+ {item.name} + + {item.value} +
))}
diff --git a/src/components/Common/FanRunFrequence/index.module.css b/src/components/Common/FanRunFrequence/index.module.css index c31981f..ccd9acf 100644 --- a/src/components/Common/FanRunFrequence/index.module.css +++ b/src/components/Common/FanRunFrequence/index.module.css @@ -1,33 +1,52 @@ .chart { - height: 100%; + height: 100%; } .gridList { - margin-top: 12px; - display: grid; - grid-template-columns: 1fr 1fr; - /* grid-auto-row: ; */ - gap: 6px; + margin-top: 12px; + display: grid; + grid-template-columns: 1fr 1fr; + /* grid-auto-row: ; */ + gap: 6px; } .listItem { - border-radius: 2px; - padding: 9px 0; - text-align: center; - color: #fff; - box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197); + border-radius: 2px; + padding: 10px 0; + text-align: center; + color: #fff; + box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197); + display: flex; + align-items: center; + gap: 12px; } + .headWidget { - position: absolute; - top: 22px; - right: 24px; - height: 32px; - width: 410px; - display: flex; - align-items: center; - justify-content: flex-start; - color: #fff; + position: absolute; + top: 22px; + right: 24px; + height: 32px; + width: 410px; + display: flex; + align-items: center; + justify-content: flex-start; + color: #fff; } .relative { - position: relative; + position: relative; +} + +.flex { + display: flex; + align-items: center; +} + +.fanName { + text-align: right; + flex: 7; +} + +.fanValue { + flex: 3; + text-align: left; } diff --git a/src/components/Modules/KilnInner/RightSide/index.jsx b/src/components/Modules/KilnInner/RightSide/index.jsx index 76d1f2c..e378f51 100644 --- a/src/components/Modules/KilnInner/RightSide/index.jsx +++ b/src/components/Modules/KilnInner/RightSide/index.jsx @@ -24,7 +24,7 @@ export default function index() {
- +
); diff --git a/src/store/features/fanFrequenceSlice.js b/src/store/features/fanFrequenceSlice.js index 0a3e8c6..0a6ff1b 100644 --- a/src/store/features/fanFrequenceSlice.js +++ b/src/store/features/fanFrequenceSlice.js @@ -42,21 +42,33 @@ export const initialState = { ], }, - runtime: [ - // 实时数据 - ...Array.from( - { length: 16 }, - () => Math.floor(Math.random() * 100) + "m³/h" - ), - ], + // runtime: [ + // // 实时数据 + // ...Array.from( + // { length: 16 }, + // () => Math.floor(Math.random() * 100) + "m³/h" + // ), + // ], + runtime: { + "1#10处拐角冷却风机": "0", + "1#L型吊墙冷却风机": "0", + "1#助燃风机": "0", + "1#澄清带池壁风机": "0", + "1#融化带池壁风机": "0", + "1#钢碹碴小炉垛风机": "0", + "2#10处拐角冷却风机": "0", + "2#L型吊墙冷却风机": "0", + "2#助燃风机": "0", + "2#澄清带池壁风机": "0", + "2#融化带池壁风机": "0", + "2#钢碹碴小炉垛风机": "0", + "3#澄清带池壁风机": "0", + "3#融化带池壁风机": "0", + "4#澄清带池壁风机": "0", + "4#融化带池壁风机": "0", + }, }; -// export const stateNameMap = { -// lastFireChangeTime: "10分20秒", -// fireChangeTime: "10:23", -// fireDirection: "东火", -// }; - const fanFrequenceSlice = createSlice({ name: "fanFrequence", initialState, diff --git a/src/store/features/fanInfo.js b/src/store/features/fanInfo.js new file mode 100644 index 0000000..6d662cd --- /dev/null +++ b/src/store/features/fanInfo.js @@ -0,0 +1,70 @@ +// 风机信息 +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; diff --git a/src/utils/index.js b/src/utils/index.js index c030e01..f3718eb 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -48,29 +48,38 @@ export class WsClient { }); break; } - case "GasInfo": { - // 天然气流量 1 实时 - store.dispatch({ - type: 'natGas/setGasIRuntime', - payload: serializedData.data.gas1Now - }) - // 天然气流量 1 历史 - store.dispatch({ - type: 'natGas/setGasIHistory', - payload: serializedData.data.hisGas1 - }) - // 天然气流量 2 实时 - store.dispatch({ - type: 'natGas/setGasIIRuntime', - payload: serializedData.data.gas2Now - }) - // 天然气流量 2 历史 - store.dispatch({ - type: 'natGas/setGasIIHistory', - payload: serializedData.data.hisGas2 - }) - break; - } + case "GasInfo": { + // 天然气流量 1 实时 + store.dispatch({ + type: "natGas/setGasIRuntime", + payload: serializedData.data.gas1Now, + }); + // 天然气流量 1 历史 + store.dispatch({ + type: "natGas/setGasIHistory", + payload: serializedData.data.hisGas1, + }); + // 天然气流量 2 实时 + store.dispatch({ + type: "natGas/setGasIIRuntime", + payload: serializedData.data.gas2Now, + }); + // 天然气流量 2 历史 + store.dispatch({ + type: "natGas/setGasIIHistory", + payload: serializedData.data.hisGas2, + }); + break; + } + case "FanFrequencyInfo": { + // 风机运行频率 暂时只有实时数据 + store.dispatch({ + type: "fanFrequence/setRuntime", + payload: serializedData.data.FanFrequencyInfo, + }); + // 风机运行频率 历史 暂无 + break; + } default: { console.log("websocket message: [unknown] ---> ", e.data); }