update fire

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx

@@ -1,33 +1,30 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useCallback, useState } from 'react';
 import cls from '../index.module.css';
+import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function EnterToFloorOne(props) {
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
+	const [fireCanPlay, setFireCanPlay] = useState(false);
 	const vd = useRef(null);
 	const show = props.opacity || 0;
 
 	useEffect(() => {
-		if (show) vd.current.play();
+		if (show) {
+			vd.current.play();
+			setTimeout(() => {
+				console.log('开启enter的火播放');
+				setFireCanPlay(true);
+			}, 5000);
+		}
+		return () => {
+			console.log('关闭enter的火播放');
+			setFireCanPlay(false);
+		};
 	}, [show]);
 
-	// const show = useMemo(
-	// 	() => ({
-	// 		opacity: 1,
-	// 		display: 'block',
-	// 		duration: 0,
-	// 	}),
-	// 	[],
-	// );
-	// const hide = useMemo(
-	// 	() => ({
-	// 		opacity: 0,
-	// 		transitionEnd: {
-	// 			display: 'none',
-	// 		},
-	// 	}),
-	// 	[],
-	// );
-
 	return (
 		<AnimatePresence>
 			{show && (
@@ -49,6 +46,27 @@ function EnterToFloorOne(props) {
 						<source src="/video/floor1.webm" type="video/mp4" />
 					</video>
 
+					{fireCanPlay && fireDir == '东火' && (
+						<video
+							src="/video/fire_top.webm"
+							muted
+							autoPlay
+							loop
+							width={3900}
+							style={{ position: 'absolute', top: '-20px', left: '-20px' }}
+						></video>
+					)}
+					{fireCanPlay && fireDir == '西火' && (
+						<video
+							src="/video/fire_down.webm"
+							muted
+							autoPlay
+							loop
+							width={3900}
+							style={{ position: 'absolute', top: '-20px', left: '-20px' }}
+						></video>
+					)}
+
 					<motion.div
 						className={cls.videoLayer2}
 						key="eto1div"
@@ -62,23 +80,6 @@ function EnterToFloorOne(props) {
 							transition: { duration: 0.3, delay: 2 },
 						}}
 					></motion.div>
-
-					<video
-						src="/video/fire_top.webm"
-						muted
-						autoPlay
-						loop
-						width={3900}
-						style={{ position: 'absolute', top: '-20px', left: '-20px' }}
-					></video>
-					<video
-						src="/video/fire_down.webm"
-						muted
-						autoPlay
-						loop
-						width={3900}
-						style={{ position: 'absolute', top: '-20px', left: '-20px' }}
-					></video>
 				</motion.div>
 			)}
 		</AnimatePresence>

src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx

@@ -1,13 +1,30 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import cls from '../index.module.css';
+import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function FloorOneToTwo(props) {
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
+	const [fireCanPlay, setFireCanPlay] = useState(false);
+
 	const vd = useRef(null);
 	const show = props.opacity || 0;
 
 	useEffect(() => {
-		if (show) vd.current.play();
+		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 (
@@ -31,6 +48,28 @@ function FloorOneToTwo(props) {
 						<source src="/video/1to2.webm" type="video/mp4" />
 					</video>
 
+					{fireCanPlay && fireDir == '东火' && (
+						<video
+							src="/video/fire_top.webm"
+							muted
+							autoPlay
+							loop
+							width={3700}
+							style={{ position: 'absolute', top: '18px', left: '56px' }}
+						></video>
+					)}
+					{fireCanPlay && fireDir == '西火' && (
+						// {fireCanPlay && (
+						<video
+							src="/video/fire_down.webm"
+							muted
+							autoPlay
+							loop
+							width={3780}
+							style={{ position: 'absolute', top: '-24px', left: '12px' }}
+						></video>
+					)}
+
 					<motion.div
 						className={cls.videoLayer2}
 						key="1to2div"

src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx

@@ -1,13 +1,30 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import cls from '../index.module.css';
+import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function FloorTwoToOne(props) {
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
+	const [fireCanPlay, setFireCanPlay] = useState(false);
+
 	const vd = useRef(null);
 	const show = props.opacity || 0;
 
 	useEffect(() => {
-		if (show) vd.current.play();
+		if (show) {
+			vd.current.play();
+			setTimeout(() => {
+				console.log('开启2-1的火播放');
+				setFireCanPlay(true);
+			}, 3000);
+		}
+		if (!show) setFireCanPlay(false);
+		return () => {
+			console.log('关闭2-1的火播放');
+			setFireCanPlay(false);
+		};
 	}, [show]);
 
 	return (
@@ -31,6 +48,29 @@ function FloorTwoToOne(props) {
 						<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: '-26px' }}
+						></video>
+					)}
+					{fireCanPlay && fireDir == '西火' && (
+						// {fireCanPlay && (
+						<video
+							src="/video/fire_down.webm"
+							muted
+							autoPlay
+							loop
+							width={3800}
+							style={{ position: 'absolute', top: '-12px', left: '-26px' }}
+						></video>
+					)}
+
 					<motion.div
 						className={cls.videoLayer2}
 						key="eto1div"

src/hooks/useKiln.js

@@ -1,6 +0,0 @@
-import SocketContext from '../../../store/socket-data-provider';
-import { useContext } from 'react';
-
-function useKiln() {
-	const ctx = useContext(SocketContext);
-}

src/pages/总览/index.jsx

@@ -10,29 +10,12 @@ import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
 import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide';
 import FireCheckRight from '../../components/模块组件/退火监测/RightSide';
 import QualityCheckRight from '../../components/模块组件/质检统计/RightSide';
-
+import SocketContext from '../../store/socket-data-provider';
-// import V3DBG from '../../assets/V3DBG.png';
+import { useContext } from 'react';
-
-const KilnTotalRight = (props) => {
-	return (
-		<motion.div
-			style={{
-				width: '625px',
-				height: '900px',
-				background: '#fff3',
-			}}
-			initial={{ opacity: 0, position: 'absolute' }}
-			animate={{ opacity: 1, position: 'relative' }}
-			exit={{ opacity: 0, position: 'absolute' }}
-			transition={{ type: 'tween' }}
-		>
-			窑炉总览 RIGHT
-		</motion.div>
-	);
-};
 
 export default function Home({ active }) {
-	console.log('[rendering...] 加载 Home页面');
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
 
 	return (
 		<div className="Main">
@@ -69,22 +52,28 @@ export default function Home({ active }) {
 						</AnimatePresence>
 						<div key="v3d" className="V3DBorder"></div>
 
-						<video
+						{fireDir && fireDir == '东火' && (
-							src="/video/fire_little_top.webm"
+							<video
-							muted
+								src="/video/fire_little_top.webm"
-							autoPlay
+								muted
-							loop
+								autoPlay
-							width={4200}
+								loop
-							style={{ position: 'absolute', top: '-160px', left: '-910px' }}
+								width={4200}
-						></video>
+								style={{ position: 'absolute', top: '-160px', left: '-910px' }}
-						<video
+							></video>
-							src="/video/fire_little_down.webm"
+						)}
-							muted
+
-							autoPlay
+						{fireDir && fireDir == '西火' && (
-							loop
+							<video
-							width={4200}
+								src="/video/fire_little_down.webm"
-							style={{ position: 'absolute', top: '-180px', left: '-910px' }}
+								muted
-						></video>
+								autoPlay
+								loop
+								width={4200}
+								style={{ position: 'absolute', top: '-180px', left: '-910px' }}
+							></video>
+						)}
+
 						<div key="bottom-bar" className="Button">
 							<BottomBar />
 						</div>

src/pages/窑炉内部/index.jsx

@@ -1,3 +0,0 @@
-export default function KilnInner() {
-	return <div>KilnInner</div>;
-}

src/pages/质检统计/index.jsx

@@ -1,3 +0,0 @@
-export default function CheckInfo() {
-	return <div>CheckInfo</div>;
-}

src/pages/退火监测/index.jsx

@@ -1,3 +0,0 @@
-export default function FireCheck() {
-	return <div>FireCheck</div>;
-}