diff --git a/src/components/模块组件/能耗分析/GraphBase/index.jsx b/src/components/公共组件/GraphBase/index.jsx
similarity index 98%
rename from src/components/模块组件/能耗分析/GraphBase/index.jsx
rename to src/components/公共组件/GraphBase/index.jsx
index 4d4b77b..8a1965a 100644
--- a/src/components/模块组件/能耗分析/GraphBase/index.jsx
+++ b/src/components/公共组件/GraphBase/index.jsx
@@ -1,5 +1,5 @@
 // TODO: 通用组件 - 按钮 菜单控制层
-import useIcon from '../../../../hooks/useIcon';
+import useIcon from '../../../hooks/useIcon';
 import cls from './index.module.css';
 import { useMemo, useState } from 'react';
 import { Switch, Radio } from 'antd';
diff --git a/src/components/模块组件/能耗分析/GraphBase/index.module.css b/src/components/公共组件/GraphBase/index.module.css
similarity index 86%
rename from src/components/模块组件/能耗分析/GraphBase/index.module.css
rename to src/components/公共组件/GraphBase/index.module.css
index 58c9160..8dbe2f8 100644
--- a/src/components/模块组件/能耗分析/GraphBase/index.module.css
+++ b/src/components/公共组件/GraphBase/index.module.css
@@ -5,31 +5,31 @@
 } */
 
 .long-middle {
-	background: url('../../../../assets/long-middle.png') no-repeat;
+	background: url('../../../assets/long-middle.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }
 
 .long-short {
-	background: url('../../../../assets/long-short.png') no-repeat;
+	background: url('../../../assets/long-short.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }
 
 .middle-long {
-	background: url('../../../../assets/middle-middle.png') no-repeat;
+	background: url('../../../assets/middle-middle.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }
 
 .middle-middle {
-	background: url('../../../../assets/middle-middle-2.png') no-repeat;
+	background: url('../../../assets/middle-middle-2.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }
 
 .middle-short {
-	background: url('../../../../assets/middle-short.png') no-repeat;
+	background: url('../../../assets/middle-short.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }
diff --git a/src/components/模块组件/能耗分析/一氧化氮/index.jsx b/src/components/模块组件/能耗分析/一氧化氮/index.jsx
index af32bdc..3c6c278 100644
--- a/src/components/模块组件/能耗分析/一氧化氮/index.jsx
+++ b/src/components/模块组件/能耗分析/一氧化氮/index.jsx
@@ -1,4 +1,4 @@
-import GraphBase from '../GraphBase';
+import GraphBase from '../../../公共组件/GraphBase';
 
 function NO(props) {
 	function handleSwitch(v) {
diff --git a/src/components/模块组件/能耗分析/二氧化氮 copy/index.jsx b/src/components/模块组件/能耗分析/二氧化氮 copy/index.jsx
new file mode 100644
index 0000000..db0c966
--- /dev/null
+++ b/src/components/模块组件/能耗分析/二氧化氮 copy/index.jsx	
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function NO2(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="二氧化氮"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NO2;
diff --git a/src/components/模块组件/能耗分析/二氧化氮/index.jsx b/src/components/模块组件/能耗分析/二氧化氮/index.jsx
index e69de29..db0c966 100644
--- a/src/components/模块组件/能耗分析/二氧化氮/index.jsx
+++ b/src/components/模块组件/能耗分析/二氧化氮/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function NO2(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="二氧化氮"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NO2;
diff --git a/src/components/模块组件/能耗分析/二氧化硫/index.jsx b/src/components/模块组件/能耗分析/二氧化硫/index.jsx
index e69de29..e4c8ddc 100644
--- a/src/components/模块组件/能耗分析/二氧化硫/index.jsx
+++ b/src/components/模块组件/能耗分析/二氧化硫/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function SO2(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="二氧化硫"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default SO2;
diff --git a/src/components/模块组件/能耗分析/余热发电/index.jsx b/src/components/模块组件/能耗分析/余热发电/index.jsx
index e69de29..eef0814 100644
--- a/src/components/模块组件/能耗分析/余热发电/index.jsx
+++ b/src/components/模块组件/能耗分析/余热发电/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function RestHeat(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="余热发电"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default RestHeat;
diff --git a/src/components/模块组件/能耗分析/天然气/index.jsx b/src/components/模块组件/能耗分析/天然气/index.jsx
index e69de29..5bb7bb8 100644
--- a/src/components/模块组件/能耗分析/天然气/index.jsx
+++ b/src/components/模块组件/能耗分析/天然气/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function NatGas(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="天然气"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量']}
+			onDateChange={handleDateChange}
+			size={['long', 'short']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NatGas;
diff --git a/src/components/模块组件/能耗分析/氧气含量/index.jsx b/src/components/模块组件/能耗分析/氧气含量/index.jsx
new file mode 100644
index 0000000..de85f13
--- /dev/null
+++ b/src/components/模块组件/能耗分析/氧气含量/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function Oxygen(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="氧气含量"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default Oxygen;
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
index e69de29..1e6fb87 100644
--- a/src/components/模块组件/能耗分析/水耗能/index.jsx
+++ b/src/components/模块组件/能耗分析/水耗能/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function WaterCost(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="水耗能"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default WaterCost;
diff --git a/src/components/模块组件/能耗分析/烟气处理/index.jsx b/src/components/模块组件/能耗分析/烟气处理/index.jsx
index 94b79bd..feda64d 100644
--- a/src/components/模块组件/能耗分析/烟气处理/index.jsx
+++ b/src/components/模块组件/能耗分析/烟气处理/index.jsx
@@ -3,7 +3,7 @@ import GradientText from '../../../公共组件/GradientText';
 
 function SmokeHandle(props) {
 	return (
-		<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
+		<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
 			<span
 				className={cls.shadowBorder}
 				style={{
diff --git a/src/components/模块组件/能耗分析/焦炉煤气/index.jsx b/src/components/模块组件/能耗分析/焦炉煤气/index.jsx
index e69de29..fac5344 100644
--- a/src/components/模块组件/能耗分析/焦炉煤气/index.jsx
+++ b/src/components/模块组件/能耗分析/焦炉煤气/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function Gas(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="焦炉煤气"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量']}
+			onDateChange={handleDateChange}
+			size={['long', 'short']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default Gas;
diff --git a/src/components/模块组件/能耗分析/电耗能/index.jsx b/src/components/模块组件/能耗分析/电耗能/index.jsx
index e69de29..c4386bb 100644
--- a/src/components/模块组件/能耗分析/电耗能/index.jsx
+++ b/src/components/模块组件/能耗分析/电耗能/index.jsx
@@ -0,0 +1,30 @@
+import GraphBase from '../../../公共组件/GraphBase';
+
+function ElecCost(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="电耗能"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量']}
+			onDateChange={handleDateChange}
+			size={['long', 'short']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default ElecCost;
diff --git a/src/components/模块组件/能耗分析/能源/index.jsx b/src/components/模块组件/能耗分析/能源/index.jsx
index 851ad1f..e9b6920 100644
--- a/src/components/模块组件/能耗分析/能源/index.jsx
+++ b/src/components/模块组件/能耗分析/能源/index.jsx
@@ -3,7 +3,7 @@ import GradientText from '../../../公共组件/GradientText';
 
 function Energy(props) {
 	return (
-		<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
+		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
 			<span
 				className={cls.shadowBorder}
 				style={{
diff --git a/src/pages/能耗分析/index.jsx b/src/pages/能耗分析/index.jsx
index d08804e..9f7484f 100644
--- a/src/pages/能耗分析/index.jsx
+++ b/src/pages/能耗分析/index.jsx
@@ -2,6 +2,14 @@ import cls from './index.module.css';
 import SmokeHandle from '../../components/模块组件/能耗分析/烟气处理';
 import Energy from '../../components/模块组件/能耗分析/能源';
 import NO from '../../components/模块组件/能耗分析/一氧化氮';
+import NO2 from '../../components/模块组件/能耗分析/二氧化氮';
+import SO2 from '../../components/模块组件/能耗分析/二氧化硫';
+import Oxygen from '../../components/模块组件/能耗分析/氧气含量';
+import NatGas from '../../components/模块组件/能耗分析/天然气';
+import ElecCost from '../../components/模块组件/能耗分析/电耗能';
+import WaterCost from '../../components/模块组件/能耗分析/水耗能';
+import RestHeat from '../../components/模块组件/能耗分析/余热发电';
+import Gas from '../../components/模块组件/能耗分析/焦炉煤气';
 
 function EnergyAnalysis(props) {
 	console.log('[rendering...] 加载 能耗分析页面');
@@ -9,30 +17,43 @@ function EnergyAnalysis(props) {
 		<div className={cls.grid}>
 			<div className={cls.vgrid + ' col-1'}>
 				<SmokeHandle />
-				<div className={'bgray ' + cls.oxygen}></div>
-				{/* <div className={'bgray ' + cls.no}></div> */}
+				<Oxygen />
 				<NO />
 			</div>
 
 			<div className={cls.vgrid + ' col-2'}>
-				<div className="bgray so2" style={{ gridRow: 2 }}></div>
-				<div className="bgray no2" style={{ gridRow: 3 }}></div>
+				<div style={{ gridRow: 3 }}>
+					<NO2 />
+				</div>
+				<div style={{ gridRow: 2 }}>
+					<SO2 />
+				</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 style={{ gridRow: 2 }}>
+					<RestHeat />
+				</div>
+				<div style={{ gridRow: 3 }}>
+					<WaterCost />
+				</div>
 			</div>
 
 			<div className={cls.vgrid + ' col-4'}>
 				{/* <div className="bgray energy"></div> */}
 				<Energy />
 				<div className={cls.vvgrid}>
-					<div className="bgray electronic"></div>
-					<div className="bgray gas"></div>
-					<div className="bgray mgas"></div>
+					<div className=" electronic">
+						<ElecCost />
+					</div>
+					<div className=" gas">
+						<NatGas />
+					</div>
+					<div className=" mgas">
+						<Gas />
+					</div>
 				</div>
 			</div>
 		</div>