56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import BlueRect from "../BlueRect";
|
||
import { useSelector } from "react-redux";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useEffect, useState } from "react";
|
||
|
||
const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];
|
||
|
||
function TemperatureBottom(props) {
|
||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
||
const speed = props.speed;
|
||
const floor = props.floor;
|
||
const [speedAn, setSpeedAn] = useState({});
|
||
useEffect(() => {
|
||
// 2，3互切不用展示动画
|
||
if (speed === "f") {
|
||
setSpeedAn({});
|
||
} else {
|
||
if (floor === 2) {
|
||
setSpeedAn({
|
||
opacity: [0, 0, 0, 0.6, 1],
|
||
transition: { duration: 0.3, delay: 1.8 },
|
||
});
|
||
} else {
|
||
setSpeedAn({});
|
||
}
|
||
}
|
||
}, [floor]);
|
||
|
||
return (
|
||
<motion.div
|
||
className="temperature-bottom"
|
||
style={{
|
||
position: "absolute",
|
||
top: "0",
|
||
left: "0",
|
||
width: "100%",
|
||
height: "80vh",
|
||
zIndex: "-1",
|
||
...props.style,
|
||
}}
|
||
animate={speedAn}
|
||
>
|
||
{Object.keys(tempBottom).map((d) => (
|
||
<BlueRect
|
||
title={d}
|
||
key={d + Math.random()}
|
||
value={tempBottom[d]}
|
||
blue={blueTe.includes(d)}
|
||
/>
|
||
))}
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
export default TemperatureBottom;
|