add 能耗分析“

src/components/模块组件/能耗分析/1

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

src/pages/global.less

@@ -61,3 +61,39 @@
 .absolute {
 	position: absolute;
 }
+
+.grid {
+	display: grid;
+}
+
+.gap {
+	gap: 24px;
+}
+
+.gap-12 {
+	gap: 12px;
+}
+
+.gap-8 {
+	gap: 8px;
+}
+
+.gap-6 {
+	gap: 6px;
+}
+
+.bgray {
+	background: #fff3;
+}
+
+.row1 {
+	grid-row: 1 / 2;
+}
+
+.row2 {
+	grid-row: 2 / 3;
+}
+
+.row3 {
+	grid-row: 3 / 4;
+}

src/pages/index.jsx

@@ -8,10 +8,7 @@ import NavMenu from '../components/公共组件/导航菜单';
 import { useState } from 'react';
 // import V3D from './V3D';
 import Home from './总览';
-import CheckInfo from './质检统计';
-import FireCheck from './退火监测';
 import EnergyAnalysis from './能耗分析';
-import KilnInner from './窑炉内部';
 
 export default function index() {
 	const { styles, value, setValue } = useSlider(75);

src/pages/能耗分析/index.jsx

@@ -1,4 +1,43 @@
-export default function EnergyAnalysis() {
+import cls from './index.module.css';
+
+function EnergyAnalysis(props) {
 	console.log('[rendering...] 加载 能耗分析页面');
-	return <div>EnergyAnalysis</div>;
+	return (
+		<div className={cls.grid}>
+			<div className={cls.vgrid + ' col-1'}>
+				<div className={'bgray ' + cls.smoke}>
+					<span style={{ gridRow: 2 / 3 }}>烟气处理</span>
+					<span>氧气含量: 80%</span>
+					<span>一氧化氮排放浓度: 20mg/m³</span>
+					<span>二氧化硫排放浓度: 20mg/m³</span>
+					<span>二氧化氮排放浓度: 20mg/m³</span>
+				</div>
+				<div className={'bgray ' + cls.oxygen}></div>
+				<div className={'bgray ' + cls.no}></div>
+			</div>
+
+			<div className={cls.vgrid + ' col-2'}>
+				<div className="bgray so2" style={{ gridRow: 2 }}></div>
+				<div className="bgray no2" style={{ gridRow: 3 }}></div>
+			</div>
+
+			<div className={'bgray ' + cls.line}></div>
+
+			<div className={cls.vgrid + ' col-3'}>
+				<div className="bgray heat" style={{ gridRow: 2 }}></div>
+				<div className="bgray water" style={{ gridRow: 3 }}></div>
+			</div>
+
+			<div className={cls.vgrid + ' col-4'}>
+				<div className="bgray energy"></div>
+				<div className={cls.vvgrid}>
+					<div className="bgray electronic"></div>
+					<div className="bgray gas"></div>
+					<div className="bgray mgas"></div>
+				</div>
+			</div>
+		</div>
+	);
 }
+
+export default EnergyAnalysis;

src/pages/能耗分析/index.module.css

@@ -0,0 +1,38 @@
+.grid {
+	display: grid;
+	justify-content: center;
+	gap: 24px;
+	grid-template-columns: 900px 900px 16px 900px 900px;
+    /* grid-template-rows: 128px 389px 389px; */
+    height: 100%;
+}
+
+.vgrid {
+	display: grid;
+	gap: 24px;
+	grid-template-rows: 128px 389px 389px;
+}
+
+.vvgrid {
+	display: grid;
+	gap: 24px;
+	grid-template-rows: repeat(3, 253px);
+}
+
+.line {
+	background: url(../../assets/line.png) 0 60% no-repeat;
+}
+
+.smoke {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 187px 347px 347px ;
+	grid-template-rows: 60px 60px;
+}
+
+
+.oxygen {}
+
+.no {
+
+}