修改

2024-08-30 17:17:45 +08:00
parent d7cc3deeee
commit f702e950ac
104 changed files with 4010 additions and 20071 deletions
--- a/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
+++ b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
@@ -3,6 +3,7 @@ import EnterToFloorOne from "./videoComponents/EnterToFloor1";
 import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
 import FloorOneToTwo from "./videoComponents/Floor1To2";
 import FloorTwoToOne from "./videoComponents/Floor2To1";
+import FloorToFour from "./videoComponents/FloorToFour";
 import { useRef, useEffect, useReducer } from "react";
 import { AnimatePresence } from "framer-motion";

@@ -47,6 +48,17 @@ const opacityReducer = (state, action) => {
        enterVideo: 0,
      };
    }
+    case "to-4": {
+      return {
+        ...initOpacity,
+        // FloorToFour: 1,
+        enterToFloorTwo: 0,
+        floorOneToTwo: 0,
+        enterVideo: 0,
+        floorToFour:1,
+      };
+    }
+      
  }
 };

@@ -61,7 +73,7 @@ function VideoContainer(props) {
      if (floor == 1) {
        if (lastFloor.current == 2 || lastFloor.current == 3) {
          dispatch({ type: "floor-2-to-1" });
-        } else {
+        }  else if (lastFloor.current == 4) {
          dispatch({ type: "enter-to-1" });
        }
      } else if (floor == 2) {
@@ -69,17 +81,19 @@ function VideoContainer(props) {
          dispatch({ type: "floor-1-to-2" });
        } else if (lastFloor.current == 3) {
          // 视频不变画面隐藏,通过判断floor的值隐藏3显示2
-        } else {
-          dispatch({ type: "enter-to-2" });
+        }  else if (lastFloor.current == 4) {
+          dispatch({ type: "floor-1-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" });
+        }  else if (lastFloor.current == 4) {
+          dispatch({ type: "floor-1-to-2" });
        }
+      } else if (floor == 4) {
+          dispatch({ type: "to-4" });
      }
      lastFloor.current = floor;
    }
@@ -113,6 +127,7 @@ function VideoContainer(props) {
        preFloor={preFloor}
      />
      <FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
+      <FloorToFour key="to-4" opacity={opacity.floorToFour} />
    </AnimatePresence>
  );
 }
--- a/src/components/Modules/KilnOptimize/Center/index.jsx
+++ b/src/components/Modules/KilnOptimize/Center/index.jsx
@@ -1,16 +1,30 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import cls from "./index.module.css";
 import Chart2 from "../../../Common/TimeFireDir";
+import Chart1 from "../../../Common/ForecastTemperature";
 import VideoContainer from "./VideoContainer";
-
-function KilnCenter() {
-  const [floor, setFloor] = useState(0);
+function KilnCenter({ onFloorChange }) {
+  const [floor, setFloor] = useState(1);  // 初始值设置为 1
  const preFloor = useRef();
+
+  useEffect(() => {
+    onFloorChange(floor); 
+  }, [floor, onFloorChange]);
+
  function onFloorUpdate(flr) {
    preFloor.current = floor;
    setFloor(flr);
+    onFloorChange(flr); 
  }

+  const subMenuStyle = {
+    marginLeft: floor === 4? "400px" : "0",
+  };
+
+  const colorStyle = {
+    right: floor === 4? "0px" : "400px",
+  };
+
  return (
    <div
      className="bgKilnInner"
@@ -23,12 +37,22 @@ function KilnCenter() {
      }}
    >
      {/* 时间火向数据 */}
-      <div
-        className="fireAndTime"
-        style={{ position: "absolute", top: "-112px", height: "212px" }}
-      >
-        <Chart2 />
-      </div>
+      {floor === 4 && (
+          <div
+            className="fireAndTime"
+            style={{ position: "absolute", top: "-112px", height: "400px" }}
+          >
+            <Chart1 />
+          </div>
+        )}
+      {floor!== 4 && (
+        <div
+          className="fireAndTime"
+          style={{ position: "absolute", top: "-112px", height: "212px" }}
+        >
+          <Chart2 />
+        </div>
+      )}

      {/* menu  */}
      <div
@@ -36,10 +60,11 @@ function KilnCenter() {
        style={{
          display: "flex",
          marginBottom: "24px",
-          justifyContent: "center",
+         ...subMenuStyle,
+          justifyContent: "center"
        }}
      >
-        <div
+         <div
          className={
            "flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
          }
@@ -49,7 +74,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)}
        >
@@ -57,12 +82,20 @@ function KilnCenter() {
        </div>
        <div
          className={
-            "flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "")
+            "flr flr2 " + cls.menuItem + " " + (floor === 3? cls.active : "")
          }
          onClick={() => onFloorUpdate(3)}
        >
          溶液速度
        </div>
+          <div
+          className={
+            "flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
+          }
+          onClick={() => onFloorUpdate(4)}
+        >
+          窑炉预测
+        </div>
      </div>

      {/* 颜色指示图  */}
@@ -70,7 +103,7 @@ function KilnCenter() {
        style={{
          position: "absolute",
          top: "30px",
-          right: "450px",
+         ...colorStyle,
          width: "300px",
          height: "41px",
        }}
--- a/src/components/Modules/KilnOptimize/Center/index.module.css
+++ b/src/components/Modules/KilnOptimize/Center/index.module.css
@@ -21,7 +21,7 @@
 }

 .menuItem:not(:first-child) {
-	margin-left: 50px;
+	margin-left:20px;
 }

 .videoLayer2 {
@@ -43,4 +43,4 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-}
+}
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorTo4.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorTo4.jsx
@@ -0,0 +1,118 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-27 08:38:07
+ * @LastEditTime: 2024-08-28 15:28:39
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useState } from "react";
+import FeederStatus from "../../../../Common/Feeder";
+import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
+import { useSelector, useDispatch } from "react-redux";
+import TopColorBlock from "../../components/forecastTopColorBlock";
+import myImage from '../../../../../assets/toFourBack.png';
+function FloorToFour(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("开启2-1的火播放");
+  //       setFireCanPlay(true);
+  //     }, 1800);
+  //   }
+  //   if (!show) setFireCanPlay(false);
+  //   return () => {
+  //     // console.log("关闭2-1的火播放");
+  //     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.2, delay: 0.2 } }}
+        >
+            <div>
+            <img src={myImage} style={{ width: '1726px', height: '695px',position: "absolute",
+                top: "300px",
+                left: "950px",
+                
+                zIndex: -9, }} alt="Example" />
+          </div>
+          {/* <video ref={vd} muted>
+            <source src="/video/2to1.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "10px",
+                left: "0px",
+                zIndex: 9,
+              }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "-12px",
+                left: "-10px",
+                zIndex: 9,
+              }}
+            ></video>
+          )} */}
+
+          <TopColorBlock />
+
+          <TemperatureTop
+            style={{
+              top: "200px",
+              left: "652px",
+              width: "2380px",
+              zIndex: 10,
+            }}
+          />
+          <FeederStatus style={{ left: "680px" }} />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorToFour;
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx
@@ -0,0 +1,125 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-28 15:27:46
+ * @LastEditTime: 2024-08-29 09:46:32
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useState } from "react";
+import FeederStatus from "../../../../Common/Feeder";
+import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
+import { useSelector, useDispatch } from "react-redux";
+// import TopColorBlock from "../../components/TopColorBlock";
+import TopColorBlock from "../../components/forecastTopColorBlock";
+function FloorTwoToOne(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("开启2-1的火播放");
+        setFireCanPlay(true);
+      }, 1800);
+    }
+    if (!show) setFireCanPlay(false);
+    return () => {
+      // console.log("关闭2-1的火播放");
+      setFireCanPlay(false);
+    };
+  }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            width: "calc(100% - 500px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
+        >
+          <video  style={{
+            position: "fixed",
+            top: "10px",
+            left: "70px",
+            width: "calc(100% - 600px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }} ref={vd} muted>
+            <source src="/video/2to1.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "10px",
+                width: "calc(100% - 500px)",
+                height: "calc(100% - 7px)",
+                left: "240px",
+                zIndex: 9,
+              }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{
+                position: "absolute",
+                top: "-12px",
+                left: "-100px",
+                width: "calc(100% - 500px)",
+                height: "calc(100% - 7px)",
+                left: "240px",
+                zIndex: 9,
+              }}
+            ></video>
+          )}
+
+          <TopColorBlock />
+
+          <TemperatureTop
+            style={{
+              top: "200px",
+              left: "652px",
+              width: "2380px",
+              zIndex: 10,
+            }}
+          />
+          <FeederStatus style={{ left: "680px" }} />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorTwoToOne;