From a18cb7a1c77f17ca529c59fa32f6cc3e27409a45 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 9 Nov 2023 17:01:25 +0800 Subject: [PATCH] update fire redux --- src/components/Common/KilnInfo/Kiln.jsx | 5 +- src/components/Common/TimeFireDir/index.jsx | 164 ++++++++++-------- .../Common/TimeFireDir/leftbox.module.scss | 9 +- src/hooks/useTimeCounter.js | 68 ++++++++ src/store/features/fireSlice.js | 28 +++ src/store/index.js | 2 + 6 files changed, 199 insertions(+), 77 deletions(-) create mode 100644 src/hooks/useTimeCounter.js create mode 100644 src/store/features/fireSlice.js diff --git a/src/components/Common/KilnInfo/Kiln.jsx b/src/components/Common/KilnInfo/Kiln.jsx index d72b08d..05c8a65 100644 --- a/src/components/Common/KilnInfo/Kiln.jsx +++ b/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); diff --git a/src/components/Common/TimeFireDir/index.jsx b/src/components/Common/TimeFireDir/index.jsx index 8174493..765a0bf 100644 --- a/src/components/Common/TimeFireDir/index.jsx +++ b/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 ctx = useContext(SocketContext); - const ctx = null; +const FireInfo = () => { + const dispatch = useDispatch(); + 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; - 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]); + 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: 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 ( -
+
{data.map((item) => (
Error @@ -107,4 +129,4 @@ const Chart2 = () => { ); }; -export default Chart2; +export default FireInfo; diff --git a/src/components/Common/TimeFireDir/leftbox.module.scss b/src/components/Common/TimeFireDir/leftbox.module.scss index 23273fa..8e8ceae 100644 --- a/src/components/Common/TimeFireDir/leftbox.module.scss +++ b/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; - line-height: 56px; + font-size: 28px; + line-height: 54px; } } } diff --git a/src/hooks/useTimeCounter.js b/src/hooks/useTimeCounter.js new file mode 100644 index 0000000..0da16b7 --- /dev/null +++ b/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; diff --git a/src/store/features/fireSlice.js b/src/store/features/fireSlice.js new file mode 100644 index 0000000..66ef453 --- /dev/null +++ b/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; diff --git a/src/store/index.js b/src/store/index.js index a3be550..8988efa 100644 --- a/src/store/index.js +++ b/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, }, });