100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
import LeftBar from "../../components/Modules/Home/LeftSide";
|
|
import BottomBar from "../../components/Modules/Home/Bottom";
|
|
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 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 SocketContext from '../../store/socket-data-provider';
|
|
import { useContext } from "react";
|
|
|
|
export default function Home({ active }) {
|
|
// const ctx = useContext(SocketContext);
|
|
|
|
const ctx = null;
|
|
|
|
const fireDir = ctx?.runState?.fireDirection || null;
|
|
|
|
return (
|
|
<div className="Main">
|
|
{active != "窑炉总览" && <div className="bgDitu"></div>}
|
|
{active == "窑炉总览" && <div className="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 == "退火监测" && <FireCheckLeft key="fire-check" />}
|
|
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
|
</div>
|
|
</AnimatePresence>
|
|
|
|
<div className="Center">
|
|
{active == "窑炉总览" && (
|
|
<>
|
|
<AnimatePresence>
|
|
<motion.div
|
|
key="center-top"
|
|
className="CenterData"
|
|
initial={{ visibility: "hidden" }}
|
|
animate={{ visibility: "visible" }}
|
|
>
|
|
<CenterTopData />
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
<div key="v3d" className="V3DBorder"></div>
|
|
|
|
{fireDir && fireDir == "东火" && (
|
|
<video
|
|
src="/video/fire_little_top.webm"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
width={4200}
|
|
style={{ position: "absolute", top: "-160px", left: "-910px" }}
|
|
></video>
|
|
)}
|
|
|
|
{fireDir && fireDir == "西火" && (
|
|
<video
|
|
src="/video/fire_little_down.webm"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
width={4200}
|
|
style={{ position: "absolute", top: "-180px", left: "-910px" }}
|
|
></video>
|
|
)}
|
|
|
|
<div key="bottom-bar" className="Button">
|
|
<BottomBar />
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{active == "窑炉内部" && <KilnCenter />}
|
|
|
|
{active == "退火监测" && <div className="bgFire"></div>}
|
|
|
|
{active == "质检统计" && <div className="bgQuality"></div>}
|
|
</div>
|
|
|
|
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
|
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
|
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
|
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
|
</div>
|
|
);
|
|
}
|