|
|
@@ -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; |