窑炉优化

2024-07-12 14:12:10 +08:00
parent 214e9fe892
commit 4d7af62305
21 changed files with 1510 additions and 628 deletions
--- a/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
+++ b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
@@ -1,104 +1,120 @@
-import EnterVideo from './videoComponents/EnterVideo';
-import EnterToFloorOne from './videoComponents/EnterToFloor1';
-import EnterToFloorTwo from './videoComponents/EnterToFloor2';
-import FloorOneToTwo from './videoComponents/Floor1To2';
-import FloorTwoToOne from './videoComponents/Floor2To1';
-import { useRef, useEffect, useReducer } from 'react';
-import { AnimatePresence } from 'framer-motion';
+import EnterVideo from "./videoComponents/EnterVideo";
+import EnterToFloorOne from "./videoComponents/EnterToFloor1";
+import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
+import FloorOneToTwo from "./videoComponents/Floor1To2";
+import FloorTwoToOne from "./videoComponents/Floor2To1";
+import { useRef, useEffect, useReducer } from "react";
+import { AnimatePresence } from "framer-motion";

 const initOpacity = {
-	enterVideo: 1,
-	enterToFloorOne: 0,
-	enterToFloorTwo: 0,
-	floorOneToTwo: 0,
-	floorTwoToOne: 0,
+  enterVideo: 1,
+  enterToFloorOne: 0,
+  enterToFloorTwo: 0,
+  floorOneToTwo: 0,
+  floorTwoToOne: 0,
 };
 const opacityReducer = (state, action) => {
-	switch (action.type) {
-		case 'enter-to-1': {
-			return {
-				...initOpacity,
-				enterToFloorOne: 1,
-				enterVideo: 0,
-			};
-		}
-		case 'enter-to-2': {
-			return {
-				...initOpacity,
-				enterToFloorTwo: 1,
-				enterVideo: 0,
-			};
-		}
-		case 'floor-1-to-2': {
-			return {
-				...initOpacity,
-				floorOneToTwo: 1,
-				enterToFloorOne: 0,
-				enterVideo: 0,
-				floorTwoToOne: 0,
-			};
-		}
-		case 'floor-2-to-1': {
-			return {
-				...initOpacity,
-				floorTwoToOne: 1,
-				enterToFloorTwo: 0,
-				floorOneToTwo: 0,
-				enterVideo: 0,
-			};
-		}
-	}
+  switch (action.type) {
+    case "enter-to-1": {
+      return {
+        ...initOpacity,
+        enterToFloorOne: 1,
+        enterVideo: 0,
+      };
+    }
+    case "enter-to-2": {
+      return {
+        ...initOpacity,
+        enterToFloorTwo: 1,
+        enterVideo: 0,
+      };
+    }
+    case "floor-1-to-2": {
+      return {
+        ...initOpacity,
+        floorOneToTwo: 1,
+        enterToFloorOne: 0,
+        enterVideo: 0,
+        floorTwoToOne: 0,
+      };
+    }
+    case "floor-2-to-1": {
+      return {
+        ...initOpacity,
+        floorTwoToOne: 1,
+        enterToFloorTwo: 0,
+        floorOneToTwo: 0,
+        enterVideo: 0,
+      };
+    }
+  }
 };

 function VideoContainer(props) {
-	const floor = props.floor || null;
-	const lastFloor = useRef(null);
-	const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
+  const floor = props.floor || null;
+  const preFloor = props.preFloor.current || null;
+  const lastFloor = useRef(null);
+  const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);

-	useEffect(() => {
-		if (floor) {
-			if (floor == 1) {
-				if (lastFloor.current == 2) {
-					dispatch({ type: 'floor-2-to-1' });
-				} else {
-					dispatch({ type: 'enter-to-1' });
-				}
-			} else if (floor == 2) {
-				if (lastFloor.current == 1) {
-					dispatch({ type: 'floor-1-to-2' });
-				} else {
-					dispatch({ type: 'enter-to-2' });
-				}
-			}
-			lastFloor.current = floor;
-		}
-	}, [floor]);
+  useEffect(() => {
+    if (floor) {
+      if (floor == 1) {
+        if (lastFloor.current == 2 || lastFloor.current == 3) {
+          dispatch({ type: "floor-2-to-1" });
+        } else {
+          dispatch({ type: "enter-to-1" });
+        }
+      } else if (floor == 2) {
+        if (lastFloor.current == 1) {
+          dispatch({ type: "floor-1-to-2" });
+        } else if (lastFloor.current == 3) {
+          // 视频不变画面隐藏,通过判断floor的值隐藏3显示2
+        } else {
+          dispatch({ type: "enter-to-2" });
+        }
+      } else if (floor == 3) {
+        if (lastFloor.current == 1) {
+          dispatch({ type: "floor-1-to-2" });
+        } else if (lastFloor.current == 2) {
+          // 视频不变画面隐藏，通过判断floor的值隐藏2显示3
+        } else {
+          dispatch({ type: "enter-to-2" });
+        }
+      }
+      lastFloor.current = floor;
+    }
+  }, [floor]);

-	const enterToFloorOne = () => {
-		// 更新层数
-		props.onFloorUpdate(1);
-		// floor1 one 立即显示，enter 延迟点消失
-		dispatch({ type: 'enter-to-1' });
-	};
+  const enterToFloorOne = () => {
+    // 更新层数
+    props.onFloorUpdate(1);
+    // floor1 one 立即显示，enter 延迟点消失
+    dispatch({ type: "enter-to-1" });
+  };

-	function handleEnterVideoEnd() {
-		// console.log('video end');
-		enterToFloorOne();
-	}
+  function handleEnterVideoEnd() {
+    // console.log('video end');
+    enterToFloorOne();
+  }

-	return (
-		<AnimatePresence>
-			<EnterVideo
-				key="enter"
-				onVideoEnd={handleEnterVideoEnd}
-				opacity={opacity.enterVideo}
-			/>
-			<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
-			<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
-			<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
-			<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
-		</AnimatePresence>
-	);
+  return (
+    <AnimatePresence>
+      <EnterVideo
+        key="enter"
+        onVideoEnd={handleEnterVideoEnd}
+        opacity={opacity.enterVideo}
+      />
+      <EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
+      <EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
+      <FloorOneToTwo
+        key="1-to-2"
+        opacity={opacity.floorOneToTwo}
+        floor={floor}
+        preFloor={preFloor}
+      />
+      <FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
+    </AnimatePresence>
+  );
 }

 export default VideoContainer;
--- a/src/components/Modules/KilnOptimize/Center/index.jsx
+++ b/src/components/Modules/KilnOptimize/Center/index.jsx
@@ -1,12 +1,13 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import cls from "./index.module.css";
 import Chart2 from "../../../Common/TimeFireDir";
 import VideoContainer from "./VideoContainer";

 function KilnCenter() {
  const [floor, setFloor] = useState(0);
-
+  const preFloor = useRef();
  function onFloorUpdate(flr) {
+    preFloor.current = floor;
    setFloor(flr);
  }

@@ -29,8 +30,6 @@ function KilnCenter() {
        <Chart2 />
      </div>

-      
-
      {/* menu  */}
      <div
        className="subMenu"
@@ -42,7 +41,7 @@ function KilnCenter() {
      >
        <div
          className={
-            "flr flr1 " + cls.menuItem + " " + (floor == 1 ? cls.active : "")
+            "flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
          }
          onClick={() => onFloorUpdate(1)}
        >
@@ -50,7 +49,7 @@ function KilnCenter() {
        </div>
        <div
          className={
-            "flr flr2 " + cls.menuItem + " " + (floor == 2 ? cls.active : "")
+            "flr flr2 " + cls.menuItem + " " + (floor === 2 ? cls.active : "")
          }
          onClick={() => onFloorUpdate(2)}
        >
@@ -58,7 +57,7 @@ function KilnCenter() {
        </div>
        <div
          className={
-            "flr flr2 " + cls.menuItem + " " + (floor == 3 ? cls.active : "")
+            "flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "")
          }
          onClick={() => onFloorUpdate(3)}
        >
@@ -67,12 +66,28 @@ function KilnCenter() {
      </div>

      {/* 颜色指示图  */}
-      <div style={{ position: "absolute", top: "30px", right:"450px" ,width: "300px", height:"41px" }}>
-        <img src={require("../../../../assets/tempIntr.png")} alt="" style={{width:"300px",height:"41px"}}/>
+      <div
+        style={{
+          position: "absolute",
+          top: "30px",
+          right: "450px",
+          width: "300px",
+          height: "41px",
+        }}
+      >
+        <img
+          src={require("../../../../assets/tempIntr.png")}
+          alt=""
+          style={{ width: "300px", height: "41px" }}
+        />
      </div>

      {/* video  */}
-      <VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
+      <VideoContainer
+        onFloorUpdate={onFloorUpdate}
+        floor={floor}
+        preFloor={preFloor}
+      />
    </div>
  );
 }
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx
@@ -20,7 +20,7 @@ function EnterToFloorOne(props) {
      setTimeout(() => {
        // console.log("开启enter的火播放");
        setFireCanPlay(true);
-      }, 5000);
+      }, 1800);
    }
    return () => {
      // console.log("关闭enter的火播放");
@@ -50,14 +50,19 @@ function EnterToFloorOne(props) {
            <source src="/video/floor1.webm" type="video/mp4" />
          </video>

-          {/* {fireCanPlay && fireDir == "东火" && (
+          {fireCanPlay && fireDir == "东火" && (
            <video
              src="/video/fire_top.webm"
              muted
              autoPlay
              loop
              width={3900}
-              style={{ position: "absolute", top: "-20px", left: "-20px" }}
+              style={{
+                position: "absolute",
+                top: "-20px",
+                left: "-20px",
+                zIndex: 9,
+              }}
            ></video>
          )}
          {fireCanPlay && fireDir == "西火" && (
@@ -67,9 +72,14 @@ function EnterToFloorOne(props) {
              autoPlay
              loop
              width={3900}
-              style={{ position: "absolute", top: "-20px", left: "-20px" }}
+              style={{
+                position: "absolute",
+                top: "-20px",
+                left: "-20px",
+                zIndex: 9,
+              }}
            ></video>
-          )} */}
+          )}

          <TopColorBlockEnter />

@@ -78,7 +88,7 @@ function EnterToFloorOne(props) {
              top: "218px",
              left: "678px",
              width: "2380px",
-              zIndex: 0,
+              zIndex: 10,
            }}
          />
          <FeederStatus />
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
+++ b/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>
      )}
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx
@@ -20,7 +20,7 @@ function FloorTwoToOne(props) {
      setTimeout(() => {
        // console.log("开启2-1的火播放");
        setFireCanPlay(true);
-      }, 3000);
+      }, 1800);
    }
    if (!show) setFireCanPlay(false);
    return () => {
@@ -59,7 +59,12 @@ function FloorTwoToOne(props) {
              autoPlay
              loop
              width={3800}
-              style={{ position: "absolute", top: "10px", left: "0px",zIndex: 9, }}
+              style={{
+                position: "absolute",
+                top: "10px",
+                left: "0px",
+                zIndex: 9,
+              }}
            ></video>
          )}
          {fireCanPlay && fireDir == "西火" && (
@@ -70,7 +75,12 @@ function FloorTwoToOne(props) {
              autoPlay
              loop
              width={3800}
-              style={{ position: "absolute", top: "-12px", left: "-10px",zIndex: 9, }}
+              style={{
+                position: "absolute",
+                top: "-12px",
+                left: "-10px",
+                zIndex: 9,
+              }}
            ></video>
          )}