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 { 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}
>
<div className={cls.chart}>
{showChart && (
{/* {showChart && (
<ReactECharts option={options} style={{ height: "100%" }} />
)}
)} */}
{!showChart && (
<div className={cls.gridList}>
{dataList.map((item) => (
<div key={item.id} className={cls.listItem}>
{item.name}: {item.value}
<div
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>

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

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

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

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

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

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

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;
}
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);
}