7.9
This commit is contained in:
104
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
104
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import EnterVideo from './videoComponents/EnterVideo';
|
||||
import EnterToFloorOne from './videoComponents/EnterToFloor1';
|
||||
import EnterToFloorTwo from './videoComponents/EnterToFloor2';
|
||||
import FloorOneToTwo from './videoComponents/Floor1To2';
|
||||
import FloorTwoToOne from './videoComponents/Floor2To1';
|
||||
import { useRef, useEffect, useReducer } from 'react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
const initOpacity = {
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
const opacityReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case 'enter-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'enter-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-1-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-2-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function VideoContainer(props) {
|
||||
const floor = props.floor || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2) {
|
||||
dispatch({ type: 'floor-2-to-1' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: 'floor-1-to-2' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-2' });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
};
|
||||
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoContainer;
|
||||
80
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
80
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState } from "react";
|
||||
import cls from "./index.module.css";
|
||||
import Chart2 from "../../../Common/TimeFireDir";
|
||||
import VideoContainer from "./VideoContainer";
|
||||
|
||||
function KilnCenter() {
|
||||
const [floor, setFloor] = useState(0);
|
||||
|
||||
function onFloorUpdate(flr) {
|
||||
setFloor(flr);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bgKilnInner"
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
top: "12%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* 时间火向数据 */}
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart2 />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* menu */}
|
||||
<div
|
||||
className="subMenu"
|
||||
style={{
|
||||
display: "flex",
|
||||
marginBottom: "24px",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor == 1 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(1)}
|
||||
>
|
||||
碹顶温度
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor == 2 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(2)}
|
||||
>
|
||||
池底温度
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor == 3 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(3)}
|
||||
>
|
||||
溶液速度
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 颜色指示图 */}
|
||||
<div style={{ position: "absolute", top: "30px", right:"450px" ,width: "300px", height:"41px" }}>
|
||||
<img src={require("../../../../assets/tempIntr.png")} alt="" style={{width:"300px",height:"41px"}}/>
|
||||
</div>
|
||||
|
||||
{/* video */}
|
||||
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default KilnCenter;
|
||||
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.menuItem {
|
||||
transition: all 0.3s ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 50px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../../assets/bg_center_menu.png) no-repeat;
|
||||
background-size: 100% 50%;
|
||||
background-position: bottom;
|
||||
color: #00fff788;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
}
|
||||
|
||||
.menuItem.active,
|
||||
.menuItem:hover {
|
||||
color: #00fff7;
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.videoLayer2 {
|
||||
width: 2440px;
|
||||
height: 720px;
|
||||
background: url(../../../../assets/video-layer-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.videoLayer1 {
|
||||
width: 2440px;
|
||||
height: 720px;
|
||||
background: url(../../../../assets/floor1-status.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useCallback, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import TemperatureTop from "../../../../Common/TemperatureTop";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
function EnterToFloorOne(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启enter的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 5000);
|
||||
}
|
||||
return () => {
|
||||
// console.log("关闭enter的火播放");
|
||||
setFireCanPlay(false);
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: -999,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||
>
|
||||
<video ref={vd} muted width={"100%"}>
|
||||
<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>
|
||||
)} */}
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "218px",
|
||||
left: "678px",
|
||||
width: "2380px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterToFloorOne;
|
||||
@@ -0,0 +1,44 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRef, useEffect } from 'react';
|
||||
|
||||
function EnterToFloorTwo(props) {
|
||||
const vd = useRef(null);
|
||||
const opacity = props.opacity || 0;
|
||||
|
||||
if (opacity == 1) {
|
||||
setTimeout(() => {
|
||||
vd.current.play();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
vd.current.addEventListener('ended', () => {
|
||||
setTimeout(() => {
|
||||
vd.current.currentTime = 0;
|
||||
}, 1000);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: -1000,
|
||||
opacity: opacity,
|
||||
zIndex: -999,
|
||||
}}
|
||||
transition={{ type: 'tween', duration: 1 }}
|
||||
>
|
||||
<video ref={vd} muted width={'100%'}>
|
||||
<source src="/video/floor2.webm" type="video/mp4" />
|
||||
</video>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterToFloorTwo;
|
||||
@@ -0,0 +1,38 @@
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useRef, useMemo } from 'react';
|
||||
|
||||
function EnterVideo(props) {
|
||||
const show = props.opacity || 0;
|
||||
const vd = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
vd.current.addEventListener('ended', props.onVideoEnd);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: -1000,
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||
>
|
||||
<video ref={vd} muted autoPlay={true} width={'100%'}>
|
||||
<source src="/video/enter.webm" type="video/mp4" />
|
||||
</video>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterVideo;
|
||||
@@ -0,0 +1,95 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import BotttomColorBlock from "./../../components/BotttomColorBlock";
|
||||
|
||||
function FloorOneToTwo(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
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 (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
|
||||
>
|
||||
<video ref={vd} muted>
|
||||
<source src="/video/1to2.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
<BotttomColorBlock />
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3700}
|
||||
style={{ position: "absolute", top: "18px", left: "72px" }}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3780}
|
||||
style={{ position: "absolute", top: "-24px", left: "12px" }}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TemperatureBottom
|
||||
style={{
|
||||
top: "208px",
|
||||
// left: "638px",
|
||||
left: "690px",
|
||||
width: "2380px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorOneToTwo;
|
||||
@@ -0,0 +1,94 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import TemperatureTop from "../../../../Common/TemperatureTop";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { TopColorBlock } from "./../../components/TopColorBlock";
|
||||
|
||||
function FloorTwoToOne(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
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 (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||
>
|
||||
<video ref={vd} muted>
|
||||
<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: "0px" }}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{ position: "absolute", top: "-12px", left: "-10px" }}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TopColorBlock />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorTwoToOne;
|
||||
Reference in New Issue
Block a user