144 lines
4.1 KiB
JavaScript
144 lines
4.1 KiB
JavaScript
import cls from "./leftbox.module.scss";
|
|
import React, { useState, useContext, useEffect } from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
|
|
import icon1 from "../../../assets/CenterChart1icon1.svg";
|
|
import icon2 from "../../../assets/CenterChart1icon2.svg";
|
|
import icon3 from "../../../assets/CenterChart1icon3.svg";
|
|
import icon4 from "../../../assets/CenterChart1icon4.svg";
|
|
// import icon4 from "../../../assets/CenterChart2icon4.svg";
|
|
|
|
import useTimeCounter from "../../../hooks/useTimeCounter";
|
|
|
|
const FireInfo = () => {
|
|
// const dispatch = useDispatch();
|
|
const KilnInfo = useSelector((state) => state.kiln);
|
|
// const time = KilnInfo.lastFireChangeTime || "0分0秒";
|
|
// const minsec = useTimeCounter(time);
|
|
// let [min, sec] = [0, 0];
|
|
// if (minsec) {
|
|
// min = minsec[0];
|
|
// sec = minsec[1];
|
|
// }
|
|
// 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(() => {
|
|
// setInterval(() => {
|
|
// dispatch({
|
|
// type: "fireInfo/setFireInfo",
|
|
// payload: {
|
|
// fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
|
|
// Math.random() * 10
|
|
// )}`,
|
|
// fireDirection: Math.random * 10 < 5 ? "东火" : "西火",
|
|
// lastFireChangeTime: `${Math.ceil(Math.random() * 60)}分${Math.ceil(
|
|
// Math.random() * 50
|
|
// )}秒`,
|
|
// },
|
|
// });
|
|
// }, 10000);
|
|
// }, []);
|
|
|
|
const data = [
|
|
{
|
|
icon: icon1,
|
|
label: "泡界线",
|
|
// value: ctx?.runState?.fireChangeTime || "00:00",
|
|
// value: KilnInfo.fireChangeTime || "00:00",
|
|
},
|
|
{
|
|
icon: icon2,
|
|
label: "磴顶加权温度",
|
|
// value: `${time[0]}分${time[1]}秒`,
|
|
value: KilnInfo.topTemp|| "℃",
|
|
},
|
|
{
|
|
icon: icon3,
|
|
label: "液位",
|
|
// value: ctx?.runState?.fireDirection || "东火",
|
|
value: KilnInfo.liquidLevel || "0",
|
|
},
|
|
{
|
|
icon: icon4,
|
|
label: "池底加权温度",
|
|
// value: ctx?.runState?.fireDirection || "东火",
|
|
value: KilnInfo.meltTemp || "℃",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={`${cls.leftbox}`}>
|
|
{data.map((item) => (
|
|
<div className={cls.box} key={item.label}>
|
|
<img src={item.icon} alt="Error" className="box__logo" />
|
|
<div className={cls.box__inner}>
|
|
<h2 className={cls.box__label}>{item.label}</h2>
|
|
<h2 className={cls.box__value}> {item.value}</h2>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FireInfo;
|