update 窑炉内部

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

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 import cls from './index.module.css';
+import Chart2 from '../../../公共组件/时间火向数据';
 
 function KilnCenter() {
 	const videoRef = useRef(null);
@@ -20,6 +21,19 @@ function KilnCenter() {
 		}
 	}
 
+	const data = [
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+		{ name: 'TE271', value: 163.3 },
+	];
+
 	return (
 		<div
 			className="bgKilnInner"
@@ -31,6 +45,15 @@ function KilnCenter() {
 				flexDirection: 'column',
 			}}
 		>
+			{/* 时间火向数据 */}
+			<div
+				className="fireAndTime"
+				style={{ position: 'absolute', top: '-112px', height: '212px' }}
+			>
+				<Chart2 />
+			</div>
+
+			{/* menu  */}
 			<div
 				className="subMenu"
 				style={{
@@ -63,6 +86,7 @@ function KilnCenter() {
 				</div>
 			</div>
 
+			{/* video  */}
 			<div
 				className="video-wrapper"
 				style={{
@@ -80,6 +104,64 @@ function KilnCenter() {
 					ref={videoRef}
 				></video>
 			</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>
 	);
 }