xuchang-new/src/pages/Home/index.jsx

import LeftBar from "../../components/Modules/Home/LeftSide"; // 窑炉总览 - 左边
import BottomBar from "../../components/Modules/Home/Bottom"; // 窑炉总览 - 底部4个框
import RightBar from "../../components/Modules/Home/RightSide"; // 窑炉总览 - 右部
import CenterTopData from "../../components/Modules/Home/CenterTop"; // 泡界线监控（左上） + 当前生产线规格（右上角）
import { AnimatePresence, motion } from "framer-motion"; // 动画
import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
import OptimizeCenter from "../../components/Modules/KilnOptimize/Center"; // 窑炉优化
import KilnOptimizeLeft from "../../components/Modules/KilnOptimize/LeftSide"; // 窑炉优化左侧内容
import KilnOptimizeLeftForecast from "../../components/Modules/KilnOptimize/LeftSide/indexForecast"; // 窑炉优化左侧内容
import KilnOptimizeRight from "../../components/Modules/KilnOptimize/RightSide"; // 窑炉优化右侧内容
import KilnOptimizeRightForecast from "../../components/Modules/KilnOptimize/forecastRightSide"; // 窑炉优化右侧内容
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide";  // 退火监测 - 左边
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide";  // 质检统计 - 左边
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边
import { useSelector } from "react-redux";
import { useEffect, useRef,useState,createContext } from "react";
import useRefresh from "../../hooks/useRefresh";
import TimeFireDir from "../../components/Common/TimeFireDir";

import WarnAlertList from "../../components/Common/WarnAlert/ListContainer";

export const HomeContext = createContext();
export default function Home({ active }) {
  useRefresh(true);

  const videoUp = useRef(null);
  const videoDown = useRef(null);
   const [floor, setFloor] = useState(null);
  const handleFloorChangeFromKilnCenter = (newFloor) => {
   console.log(newFloor)
    setFloor(newFloor);
  };
   const [modelFlag, setModelFlag] = useState(false);

  const handleValueFromGrandChild = (value) => {
    setModelFlag(value);
    console.log('modelFlag',value);
  };
  const ctx = useSelector((state) => state.fireInfo);
  const fireDir = ctx.fireDirection || null;

  useEffect(() => {
    if (fireDir == "东火" && videoUp.current) {
      videoUp.current.playbackRate = 0.3;
    } else {
      videoDown.current && (videoDown.current.playbackRate = 0.3);
    }
  }, [fireDir]);

  return (
    <div className="Main">
      {active == "窑炉总览" && (
        <div
          style={{
            position: "fixed",
            top: "210px",
            left: "50%",
            transform: "translateX(-40%)",
          }}
        >
          <TimeFireDir />
        </div>
      )}
      {active != "窑炉总览" && <div className="bgDitu"></div>}
      {active == "窑炉总览" && (
        <div className="bgOverview" id="bgOverview"></div>
      )}
      <AnimatePresence mode="wait">
        <div
          className="left-side"
          style={{
            marginLeft: "40px",
            width: "625px",
            height: "100%",
          }}
        >
          {active == "窑炉总览" && <LeftBar key="kiln-total" />}
          {active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
            {active == "AI窑炉" && (
          <>
            {floor !== 4 && <KilnOptimizeLeft key="kiln-optimize" />}
              {floor !== 0 &&
                <KilnOptimizeLeftForecast onGetValueFromGrandChild={handleValueFromGrandChild} key="kiln-optimize-forecast" />
              }
          </>
            )}
          {/* {active == "窑炉优化" && <KilnOptimizeLeft key="kiln-optimize" />} */}
          {active == "退火监测" && <FireCheckLeft key="fire-check" />}
          {active == "质检统计" && <QualityCheckLeft key="quality-check" />}
        </div>
      </AnimatePresence>

      <div    className={
           (floor === 4 && active === 'AI窑炉' ? 'InputCenter' : "Center")
          }>
        {active == "窑炉总览" && (
          <>
            <div id="alarm-list-container">
              <WarnAlertList />
            </div>
            <AnimatePresence>
              <motion.div
                key="center-top"
                className="CenterData"
                initial={{ visibility: "hidden" }}
                animate={{ visibility: "visible" }}
              >
                <CenterTopData />
              </motion.div>
            </AnimatePresence>

            <div key="v3d" className="V3DBorder" style={{ zIndex: -2 }}>
              {fireDir && fireDir == "东火" && (
                <video
                  ref={videoUp}
                  src="/video/east_fire.webm"
                  muted
                  autoPlay
                  loop
                  width={4200}
                  style={{
                    position: "absolute",
                    top: "-320px",
                    left: "-850px",
                    zIndex: -1,
                    transform: "scale(0.9)",
                  }}
                ></video>
              )}

              {fireDir && fireDir == "西火" && (
                <video
                  ref={videoDown}
                  src="/video/west_fire.webm"
                  muted
                  autoPlay
                  loop
                  width={4200}
                  style={{
                    position: "absolute",
                    top: "-320px",
                    left: "-850px",
                    zIndex: -1,
                    transform: "scale(0.9)",
                  }}
                ></video>
              )}
            </div>

            <div key="bottom-bar" className="Button">
              <BottomBar />
            </div>
          </>
        )}

        {active == "窑炉内部" && <KilnCenter />}

        {active == "AI窑炉" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />}

        {active == "退火监测" && <div className="bgFire"></div>}

        {active == "质检统计" && <div className="bgQuality"></div>}
      </div>

      {active == "窑炉总览" && <RightBar key="right-bar" />}
      {active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
        {active == "AI窑炉" && (
          <>
          {floor !== 4 && <KilnOptimizeRight key="kiln-optimize-right" />}
          <HomeContext.Provider value={modelFlag}>
            {floor === 4 && <KilnOptimizeRightForecast value={modelFlag} key="kiln-optimize-right-forecast" />}
          </HomeContext.Provider>
          </>
            )}
      {/* {active == "窑炉优化" && <KilnOptimizeRight key="kiln-optimize-right" />} */}
      {active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
      {active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
    </div>
  );
}