init commit

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

@@ -0,0 +1,44 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function NO(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 */}
+			<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>
+	);
+}
+
+export default NO;

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

@@ -0,0 +1,44 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<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>
+	);
+}
+
+export default NO2;

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

@@ -0,0 +1,44 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<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>
+	);
+}
+
+export default SO2;

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

@@ -0,0 +1,44 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<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>
+	);
+}
+
+export default RestHeat;

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

@@ -0,0 +1,37 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NatGas;

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

@@ -0,0 +1,65 @@
+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) {
+		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 */}
+			<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>
+	);
+}
+
+export default Oxygen;

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

@@ -0,0 +1,44 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<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>
+	);
+}
+
+export default WaterCost;

src/components/模块组件/能耗分析/烟气处理/index.jsx

@@ -0,0 +1,37 @@
+import cls from './index.module.css';
+import GradientText from '../../../公共组件/GradientText';
+
+function SmokeHandle(props) {
+	return (
+		<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
+			<span
+				className={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;

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

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

@@ -0,0 +1,37 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default Gas;

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

@@ -0,0 +1,37 @@
+import GraphBase from '../../../公共组件/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+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 */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default ElecCost;

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

@@ -0,0 +1,44 @@
+import cls from './index.module.css';
+import GradientText from '../../../公共组件/GradientText';
+
+function Energy(props) {
+	return (
+		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
+			<span
+				className={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;

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