105 lines
2.3 KiB
JavaScript
105 lines
2.3 KiB
JavaScript
import { useSelector } from "react-redux";
|
|
import { motion } from "framer-motion";
|
|
import "./feeder.css";
|
|
|
|
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: "56px",
|
|
left: "740px",
|
|
width: "400px",
|
|
height: "128px",
|
|
zIndex: "-1",
|
|
display: "flex",
|
|
gap: "8px",
|
|
paddingTop: "12px",
|
|
justifyContent: "center",
|
|
...props.style,
|
|
}}
|
|
animate={{
|
|
opacity: [0, 0, 0, 0.6, 1],
|
|
transition: { duration: 0.3, delay: 2 },
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
color: "#6be1e1",
|
|
top: "-32px",
|
|
left: "20px",
|
|
fontSize: "22px",
|
|
}}
|
|
>
|
|
1#投料{" "}
|
|
<b
|
|
style={{
|
|
fontWeight: 400,
|
|
color:
|
|
leftFeeder == "故障"
|
|
? "#f83a35"
|
|
: leftFeeder == "运行"
|
|
? "#9af72b"
|
|
: "#ccc",
|
|
}}
|
|
>
|
|
{leftFeeder}
|
|
</b>
|
|
</span>
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
color: "#6be1e1",
|
|
top: "-32px",
|
|
left: "230px",
|
|
fontSize: "22px",
|
|
}}
|
|
>
|
|
2#投料{" "}
|
|
<b
|
|
style={{
|
|
fontWeight: 400,
|
|
color:
|
|
rightFeeder == "故障"
|
|
? "#f83a35"
|
|
: rightFeeder == "运行"
|
|
? "#9af72b"
|
|
: "#ccc",
|
|
}}
|
|
>
|
|
{rightFeeder}
|
|
</b>
|
|
</span>
|
|
<span
|
|
className={`
|
|
feeder ${
|
|
leftFeeder == "运行"
|
|
? "feeder-running"
|
|
: leftFeeder == "故障"
|
|
? "feeder-error"
|
|
: "feeder-stop"
|
|
}
|
|
`}
|
|
></span>
|
|
<span
|
|
className={`
|
|
feeder ${
|
|
rightFeeder == "运行"
|
|
? "feeder-running"
|
|
: rightFeeder == "故障"
|
|
? "feeder-error"
|
|
: "feeder-stop"
|
|
}
|
|
`}
|
|
></span>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default FeederStatus;
|