update fire
Este cometimento está contido em:
lb
ascendente
d0cdbb4901
cometimento
9a35afa58d
@ -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>;
|
||||
}
|
||||
Carregando…
Criar uma nova questão referindo esta
Bloquear um utilizador