add graphBase & update 能耗分析

src/components/Container.jsx

@@ -1,47 +1,15 @@
 import { useEffect, useRef } from 'react';
-
+import useIcon from '../hooks/useIcon';
 import cls from './container.module.less';
 
-import IconStack from '../assets/Icon/icon-stack.png';
-import IconGood from '../assets/Icon/icon-good.png';
-import IconCharger from '../assets/Icon/icon-charge.png';
-import IconSmoke from '../assets/Icon/icon-taiji.png';
-import IconChart from '../assets/Icon/icon-chart.png';
-import IconPuzzle from '../assets/Icon/icon-puzzle.png';
-import IconPause from '../assets/Icon/icon-pause.png';
-
 const Container = (props) => {
-	let icon = useRef(null);
+	let icon = useIcon(props.icon);
-
-	switch (props.icon) {
-		case 'kiln':
-			icon.current = IconStack;
-			break;
-		case 'good': // 良品率
-			icon.current = IconGood;
-			break;
-		case 'charger':
-			icon.current = IconCharger;
-			break;
-		case 'smoke':
-			icon.current = IconSmoke;
-			break;
-		case 'chart':
-			icon.current = IconChart;
-			break;
-		case 'puzzle':
-			icon.current = IconPuzzle;
-			break;
-		case 'pause':
-			icon.current = IconPause;
-			break;
-	}
 
 	return (
 		<div className={`${cls.container} ${props.className}`} style={props.style}>
 			<div className={cls.container__head}>
 				<img
-					src={icon.current}
+					src={icon}
 					alt="#"
 					className={props.icon == 'kiln' ? cls.bigger : ''}
 				/>

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

@@ -1 +1,53 @@
 // TODO: 通用组件 - 按钮 菜单控制层
+import useIcon from '../../../../hooks/useIcon';
+import cls from './index.module.css';
+
+function choseBg(size) {
+	const [width, height] = size;
+	return width === 'long' && height === 'middle'
+		? 'long-middle'
+		: width === 'long' && height === 'short'
+		? 'long-short'
+		: width === 'short' && height === 'middle'
+		? 'short-middle'
+		: width === 'short' && height === 'short'
+		? 'short-short'
+		: width === 'short' && height === 'long'
+		? 'short-long'
+		: width === 'middle' && height === 'middle'
+		? 'middle-middle'
+		: width === 'middle' && height === 'short'
+		? 'middle-short'
+		: width === 'middle' && height === 'long'
+		? 'middle-long'
+		: 'middle-middle';
+}
+
+function GraphBase(props) {
+	const size = props.size || ['middle', 'middle'];
+	const bgClass = choseBg(size);
+	const { icon, title, desc, switcher, onSwitch, dateOptions, onDateChange } =
+		props;
+	const iconSrc = useIcon(icon);
+
+	return (
+		<div
+			className={
+				'graph-base ' +
+				cls[bgClass] +
+				' ' +
+				cls.graphBase +
+				' ' +
+				props.className
+			}
+		>
+			<div className={cls.graphBaseTitle}>
+				<img src={iconSrc} alt="#" />
+				<h2>{title}</h2>
+			</div>
+			<div className={cls.graphBaseContent}>{props.children}</div>
+		</div>
+	);
+}
+
+export default GraphBase;

src/components/模块组件/能耗分析/GraphBase/index.module.css

@@ -0,0 +1,76 @@
+/* .long-long {
+    background: url('../../../../assets/long-long.png') no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+} */
+
+.long-middle {
+	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-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-long {
+	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-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-short {
+	background: url('../../../../assets/middle-short.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+/*
+ * more...
+ */
+
+.graphBase {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	/* justify-content: flex-end;
+    align-items: center; */
+	position: relative;
+	padding: 24px;
+}
+
+.graphBaseTitle {
+	display: flex;
+	align-items: center;
+}
+
+.graphBaseTitle > img {
+	width: 20px;
+}
+
+.graphBaseTitle > h2 {
+	font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
+		BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
+		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
+	margin: 0;
+	margin-left: 6px;
+	font-size: 18px;
+	color: #fff;
+	letter-spacing: 2px;
+	font-weight: 500;
+}
+
+.graphBaseContent {
+	height: 1px;
+	flex: 1;
+}

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

@@ -0,0 +1,25 @@
+import GraphBase from '../GraphBase';
+
+function NO(props) {
+	function handleSwitch() {}
+
+	function handleDateChange() {}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="一氧化氮"
+			desc="能耗趋势图"
+			switcher={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NO;

src/hooks/useIcon.js

@@ -0,0 +1,30 @@
+import IconStack from '../assets/Icon/icon-stack.png';
+import IconGood from '../assets/Icon/icon-good.png';
+import IconCharger from '../assets/Icon/icon-charge.png';
+import IconSmoke from '../assets/Icon/icon-taiji.png';
+import IconChart from '../assets/Icon/icon-chart.png';
+import IconPuzzle from '../assets/Icon/icon-puzzle.png';
+import IconPause from '../assets/Icon/icon-pause.png';
+import IconDefault from '../assets/Icon/icon-puzzle.png';
+
+function useIcon(iconName) {
+	// const icon = require(`../assets/icons/${iconName}.svg`).default;
+	// return icon;
+	return iconName == 'kiln'
+		? IconStack
+		: iconName == 'goods'
+		? IconGood
+		: iconName == 'battery'
+		? IconCharger
+		: iconName == 'smoke'
+		? IconSmoke
+		: iconName == 'chart'
+		? IconChart
+		: iconName == 'puzzle'
+		? IconPuzzle
+		: iconName == 'pause'
+		? IconPause
+		: IconDefault;
+}
+
+export default useIcon;

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

@@ -1,6 +1,7 @@
 import cls from './index.module.css';
 import SmokeHandle from '../../components/模块组件/能耗分析/烟气处理';
 import Energy from '../../components/模块组件/能耗分析/能源';
+import NO from '../../components/模块组件/能耗分析/一氧化氮';
 
 function EnergyAnalysis(props) {
 	console.log('[rendering...] 加载 能耗分析页面');
@@ -9,7 +10,8 @@ function EnergyAnalysis(props) {
 			<div className={cls.vgrid + ' col-1'}>
 				<SmokeHandle />
 				<div className={'bgray ' + cls.oxygen}></div>
-				<div className={'bgray ' + cls.no}></div>
+				{/* <div className={'bgray ' + cls.no}></div> */}
+				<NO />
 			</div>
 
 			<div className={cls.vgrid + ' col-2'}>