mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

setup

Browse Source
This commit is contained in:
lb
2023-11-09 15:34:52 +08:00
parent b0431e4a33
commit b4eb30d76f
146 changed files with 2988 additions and 1328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Modules/KilnInner/Center/VideoContainer.jsx Normal file
View 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;

125
src/components/Modules/KilnInner/Center/index.jsx Normal file
View File

@@ -0,0 +1,125 @@
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>
{/* video */}
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
{/* <div className={cls.videoLayer2}></div> */}
{/* left side */}
{/* <div
className="leftSide"
style={{
position: 'absolute',
left: '88px',
top: '24%',
display: 'grid',
gridTemplateColumns: '100px 100px',
gap: '20px 18px',
gridAutoRows: '64px',
}}
>
{data.map((item) => (
<div
className="leftSideItem"
style={{
background: '#fff3',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
background: '#32535d',
}}
>
<span style={{ fontSize: '18px', lineHeight: 1, color: '#2EE4E6' }}>
{item.name}
</span>
<span
style={{ fontSize: '24px', lineHeight: '32px', color: '#fff' }}
>
{item.value} ℃
</span>
</div>
))}
</div>
<div
className="toolbox"
style={{
position: 'absolute',
bottom: '32px',
left: '64px',
display: 'flex',
alignItems: 'center',
gap: '24px',
}}
>
<div
className="tlj tlj1"
style={{ background: '#ccc', width: '200px', height: '100px' }}
></div>
<div
className="tlj tlj2"
style={{ background: '#ccc', width: '200px', height: '100px' }}
></div>
</div> */}
</div>
);
}
export default KilnCenter;

46
src/components/Modules/KilnInner/Center/index.module.css Normal file
View 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;
}

92
src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx Normal file
View File

@@ -0,0 +1,92 @@
import { motion, AnimatePresence } from "framer-motion";
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 ctx = null;
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();
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>
)}
<motion.div
className={cls.videoLayer1}
key="eto1div"
style={{
top: "336px",
left: "730px",
width: "2380px",
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
}}
></motion.div>
</motion.div>
)}
</AnimatePresence>
);
}
export default EnterToFloorOne;

44
src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor2.jsx Normal file
View File

@@ -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;

38
src/components/Modules/KilnInner/Center/videoComponents/EnterVideo.jsx Normal file
View File

@@ -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;

97
src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx Normal file
View File

@@ -0,0 +1,97 @@
import { motion, AnimatePresence } from "framer-motion";
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 ctx = null;
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();
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: "7px",
left: "50px",
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>
{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"
style={{
top: "360px",
left: "740px",
width: "2415px",
height: "690px",
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
}}
></motion.div>
</motion.div>
)}
</AnimatePresence>
);
}
export default FloorOneToTwo;

97
src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx Normal file
View File

@@ -0,0 +1,97 @@
import { motion, AnimatePresence } from "framer-motion";
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 ctx = null;
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();
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: "7px",
left: "50px",
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: "-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.videoLayer1}
key="eto1div"
style={{
top: "336px",
left: "730px",
width: "2380px",
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
}}
></motion.div>
</motion.div>
)}
</AnimatePresence>
);
}
export default FloorTwoToOne;

24
src/components/Modules/KilnInner/LeftSide/index.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import Kiln from '../../../Common/KilnInfo/Kiln';
import GasFlow from '../../../Common/NatGasFlow';
import WindFlow from '../../../Common/GasFlow';
import { motion } from 'framer-motion';
import cls from './index.module.scss';
export default function index() {
return (
<motion.div
className={cls.leftBar}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'relative' }}
transition={{ type: 'tween' }}
>
<Kiln />
<GasFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
<WindFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
</motion.div>
);
}

9
src/components/Modules/KilnInner/LeftSide/index.module.scss Normal file
View File

@@ -0,0 +1,9 @@
.leftBar {
width: 625px;
height: 966px;
// margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

31
src/components/Modules/KilnInner/RightSide/index.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import FanInfo from '../../../Common/FanInfo';
import WindFrequence from '../../../Common/FanRunFrequence';
import { motion } from 'framer-motion';
import cls from './index.module.scss';
export default function index() {
return (
<motion.div
style={{
width: '625px',
height: '966px',
// background: '#fff3',
display: 'flex',
flexDirection: 'column',
}}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'absolute' }}
transition={{ type: 'tween' }}
>
<div style={{ height: '380px' }}>
<FanInfo />
</div>
<div style={{ flex: 1, marginTop: '24px' }}>
<WindFrequence />
</div>
</motion.div>
);
}

0
src/components/Modules/KilnInner/RightSide/index.module.scss Normal file
View File