setup

src/components/Common/TimeFireDir/index.jsx

@@ -0,0 +1,111 @@
+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";
+import icon3 from "../../../assets/CenterChart2icon3.svg";
+import icon4 from "../../../assets/CenterChart2icon4.svg";
+
+import cls from "./leftbox.module.scss";
+
+const Chart2 = () => {
+  // const ctx = useContext(SocketContext);
+  const ctx = null;
+
+  let [time, setTime] = useState([0, 0]);
+
+  useEffect(() => {
+    const restTime = ctx?.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);
+    };
+  }, [ctx?.runState?.lastFireChangeTime]);
+
+  const data = [
+    {
+      icon: icon1,
+      label: "换火时间",
+      value: ctx?.runState?.fireChangeTime || "00:00",
+    },
+    {
+      icon: icon3,
+      label: "剩余时间",
+      value: `${time[0]}分${time[1]}秒`,
+    },
+    {
+      icon: icon2,
+      label: "当前火向",
+      value: ctx?.runState?.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;

src/components/Common/TimeFireDir/leftbox.module.scss

@@ -0,0 +1,33 @@
+.leftbox {
+	// width: 440px;
+	// background: rgb(127, 202, 42);
+
+	.box {
+		margin-right: 16px;
+		width: 200px;
+		padding: 8px;
+		background: url(../../../assets/CenterChart2ItemBg.png);
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		display: flex;
+		align-items: flex-start;
+		user-select: none;
+
+		.box__inner {
+			padding-top: 12px;
+
+			.box__label {
+				color: #fffa;
+				font-size: 18px;
+				line-height: 14px;
+			}
+
+			.box__value {
+				color: #fff;
+				font-weight: 400;
+				font-size: 30px;
+				line-height: 34px;
+			}
+		}
+	}
+}