update fire redux

src/components/Common/KilnInfo/Kiln.jsx

@@ -1,9 +1,8 @@
 import cls from "./kiln.module.scss";
 import Container from "../../Container";
-import { useSelector } from "react-redux";
-import { stateNameMap } from "../../../store/features/kilnSlice";
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { stateNameMap } from "../../../store/features/kilnSlice";
 
 export default function Kiln() {
   const kilnInfo = useSelector((state) => state.kiln);

src/components/Common/TimeFireDir/index.jsx

@@ -1,99 +1,121 @@
+import cls from "./leftbox.module.scss";
 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 icon2 from "../../../assets/CenterChart2icon2.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(() => {
-    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 = [
     {
       icon: icon1,
       label: "换火时间",
-      value: ctx?.runState?.fireChangeTime || "00:00",
+      // value: ctx?.runState?.fireChangeTime || "00:00",
+      value: fireInfo.fireChangeTime || "00:00",
     },
     {
       icon: icon3,
       label: "剩余时间",
-      value: `${time[0]}分${time[1]}秒`,
+      // value: `${time[0]}分${time[1]}秒`,
+      value: `${min}分${sec}秒`,
     },
     {
       icon: icon2,
       label: "当前火向",
-      value: ctx?.runState?.fireDirection || "东火",
+      // value: ctx?.runState?.fireDirection || "东火",
+      value: fireInfo.fireDirection || "东火",
     },
   ];
 
   return (
-    <div className={`${cls.leftbox} flex h-half`}>
+    <div className={`${cls.leftbox} flex`}>
       {data.map((item) => (
         <div className={cls.box} key={item.label}>
           <img src={item.icon} alt="Error" className="box__logo" />
@@ -107,4 +129,4 @@ const Chart2 = () => {
   );
 };
 
-export default Chart2;
+export default FireInfo;

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

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

src/hooks/useTimeCounter.js

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+
+function useTimeCounter(time) {
+  // 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;

src/store/features/fireSlice.js

@@ -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;

src/store/index.js

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 import kilnReducer from "./features/kilnSlice";
+import fireReducer from "./features/fireSlice";
 
 export const store = configureStore({
   reducer: {
     kiln: kilnReducer,
+    fireInfo: fireReducer,
   },
 });