update

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';

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

src/components/模块组件/能耗分析/一氧化氮/index.jsx

@@ -1,4 +1,4 @@
-import GraphBase from '../GraphBase';
+import GraphBase from '../../../公共组件/GraphBase';
 
 function NO(props) {
 	function handleSwitch(v) {

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;

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;

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;

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;

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;

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;

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;

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={{

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;

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;

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={{

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>
+				<Oxygen />
-				{/* <div className={'bgray ' + cls.no}></div> */}
 				<NO />
 			</div>
 
 			<div className={cls.vgrid + ' col-2'}>
-				<div className="bgray so2" style={{ gridRow: 2 }}></div>
+				<div style={{ gridRow: 3 }}>
-				<div className="bgray no2" style={{ gridRow: 3 }}></div>
+					<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 style={{ gridRow: 2 }}>
-				<div className="bgray water" style={{ gridRow: 3 }}></div>
+					<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=" electronic">
-					<div className="bgray gas"></div>
+						<ElecCost />
-					<div className="bgray mgas"></div>
+					</div>
+					<div className=" gas">
+						<NatGas />
+					</div>
+					<div className=" mgas">
+						<Gas />
+					</div>
 				</div>
 			</div>
 		</div>