Merge branch 'testing-redux'

This commit is contained in:
lb 2023-11-10 10:10:18 +08:00
commit bc03a717bb
12 changed files with 768 additions and 383 deletions

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) {

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;

View File

@ -1,31 +1,52 @@
import React from "react";
import { useContext } from "react";
import Container from "../../Container";
// import SocketContext from '../../../store/socket-data-provider';
import cls from "./kiln.module.scss"; import cls from "./kiln.module.scss";
import Container from "../../Container";
import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { stateNameMap } from "../../../store/features/kilnSlice";
export default function Kiln() { export default function Kiln() {
// const ctx = useContext(SocketContext); const kilnInfo = useSelector((state) => state.kiln);
const ctx = null; const dispatch = useDispatch();
const infos = [ const infos = Object.keys(kilnInfo).map((key) => ({
{ label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" }, label: stateNameMap[key],
{ label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" }, value: kilnInfo[key],
{ label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" }, }));
{ label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
{ useEffect(() => {
label: "助燃风压力", setInterval(() => {
value: ctx?.runState?.combustionAirPressure || "0℃", dispatch({
}, type: "kiln/setKilnInfo",
{ label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" }, payload: {
{ kilnPressure: Math.ceil(Math.random() * 100) + "Pa",
label: "压缩气压力", waterTemp: Math.ceil(Math.random() * 100) + "℃",
value: ctx?.runState?.compressedAirPressure || "0Pa", waterFlow: Math.ceil(Math.random() * 100) + "m³/h",
}, waterPressure: Math.ceil(Math.random() * 100) + "Pa",
{ label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" }, combustionAirPressure: Math.ceil(Math.random() * 100) + "Pa",
]; topTemp: Math.ceil(Math.random() * 100) + "℃",
compressedAirPressure: Math.ceil(Math.random() * 100) + "Pa",
meltTemp: Math.ceil(Math.random() * 100) + "℃",
},
});
}, 30000);
}, [dispatch]);
// const infos = [
// { label: "", value: ctx?.runState?.kilnPressure || "0Pa" },
// { label: "", value: ctx?.runState?.waterTemp || "0" },
// { label: "", value: ctx?.runState?.waterFlow || "0/h" },
// { label: "", value: ctx?.runState?.waterPressure || "0Pa" },
// {
// label: "",
// value: ctx?.runState?.combustionAirPressure || "0",
// },
// { label: "", value: ctx?.runState?.topTemp || "0" },
// {
// label: "",
// value: ctx?.runState?.compressedAirPressure || "0Pa",
// },
// { label: "", value: ctx?.runState?.meltTemp || "0" },
// ];
return ( return (
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}> <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>

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;

View File

@ -1,99 +1,121 @@
import cls from "./leftbox.module.scss";
import React, { useState, useContext, useEffect } from "react"; import React, { useState, useContext, useEffect } from "react";
// import SocketContext from '../../../store/socket-data-provider'; import { useSelector, useDispatch } from "react-redux";
import icon1 from "../../../assets/CenterChart2icon1.svg"; import icon1 from "../../../assets/CenterChart2icon1.svg";
import icon2 from "../../../assets/CenterChart2icon2.svg"; import icon2 from "../../../assets/CenterChart2icon2.svg";
import icon3 from "../../../assets/CenterChart2icon3.svg"; import icon3 from "../../../assets/CenterChart2icon3.svg";
import icon4 from "../../../assets/CenterChart2icon4.svg"; // import icon4 from "../../../assets/CenterChart2icon4.svg";
import cls from "./leftbox.module.scss"; import useTimeCounter from "../../../hooks/useTimeCounter";
const Chart2 = () => { const FireInfo = () => {
// const ctx = useContext(SocketContext); const dispatch = useDispatch();
const ctx = null; const fireInfo = useSelector((state) => state.fireInfo);
const time = fireInfo.lastFireChangeTime || "0分0秒";
const [min, sec] = useTimeCounter(time);
let [time, setTime] = useState([0, 0]); // useEffect(() => {
// const restTime = ctx?.runState?.lastFireChangeTime;
// if (restTime == null) return;
// let timer = null;
// if (//.test(restTime) && //.test(restTime)) {
// let [min, sec] = restTime.replace(//, ":").replace(//, "").split(":");
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// } else if (//.test(restTime)) {
// let sec,
// min = restTime.replace(//, ":");
// sec = 0;
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// } else if (//.test(restTime)) {
// let min,
// sec = restTime.replace(//, "");
// min = 0;
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// }
// return () => {
// clearInterval(timer);
// };
// }, [ctx?.runState?.lastFireChangeTime]);
useEffect(() => { useEffect(() => {
const restTime = ctx?.runState?.lastFireChangeTime; setInterval(() => {
if (restTime == null) return; dispatch({
let timer = null; type: "fireInfo/setFireInfo",
if (/分/.test(restTime) && /秒/.test(restTime)) { payload: {
let [min, sec] = restTime.replace(/分/, ":").replace(/秒/, "").split(":"); fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
timer = setInterval(() => { Math.random() * 10
if (Number(sec) === 0 && Number(min) === 0) { )}`,
clearInterval(timer); fireDirection: Math.random * 10 < 5 ? "东火" : "西火",
return; lastFireChangeTime: `${Math.ceil(Math.random() * 60)}${Math.ceil(
} Math.random() * 50
if (Number(sec) === 0) { )}`,
sec = 59; },
min--; });
} else { }, 10000);
sec--; }, []);
}
setTime([min, sec]);
}, 1000);
} else if (/分/.test(restTime)) {
let sec,
min = restTime.replace(/分/, ":");
sec = 0;
timer = setInterval(() => {
if (Number(sec) === 0 && Number(min) === 0) {
clearInterval(timer);
return;
}
if (Number(sec) === 0) {
sec = 59;
min--;
} else {
sec--;
}
setTime([min, sec]);
}, 1000);
} else if (/秒/.test(restTime)) {
let min,
sec = restTime.replace(/秒/, "");
min = 0;
timer = setInterval(() => {
if (Number(sec) === 0 && Number(min) === 0) {
clearInterval(timer);
return;
}
if (Number(sec) === 0) {
sec = 59;
min--;
} else {
sec--;
}
setTime([min, sec]);
}, 1000);
}
return () => {
clearInterval(timer);
};
}, [ctx?.runState?.lastFireChangeTime]);
const data = [ const data = [
{ {
icon: icon1, icon: icon1,
label: "换火时间", label: "换火时间",
value: ctx?.runState?.fireChangeTime || "00:00", // value: ctx?.runState?.fireChangeTime || "00:00",
value: fireInfo.fireChangeTime || "00:00",
}, },
{ {
icon: icon3, icon: icon3,
label: "剩余时间", label: "剩余时间",
value: `${time[0]}${time[1]}`, // value: `${time[0]}${time[1]}`,
value: `${min}${sec}`,
}, },
{ {
icon: icon2, icon: icon2,
label: "当前火向", label: "当前火向",
value: ctx?.runState?.fireDirection || "东火", // value: ctx?.runState?.fireDirection || "",
value: fireInfo.fireDirection || "东火",
}, },
]; ];
return ( return (
<div className={`${cls.leftbox} flex h-half`}> <div className={`${cls.leftbox} flex`}>
{data.map((item) => ( {data.map((item) => (
<div className={cls.box} key={item.label}> <div className={cls.box} key={item.label}>
<img src={item.icon} alt="Error" className="box__logo" /> <img src={item.icon} alt="Error" className="box__logo" />
@ -107,4 +129,4 @@ const Chart2 = () => {
); );
}; };
export default Chart2; export default FireInfo;

View File

@ -1,8 +1,11 @@
.leftbox { .leftbox {
// height: 128px;
height: 110px;
.box { .box {
margin-right: 16px; margin-right: 16px;
width: 200px; width: 200px;
padding: 12px; padding: 12px 8px;
background: url(../../../assets/CenterChart2ItemBg.png); background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -22,8 +25,8 @@
.box__value { .box__value {
color: #fff; color: #fff;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 28px;
line-height: 56px; line-height: 54px;
} }
} }
} }

View File

@ -0,0 +1,69 @@
import { useEffect, useState } from "react";
function useTimeCounter(time) {
console.log('time counter executed...')
// time: 8分12秒 这种
const [timeTuple, setTimeTuple] = useState([0, 0]);
useEffect(() => {
if (time == null) return;
let timer = null;
if (/分/.test(time) && /秒/.test(time)) {
let [min, sec] = time.replace(/分/, ":").replace(/秒/, "").split(":");
timer = setInterval(() => {
if (Number(sec) === 0 && Number(min) === 0) {
clearInterval(timer);
return;
}
if (Number(sec) === 0) {
sec = 59;
min--;
} else {
sec--;
}
setTimeTuple([min, sec]);
}, 1000);
} else if (/分/.test(time)) {
let sec,
min = time.replace(/分/, ":");
sec = 0;
timer = setInterval(() => {
if (Number(sec) === 0 && Number(min) === 0) {
clearInterval(timer);
return;
}
if (Number(sec) === 0) {
sec = 59;
min--;
} else {
sec--;
}
setTimeTuple([min, sec]);
}, 1000);
} else if (/秒/.test(time)) {
let min,
sec = time.replace(/秒/, "");
min = 0;
timer = setInterval(() => {
if (Number(sec) === 0 && Number(min) === 0) {
clearInterval(timer);
return;
}
if (Number(sec) === 0) {
sec = 59;
min--;
} else {
sec--;
}
setTimeTuple([min, sec]);
}, 1000);
}
return () => {
clearInterval(timer);
};
}, [time]);
return timeTuple;
}
export default useTimeCounter;

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;

View File

@ -0,0 +1,28 @@
import { createSlice } from "@reduxjs/toolkit";
export const initialState = {
lastFireChangeTime: "10分20秒",
fireChangeTime: "10:23",
fireDirection: "东火",
};
// export const stateNameMap = {
// lastFireChangeTime: "10分20秒",
// fireChangeTime: "10:23",
// fireDirection: "东火",
// };
const fireSlice = createSlice({
name: "fireInfo",
initialState,
reducers: {
setFireInfo: (state, action) => {
Object.keys(action.payload).forEach((key) => {
state[key] = action.payload[key];
});
},
},
});
export default fireSlice.reducer;
export const { setFireInfo } = fireSlice.actions;

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;

View File

@ -0,0 +1,38 @@
import { createSlice } from "@reduxjs/toolkit";
export const initialState = {
kilnPressure: "0Pa",
waterTemp: "0℃",
waterFlow: "0m³/h",
waterPressure: "0Pa",
combustionAirPressure: "0Pa",
topTemp: "0℃",
compressedAirPressure: "0Pa",
meltTemp: "0℃",
};
export const stateNameMap = {
kilnPressure: "窑炉压力",
waterTemp: "循环水温度",
waterFlow: "循环水流量",
waterPressure: "循环水压力",
combustionAirPressure: "助燃风压力",
topTemp: "碹顶加权温度",
compressedAirPressure: "压缩气压力",
meltTemp: "融化加权温度",
};
const kilnSlice = createSlice({
name: "kiln",
initialState,
reducers: {
setKilnInfo: (state, action) => {
Object.keys(action.payload).forEach((key) => {
state[key] = action.payload[key];
});
},
},
});
export default kilnSlice.reducer;
export const { setKilnInfo } = kilnSlice.actions;

View File

@ -1,8 +1,14 @@
import { configureStore } from "@reduxjs/toolkit"; import { configureStore } from "@reduxjs/toolkit";
// import counterReducer from '../features/kiln/KilnSlice' import kilnReducer from "./features/kilnSlice";
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: {
// counter: counterReducer, kiln: kilnReducer,
fireInfo: fireReducer,
fanFrequence: fanFrequenceReducer,
wind: gasReducer,
}, },
}); });