add graphBase & update 能耗分析

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;