diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx index 544e0af..d1e4428 100644 --- a/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx +++ b/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 ( {show && ( @@ -49,6 +46,27 @@ function EnterToFloorOne(props) { + {fireCanPlay && fireDir == '东火' && ( + + )} + {fireCanPlay && fireDir == '西火' && ( + + )} + - - - )} diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx index 007464c..2d32a8d 100644 --- a/src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx +++ b/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) { + {fireCanPlay && fireDir == '东火' && ( + + )} + {fireCanPlay && fireDir == '西火' && ( + // {fireCanPlay && ( + + )} + { - 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) { + {fireCanPlay && fireDir == '东火' && ( + // {fireCanPlay && ( + + )} + {fireCanPlay && fireDir == '西火' && ( + // {fireCanPlay && ( + + )} + { - return ( - - 窑炉总览 RIGHT - - ); -}; +import SocketContext from '../../store/socket-data-provider'; +import { useContext } from 'react'; export default function Home({ active }) { - console.log('[rendering...] 加载 Home页面'); + const ctx = useContext(SocketContext); + const fireDir = ctx.runState?.fireDirection || null; return (
@@ -69,22 +52,28 @@ export default function Home({ active }) {
- - + {fireDir && fireDir == '东火' && ( + + )} + + {fireDir && fireDir == '西火' && ( + + )} +
diff --git a/src/pages/窑炉内部/index.jsx b/src/pages/窑炉内部/index.jsx deleted file mode 100644 index ddc678c..0000000 --- a/src/pages/窑炉内部/index.jsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function KilnInner() { - return
KilnInner
; -} diff --git a/src/pages/质检统计/index.jsx b/src/pages/质检统计/index.jsx deleted file mode 100644 index f73f928..0000000 --- a/src/pages/质检统计/index.jsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function CheckInfo() { - return
CheckInfo
; -} diff --git a/src/pages/退火监测/index.jsx b/src/pages/退火监测/index.jsx deleted file mode 100644 index 998129e..0000000 --- a/src/pages/退火监测/index.jsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function FireCheck() { - return
FireCheck
; -}