窑炉优化

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 && (
+          {showSpeed && liquidCanPlay && (
-            <motion.div
+            <video
+              src="/video/liquidSpeed.webm"
+              muted
+              autoPlay
+              loop
+              width={3842}
               style={{
                 position: "absolute",
-                top: "242px",
+                top: "0px",
-                left: "445px",
+                left: "-2px",
-                zIndex: "999",
+                zIndex: 9,
               }}
-              animate={speedAn}
+            ></video>
-            >
-              <img
-                src={image}
-                alt=""
-                width="100%"
-                height="100%"
-                style={{ transform: "scale(0.583, 0.593)" }}
-              />
-            </motion.div>
           )}
           <FeederStatus />
         </motion.div>

src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx

@@ -40,6 +40,50 @@ const BotttomColorBlock = (props) => {
     }
   }, [floor]);
   function returnColor(n) {
+    let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
+    if (num <= 100) {
+      return "rgba(96, 0, 189, 0.5)";
+    } else if (num > 100 && num <= 200) {
+      return "rgba(102, 7, 255, 0.5)";
+    } else if (num > 200 && num <= 300) {
+      return "rgba(10, 20, 255, 0.5)";
+    } else if (num > 300 && num <= 400) {
+      return "rgba(7, 89, 255, 0.5)";
+    } else if (num > 400 && num <= 500) {
+      return "rgba(7, 139, 255, 0.5)";
+    } else if (num > 500 && num <= 600) {
+      return "rgba(7, 194, 255, 0.5)";
+    } else if (num > 600 && num <= 700) {
+      return "rgba(7, 255, 253, 0.5)";
+    } else if (num > 700 && num <= 800) {
+      return "rgba(7, 255, 205, 0.5)";
+    } else if (num > 800 && num <= 900) {
+      return "rgba(20, 237, 127, 0.5)";
+    } else if (num > 900 && num <= 1000) {
+      return "rgba(0, 193, 39, 0.5)";
+    } else if (num > 1000 && num <= 1100) {
+      return "rgba(147, 210, 1, 0.5)";
+    } else if (num > 1100 && num <= 1200) {
+      return "rgba(206, 206, 0, 0.5)";
+    } else if (num > 1200 && num <= 1300) {
+      return "rgba(255, 226, 13, 0.5)";
+    } else if (num > 1300 && num <= 1400) {
+      return "rgba(249, 240, 146, 0.5)";
+    } else if (num > 1400 && num <= 1500) {
+      return "rgba(250, 204, 93, 0.5)";
+    } else if (num > 1500 && num <= 1600) {
+      return "rgba(240, 139, 32, 0.5)";
+    } else if (num > 1600 && num <= 1700) {
+      return "rgba(241, 88, 26, 0.5)";
+    } else if (num > 1700 && num <= 1800) {
+      return "rgba(255, 0, 0, 0.5)";
+    } else if (num > 1800 && num <= 1900) {
+      return "rgba(182, 0, 0, 0.5)";
+    } else if (num > 1900) {
+      return "rgba(140, 0, 33, 0.5)";
+    }
+  }
+  function returnColor2(n) {
     let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
     if (num <= 100) {
       return "rgba(96, 0, 189, 0.7)";
@@ -83,50 +127,6 @@ const BotttomColorBlock = (props) => {
       return "rgba(140, 0, 33, 0.7)";
     }
   }
-  function returnColor2(n) {
-    let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
-    if (num <= 100) {
-      return "rgba(96, 0, 189, 0.9)";
-    } else if (num > 100 && num <= 200) {
-      return "rgba(102, 7, 255, 0.9)";
-    } else if (num > 200 && num <= 300) {
-      return "rgba(10, 20, 255, 0.9)";
-    } else if (num > 300 && num <= 400) {
-      return "rgba(7, 89, 255, 0.9)";
-    } else if (num > 400 && num <= 500) {
-      return "rgba(7, 139, 255, 0.9)";
-    } else if (num > 500 && num <= 600) {
-      return "rgba(7, 194, 255, 0.9)";
-    } else if (num > 600 && num <= 700) {
-      return "rgba(7, 255, 253, 0.9)";
-    } else if (num > 700 && num <= 800) {
-      return "rgba(7, 255, 205, 0.9)";
-    } else if (num > 800 && num <= 900) {
-      return "rgba(20, 237, 127, 0.9)";
-    } else if (num > 900 && num <= 1000) {
-      return "rgba(0, 193, 39, 0.9)";
-    } else if (num > 1000 && num <= 1100) {
-      return "rgba(147, 210, 1, 0.9)";
-    } else if (num > 1100 && num <= 1200) {
-      return "rgba(206, 206, 0, 0.9)";
-    } else if (num > 1200 && num <= 1300) {
-      return "rgba(255, 226, 13, 0.9)";
-    } else if (num > 1300 && num <= 1400) {
-      return "rgba(249, 240, 146, 0.9)";
-    } else if (num > 1400 && num <= 1500) {
-      return "rgba(250, 204, 93, 0.9)";
-    } else if (num > 1500 && num <= 1600) {
-      return "rgba(240, 139, 32, 0.9)";
-    } else if (num > 1600 && num <= 1700) {
-      return "rgba(241, 88, 26, 0.9)";
-    } else if (num > 1700 && num <= 1800) {
-      return "rgba(255, 0, 0, 0.9)";
-    } else if (num > 1800 && num <= 1900) {
-      return "rgba(182, 0, 0, 0.9)";
-    } else if (num > 1900) {
-      return "rgba(140, 0, 33, 0.9))";
-    }
-  }
   // 窑炉内部svg变色
   function BigSvg() {
     return (
@@ -225,7 +225,7 @@ const BotttomColorBlock = (props) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "14px",
+          left: "13px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -261,7 +261,7 @@ const BotttomColorBlock = (props) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "21px",
+          left: "20px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -272,10 +272,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "108px",
-          left: "5px",
+          left: "-10px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
         }}
       />
       <T2
@@ -284,10 +284,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "107px",
-          left: "9px",
+          left: "-5px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
         }}
       />
       <T3
@@ -296,10 +296,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "109px",
-          left: "10px",
+          left: "0px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
         }}
       />
       <T4
@@ -308,10 +308,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "109px",
-          left: "12px",
+          left: "7px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.69)",
         }}
       />
       <T5
@@ -320,10 +320,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "110px",
-          left: "13px",
+          left: "11px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.69)",
         }}
       />
       <T6
@@ -332,10 +332,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "110px",
           left: "16px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68)",
         }}
       />
       <T7
@@ -344,10 +344,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "102px",
-          left: "18px",
+          left: "19px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.69,0.64)",
         }}
       />
       <T8
@@ -356,10 +356,10 @@ const BotttomColorBlock = (props) => {
           width: "100%",
           height: "100%",
           position: "absolute",
-          top: "120px",
+          top: "102px",
-          left: "20px",
+          left: "24px",
           zIndex: 0,
-          transform: "scale(0.7)",
+          transform: "scale(0.68,0.64)",
         }}
       />
     </motion.div>

src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx

@@ -170,7 +170,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "5px",
+          left: "3px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -182,7 +182,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "7px",
+          left: "5px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -206,7 +206,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "12px",
+          left: "10px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -218,7 +218,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "14px",
+          left: "12px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -242,7 +242,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "18px",
+          left: "16px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -254,7 +254,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "120px",
-          left: "19px",
+          left: "17px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -266,7 +266,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "114px",
-          left: "5px",
+          left: "3px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -278,7 +278,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "114px",
-          left: "9px",
+          left: "4px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -302,7 +302,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "114px",
-          left: "12px",
+          left: "11px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -314,7 +314,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "114px",
-          left: "13px",
+          left: "12px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -338,7 +338,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "114px",
-          left: "18px",
+          left: "17px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -350,7 +350,7 @@ const TopColorBlock = ({ condition }) => {
           height: "100%",
           position: "absolute",
           top: "114px",
-          left: "19px",
+          left: "18px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}

src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx

@@ -170,7 +170,7 @@ const TopColorBlockEnter = () => {
           height: "100%",
           position: "absolute",
           top: "116px",
-          left: "-15px",
+          left: "-16px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -218,7 +218,7 @@ const TopColorBlockEnter = () => {
           height: "100%",
           position: "absolute",
           top: "116px",
-          left: "-13px",
+          left: "-11px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -266,7 +266,7 @@ const TopColorBlockEnter = () => {
           height: "100%",
           position: "absolute",
           top: "110px",
-          left: "-15px",
+          left: "-17px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}
@@ -350,7 +350,7 @@ const TopColorBlockEnter = () => {
           height: "100%",
           position: "absolute",
           top: "110px",
-          left: "-7px",
+          left: "-8px",
           zIndex: 0,
           transform: "scale(0.7)",
         }}