update center time

src/components/CenterTopData/LeftBoxes/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import SocketContext from '../../../store/socket-data-provider';
 import icon1 from '@/assets/CenterChart2icon1.svg';
 import icon2 from '@/assets/CenterChart2icon2.svg';
@@ -9,6 +9,70 @@ import cls from './leftbox.module.less';
 
 const Chart2 = () => {
 	const ctx = useContext(SocketContext);
+	let [restTime, setResttime] = useState(
+		ctx.runState?.lastFireChangeTime || '0分0秒',
+	);
+	let [time, setTime] = useState([0, 0]);
+
+	useEffect(() => {
+		let timer = null;
+		if (restTime == null) return;
+		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]);
 
 	const data = [
 		{
@@ -19,7 +83,7 @@ const Chart2 = () => {
 		{
 			icon: icon3,
 			label: '剩余时间',
-			value: ctx.runState?.lastFireChangeTime || '-',
+			value: `${time[0]}分${time[1]}秒`,
 		},
 		{
 			icon: icon2,