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;