mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 风机运行频率

Browse Source
This commit is contained in:
lb 2023-12-01 10:17:47 +08:00
parent d1d47cf5ac
commit 550da629c0
6 changed files with 236 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/Common/FanRunFrequence/index.jsx
View File

@ -6,55 +6,55 @@ import GraphBase from "../../Common/GraphBase";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
function mockData(type = "runtime") { // function mockData(type = "runtime") {
const RUNTIME_DATA_LENGTH = 16; // const RUNTIME_DATA_LENGTH = 16;
const MAX_HISTORY_DATA_LENGTH = 10; // const MAX_HISTORY_DATA_LENGTH = 10;
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) => ({
["FAIIA" + index]: [ // ["FAIIA" + 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 WindFrequence(props) { function WindFrequence(props) {
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(false);
const dispath = useDispatch(); // const dispath = useDispatch();
const runState = useSelector((state) => state.fanFrequence.runtime); const runState = useSelector((state) => state.fanFrequence.runtime);
const hisState = useSelector((state) => state.fanFrequence.history); const hisState = useSelector((state) => state.fanFrequence.history);
useEffect(() => { // useEffect(() => {
setInterval(() => { // setInterval(() => {
dispath({ // dispath({
type: "fanFrequence/setRuntime", // type: "fanFrequence/setRuntime",
payload: mockData("runtime"), // payload: mockData("runtime"),
}); // });
dispath({ // dispath({
type: "fanFrequence/setHistory", // type: "fanFrequence/setHistory",
payload: mockData("history"), // payload: mockData("history"),
}); // });
}, 50000); // }, 50000);
}, [dispath]); // }, [dispath]);
let dataList = []; let dataList = [];
let seriesData = []; let seriesData = [];
@ -155,26 +155,10 @@ function WindFrequence(props) {
} else { } else {
dataList = dataList =
runState != null runState != null
? [ ? Object.keys(runState).map((fan) => ({
{ id: 1, name: "1#风机", value: "0m³/h" }, id: Math.random(),
{ id: 2, name: "2#风机", value: "0m³/h" }, name: fan,
{ id: 3, name: "3#风机", value: "0m³/h" }, value: runState[fan],
{ 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: 1, name: "1#风机", value: "0m³/h" },
@ -208,19 +192,35 @@ function WindFrequence(props) {
icon="kiln" icon="kiln"
title="风机运行频率" title="风机运行频率"
size={["middle", "long"]} size={["middle", "long"]}
switchOptions={true} switchOptions={false}
switchPosition={[null, 200]} // [top, left] switchPosition={[null, 200]} // [top, left]
onSwitch={handleSwitchChange} onSwitch={handleSwitchChange}
> >
<div className={cls.chart}> <div className={cls.chart}>
{showChart && ( {/* {showChart && (
<ReactECharts option={options} style={{ height: "100%" }} /> <ReactECharts option={options} style={{ height: "100%" }} />
)} )} */}
{!showChart && ( {!showChart && (
<div className={cls.gridList}> <div className={cls.gridList}>
{dataList.map((item) => ( {dataList.map((item) => (
<div key={item.id} className={cls.listItem}> <div
{item.name}: {item.value} key={item.id}
className={cls.listItem}
style={{ padding: props.stretch ? "16px 0" : "" }}
>
<span className={cls.fanName}>{item.name}</span>
<span
className={cls.fanValue}
style={{
fontWeight: 700,
letterSpacing: 1,
fontSize: 16,
// color: "#e03537",
color: "#24aebb",
}}
>
{item.value}
</span>
</div> </div>
))} ))}
</div> </div>

61
src/components/Common/FanRunFrequence/index.module.css
View File

@ -1,33 +1,52 @@
.chart { .chart {
height: 100%; height: 100%;
} }
.gridList { .gridList {
margin-top: 12px; margin-top: 12px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
/* grid-auto-row: ; */ /* grid-auto-row: ; */
gap: 6px; gap: 6px;
} }
.listItem { .listItem {
border-radius: 2px; border-radius: 2px;
padding: 9px 0; padding: 10px 0;
text-align: center; text-align: center;
color: #fff; color: #fff;
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197); box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
display: flex;
align-items: center;
gap: 12px;
} }
.headWidget { .headWidget {
position: absolute; position: absolute;
top: 22px; top: 22px;
right: 24px; right: 24px;
height: 32px; height: 32px;
width: 410px; width: 410px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
color: #fff; color: #fff;
} }
.relative { .relative {
position: relative; position: relative;
}
.flex {
display: flex;
align-items: center;
}
.fanName {
text-align: right;
flex: 7;
}
.fanValue {
flex: 3;
text-align: left;
} }

2
src/components/Modules/KilnInner/RightSide/index.jsx
View File

@ -24,7 +24,7 @@ export default function index() {
<FanInfo /> <FanInfo />
</div> </div>
<div style={{ flex: 1, marginTop: '24px' }}> <div style={{ flex: 1, marginTop: '24px' }}>
<WindFrequence /> <WindFrequence stretch />
</div> </div>
</motion.div> </motion.div>
); );

38
src/store/features/fanFrequenceSlice.js
View File

@ -42,21 +42,33 @@ export const initialState = {
], ],
}, },
runtime: [ // runtime: [
// 实时数据 // // 实时数据
...Array.from( // ...Array.from(
{ length: 16 }, // { length: 16 },
() => Math.floor(Math.random() * 100) + "m³/h" // () => 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({ const fanFrequenceSlice = createSlice({
name: "fanFrequence", name: "fanFrequence",
initialState, initialState,

70
src/store/features/fanInfo.js Normal file
View File

@ -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;

55
src/utils/index.js
View File

@ -48,29 +48,38 @@ export class WsClient {
}); });
break; break;
} }
case "GasInfo": { case "GasInfo": {
// 天然气流量 1 实时 // 天然气流量 1 实时
store.dispatch({ store.dispatch({
type: 'natGas/setGasIRuntime', type: "natGas/setGasIRuntime",
payload: serializedData.data.gas1Now payload: serializedData.data.gas1Now,
}) });
// 天然气流量 1 历史 // 天然气流量 1 历史
store.dispatch({ store.dispatch({
type: 'natGas/setGasIHistory', type: "natGas/setGasIHistory",
payload: serializedData.data.hisGas1 payload: serializedData.data.hisGas1,
}) });
// 天然气流量 2 实时 // 天然气流量 2 实时
store.dispatch({ store.dispatch({
type: 'natGas/setGasIIRuntime', type: "natGas/setGasIIRuntime",
payload: serializedData.data.gas2Now payload: serializedData.data.gas2Now,
}) });
// 天然气流量 2 历史 // 天然气流量 2 历史
store.dispatch({ store.dispatch({
type: 'natGas/setGasIIHistory', type: "natGas/setGasIIHistory",
payload: serializedData.data.hisGas2 payload: serializedData.data.hisGas2,
}) });
break; break;
} }
case "FanFrequencyInfo": {
// 风机运行频率 暂时只有实时数据
store.dispatch({
type: "fanFrequence/setRuntime",
payload: serializedData.data.FanFrequencyInfo,
});
// 风机运行频率 历史 暂无
break;
}
default: { default: {
console.log("websocket message: [unknown] ---> ", e.data); console.log("websocket message: [unknown] ---> ", e.data);
} }