update fire redux
This commit is contained in:
lb
förälder
c16a52a20e
incheckning
a18cb7a1c7
@ -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);
|
||||
|
||||
@ -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 (
|
||||
<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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
68
src/hooks/useTimeCounter.js
Normal file
68
src/hooks/useTimeCounter.js
Normal file
@ -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;
|
||||
28
src/store/features/fireSlice.js
Normal file
28
src/store/features/fireSlice.js
Normal file
@ -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;
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
Laddar…
Referens i nytt ärende
Block a user