diff --git a/src/components/Common/Feeder/index.jsx b/src/components/Common/Feeder/index.jsx new file mode 100644 index 0000000..a502e12 --- /dev/null +++ b/src/components/Common/Feeder/index.jsx @@ -0,0 +1,51 @@ +import { useSelector } from "react-redux"; +import { motion, AnimatePresence } from "framer-motion"; + +function FeederStatus(props) { + const feeder = useSelector((state) => state.feeder); + const rightFeeder = feeder.rightFeeder; + const leftFeeder = feeder.leftFeeder; + return ( + + + 投料机1 : {leftFeeder} + + + 投料机2 : {rightFeeder} + + + ); +} + +export default FeederStatus; diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx index 349a8a4..5a7d9a6 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx @@ -1,8 +1,6 @@ import { motion, AnimatePresence } from "framer-motion"; import { useRef, useEffect, useMemo, useCallback, useState } from "react"; -// import cls from "../index.module.css"; -// import SocketContext from '../../../../../store/socket-data-provider'; -// import TemperatureTop from "../../../../Common/TemperatureTop"; +import FeederStatus from "../../../../Common/Feeder"; import TemperatureBottom from "../../../../Common/TemperatureBottom"; function EnterToFloorOne(props) { @@ -92,6 +90,7 @@ function EnterToFloorOne(props) { zIndex: 0, }} /> + )} diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx index 63e7796..787345c 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx @@ -1,8 +1,6 @@ import { motion, AnimatePresence } from "framer-motion"; import { useRef, useEffect, useMemo, useState } from "react"; -import cls from "../index.module.css"; -// import SocketContext from '../../../../../store/socket-data-provider'; -// import { useContext } from "react"; +import FeederStatus from "../../../../Common/Feeder"; import TemperatureTop from "../../../../../components/Common/TemperatureTop"; @@ -96,6 +94,7 @@ function FloorOneToTwo(props) { zIndex: 0, }} /> + )} diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx index a0584b1..0b2d523 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx @@ -1,9 +1,6 @@ import { motion, AnimatePresence } from "framer-motion"; import { useRef, useEffect, useMemo, useState } from "react"; -import cls from "../index.module.css"; -// import SocketContext from '../../../../../store/socket-data-provider'; -// import { useContext } from "react"; -// import TemperatureTop from "../../../../../components/Common/TemperatureTop"; +import FeederStatus from "../../../../Common/Feeder"; import TemperatureBottom from "../../../../Common/TemperatureBottom"; function FloorTwoToOne(props) { @@ -97,6 +94,7 @@ function FloorTwoToOne(props) { zIndex: 0, }} /> + )} diff --git a/src/store/features/feederSlice.js b/src/store/features/feederSlice.js new file mode 100644 index 0000000..a5747db --- /dev/null +++ b/src/store/features/feederSlice.js @@ -0,0 +1,21 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export const initialState = { + rightFeeder: "运行", + leftFeeder: "运行", +}; + +const feederSlice = createSlice({ + name: "feeder", + initialState, + reducers: { + setFeederInfo: (state, action) => { + Object.keys(action.payload).forEach((key) => { + state[key] = action.payload[key]; + }); + }, + }, +}); + +export default feederSlice.reducer; +export const { setFeederInfo } = feederSlice.actions; diff --git a/src/store/index.js b/src/store/index.js index de93964..11f4d13 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,5 +1,6 @@ import { configureStore } from "@reduxjs/toolkit"; import kilnReducer from "./features/kilnSlice"; +import feederReducer from "./features/feederSlice"; import fireReducer from "./features/fireSlice"; import fanFrequenceReducer from "./features/fanFrequenceSlice"; import combustionAirReducer from "./features/combustionAirSlice"; @@ -10,6 +11,8 @@ export const store = configureStore({ reducer: { // 窑炉信息 kiln: kilnReducer, + // 投料机信息 + feeder: feederReducer, // 火向信息 fireInfo: fireReducer, // 风机运行频率 diff --git a/src/utils/index.js b/src/utils/index.js index d6b69d8..51074a9 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -96,6 +96,14 @@ export class WsClient { }); break; } + case "FeederInfo": { + // 投料机信息 + store.dispatch({ + type: "feeder/setFeederInfo", + payload: serializedData.data, + }); + break; + } default: { console.log("websocket message: [unknown] ---> ", e.data); }