7.9

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

@@ -0,0 +1,95 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, 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 BotttomColorBlock from "./../../components/BotttomColorBlock";
+
+function FloorOneToTwo(props) {
+  const fireInfo = useSelector((state) => state.fireInfo);
+  const fireDir = fireInfo?.fireDirection || null;
+
+  const [fireCanPlay, setFireCanPlay] = useState(false);
+
+  const vd = useRef(null);
+  const show = props.opacity || 0;
+
+  useEffect(() => {
+    if (show) {
+      vd.current.play();
+      setTimeout(() => {
+        // console.log("开启1-2的火播放");
+        setFireCanPlay(true);
+      }, 3000);
+    }
+    if (!show) setFireCanPlay(false);
+    return () => {
+      // console.log("关闭1-2的火播放");
+      setFireCanPlay(false);
+    };
+  }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            width: "calc(100% - 50px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
+        >
+          <video ref={vd} muted>
+            <source src="/video/1to2.webm" type="video/mp4" />
+          </video>
+
+          <BotttomColorBlock />
+
+          {fireCanPlay && fireDir == "东火" && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+              autoPlay
+              loop
+              width={3700}
+              style={{ position: "absolute", top: "18px", left: "72px" }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3780}
+              style={{ position: "absolute", top: "-24px", left: "12px" }}
+            ></video>
+          )}
+
+          <TemperatureBottom
+            style={{
+              top: "208px",
+              // left: "638px",
+              left: "690px",
+              width: "2380px",
+              zIndex: 0,
+            }}
+          />
+          <FeederStatus />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorOneToTwo;