done 能耗分析

src/components/公共组件/GraphBase/index.module.css

@@ -73,7 +73,7 @@
 .graphBaseContent {
 	height: 1px;
 	flex: 1;
-	background: #fff3;
+	/* background: #fff3; */
 }
 
 .graphBaseDesc {

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

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function NO(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,18 @@ function NO(props) {
 			size={['long', 'middle']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[148, 110, 140, 122, 84, 153, 89],
+						[88, 79, 75, 73, 33, 54, 31],
+						[60, 31, 65, 49, 51, 99, 58],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

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

@@ -1,30 +0,0 @@
-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

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function NO2(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,18 @@ function NO2(props) {
 			size={['long', 'middle']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[91, 164, 88, 120, 167, 158, 43],
+						[30, 75, 52, 43, 73, 66, 36],
+						[61, 89, 36, 77, 94, 92, 7],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

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

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function SO2(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,18 @@ function SO2(props) {
 			size={['long', 'middle']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[132, 155, 140, 83, 180, 67, 136],
+						[83, 58, 60, 22, 80, 64, 43],
+						[49, 97, 80, 61, 100, 3, 93],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/components/模块组件/能耗分析/余热发电/index.jsx

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function RestHeat(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,18 @@ function RestHeat(props) {
 			size={['long', 'middle']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[138, 136, 29, 104, 101, 93, 128],
+						[69, 52, 18, 57, 22, 88, 46],
+						[69, 84, 11, 47, 79, 5, 82],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/components/模块组件/能耗分析/天然气/index.jsx

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function NatGas(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,11 @@ function NatGas(props) {
 			size={['long', 'short']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/components/模块组件/能耗分析/氧气含量/index.jsx

@@ -1,4 +1,27 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+// function rand(max) {
+// 	return Math.ceil(Math.random() * max);
+// }
+// function getArr(len) {
+// 	return Array(len).fill(1).map(() => rand(100))
+// }
+// function getArrs(len) {
+// 	return Array(len).fill(1).map(() => getArr(7))
+// }
+// function fan4(...arrs) {
+// 	const total = arrs[0].map((_, i) =>
+// 		arrs.reduce((sum, arr) => sum + arr[i], 0),
+// 	);
+// 	arrs.unshift(total);
+// 	return arrs;
+// }
+// function main() {
+// 	// console.log(JSON.stringify(fan(getArrs(3))))
+// 	console.log(fan(getArrs(3)))
+// }
 
 function Oxygen(props) {
 	function handleSwitch(v) {
@@ -22,6 +45,18 @@ function Oxygen(props) {
 			size={['long', 'middle']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[172, 165, 135, 35, 101, 53, 68], // 总量
+						[87, 68, 81, 33, 35, 44, 38], // 白班
+						[85, 97, 54, 2, 66, 9, 30], // 夜班
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/components/模块组件/能耗分析/水耗能/index.jsx

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function WaterCost(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,18 @@ function WaterCost(props) {
 			size={['long', 'middle']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[9, 119, 56, 80, 75, 145, 66],
+						[7, 100, 14, 54, 63, 62, 11],
+						[2, 19, 42, 26, 12, 83, 55],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/components/模块组件/能耗分析/焦炉煤气/index.jsx

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function Gas(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,11 @@ function Gas(props) {
 			size={['long', 'short']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/components/模块组件/能耗分析/电耗能/index.jsx

@@ -1,4 +1,6 @@
 import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
 
 function ElecCost(props) {
 	function handleSwitch(v) {
@@ -22,6 +24,11 @@ function ElecCost(props) {
 			size={['long', 'short']}
 		>
 			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
+				style={{ height: '100%' }}
+			/>
 			{/* real table data here  */}
 		</GraphBase>
 	);

src/hooks/getChartOption.js

@@ -0,0 +1,97 @@
+import * as echarts from 'echarts';
+
+export default function getOptions(seriesData, name) {
+	const colors = [
+		'#FFD160',
+		'#12FFF5',
+		'#2760FF',
+		'#E80091',
+		'#8064ff',
+		'#ff8a3b',
+		'#8cd26d',
+		'#2aa1ff',
+	];
+	return {
+		color: colors,
+		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		legend: {
+			show: false,
+			icon: 'roundRect',
+			top: 10,
+			right: 10,
+			padding: 0,
+			itemWidth: 8,
+			itemHeight: 8,
+			itemGap: 3,
+			height: 8,
+			textStyle: {
+				color: '#DFF1FE',
+				fontSize: 10,
+			},
+		},
+		xAxis: {
+			type: 'category',
+			data: Array(7)
+				.fill(1)
+				.map((_, index) => {
+					const today = new Date();
+					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+						dtimestamp,
+					).getDate()}`;
+				})
+				.reverse(),
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+			},
+			axisTick: { show: false },
+			axisLine: {
+				lineStyle: {
+					width: 1,
+					color: '#213259',
+				},
+			},
+		},
+		yAxis: {
+			name: '单位m³/h',
+			nameTextStyle: {
+				color: '#fff',
+				fontSize: 10,
+				align: 'right',
+			},
+			type: 'value',
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+				formatter: '{value}',
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: '#213259',
+				},
+			},
+			splitLine: {
+				lineStyle: {
+					color: '#213259a0',
+				},
+			},
+		},
+		series: seriesData.map((arr, index) => ({
+			name: index + 1 + '#' + name,
+			data: arr,
+			type: 'line',
+			areaStyle: {
+				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{ offset: 0, color: colors[index] + '40' },
+					{ offset: 0.5, color: colors[index] + '20' },
+					{ offset: 1, color: colors[index] + '00' },
+				]),
+			},
+		})),
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+}

src/hooks/useChart.js

@@ -0,0 +1,3 @@
+function useChart(el, data) {
+	return <div>chart</div>;
+}

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

@@ -30,7 +30,7 @@ function EnergyAnalysis(props) {
 				</div>
 			</div>
 
-			<div className={'bgray ' + cls.line}></div>
+			<div className={' ' + cls.line}></div>
 
 			<div className={cls.vgrid + ' col-3'}>
 				<div style={{ gridRow: 2 }}>