update basic structrue of graphbase

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

@@ -1,6 +1,8 @@
 // TODO: 通用组件 - 按钮 菜单控制层
 import useIcon from '../../../../hooks/useIcon';
 import cls from './index.module.css';
+import { useMemo, useState } from 'react';
+import { Switch, Radio } from 'antd';
 
 function choseBg(size) {
 	const [width, height] = size;
@@ -26,9 +28,34 @@ function choseBg(size) {
 function GraphBase(props) {
 	const size = props.size || ['middle', 'middle'];
 	const bgClass = choseBg(size);
-	const { icon, title, desc, switcher, onSwitch, dateOptions, onDateChange } =
-		props;
+	const {
+		icon,
+		title,
+		desc,
+		switchOptions,
+		onSwitch,
+		dateOptions,
+		onDateChange,
+		legend,
+	} = props;
 	const iconSrc = useIcon(icon);
+	const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
+	const [showChart, setShowChart] = useState(true);
+
+	let dto = null;
+
+	if (dateOptions) {
+		dto = dateOptions.map((item) => (
+			<Radio.Button value={item} key={item} className="radio-group__item">
+				{item}
+			</Radio.Button>
+		));
+	}
+
+	function handleSwitchChange(v) {
+		v ? setShowChart(true) : setShowChart(false);
+		onSwitch(v);
+	}
 
 	return (
 		<div
@@ -45,7 +72,40 @@ function GraphBase(props) {
 				<img src={iconSrc} alt="#" />
 				<h2>{title}</h2>
 			</div>
-			<div className={cls.graphBaseContent}>{props.children}</div>
+			<div className={cls.graphBaseContent}>
+				{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
+				{switchOptions && (
+					<div className={cls.graphBaseSwitch}>
+						<Switch size="small" defaultChecked onChange={handleSwitchChange} />
+						{showChart && <span className={cls.switchLabel}>历史详情</span>}
+						{!showChart && <span className={cls.switchLabel}>实时流量</span>}
+					</div>
+				)}
+				{legend && showChart && (
+					<div className={cls.legend}>
+						{legend.map((item, index) => (
+							<div className={cls.legendItem} key={item}>
+								<span
+									className={cls.lengedItemPrefix}
+									style={{ backgroundColor: colors[index] }}
+								></span>
+								<span className={cls.legendItemLabel}>{item}</span>
+							</div>
+						))}
+					</div>
+				)}
+				{dateOptions && (
+					<Radio.Group
+						defaultValue="日"
+						buttonStyle="solid"
+						className={cls.graphBaseDate + ' ' + cls.radioGroup}
+						onChange={({ target }) => onDateChange(target.value)}
+					>
+						{dto}
+					</Radio.Group>
+				)}
+				{props.children}
+			</div>
 		</div>
 	);
 }

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

@@ -64,7 +64,7 @@
 		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
 	margin: 0;
 	margin-left: 6px;
-	font-size: 18px;
+	font-size: 20px;
 	color: #fff;
 	letter-spacing: 2px;
 	font-weight: 500;
@@ -73,4 +73,73 @@
 .graphBaseContent {
 	height: 1px;
 	flex: 1;
+	background: #fff3;
+}
+
+.graphBaseDesc {
+	position: absolute;
+	top: 25px;
+	left: 150px;
+	font-size: 19px;
+	color: #76fff9;
+}
+
+.graphBaseSwitch {
+	position: absolute;
+	top: 30px;
+	left: 258px;
+	display: flex;
+	align-items: center;
+}
+
+.graphBaseDate {
+	position: absolute;
+	right: 0;
+	top: 24px;
+	color: #fff;
+	margin-right: 24px;
+}
+
+.radioGroup {
+	user-select: none;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
+}
+
+.legend {
+	position: absolute;
+	top: 30px;
+	left: 360px;
+	color: #fff;
+	display: flex;
+	align-items: center;
+}
+
+.legendItem {
+	display: flex;
+	align-items: center;
+	margin-left: 8px;
+}
+
+.lengedItemPrefix {
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+    margin-right: 4px;
 }

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

@@ -1,18 +1,23 @@
 import GraphBase from '../GraphBase';
 
 function NO(props) {
-	function handleSwitch() {}
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
 
-	function handleDateChange() {}
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
 
 	return (
 		<GraphBase
 			icon="battery"
 			title="一氧化氮"
 			desc="能耗趋势图"
-			switcher={true}
+			switchOptions={true}
 			onSwitch={handleSwitch}
 			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
 			onDateChange={handleDateChange}
 			size={['long', 'middle']}
 		>

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

@@ -5,7 +5,7 @@ function SmokeHandle(props) {
 	return (
 		<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
 			<span
-				class={cls.shadowBorder}
+				className={cls.shadowBorder}
 				style={{
 					gridRow: '1 / 3',
 					paddingTop: '38px',

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

@@ -5,7 +5,7 @@ function Energy(props) {
 	return (
 		<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
 			<span
-				class={cls.shadowBorder}
+				className={cls.shadowBorder}
 				style={{
 					gridRow: '1 / 3',
 					paddingTop: '38px',

src/hooks/useSlider.js

@@ -7,7 +7,7 @@ export const Slider = ({ value, setValue }) => {
 	};
 	return (
 		<div id="slider" className="slider">
-			<input type="range" value={value} onInput={handleInput} />
+			<input type="range" value={value} onChange={handleInput} />
 		</div>
 	);
 };