@@ -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> | |||
@@ -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" | |||
@@ -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" | |||
@@ -1,6 +0,0 @@ | |||
import SocketContext from '../../../store/socket-data-provider'; | |||
import { useContext } from 'react'; | |||
function useKiln() { | |||
const ctx = useContext(SocketContext); | |||
} |
@@ -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 V3DBG from '../../assets/V3DBG.png'; | |||
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> | |||
); | |||
}; | |||
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 ( | |||
<div className="Main"> | |||
@@ -69,22 +52,28 @@ export default function Home({ active }) { | |||
</AnimatePresence> | |||
<div key="v3d" className="V3DBorder"></div> | |||
<video | |||
src="/video/fire_little_top.webm" | |||
muted | |||
autoPlay | |||
loop | |||
width={4200} | |||
style={{ position: 'absolute', top: '-160px', left: '-910px' }} | |||
></video> | |||
<video | |||
src="/video/fire_little_down.webm" | |||
muted | |||
autoPlay | |||
loop | |||
width={4200} | |||
style={{ position: 'absolute', top: '-180px', left: '-910px' }} | |||
></video> | |||
{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> | |||
@@ -1,3 +0,0 @@ | |||
export default function KilnInner() { | |||
return <div>KilnInner</div>; | |||
} |
@@ -1,3 +0,0 @@ | |||
export default function CheckInfo() { | |||
return <div>CheckInfo</div>; | |||
} |
@@ -1,3 +0,0 @@ | |||
export default function FireCheck() { | |||
return <div>FireCheck</div>; | |||
} |