128 lines
3.0 KiB
JavaScript
128 lines
3.0 KiB
JavaScript
import React, { useState, useContext, useEffect, useMemo } from 'react';
|
|
import SocketContext from '../../../store/socket-data-provider';
|
|
import icon1 from '@/assets/CenterChart2icon1.svg';
|
|
import icon2 from '@/assets/CenterChart2icon2.svg';
|
|
import icon3 from '@/assets/CenterChart2icon3.svg';
|
|
// import icon4 from '@/assets/CenterChart2icon4.svg';
|
|
|
|
import cls from './leftbox.module.less';
|
|
|
|
const Chart2 = () => {
|
|
const { runState } = useContext(SocketContext);
|
|
const [time, setTime] = useState([0, 0]);
|
|
|
|
// console.clear();
|
|
// console.log('>>>>>>>> runstate 更新 (', runState, ')');
|
|
|
|
useEffect(() => {
|
|
const restTime = runState?.lastFireChangeTime;
|
|
if (restTime == null) return;
|
|
console.log('restTime is:', restTime);
|
|
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);
|
|
};
|
|
}, [runState?.lastFireChangeTime, runState?.updateKey]);
|
|
|
|
const lastFireChangeTime = {
|
|
icon: icon3,
|
|
label: '剩余时间',
|
|
value: `${time[0]}分${time[1]}秒`,
|
|
};
|
|
|
|
const fireChangeTime = useMemo(() => {
|
|
return runState?.fireChangeTime || '00:00';
|
|
}, [runState?.fireChangeTime]);
|
|
|
|
const fireDirection = useMemo(() => {
|
|
// let lastValue = null;
|
|
// if (runState?.fireDirection) {
|
|
// lastValue = runState?.fireDirection;
|
|
// }
|
|
// console.log('换火方向： <', runState?.fireDirection, '>')
|
|
return runState?.fireDirection || '南火';
|
|
}, [runState?.fireDirection]);
|
|
|
|
const data = [
|
|
{
|
|
icon: icon1,
|
|
label: '换火时间',
|
|
value: fireChangeTime,
|
|
},
|
|
lastFireChangeTime,
|
|
{
|
|
icon: icon2,
|
|
label: '当前火向',
|
|
value: fireDirection,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={`${cls.leftbox} flex h-half`}>
|
|
{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 Chart2;
|