update 窑炉内部

2023-11-04 16:51:22 +08:00
parent 1b25fa6eec
commit 4a8f81592c
5 changed files with 85 additions and 4 deletions
--- a/src/components/模块组件/总览/CenterTop/LeftBoxes/index.jsx
+++ b/src/components/模块组件/总览/CenterTop/LeftBoxes/index.jsx
@@ -1,109 +0,0 @@
-import React, { useState, useContext, useEffect } from 'react';
-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';
-import icon4 from '@/assets/CenterChart2icon4.svg';
-
-import cls from './leftbox.module.less';
-
-const Chart2 = () => {
-	const ctx = useContext(SocketContext);
-	let [time, setTime] = useState([0, 0]);
-
-	useEffect(() => {
-		const restTime = ctx.runState?.lastFireChangeTime;
-		if (restTime == null) return;
-		console.log('restTime is:', restTime);
-		let timer = null;
-		if (/分/.test(restTime) && /秒/.test(restTime)) {
-			let [min, sec] = restTime.replace(/分/, ':').replace(/秒/, '').split(':');
-			timer = setInterval(() => {
-				if (Number(sec) === 0 && Number(min) === 0) {
-					clearInterval(timer);
-					return;
-				}
-				if (Number(sec) === 0) {
-					sec = 59;
-					min--;
-				} else {
-					sec--;
-				}
-				setTime([min, sec]);
-			}, 1000);
-		} else if (/分/.test(restTime)) {
-			let sec,
-				min = restTime.replace(/分/, ':');
-			sec = 0;
-
-			timer = setInterval(() => {
-				if (Number(sec) === 0 && Number(min) === 0) {
-					clearInterval(timer);
-					return;
-				}
-				if (Number(sec) === 0) {
-					sec = 59;
-					min--;
-				} else {
-					sec--;
-				}
-				setTime([min, sec]);
-			}, 1000);
-		} else if (/秒/.test(restTime)) {
-			let min,
-				sec = restTime.replace(/秒/, '');
-			min = 0;
-
-			timer = setInterval(() => {
-				if (Number(sec) === 0 && Number(min) === 0) {
-					clearInterval(timer);
-					return;
-				}
-				if (Number(sec) === 0) {
-					sec = 59;
-					min--;
-				} else {
-					sec--;
-				}
-				setTime([min, sec]);
-			}, 1000);
-		}
-		return () => {
-			clearInterval(timer);
-		};
-	}, [ctx.runState?.lastFireChangeTime]);
-
-	const data = [
-		{
-			icon: icon1,
-			label: '换火时间',
-			value: ctx.runState?.fireChangeTime || '00:00',
-		},
-		{
-			icon: icon3,
-			label: '剩余时间',
-			value: `${time[0]}分${time[1]}秒`,
-		},
-		{
-			icon: icon2,
-			label: '当前火向',
-			value: ctx.runState?.fireDirection || '东火',
-		},
-	];
-
-	return (
-		<div className={`${cls.leftbox} flex h-half`}>
-			{data.map((item) => (
-				<div className={cls.box} key={item.label}>
-					<img src={item.icon} alt="Error" className="box__logo" />
-					<div className={cls.box__inner}>
-						<h2 className={cls.box__label}>{item.label}</h2>
-						<h2 className={cls.box__value}> {item.value}</h2>
-					</div>
-				</div>
-			))}
-		</div>
-	);
-};
-
-export default Chart2;
--- a/src/components/模块组件/总览/CenterTop/LeftBoxes/leftbox.module.less
+++ b/src/components/模块组件/总览/CenterTop/LeftBoxes/leftbox.module.less
@@ -1,33 +0,0 @@
-.leftbox {
-	// width: 440px;
-	// background: rgb(127, 202, 42);
-
-	.box {
-		margin-right: 16px;
-		width: 200px;
-		padding: 8px;
-		background: url(../../../../../assets/CenterChart2ItemBg.png);
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-		display: flex;
-		align-items: flex-start;
-		user-select: none;
-
-		.box__inner {
-			padding-top: 12px;
-
-			.box__label {
-				color: #fffa;
-				font-size: 18px;
-				line-height: 14px;
-			}
-
-			.box__value {
-				color: #fff;
-				font-weight: 400;
-				font-size: 30px;
-				line-height: 34px;
-			}
-		}
-	}
-}
--- a/src/components/模块组件/总览/CenterTop/index.jsx
+++ b/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';

--- a/src/components/模块组件/窑炉内部/Center/index.jsx
+++ b/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>
 	);
 }