156 lines
4.4 KiB
JavaScript
156 lines
4.4 KiB
JavaScript
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useRef, useEffect, useState } from "react";
|
||
import FeederStatus from "../../../../Common/Feeder";
|
||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||
import { useSelector } from "react-redux";
|
||
import BotttomColorBlock from "./../../components/BotttomColorBlock";
|
||
import image from "./../../../../../assets/kilnSpeed.png";
|
||
|
||
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;
|
||
// 是否显示溶液速度标签的内容
|
||
// 池底温度和溶液速度写在一个页面上
|
||
const showSpeed = props.floor == 3 ? true : false; //显示3
|
||
const showBottom = props.floor == 2 ? true : false; //显示2
|
||
const speed = props.preFloor == 2 || props.preFloor == 3 ? "f" : "s";
|
||
const [speedAn, setSpeedAn] = useState({});
|
||
useEffect(() => {
|
||
// 2，3互切不用展示动画
|
||
if (speed === "f") {
|
||
setSpeedAn({
|
||
opacity: [0, 0, 0, 0.6, 1],
|
||
transition: { duration: 0.3, delay: 0 },
|
||
});
|
||
} else {
|
||
if (props.floor === 3) {
|
||
setSpeedAn({
|
||
opacity: [0, 0, 0, 0.6, 1],
|
||
transition: { duration: 0.3, delay: 1.5 },
|
||
});
|
||
} else {
|
||
setSpeedAn({});
|
||
}
|
||
}
|
||
}, [props.floor]);
|
||
useEffect(() => {
|
||
if (show) {
|
||
vd.current.play();
|
||
setTimeout(() => {
|
||
// console.log("开启1-2的火播放");
|
||
setFireCanPlay(true);
|
||
}, 2000);
|
||
}
|
||
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>
|
||
{/* 窑炉的色块 */}
|
||
{showBottom && (
|
||
<BotttomColorBlock speed={speed} floor={props.floor} />
|
||
)}
|
||
|
||
{showBottom && fireCanPlay && fireDir == "东火" && (
|
||
<video
|
||
src="/video/fire_top.webm"
|
||
muted
|
||
autoPlay
|
||
loop
|
||
width={3700}
|
||
style={{
|
||
position: "absolute",
|
||
top: "18px",
|
||
left: "72px",
|
||
zIndex: 9,
|
||
}}
|
||
></video>
|
||
)}
|
||
{showBottom && fireCanPlay && fireDir == "西火" && (
|
||
// {fireCanPlay && (
|
||
<video
|
||
src="/video/fire_down.webm"
|
||
muted
|
||
autoPlay
|
||
loop
|
||
width={3780}
|
||
style={{
|
||
position: "absolute",
|
||
top: "-24px",
|
||
left: "12px",
|
||
zIndex: 9,
|
||
}}
|
||
></video>
|
||
)}
|
||
|
||
{/* 温度组件 */}
|
||
{showBottom && (
|
||
<TemperatureBottom
|
||
style={{
|
||
top: "208px",
|
||
// left: "638px",
|
||
left: "690px",
|
||
width: "2380px",
|
||
zIndex: 10,
|
||
}}
|
||
speed={speed}
|
||
floor={props.floor}
|
||
/>
|
||
)}
|
||
{/* 溶液速度色块 */}
|
||
{showSpeed && (
|
||
<motion.div
|
||
style={{
|
||
position: "absolute",
|
||
top: "242px",
|
||
left: "445px",
|
||
zIndex: "999",
|
||
}}
|
||
animate={speedAn}
|
||
>
|
||
<img
|
||
src={image}
|
||
alt=""
|
||
width="100%"
|
||
height="100%"
|
||
style={{ transform: "scale(0.583, 0.593)" }}
|
||
/>
|
||
</motion.div>
|
||
)}
|
||
<FeederStatus />
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|
||
|
||
export default FloorOneToTwo;
|