窑炉优化

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

@@ -4,13 +4,13 @@ import FeederStatus from "../../../../Common/Feeder";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
 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);
   const fireDir = fireInfo?.fireDirection || null;
 
   const [fireCanPlay, setFireCanPlay] = useState(false);
+  const [liquidCanPlay, setLiquidCanPlay] = useState(false);
 
   const vd = useRef(null);
   const show = props.opacity || 0;
@@ -44,12 +44,14 @@ function FloorOneToTwo(props) {
       setTimeout(() => {
         // console.log("开启1-2的火播放");
         setFireCanPlay(true);
+        setLiquidCanPlay(true);
       }, 2000);
     }
     if (!show) setFireCanPlay(false);
     return () => {
       // console.log("关闭1-2的火播放");
       setFireCanPlay(false);
+      setLiquidCanPlay(false);
     };
   }, [show]);
 
@@ -126,24 +128,20 @@ function FloorOneToTwo(props) {
             />
           )}
           {/* 溶液速度色块 */}
-          {showSpeed && (
-            <motion.div
+          {showSpeed && liquidCanPlay && (
+            <video
+              src="/video/liquidSpeed.webm"
+              muted
+              autoPlay
+              loop
+              width={3842}
               style={{
                 position: "absolute",
-                top: "242px",
-                left: "445px",
-                zIndex: "999",
+                top: "0px",
+                left: "-2px",
+                zIndex: 9,
               }}
-              animate={speedAn}
-            >
-              <img
-                src={image}
-                alt=""
-                width="100%"
-                height="100%"
-                style={{ transform: "scale(0.583, 0.593)" }}
-              />
-            </motion.div>
+            ></video>
           )}
           <FeederStatus />
         </motion.div>