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 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,
             }}
           />
+          <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 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,
             }}
           />
+          <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 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,
             }}
           />
+          <FeederStatus />
         </motion.div>
       )}
     </AnimatePresence>