update 窑炉内部

src/components/模块组件/窑炉内部/Center/index.jsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import cls from './index.module.css';
+
+function KilnCenter() {
+	const videoRef = useRef(null);
+	const [currentVideo, setCurrentVideo] = useState(
+		'http://localhost:8000/video/new_boom.mp4',
+	);
+	const [activeFlr, setActiveFlr] = useState(0);
+
+	console.log('video', videoRef);
+
+	function handleClickFlr(flr) {
+		if (flr == 1) {
+			setActiveFlr(1);
+			setCurrentVideo('http://localhost:8000/video/new_flr1.mp4');
+		} else {
+			setActiveFlr(2);
+			setCurrentVideo('http://localhost:8000/video/new_flr2.mp4');
+		}
+	}
+
+	return (
+		<div
+			className="bgKilnInner"
+			style={{
+				width: '100%',
+				position: 'absolute',
+				top: '12%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<div
+				className="subMenu"
+				style={{
+					display: 'flex',
+					marginBottom: '24px',
+					justifyContent: 'center',
+				}}
+			>
+				<div
+					className={
+						'flr flr1 ' +
+						cls.menuItem +
+						' ' +
+						(activeFlr == 1 ? cls.active : '')
+					}
+					onClick={() => handleClickFlr(1)}
+				>
+					一层
+				</div>
+				<div
+					className={
+						'flr flr2 ' +
+						cls.menuItem +
+						' ' +
+						(activeFlr == 2 ? cls.active : '')
+					}
+					onClick={() => handleClickFlr(2)}
+				>
+					二层
+				</div>
+			</div>
+
+			<div
+				className="video-wrapper"
+				style={{
+					flex: 1,
+					// background: '#ccc3',
+					width: '100%',
+				}} // , top: '10%', left: '10%', position: 'absolute' }}
+			>
+				<video
+					src={currentVideo}
+					muted
+					preload="auto"
+					autoPlay={true}
+					width={'100%'}
+					ref={videoRef}
+				></video>
+			</div>
+		</div>
+	);
+}
+
+export default KilnCenter;

src/components/模块组件/窑炉内部/Center/index.module.css

@@ -0,0 +1,25 @@
+.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;
+}

src/pages/总览/index.jsx

@@ -3,7 +3,7 @@ import BottomBar from '../../components/模块组件/总览/Bottom';
 import RightBar from '../../components/模块组件/总览/RightSide';
 import CenterTopData from '../../components/模块组件/总览/CenterTop';
 import { AnimatePresence, motion } from 'framer-motion';
-
+import KilnCenter from '../../components/模块组件/窑炉内部/Center';
 import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
 import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide';
 import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
@@ -74,6 +74,8 @@ export default function Home({ active }) {
 					</>
 				)}
 
+				{active == '窑炉内部' && <KilnCenter />}
+
 				{active == '退火监测' && <div className="bgFire"></div>}
 
 				{active == '质检统计' && <div className="bgFire"></div>}

src/pages/总览/index.module.css

@@ -0,0 +1,25 @@
+.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;
+}