diff --git a/src/components/公共组件/GradientText/index.jsx b/src/components/公共组件/GradientText/index.jsx
new file mode 100644
index 0000000..24a6957
--- /dev/null
+++ b/src/components/公共组件/GradientText/index.jsx
@@ -0,0 +1,25 @@
+const GradientText = ({ text, spacing }) => {
+	return (
+		<svg>
+			<defs>
+				<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
+					<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
+					<stop
+						offset="100%"
+						style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
+					/>
+				</linearGradient>
+			</defs>
+			<text
+				x={0}
+				y={36}
+				fill="url(#smoke-text)"
+				style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
+			>
+				{text}
+			</text>
+		</svg>
+	);
+};
+
+export default GradientText;
diff --git a/src/components/模块组件/能耗分析/GraphBase/index.jsx b/src/components/模块组件/能耗分析/GraphBase/index.jsx
new file mode 100644
index 0000000..9002065
--- /dev/null
+++ b/src/components/模块组件/能耗分析/GraphBase/index.jsx
@@ -0,0 +1 @@
+// TODO: 通用组件 - 按钮 菜单控制层
diff --git a/src/components/模块组件/能耗分析/GraphBase/index.module.css b/src/components/模块组件/能耗分析/GraphBase/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/一氧化氮/index.jsx b/src/components/模块组件/能耗分析/一氧化氮/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/一氧化氮/index.module.css b/src/components/模块组件/能耗分析/一氧化氮/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/二氧化氮/index.jsx b/src/components/模块组件/能耗分析/二氧化氮/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/二氧化氮/index.module.css b/src/components/模块组件/能耗分析/二氧化氮/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/二氧化硫/index.jsx b/src/components/模块组件/能耗分析/二氧化硫/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/二氧化硫/index.module.css b/src/components/模块组件/能耗分析/二氧化硫/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/余热发电/index.jsx b/src/components/模块组件/能耗分析/余热发电/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/余热发电/index.module.css b/src/components/模块组件/能耗分析/余热发电/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/天然气/index.jsx b/src/components/模块组件/能耗分析/天然气/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/天然气/index.module.css b/src/components/模块组件/能耗分析/天然气/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/水耗能/index.jsx b/src/components/模块组件/能耗分析/水耗能/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/水耗能/index.module.css b/src/components/模块组件/能耗分析/水耗能/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/烟气处理/index.jsx b/src/components/模块组件/能耗分析/烟气处理/index.jsx
new file mode 100644
index 0000000..c1f41ac
--- /dev/null
+++ b/src/components/模块组件/能耗分析/烟气处理/index.jsx
@@ -0,0 +1,37 @@
+import cls from './index.module.css';
+import GradientText from '../../../公共组件/GradientText';
+
+function SmokeHandle(props) {
+	return (
+		<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
+			<span
+				class={cls.shadowBorder}
+				style={{
+					gridRow: '1 / 3',
+					paddingTop: '38px',
+					paddingLeft: '32px',
+					userSelect: 'none',
+				}}
+			>
+				<GradientText text="烟气处理" />
+			</span>
+			<span
+				className={cls.shadowBorder + ' ' + cls.infoText}
+				style={{ letterSpacing: '12px' }}
+			>
+				氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				一氧化氮排放浓度: 20mg/m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				二氧化硫排放浓度: 20mg/m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				二氧化氮排放浓度: 20mg/m³
+			</span>
+		</div>
+	);
+}
+
+export default SmokeHandle;
diff --git a/src/components/模块组件/能耗分析/烟气处理/index.module.css b/src/components/模块组件/能耗分析/烟气处理/index.module.css
new file mode 100644
index 0000000..9f7e217
--- /dev/null
+++ b/src/components/模块组件/能耗分析/烟气处理/index.module.css
@@ -0,0 +1,21 @@
+.smoke {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 187px 347px 347px ;
+	grid-template-rows: 60px 60px;
+}
+
+.shadowBorder {
+	box-shadow: inset 0 0 12px 3px #fff3;
+	border-radius: 4px;
+	padding: 4px;
+}
+
+.infoText {
+	text-align: center;
+	font-size: 24px;
+	line-height: 2.2;
+	/* line-height: 20px; */
+	letter-spacing: 1px;
+	user-select: none;
+}
diff --git a/src/components/模块组件/能耗分析/焦炉煤气/index.jsx b/src/components/模块组件/能耗分析/焦炉煤气/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/焦炉煤气/index.module.css b/src/components/模块组件/能耗分析/焦炉煤气/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/电耗能/index.jsx b/src/components/模块组件/能耗分析/电耗能/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/电耗能/index.module.css b/src/components/模块组件/能耗分析/电耗能/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/模块组件/能耗分析/能源/index.jsx b/src/components/模块组件/能耗分析/能源/index.jsx
new file mode 100644
index 0000000..888262e
--- /dev/null
+++ b/src/components/模块组件/能耗分析/能源/index.jsx
@@ -0,0 +1,44 @@
+import cls from './index.module.css';
+import GradientText from '../../../公共组件/GradientText';
+
+function Energy(props) {
+	return (
+		<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
+			<span
+				class={cls.shadowBorder}
+				style={{
+					gridRow: '1 / 3',
+					paddingTop: '38px',
+					paddingLeft: '32px',
+					userSelect: 'none',
+				}}
+			>
+				<GradientText text="能源" />
+			</span>
+			<span
+				className={cls.shadowBorder + ' ' + cls.infoText}
+				style={{
+					gridRow: '1 / 3',
+				}}
+			>
+				<span style={{ lineHeight: 2.5 }}>余热发电</span>
+				<span style={{ lineHeight: 2.5 }}>992Kwh</span>
+			</span>
+
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				水耗量: 32Km³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				天然气I: 92m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				电耗量: 92Km³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				天然气II: 92m³
+			</span>
+		</div>
+	);
+}
+
+export default Energy;
diff --git a/src/components/模块组件/能耗分析/能源/index.module.css b/src/components/模块组件/能耗分析/能源/index.module.css
new file mode 100644
index 0000000..58f27e0
--- /dev/null
+++ b/src/components/模块组件/能耗分析/能源/index.module.css
@@ -0,0 +1,21 @@
+.layout {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 133px 158px 292px 292px ;
+	grid-template-rows: 60px 60px;
+}
+
+.shadowBorder {
+	box-shadow: inset 0 0 12px 3px #fff3;
+	border-radius: 4px;
+	padding: 4px;
+}
+
+.infoText {
+	text-align: center;
+	font-size: 24px;
+	line-height: 2.2;
+	/* line-height: 20px; */
+	letter-spacing: 1px;
+	user-select: none;
+}
diff --git a/src/pages/能耗分析/index.jsx b/src/pages/能耗分析/index.jsx
index 2caa9a1..e76e6a0 100644
--- a/src/pages/能耗分析/index.jsx
+++ b/src/pages/能耗分析/index.jsx
@@ -1,62 +1,13 @@
 import cls from './index.module.css';
-
-const GradientText = ({ text, spacing }) => {
-	return (
-		<svg>
-			<defs>
-				<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
-					<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
-					<stop
-						offset="100%"
-						style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
-					/>
-				</linearGradient>
-			</defs>
-			<text
-				x={0}
-				y={36}
-				fill="url(#smoke-text)"
-				style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
-			>
-				{text}
-			</text>
-		</svg>
-	);
-};
+import SmokeHandle from '../../components/模块组件/能耗分析/烟气处理';
+import Energy from '../../components/模块组件/能耗分析/能源';
 
 function EnergyAnalysis(props) {
 	console.log('[rendering...] 加载 能耗分析页面');
 	return (
 		<div className={cls.grid}>
 			<div className={cls.vgrid + ' col-1'}>
-				<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
-					<span
-						class={cls.shadowBorder}
-						style={{
-							gridRow: '1 / 3',
-							paddingTop: '38px',
-							paddingLeft: '32px',
-							userSelect: 'none',
-						}}
-					>
-						<GradientText text="烟气处理" />
-					</span>
-					<span
-						className={cls.shadowBorder + ' ' + cls.infoText}
-						style={{ letterSpacing: '12px' }}
-					>
-						氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
-					</span>
-					<span className={cls.shadowBorder + ' ' + cls.infoText}>
-						一氧化氮排放浓度: 20mg/m³
-					</span>
-					<span className={cls.shadowBorder + ' ' + cls.infoText}>
-						二氧化硫排放浓度: 20mg/m³
-					</span>
-					<span className={cls.shadowBorder + ' ' + cls.infoText}>
-						二氧化氮排放浓度: 20mg/m³
-					</span>
-				</div>
+				<SmokeHandle />
 				<div className={'bgray ' + cls.oxygen}></div>
 				<div className={'bgray ' + cls.no}></div>
 			</div>
@@ -74,7 +25,8 @@ function EnergyAnalysis(props) {
 			</div>
 
 			<div className={cls.vgrid + ' col-4'}>
-				<div className="bgray energy"></div>
+				{/* <div className="bgray energy"></div> */}
+				<Energy />
 				<div className={cls.vvgrid}>
 					<div className="bgray electronic"></div>
 					<div className="bgray gas"></div>
diff --git a/src/pages/能耗分析/index.module.css b/src/pages/能耗分析/index.module.css
index 0575af3..e802680 100644
--- a/src/pages/能耗分析/index.module.css
+++ b/src/pages/能耗分析/index.module.css
@@ -38,13 +38,6 @@
 	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 {}