update 投料机

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 (
+    <motion.div
+      className="feeder"
+      style={{
+        position: "absolute",
+        bottom: "128px",
+        left: "800px",
+        width: "300px",
+        height: "80px",
+        zIndex: "-1",
+        display: "flex",
+        gap: "20px",
+        ...props.style,
+      }}
+      animate={{
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 2 },
+      }}
+    >
+      <span
+        style={{
+          color: "#fff",
+          border: "1px solid #fff",
+          padding: "12px",
+          background: leftFeeder == "运行" ? "#0f03" : "#f003",
+        }}
+      >
+        投料机1 : {leftFeeder}
+      </span>
+      <span
+        style={{
+          color: "#fff",
+          border: "1px solid #fff",
+          padding: "12px",
+          background: rightFeeder == "运行" ? "#0f03" : "#f003",
+        }}
+      >
+        投料机2 : {rightFeeder}
+      </span>
+    </motion.div>
+  );
+}
+
+export default FeederStatus;

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 FeederStatus from "../../../../Common/Feeder";
-// import SocketContext from '../../../../../store/socket-data-provider';
-// import TemperatureTop from "../../../../Common/TemperatureTop";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
 
 function EnterToFloorOne(props) {
@@ -92,6 +90,7 @@ function EnterToFloorOne(props) {
               zIndex: 0,
             }}
           />
+          <FeederStatus />
         </motion.div>
       )}
     </AnimatePresence>

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 FeederStatus from "../../../../Common/Feeder";
-// import SocketContext from '../../../../../store/socket-data-provider';
-// import { useContext } from "react";
 import TemperatureTop from "../../../../../components/Common/TemperatureTop";
 
 
@@ -96,6 +94,7 @@ function FloorOneToTwo(props) {
               zIndex: 0,
             }}
           />
+          <FeederStatus />
         </motion.div>
       )}
     </AnimatePresence>

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 FeederStatus from "../../../../Common/Feeder";
-// import SocketContext from '../../../../../store/socket-data-provider';
-// import { useContext } from "react";
-// import TemperatureTop from "../../../../../components/Common/TemperatureTop";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
 
 function FloorTwoToOne(props) {
@@ -97,6 +94,7 @@ function FloorTwoToOne(props) {
               zIndex: 0,
             }}
           />
+          <FeederStatus />
         </motion.div>
       )}
     </AnimatePresence>

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;

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,
     // 风机运行频率

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);
         }