connect 助燃风流量
This commit is contained in:
lb
@@ -7,55 +7,56 @@ import { Switch } from "antd";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
function mockData(type = "runtime") {
|
||||
const RUNTIME_DATA_LENGTH = 8;
|
||||
const MAX_HISTORY_DATA_LENGTH = 8;
|
||||
const WEEK = 7;
|
||||
// function mockData(type = "runtime") {
|
||||
// const RUNTIME_DATA_LENGTH = 8;
|
||||
// const MAX_HISTORY_DATA_LENGTH = 8;
|
||||
// const WEEK = 7;
|
||||
|
||||
switch (type) {
|
||||
case "runtime":
|
||||
return [
|
||||
...Array.from(
|
||||
{ length: RUNTIME_DATA_LENGTH },
|
||||
() => Math.floor(Math.random() * 100) + "m³/h"
|
||||
),
|
||||
];
|
||||
case "history":
|
||||
return {
|
||||
...Array.from(
|
||||
{ length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
|
||||
(_, index) => ({
|
||||
["GAS_" + index]: [
|
||||
...Array.from({ length: WEEK }, () =>
|
||||
Math.floor(Math.random() * 100)
|
||||
),
|
||||
],
|
||||
})
|
||||
).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
|
||||
};
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
// switch (type) {
|
||||
// case "runtime":
|
||||
// return [
|
||||
// ...Array.from(
|
||||
// { length: RUNTIME_DATA_LENGTH },
|
||||
// () => Math.floor(Math.random() * 100) + "m³/h"
|
||||
// ),
|
||||
// ];
|
||||
// case "history":
|
||||
// return {
|
||||
// ...Array.from(
|
||||
// { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
|
||||
// (_, index) => ({
|
||||
// ["GAS_" + index]: [
|
||||
// ...Array.from({ length: WEEK }, () =>
|
||||
// Math.floor(Math.random() * 100)
|
||||
// ),
|
||||
// ],
|
||||
// })
|
||||
// ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
|
||||
// };
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
/** 助燃风流量 */
|
||||
function GasI(props) {
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
const dispath = useDispatch();
|
||||
const runState = useSelector((state) => state.wind.runtime);
|
||||
const hisState = useSelector((state) => state.wind.history);
|
||||
// const dispath = useDispatch();
|
||||
const runState = useSelector((state) => state.combustionAir.runtime);
|
||||
const hisState = useSelector((state) => state.combustionAir.history);
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
dispath({
|
||||
type: "fanFrequence/setRuntime",
|
||||
payload: mockData("runtime"),
|
||||
});
|
||||
dispath({
|
||||
type: "fanFrequence/setHistory",
|
||||
payload: mockData("history"),
|
||||
});
|
||||
}, 60000);
|
||||
}, [dispath]);
|
||||
// useEffect(() => {
|
||||
// setInterval(() => {
|
||||
// dispath({
|
||||
// type: "combustionAir/setRuntime",
|
||||
// payload: mockData("runtime"),
|
||||
// });
|
||||
// dispath({
|
||||
// type: "combustionAir/setHistory",
|
||||
// payload: mockData("history"),
|
||||
// });
|
||||
// }, 60000);
|
||||
// }, [dispath]);
|
||||
|
||||
let dataList = [];
|
||||
let seriesData = [];
|
||||
@@ -136,7 +137,7 @@ function GasI(props) {
|
||||
// max: 100,
|
||||
},
|
||||
series: seriesData.map((v, i) => ({
|
||||
name: i + 1 + "#助燃风",
|
||||
name: i + 1 + "#助燃风流量",
|
||||
data: v,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
@@ -156,27 +157,27 @@ function GasI(props) {
|
||||
dataList =
|
||||
runState != null
|
||||
? [
|
||||
{ id: 1, name: "1#助燃风", value: "0m³/h" },
|
||||
{ id: 2, name: "2#助燃风", value: "0m³/h" },
|
||||
{ id: 3, name: "3#助燃风", value: "0m³/h" },
|
||||
{ id: 4, name: "4#助燃风", value: "0m³/h" },
|
||||
{ id: 5, name: "5#助燃风", value: "0m³/h" },
|
||||
{ id: 6, name: "6#助燃风", value: "0m³/h" },
|
||||
{ id: 7, name: "7#助燃风", value: "0m³/h" },
|
||||
{ id: 8, name: "8#助燃风", value: "0m³/h" },
|
||||
{ id: 1, name: "1#助燃风流量", value: "0m³/h" },
|
||||
{ id: 2, name: "2#助燃风流量", value: "0m³/h" },
|
||||
{ id: 3, name: "3#助燃风流量", value: "0m³/h" },
|
||||
{ id: 4, name: "4#助燃风流量", value: "0m³/h" },
|
||||
{ id: 5, name: "5#助燃风流量", value: "0m³/h" },
|
||||
{ id: 6, name: "6#助燃风流量", value: "0m³/h" },
|
||||
{ id: 7, name: "7#助燃风流量", value: "0m³/h" },
|
||||
{ id: 8, name: "8#助燃风流量", value: "0m³/h" },
|
||||
].map((item, index) => ({
|
||||
...item,
|
||||
value: runState[index] ?? "/",
|
||||
}))
|
||||
: [
|
||||
{ id: 1, name: "1#助燃风", value: "0m³/h" },
|
||||
{ id: 2, name: "2#助燃风", value: "0m³/h" },
|
||||
{ id: 3, name: "3#助燃风", value: "0m³/h" },
|
||||
{ id: 4, name: "4#助燃风", value: "0m³/h" },
|
||||
{ id: 5, name: "5#助燃风", value: "0m³/h" },
|
||||
{ id: 6, name: "6#助燃风", value: "0m³/h" },
|
||||
{ id: 7, name: "7#助燃风", value: "0m³/h" },
|
||||
{ id: 8, name: "8#助燃风", value: "0m³/h" },
|
||||
{ id: 1, name: "1#助燃风流量", value: "0m³/h" },
|
||||
{ id: 2, name: "2#助燃风流量", value: "0m³/h" },
|
||||
{ id: 3, name: "3#助燃风流量", value: "0m³/h" },
|
||||
{ id: 4, name: "4#助燃风流量", value: "0m³/h" },
|
||||
{ id: 5, name: "5#助燃风流量", value: "0m³/h" },
|
||||
{ id: 6, name: "6#助燃风流量", value: "0m³/h" },
|
||||
{ id: 7, name: "7#助燃风流量", value: "0m³/h" },
|
||||
{ id: 8, name: "8#助燃风流量", value: "0m³/h" },
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
44
src/store/features/combustionAirSlice.js
Normal file
44
src/store/features/combustionAirSlice.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
/** 助燃风流量 */
|
||||
export const initialState = {
|
||||
history: {
|
||||
// 历史数据
|
||||
"1#天然气流量": [
|
||||
// ...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
|
||||
...Array.from({ length: 7 }, () => 0),
|
||||
],
|
||||
"2#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
"3#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
"4#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
"5#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
"6#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
"7#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
"8#天然气流量": [...Array.from({ length: 7 }, () => 0)],
|
||||
},
|
||||
|
||||
runtime: [
|
||||
// 实时数据
|
||||
...Array.from(
|
||||
{ length: 16 },
|
||||
() => "0m³/h"
|
||||
// () => Math.floor(Math.random() * 100) + "m³/h"
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
const combustionAir = createSlice({
|
||||
name: "combustionAir",
|
||||
initialState,
|
||||
reducers: {
|
||||
setHistory: (state, action) => {
|
||||
state.history = action.payload;
|
||||
},
|
||||
setRuntime: (state, action) => {
|
||||
state.runtime = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default combustionAir.reducer;
|
||||
export const { setHistory, setRuntime } = combustionAir.actions;
|
||||
@@ -2,13 +2,20 @@ import { configureStore } from "@reduxjs/toolkit";
|
||||
import kilnReducer from "./features/kilnSlice";
|
||||
import fireReducer from "./features/fireSlice";
|
||||
import fanFrequenceReducer from "./features/fanFrequenceSlice";
|
||||
import combustionAirReducer from "./features/combustionAirSlice";
|
||||
import gasReducer from "./features/gasSlice";
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
// 窑炉信息
|
||||
kiln: kilnReducer,
|
||||
// 火向信息
|
||||
fireInfo: fireReducer,
|
||||
// 风机运行频率
|
||||
fanFrequence: fanFrequenceReducer,
|
||||
// 天然气流量
|
||||
wind: gasReducer,
|
||||
// 助燃风流量
|
||||
combustionAir: combustionAirReducer,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@ export function randomInt(min, max, includeMax = false) {
|
||||
}
|
||||
|
||||
export class WsClient {
|
||||
static wsServer = "ws://192.168.1.12:8081/xc-screen/websocket/info";
|
||||
static wsServer = "ws://192.168.1.12:8081/xc-screen/websocket/xc001";
|
||||
static socket = null;
|
||||
static tryCount = 0;
|
||||
|
||||
@@ -35,6 +35,19 @@ export class WsClient {
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "CombustionAirInfo": {
|
||||
// 助燃风流量 实时
|
||||
store.dispatch({
|
||||
type: "combustionAir/setRuntime",
|
||||
payload: serializedData.data.combustionAirNow, // []
|
||||
});
|
||||
// 助燃风流量 历史
|
||||
store.dispatch({
|
||||
type: "combustionAir/setHistory",
|
||||
payload: serializedData.data.combustionAirHis, // {}
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
console.log("websocket message: [unknown] ---> ", e.data);
|
||||
}
|
||||
@@ -46,8 +59,7 @@ export class WsClient {
|
||||
WsClient.socket.onclose = (e) => {
|
||||
let timer = setTimeout(() => {
|
||||
if (WsClient.tryCount < 3) {
|
||||
const wsc = new WsClient();
|
||||
wsc.init();
|
||||
new WsClient();
|
||||
WsClient.tryCount += 1;
|
||||
} else clearTimeout(timer);
|
||||
}, 30000);
|
||||
|
||||
Reference in New Issue
Block a user