126 lines
3.5 KiB
React
126 lines
3.5 KiB
React
|
/*
|
||
|
|
* @Author: zhp
|
||
|
|
* @Date: 2024-08-28 15:27:46
|
||
|
|
* @LastEditTime: 2024-08-29 09:46:32
|
||
|
|
* @LastEditors: zhp
|
||
|
|
* @Description:
|
||
|
|
*/
|
||
|
|
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/forecastIndex";
|
||
|
|
import { useSelector, useDispatch } from "react-redux";
|
||
|
|
// import TopColorBlock from "../../components/TopColorBlock";
|
||
|
|
import TopColorBlock from "../../components/forecastTopColorBlock";
|
||
|
|
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);
|
||
|
|
}, 1800);
|
||
|
|
}
|
||
|
|
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% - 500px)",
|
||
|
|
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 style={{
|
||
|
|
position: "fixed",
|
||
|
|
top: "10px",
|
||
|
|
left: "70px",
|
||
|
|
width: "calc(100% - 600px)",
|
||
|
|
height: "calc(100% - 7px)",
|
||
|
|
zIndex: -998,
|
||
|
|
overflow: "clip",
|
||
|
|
}} 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",
|
||
|
|
width: "calc(100% - 500px)",
|
||
|
|
height: "calc(100% - 7px)",
|
||
|
|
left: "240px",
|
||
|
|
zIndex: 9,
|
||
|
|
}}
|
||
|
|
></video>
|
||
|
|
)}
|
||
|
|
{fireCanPlay && fireDir == "西火" && (
|
||
|
|
// {fireCanPlay && (
|
||
|
|
<video
|
||
|
|
src="/video/fire_down.webm"
|
||
|
|
muted
|
||
|
|
autoPlay
|
||
|
|
loop
|
||
|
|
width={3800}
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
top: "-12px",
|
||
|
|
left: "-100px",
|
||
|
|
width: "calc(100% - 500px)",
|
||
|
|
height: "calc(100% - 7px)",
|
||
|
|
left: "240px",
|
||
|
|
zIndex: 9,
|
||
|
|
}}
|
||
|
|
></video>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<TopColorBlock />
|
||
|
|
|
||
|
|
<TemperatureTop
|
||
|
|
style={{
|
||
|
|
top: "200px",
|
||
|
|
left: "652px",
|
||
|
|
width: "2380px",
|
||
|
|
zIndex: 10,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<FeederStatus style={{ left: "680px" }} />
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default FloorTwoToOne;
|