update 窑炉内部

src/components/公共组件/时间火向数据/1

@@ -1 +0,0 @@
-1

src/components/公共组件/时间火向数据/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
-import SocketContext from '../../../../../store/socket-data-provider';
+import SocketContext from '../../../store/socket-data-provider';
 import icon1 from '@/assets/CenterChart2icon1.svg';
 import icon2 from '@/assets/CenterChart2icon2.svg';
 import icon3 from '@/assets/CenterChart2icon3.svg';

src/components/公共组件/时间火向数据/leftbox.module.less

@@ -6,7 +6,7 @@
 		margin-right: 16px;
 		width: 200px;
 		padding: 8px;
-		background: url(../../../../../assets/CenterChart2ItemBg.png);
+		background: url(../../../assets/CenterChart2ItemBg.png);
 		background-repeat: no-repeat;
 		background-size: 100% 100%;
 		display: flex;

src/components/模块组件/总览/CenterTop/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Item2 from './RightTable';
-import Item1 from './LeftBoxes';
+import Item1 from '../../../公共组件/时间火向数据';
 
 import cls from './index.module.less';
 

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>
 	);
 }