窑炉优化

src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx

@@ -1,10 +1,10 @@
 import { motion, AnimatePresence } from "framer-motion";
-import { useRef, useEffect, useMemo, useState } from "react";
+import { useRef, useEffect, useState } from "react";
 import FeederStatus from "../../../../Common/Feeder";
-import TemperatureTop from "../../../../../components/Common/TemperatureTop";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import BotttomColorBlock from "./../../components/BotttomColorBlock";
+import image from "./../../../../../assets/kilnSpeed.png";
 
 function FloorOneToTwo(props) {
   const fireInfo = useSelector((state) => state.fireInfo);
@@ -14,14 +14,37 @@ function FloorOneToTwo(props) {
 
   const vd = useRef(null);
   const show = props.opacity || 0;
-
+  // 是否显示溶液速度标签的内容
+  // 池底温度和溶液速度写在一个页面上
+  const showSpeed = props.floor == 3 ? true : false; //显示3
+  const showBottom = props.floor == 2 ? true : false; //显示2
+  const speed = props.preFloor == 2 || props.preFloor == 3 ? "f" : "s";
+  const [speedAn, setSpeedAn] = useState({});
+  useEffect(() => {
+    // 2，3互切不用展示动画
+    if (speed === "f") {
+      setSpeedAn({
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 0 },
+      });
+    } else {
+      if (props.floor === 3) {
+        setSpeedAn({
+          opacity: [0, 0, 0, 0.6, 1],
+          transition: { duration: 0.3, delay: 1.5 },
+        });
+      } else {
+        setSpeedAn({});
+      }
+    }
+  }, [props.floor]);
   useEffect(() => {
     if (show) {
       vd.current.play();
       setTimeout(() => {
         // console.log("开启1-2的火播放");
         setFireCanPlay(true);
-      }, 3000);
+      }, 2000);
     }
     if (!show) setFireCanPlay(false);
     return () => {
@@ -51,20 +74,27 @@ function FloorOneToTwo(props) {
           <video ref={vd} muted>
             <source src="/video/1to2.webm" type="video/mp4" />
           </video>
+          {/* 窑炉的色块 */}
+          {showBottom && (
+            <BotttomColorBlock speed={speed} floor={props.floor} />
+          )}
 
-          <BotttomColorBlock />
-
-          {fireCanPlay && fireDir == "东火" && (
+          {showBottom && fireCanPlay && fireDir == "东火" && (
             <video
               src="/video/fire_top.webm"
               muted
               autoPlay
               loop
               width={3700}
-              style={{ position: "absolute", top: "18px", left: "72px",zIndex: 9 }}
+              style={{
+                position: "absolute",
+                top: "18px",
+                left: "72px",
+                zIndex: 9,
+              }}
             ></video>
           )}
-          {fireCanPlay && fireDir == "西火" && (
+          {showBottom && fireCanPlay && fireDir == "西火" && (
             // {fireCanPlay && (
             <video
               src="/video/fire_down.webm"
@@ -72,19 +102,49 @@ function FloorOneToTwo(props) {
               autoPlay
               loop
               width={3780}
-              style={{ position: "absolute", top: "-24px", left: "12px",zIndex: 9 }}
+              style={{
+                position: "absolute",
+                top: "-24px",
+                left: "12px",
+                zIndex: 9,
+              }}
             ></video>
           )}
 
-          <TemperatureBottom
-            style={{
-              top: "208px",
-              // left: "638px",
-              left: "690px",
-              width: "2380px",
-              zIndex: 10,
-            }}
-          />
+          {/* 温度组件 */}
+          {showBottom && (
+            <TemperatureBottom
+              style={{
+                top: "208px",
+                // left: "638px",
+                left: "690px",
+                width: "2380px",
+                zIndex: 10,
+              }}
+              speed={speed}
+              floor={props.floor}
+            />
+          )}
+          {/* 溶液速度色块 */}
+          {showSpeed && (
+            <motion.div
+              style={{
+                position: "absolute",
+                top: "242px",
+                left: "445px",
+                zIndex: "999",
+              }}
+              animate={speedAn}
+            >
+              <img
+                src={image}
+                alt=""
+                width="100%"
+                height="100%"
+                style={{ transform: "scale(0.583, 0.593)" }}
+              />
+            </motion.div>
+          )}
           <FeederStatus />
         </motion.div>
       )}