@@ -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..55274f4
--- /dev/null
+++ b/src/hooks/useTimeCounter.js
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+
+function useTimeCounter(time) {
+ console.log('time counter executed...')
+ // 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/fanFrequenceSlice.js b/src/store/features/fanFrequenceSlice.js
new file mode 100644
index 0000000..0a3e8c6
--- /dev/null
+++ b/src/store/features/fanFrequenceSlice.js
@@ -0,0 +1,74 @@
+// 风机运行频率
+import { createSlice } from "@reduxjs/toolkit";
+
+/**
+ * 由于接口并没有经过合理的评审,所以这里的数据结构是不确定的,需要根据实际情况进行调整
+ */
+
+export const initialState = {
+ history: {
+ // 历史数据
+ FLIIA1: [
+ // 帮我生成7个随机整数
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ // 帮我重复上面的模式十次
+ FLIIA2: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIA3: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIA4: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIA5: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIA6: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIA7: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIA8: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIB1: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ FLIIB2: [
+ ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
+ ],
+ },
+
+ runtime: [
+ // 实时数据
+ ...Array.from(
+ { length: 16 },
+ () => Math.floor(Math.random() * 100) + "m³/h"
+ ),
+ ],
+};
+
+// export const stateNameMap = {
+// lastFireChangeTime: "10分20秒",
+// fireChangeTime: "10:23",
+// fireDirection: "东火",
+// };
+
+const fanFrequenceSlice = createSlice({
+ name: "fanFrequence",
+ initialState,
+ reducers: {
+ setHistory: (state, action) => {
+ state.history = action.payload;
+ },
+ setRuntime: (state, action) => {
+ state.runtime = action.payload;
+ },
+ },
+});
+
+export default fanFrequenceSlice.reducer;
+export const { setHistory, setRuntime } = fanFrequenceSlice.actions;
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/features/gasSlice.js b/src/store/features/gasSlice.js
new file mode 100644
index 0000000..c1533af
--- /dev/null
+++ b/src/store/features/gasSlice.js
@@ -0,0 +1,50 @@
+// 风机运行频率
+import { createSlice } from "@reduxjs/toolkit";
+
+/**
+ * 由于接口并没有经过合理的评审,所以这里的数据结构是不确定的,需要根据实际情况进行调整
+ */
+
+export const initialState = {
+ history: {
+ // 历史数据
+ GAS1: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS2: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS3: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS4: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS5: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS6: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS7: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ GAS8: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
+ },
+
+ runtime: [
+ // 实时数据
+ ...Array.from(
+ { length: 8 },
+ () => Math.floor(Math.random() * 100) + "m³/h"
+ ),
+ ],
+};
+
+// export const stateNameMap = {
+// lastFireChangeTime: "10分20秒",
+// fireChangeTime: "10:23",
+// fireDirection: "东火",
+// };
+
+const gasSlice = createSlice({
+ name: "wind",
+ initialState,
+ reducers: {
+ setHistory: (state, action) => {
+ state.history = action.payload;
+ },
+ setRuntime: (state, action) => {
+ state.runtime = action.payload;
+ },
+ },
+});
+
+export default gasSlice.reducer;
+export const { setHistory, setRuntime } = gasSlice.actions;
diff --git a/src/store/features/kilnSlice.js b/src/store/features/kilnSlice.js
new file mode 100644
index 0000000..8f163ed
--- /dev/null
+++ b/src/store/features/kilnSlice.js
@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const initialState = {
+ kilnPressure: "0Pa",
+ waterTemp: "0℃",
+ waterFlow: "0m³/h",
+ waterPressure: "0Pa",
+ combustionAirPressure: "0Pa",
+ topTemp: "0℃",
+ compressedAirPressure: "0Pa",
+ meltTemp: "0℃",
+};
+
+export const stateNameMap = {
+ kilnPressure: "窑炉压力",
+ waterTemp: "循环水温度",
+ waterFlow: "循环水流量",
+ waterPressure: "循环水压力",
+ combustionAirPressure: "助燃风压力",
+ topTemp: "碹顶加权温度",
+ compressedAirPressure: "压缩气压力",
+ meltTemp: "融化加权温度",
+};
+
+const kilnSlice = createSlice({
+ name: "kiln",
+ initialState,
+ reducers: {
+ setKilnInfo: (state, action) => {
+ Object.keys(action.payload).forEach((key) => {
+ state[key] = action.payload[key];
+ });
+ },
+ },
+});
+
+export default kilnSlice.reducer;
+export const { setKilnInfo } = kilnSlice.actions;
diff --git a/src/store/index.js b/src/store/index.js
index e2e04b0..3b9edc0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,14 @@
import { configureStore } from "@reduxjs/toolkit";
-// import counterReducer from '../features/kiln/KilnSlice'
+import kilnReducer from "./features/kilnSlice";
+import fireReducer from "./features/fireSlice";
+import fanFrequenceReducer from "./features/fanFrequenceSlice";
+import gasReducer from "./features/gasSlice";
export const store = configureStore({
reducer: {
- // counter: counterReducer,
+ kiln: kilnReducer,
+ fireInfo: fireReducer,
+ fanFrequence: fanFrequenceReducer,
+ wind: gasReducer,
},
});