窑炉优化

src/components/Common/TemperatureBottom/index.jsx

@@ -1,20 +1,30 @@
 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",
-];
+const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];
 
 function TemperatureBottom(props) {
   const tempBottom = useSelector((state) => state.temperature.bottom);
-  console.log(tempBottom)
-  console.log('==================+++++++++++++')
+  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
@@ -26,15 +36,17 @@ function TemperatureBottom(props) {
         width: "100%",
         height: "80vh",
         zIndex: "-1",
-        ...props.style
-      }}
-      animate={{
-        opacity: [0, 0, 0, 0.6, 1],
-        transition: { duration: 0.3, delay: 2 },
+        ...props.style,
       }}
+      animate={speedAn}
     >
       {Object.keys(tempBottom).map((d) => (
-        <BlueRect title={d} key={d + Math.random()} value={tempBottom[d]} blue={blueTe.includes(d)} />
+        <BlueRect
+          title={d}
+          key={d + Math.random()}
+          value={tempBottom[d]}
+          blue={blueTe.includes(d)}
+        />
       ))}
     </motion.div>
   );

src/components/Common/TemperatureTop/index.jsx

@@ -28,15 +28,20 @@ function TemperatureTop(props) {
         width: "100%",
         height: "80vh",
         zIndex: "-1",
-        ...props.style
+        ...props.style,
       }}
       animate={{
         opacity: [0, 0, 0, 0.6, 1],
-        transition: { duration: 0.3, delay: 2 },
+        transition: { duration: 0.3, delay: 1.5 },
       }}
     >
       {Object.keys(tempTop).map((d) => (
-        <BlueRect title={d} key={d + Math.random()} value={tempTop[d]} blue={blueTe.includes(d)} />
+        <BlueRect
+          title={d}
+          key={d + Math.random()}
+          value={tempTop[d]}
+          blue={blueTe.includes(d)}
+        />
       ))}
     </motion.div>
   );