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

add more slices

Browse Source
This commit is contained in:
lb
2023-11-10 10:09:50 +08:00
parent a18cb7a1c7
commit 3821121a6f
8 changed files with 487 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,17 +2,59 @@
import cls from "./index.module.css"; import cls from "./index.module.css";
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Switch } from "antd";
import GraphBase from "../../Common/GraphBase"; import GraphBase from "../../Common/GraphBase";
import { useState, useContext } from "react"; import { useEffect, useState } from "react";
// import SocketContext from '../../../store/socket-data-provider'; import { useSelector, useDispatch } from "react-redux";
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;
}
}
function WindFrequence(props) { function WindFrequence(props) {
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
// const { runState, hisState } = useContext(SocketContext); const dispath = useDispatch();
const runState = useSelector((state) => state.fanFrequence.runtime);
const hisState = useSelector((state) => state.fanFrequence.history);
const runState = null; useEffect(() => {
const hisState = null; setInterval(() => {
dispath({
type: "fanFrequence/setRuntime",
payload: mockData("runtime"),
});
dispath({
type: "fanFrequence/setHistory",
payload: mockData("history"),
});
}, 50000);
}, [dispath]);
let dataList = []; let dataList = [];
let seriesData = []; let seriesData = [];
@@ -29,20 +71,15 @@ function WindFrequence(props) {
let options = null; let options = null;
if (showChart) { if (showChart) {
// keys() 结果不是按照顺序，需要 sort() // keys() 结果不是按照顺序，需要 sort()
seriesData = hisState?.combustionAir seriesData =
? Object.keys(hisState.combustionAir) hisState != null
.sort() ? Object.keys(hisState)
.map((key) => hisState.combustionAir[key]) .sort()
: Array(8) .map((key) => hisState[key])
.fill(1) : Array(8)
.map((_) => Array(7).fill(0)); .fill(1)
.map((_) => Array(7).fill(0));
// debug
console.log(
"助燃风 chart series data",
hisState?.combustionAir,
seriesData
);
options = { options = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 20, left: 48 },
@@ -104,9 +141,10 @@ function WindFrequence(props) {
symbol: "circle", symbol: "circle",
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[i] + "40" }, // i % 8 避免超过8个数据时无颜色的问题
{ offset: 0.5, color: colors[i] + "20" }, { offset: 0, color: colors[i % 8] + "40" },
{ offset: 1, color: colors[i] + "00" }, { offset: 0.5, color: colors[i % 8] + "20" },
{ offset: 1, color: colors[i % 8] + "00" },
]), ]),
}, },
})), })),
@@ -115,46 +153,47 @@ function WindFrequence(props) {
}, },
}; };
} else { } else {
dataList = runState?.combustionAirPressureArr dataList =
? [ runState != null
{ id: 1, name: "1#风机", value: "0m³/h" }, ? [
{ id: 2, name: "2#风机", value: "0m³/h" }, { id: 1, name: "1#风机", value: "0m³/h" },
{ id: 3, name: "3#风机", value: "0m³/h" }, { id: 2, name: "2#风机", value: "0m³/h" },
{ id: 4, name: "4#风机", value: "0m³/h" }, { id: 3, name: "3#风机", value: "0m³/h" },
{ id: 5, name: "5#风机", value: "0m³/h" }, { id: 4, name: "4#风机", value: "0m³/h" },
{ id: 6, name: "6#风机", value: "0m³/h" }, { id: 5, name: "5#风机", value: "0m³/h" },
{ id: 7, name: "7#风机", value: "0m³/h" }, { id: 6, name: "6#风机", value: "0m³/h" },
{ id: 8, name: "8#风机", value: "0m³/h" }, { id: 7, name: "7#风机", value: "0m³/h" },
{ id: 9, name: "9#风机", value: "0m³/h" }, { id: 8, name: "8#风机", value: "0m³/h" },
{ id: 10, name: "10#风机", value: "0m³/h" }, { id: 9, name: "9#风机", value: "0m³/h" },
{ id: 11, name: "11#风机", value: "0m³/h" }, { id: 10, name: "10#风机", value: "0m³/h" },
{ id: 12, name: "12#风机", value: "0m³/h" }, { id: 11, name: "11#风机", value: "0m³/h" },
{ id: 13, name: "13#风机", value: "0m³/h" }, { id: 12, name: "12#风机", value: "0m³/h" },
{ id: 14, name: "14#风机", value: "0m³/h" }, { id: 13, name: "13#风机", value: "0m³/h" },
{ id: 15, name: "15#风机", value: "0m³/h" }, { id: 14, name: "14#风机", value: "0m³/h" },
{ id: 16, name: "16#风机", value: "0m³/h" }, { id: 15, name: "15#风机", value: "0m³/h" },
].map((item, index) => ({ { id: 16, name: "16#风机", value: "0m³/h" },
...item, ].map((item, index) => ({
value: runState.combustionAirPressureArr[index] ?? "/", ...item,
})) value: runState[index] ?? "/",
: [ }))
{ id: 1, name: "1#风机", value: "0m³/h" }, : [
{ id: 2, name: "2#风机", value: "0m³/h" }, { id: 1, name: "1#风机", value: "0m³/h" },
{ id: 3, name: "3#风机", value: "0m³/h" }, { id: 2, name: "2#风机", value: "0m³/h" },
{ id: 4, name: "4#风机", value: "0m³/h" }, { id: 3, name: "3#风机", value: "0m³/h" },
{ id: 5, name: "5#风机", value: "0m³/h" }, { id: 4, name: "4#风机", value: "0m³/h" },
{ id: 6, name: "6#风机", value: "0m³/h" }, { id: 5, name: "5#风机", value: "0m³/h" },
{ id: 7, name: "7#风机", value: "0m³/h" }, { id: 6, name: "6#风机", value: "0m³/h" },
{ id: 8, name: "8#风机", value: "0m³/h" }, { id: 7, name: "7#风机", value: "0m³/h" },
{ id: 9, name: "9#风机", value: "0m³/h" }, { id: 8, name: "8#风机", value: "0m³/h" },
{ id: 10, name: "10#风机", value: "0m³/h" }, { id: 9, name: "9#风机", value: "0m³/h" },
{ id: 11, name: "11#风机", value: "0m³/h" }, { id: 10, name: "10#风机", value: "0m³/h" },
{ id: 12, name: "12#风机", value: "0m³/h" }, { id: 11, name: "11#风机", value: "0m³/h" },
{ id: 13, name: "13#风机", value: "0m³/h" }, { id: 12, name: "12#风机", value: "0m³/h" },
{ id: 14, name: "14#风机", value: "0m³/h" }, { id: 13, name: "13#风机", value: "0m³/h" },
{ id: 15, name: "15#风机", value: "0m³/h" }, { id: 14, name: "14#风机", value: "0m³/h" },
{ id: 16, name: "16#风机", value: "0m³/h" }, { id: 15, name: "15#风机", value: "0m³/h" },
]; { id: 16, name: "16#风机", value: "0m³/h" },
];
} }
function handleSwitchChange(val) { function handleSwitchChange(val) {

388
src/components/Common/GasFlow/index.jsx
View File

@@ -1,187 +1,223 @@
// 助燃风流量 // 助燃风流量
import cls from './index.module.css'; import cls from "./index.module.css";
import BottomBarItem from '../BottomItemBackground'; import BottomBarItem from "../BottomItemBackground";
import ReactECharts from 'echarts-for-react'; import ReactECharts from "echarts-for-react";
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { randomInt } from '../../../utils'; import { Switch } from "antd";
import { Switch } from 'antd'; import { useState, useEffect } from "react";
import { useState, useContext } from 'react'; import { useSelector, useDispatch } from "react-redux";
// import SocketContext from '../../../store/socket-data-provider';
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;
}
}
function GasI(props) { function GasI(props) {
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
// const { runState, hisState } = useContext(SocketContext); const dispath = useDispatch();
const runState = useSelector((state) => state.wind.runtime);
const hisState = useSelector((state) => state.wind.history);
const runState = null; useEffect(() => {
const hisState = null; setInterval(() => {
dispath({
type: "fanFrequence/setRuntime",
payload: mockData("runtime"),
});
dispath({
type: "fanFrequence/setHistory",
payload: mockData("history"),
});
}, 60000);
}, [dispath]);
let dataList = []; let dataList = [];
let seriesData = []; let seriesData = [];
const colors = [ const colors = [
'#12FFF5', "#12FFF5",
'#2760FF', "#2760FF",
'#FFD160', "#FFD160",
'#E80091', "#E80091",
'#8064ff', "#8064ff",
'#ff8a3b', "#ff8a3b",
'#8cd26d', "#8cd26d",
'#2aa1ff', "#2aa1ff",
]; ];
let options = null; let options = null;
if (showChart) { if (showChart) {
// keys() 结果不是按照顺序，需要 sort() // keys() 结果不是按照顺序，需要 sort()
seriesData = hisState?.combustionAir seriesData =
? Object.keys(hisState.combustionAir) hisState != null
.sort() ? Object.keys(hisState)
.map((key) => hisState.combustionAir[key]) .sort()
: Array(8) .map((key) => hisState[key])
.fill(1) : Array(8)
.map((_) => Array(7).fill(0)); .fill(1)
.map((_) => Array(7).fill(0));
// debug options = {
console.log( color: colors,
'助燃风 chart series data', grid: { top: 32, right: 12, bottom: 20, left: 48 },
hisState?.combustionAir, xAxis: {
seriesData, type: "category",
); data: Array(7)
options = { .fill(1)
color: colors, .map((_, index) => {
grid: { top: 32, right: 12, bottom: 20, left: 48 }, const today = new Date();
xAxis: { const dtimestamp = today - index * 24 * 60 * 60 * 1000;
type: 'category', return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
data: Array(7) dtimestamp
.fill(1) ).getDate()}`;
.map((_, index) => { })
const today = new Date(); .reverse(),
const dtimestamp = today - index * 24 * 60 * 60 * 1000; axisLabel: {
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( color: "#fff",
dtimestamp, fontSize: 12,
).getDate()}`; },
}) axisTick: { show: false },
.reverse(), axisLine: {
axisLabel: { lineStyle: {
color: '#fff', width: 1,
fontSize: 12, color: "#213259",
}, },
axisTick: { show: false }, },
axisLine: { },
lineStyle: { yAxis: {
width: 1, name: "单位/m³",
color: '#213259', nameTextStyle: {
}, color: "#fff",
}, fontSize: 10,
}, align: "right",
yAxis: { },
name: '单位/m³', type: "value",
nameTextStyle: { axisLabel: {
color: '#fff', color: "#fff",
fontSize: 10, fontSize: 12,
align: 'right', },
}, axisLine: {
type: 'value', show: true,
axisLabel: { lineStyle: {
color: '#fff', color: "#213259",
fontSize: 12, },
}, },
axisLine: { splitLine: {
show: true, lineStyle: {
lineStyle: { color: "#213259a0",
color: '#213259', },
}, },
}, // interval: 10,
splitLine: { // min: 0,
lineStyle: { // max: 100,
color: '#213259a0', },
}, series: seriesData.map((v, i) => ({
}, name: i + 1 + "#助燃风",
// interval: 10, data: v,
// min: 0, type: "line",
// max: 100, symbol: "circle",
}, areaStyle: {
series: seriesData.map((v, i) => ({ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
name: i + 1 + '#助燃风', { offset: 0, color: colors[i % colors.length] + "40" },
data: v, { offset: 0.5, color: colors[i % colors.length] + "20" },
type: 'line', { offset: 1, color: colors[i % colors.length] + "00" },
symbol: 'circle', ]),
areaStyle: { },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ })),
{ offset: 0, color: colors[i] + '40' }, tooltip: {
{ offset: 0.5, color: colors[i] + '20' }, trigger: "axis",
{ offset: 1, color: colors[i] + '00' }, },
]), };
}, } else {
})), dataList =
tooltip: { runState != null
trigger: 'axis', ? [
}, { id: 1, name: "1#助燃风", value: "0m³/h" },
}; { id: 2, name: "2#助燃风", value: "0m³/h" },
} else { { id: 3, name: "3#助燃风", value: "0m³/h" },
dataList = runState?.combustionAirPressureArr { id: 4, name: "4#助燃风", value: "0m³/h" },
? [ { id: 5, name: "5#助燃风", value: "0m³/h" },
{ id: 1, name: '1#助燃风', value: '0m³/h' }, { id: 6, name: "6#助燃风", value: "0m³/h" },
{ id: 2, name: '2#助燃风', value: '0m³/h' }, { id: 7, name: "7#助燃风", value: "0m³/h" },
{ id: 3, name: '3#助燃风', value: '0m³/h' }, { id: 8, name: "8#助燃风", value: "0m³/h" },
{ id: 4, name: '4#助燃风', value: '0m³/h' }, ].map((item, index) => ({
{ id: 5, name: '5#助燃风', value: '0m³/h' }, ...item,
{ id: 6, name: '6#助燃风', value: '0m³/h' }, value: runState[index] ?? "/",
{ id: 7, name: '7#助燃风', value: '0m³/h' }, }))
{ id: 8, name: '8#助燃风', value: '0m³/h' }, : [
].map((item, index) => ({ { id: 1, name: "1#助燃风", value: "0m³/h" },
...item, { id: 2, name: "2#助燃风", value: "0m³/h" },
value: runState.combustionAirPressureArr[index] ?? '/', { id: 3, name: "3#助燃风", value: "0m³/h" },
})) { id: 4, name: "4#助燃风", value: "0m³/h" },
: [ { id: 5, name: "5#助燃风", value: "0m³/h" },
{ id: 1, name: '1#助燃风', value: '0m³/h' }, { id: 6, name: "6#助燃风", value: "0m³/h" },
{ id: 2, name: '2#助燃风', value: '0m³/h' }, { id: 7, name: "7#助燃风", value: "0m³/h" },
{ id: 3, name: '3#助燃风', value: '0m³/h' }, { id: 8, name: "8#助燃风", 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' },
];
// debug
console.log('助燃风 实时 data', runState?.combustionAirPressureArr);
}
function handleSwitchChange(val) { function handleSwitchChange(val) {
if (val) { if (val) {
setShowChart(true); setShowChart(true);
} else { } else {
setShowChart(false); setShowChart(false);
} }
} }
return ( return (
<BottomBarItem <BottomBarItem
icon="pause" icon="pause"
title="助燃风流量" title="助燃风流量"
className={cls.gas} className={cls.gas}
style={props.style} style={props.style}
> >
<div className={cls.headWidget}> <div className={cls.headWidget}>
<div className="flex items-center"> <div className="flex items-center">
<Switch size="small" defaultChecked onChange={handleSwitchChange} /> <Switch size="small" defaultChecked onChange={handleSwitchChange} />
{showChart && <span className={cls.switchLabel}>历史详情</span>} {showChart && <span className={cls.switchLabel}>历史详情</span>}
{!showChart && <span className={cls.switchLabel}>实时流量</span>} {!showChart && <span className={cls.switchLabel}>实时流量</span>}
</div> </div>
</div> </div>
<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 key={item.id} className={cls.listItem}>
{item.name}: {item.value} {item.name}: {item.value}
</div> </div>
))} ))}
</div> </div>
)} )}
</div> </div>
</BottomBarItem> </BottomBarItem>
); );
} }
export default GasI; export default GasI;

3
src/components/Common/KilnInfo/Kiln.jsx
View File

@@ -7,7 +7,6 @@ import { stateNameMap } from "../../../store/features/kilnSlice";
export default function Kiln() { export default function Kiln() {
const kilnInfo = useSelector((state) => state.kiln); const kilnInfo = useSelector((state) => state.kiln);
const dispatch = useDispatch(); const dispatch = useDispatch();
console.log("state: ", kilnInfo, stateNameMap);
const infos = Object.keys(kilnInfo).map((key) => ({ const infos = Object.keys(kilnInfo).map((key) => ({
label: stateNameMap[key], label: stateNameMap[key],
@@ -30,7 +29,7 @@ export default function Kiln() {
}, },
}); });
}, 30000); }, 30000);
}, []); }, [dispatch]);
// const infos = [ // const infos = [
// { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" }, // { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },

89
src/components/Common/NatGasFlow/gridList/index.jsx
View File

@@ -1,55 +1,54 @@
import cls from './index.module.css'; import cls from "./index.module.css";
import { useContext, useEffect, useState } from 'react'; import { useEffect, useState } from "react";
// import SocketContext from '../../../../store/socket-data-provider';
function getData(type) { function getData(type) {
let data = []; let data = [];
switch (type) { switch (type) {
case 'gas-i': case "gas-i":
data = [ data = [
{ id: 1, name: '1#天然气I', value: '0m³/h' }, { id: 1, name: "1#天然气I", value: "0m³/h" },
{ id: 2, name: '2#天然气I', value: '0m³/h' }, { id: 2, name: "2#天然气I", value: "0m³/h" },
{ id: 3, name: '3#天然气I', value: '0m³/h' }, { id: 3, name: "3#天然气I", value: "0m³/h" },
{ id: 4, name: '4#天然气I', value: '0m³/h' }, { id: 4, name: "4#天然气I", value: "0m³/h" },
{ id: 5, name: '5#天然气I', value: '0m³/h' }, { id: 5, name: "5#天然气I", value: "0m³/h" },
{ id: 6, name: '6#天然气I', value: '0m³/h' }, { id: 6, name: "6#天然气I", value: "0m³/h" },
{ id: 7, name: '7#天然气I', value: '0m³/h' }, { id: 7, name: "7#天然气I", value: "0m³/h" },
{ id: 8, name: '8#天然气I', value: '0m³/h' }, { id: 8, name: "8#天然气I", value: "0m³/h" },
]; ];
break; break;
case 'gas-ii': case "gas-ii":
data = [ data = [
{ id: 11, name: '1#天然气II', value: '0m³/h' }, { id: 11, name: "1#天然气II", value: "0m³/h" },
{ id: 12, name: '2#天然气II', value: '0m³/h' }, { id: 12, name: "2#天然气II", value: "0m³/h" },
{ id: 13, name: '3#天然气II', value: '0m³/h' }, { id: 13, name: "3#天然气II", value: "0m³/h" },
{ id: 14, name: '4#天然气II', value: '0m³/h' }, { id: 14, name: "4#天然气II", value: "0m³/h" },
// { id: 15, name: '5#天然气II', value: '0m³/h' }, // { id: 15, name: '5#天然气II', value: '0m³/h' },
]; ];
break; break;
} }
return data; return data;
} }
function GridList(props) { function GridList(props) {
// const { runState } = useContext(SocketContext); // const { runState } = useContext(SocketContext);
const runState = null; const runState = null;
const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
let dataList = getData(props.dataSource); const key = props.dataSource == "gas-i" ? "gasFlowArr" : "furnaceGasFlowArr";
dataList = runState?.[key]
? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
: dataList;
return ( let dataList = getData(props.dataSource);
<div className={cls.gridList}> dataList = runState?.[key]
{dataList.map((item) => ( ? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? "/" }))
<div key={item.id} className={cls.listItem}> : dataList;
{item.name}: {item.value}
</div> return (
))} <div className={cls.gridList}>
</div> {dataList.map((item) => (
); <div key={item.id} className={cls.listItem}>
{item.name}: {item.value}
</div>
))}
</div>
);
} }
export default GridList; export default GridList;

1
src/hooks/useTimeCounter.js
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
function useTimeCounter(time) { function useTimeCounter(time) {
console.log('time counter executed...')
// time: 8分12秒 这种 // time: 8分12秒 这种
const [timeTuple, setTimeTuple] = useState([0, 0]); const [timeTuple, setTimeTuple] = useState([0, 0]);

74
src/store/features/fanFrequenceSlice.js Normal file
View File

@@ -0,0 +1,74 @@
// 风机运行频率
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;

50
src/store/features/gasSlice.js Normal file
View File

@@ -0,0 +1,50 @@
// 风机运行频率
import { createSlice } from "@reduxjs/toolkit";
/**
* 由于接口并没有经过合理的评审，所以这里的数据结构是不确定的，需要根据实际情况进行调整
*/
export const initialState = {
history: {
// 历史数据
GAS1: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS2: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS3: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS4: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS5: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS6: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS7: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS8: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
},
runtime: [
// 实时数据
...Array.from(
{ length: 8 },
() => Math.floor(Math.random() * 100) + "m³/h"
),
],
};
// export const stateNameMap = {
// lastFireChangeTime: "10分20秒",
// fireChangeTime: "10:23",
// fireDirection: "东火",
// };
const gasSlice = createSlice({
name: "wind",
initialState,
reducers: {
setHistory: (state, action) => {
state.history = action.payload;
},
setRuntime: (state, action) => {
state.runtime = action.payload;
},
},
});
export default gasSlice.reducer;
export const { setHistory, setRuntime } = gasSlice.actions;

4
src/store/index.js
View File

@@ -1,10 +1,14 @@
import { configureStore } from "@reduxjs/toolkit"; import { configureStore } from "@reduxjs/toolkit";
import kilnReducer from "./features/kilnSlice"; import kilnReducer from "./features/kilnSlice";
import fireReducer from "./features/fireSlice"; import fireReducer from "./features/fireSlice";
import fanFrequenceReducer from "./features/fanFrequenceSlice";
import gasReducer from "./features/gasSlice";
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
kiln: kilnReducer, kiln: kilnReducer,
fireInfo: fireReducer, fireInfo: fireReducer,
fanFrequence: fanFrequenceReducer,
wind: gasReducer,
}, },
}); });