add GasChart adn GridLIst

src/components/BottomBar/gasii/gasChart/index.jsx

@@ -0,0 +1,104 @@
+import cls from './index.module.css';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import { randomInt } from '../../../../utils';
+
+function GasChart(props) {
+	const options = {
+		color: ['#12FFF5', '#2760FF', '#FFD160'],
+		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		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',
+				},
+			},
+			// interval: 10,
+			// min: 0,
+			// max: 100,
+		},
+		series: [
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(1000, 2000);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#12FFF540' },
+						{ offset: 0.5, color: '#12FFF520' },
+						{ offset: 1, color: '#12FFF510' },
+					]),
+				},
+				// smooth: true,
+			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(1000, 2000);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#2760FF40' },
+						{ offset: 0.5, color: '#2760FF20' },
+						{ offset: 1, color: '#2760FF10' },
+					]),
+				},
+				// smooth: true,
+			},
+		],
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+	// <ReactECharts option={options} style={{ height: '100%' }} />
+	return <div className="gasChart">Chart Of: {props.dataSource}</div>;
+}
+
+export default GasChart;

src/components/BottomBar/gasii/gridList/index.jsx

@@ -0,0 +1,7 @@
+import cls from './index.module.css';
+
+function GridList(props) {
+	return <div className="gridList">Grid List Of: {props.dataSource}</div>;
+}
+
+export default GridList;

src/components/BottomBar/gasii/index.jsx

@@ -1,123 +1,63 @@
 import cls from './index.module.css';
 import BottomBarItem from '../BottomBarItem';
-import ReactECharts from 'echarts-for-react';
+
-import * as echarts from 'echarts';
+import { Switch, Radio } from 'antd';
-import { randomInt } from '../../../utils';
+import { useState } from 'react';
+import GridList from './gridList';
+import GasChart from './gasChart';
 
 function GasII(props) {
-	const options = {
+	const [dataSource, setDataSource] = useState('gas-i'); // gas-i , gas-ii
-		color: ['#12FFF5', '#2760FF', '#FFD160'],
+	const [showChart, setShowChart] = useState(true);
-		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+
-		xAxis: {
+	function handleSwitchChange(val) {
-			type: 'category',
+		if (val) {
-			data: Array(7)
+			// 展示图表
-				.fill(1)
+			setShowChart(true);
-				.map((_, index) => {
+		} else {
-					const today = new Date();
+			// 展示数据
-					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+			setShowChart(false);
-					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+		}
-						dtimestamp,
+	}
-					).getDate()}`;
+
-				})
+	function handleSourceChange(e) {
-				.reverse(),
+		console.log('val', e.target.value);
-			axisLabel: {
+		if (e.target.value == 'ii') {
-				color: '#fff',
+			// 天然气II
-				fontSize: 12,
+			setDataSource('gas-ii');
-			},
+		} else if (e.target.value == 'i') {
-			axisTick: { show: false },
+			// 天然气 I
-			axisLine: {
+			setDataSource('gas-i');
-				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',
-				},
-			},
-			// interval: 10,
-			// min: 0,
-			// max: 100,
-		},
-		series: [
-			{
-				data: Array(7)
-					.fill(1)
-					.map((_) => {
-						return randomInt(1000, 2000);
-					}),
-				type: 'line',
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#12FFF540' },
-						{ offset: 0.5, color: '#12FFF520' },
-						{ offset: 1, color: '#12FFF510' },
-					]),
-				},
-				// smooth: true,
-			},
-			{
-				data: Array(7)
-					.fill(1)
-					.map((_) => {
-						return randomInt(1000, 2000);
-					}),
-				type: 'line',
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#2760FF40' },
-						{ offset: 0.5, color: '#2760FF20' },
-						{ offset: 1, color: '#2760FF10' },
-					]),
-				},
-				// smooth: true,
-			},
-		],
-		tooltip: {
-			trigger: 'axis',
-		},
-	};
 
 	return (
 		<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
-			{/* 当前流量  */}
-			<div className={cls.currentFlow}>当前流量: 280m³</div>
-
 			{/* legend */}
 			<div className={cls.headWidget}>
-				<div className={cls.legend}>
+				<div className="flex items-center">
-					<span className={cls.gasIcon}></span>
+					<Switch size="small" defaultChecked onChange={handleSwitchChange} />
-					<span>天然气I</span>
+					<span className={cls.switchLabel}>历史详情</span>
-				</div>
-				<div className={cls.legend}>
-					<span className={cls.gas2Icon}></span>
-					<span>天然气II</span>
 				</div>
+
+				<Radio.Group
+					defaultValue="i"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+					onChange={handleSourceChange}
+				>
+					<Radio.Button value="i" className="radio-group__item">
+						天然气 I
+					</Radio.Button>
+					<Radio.Button value="ii" className="radio-group__item">
+						天然气 II
+					</Radio.Button>
+				</Radio.Group>
 			</div>
 
 			<div className={cls.chart}>
-				<ReactECharts option={options} style={{ height: '100%' }} />
+				{showChart && <GasChart dataSource={dataSource} />}
+				{!showChart && <GridList dataSource={dataSource} />}
 			</div>
 		</BottomBarItem>
 	);

src/components/BottomBar/gasii/index.module.css

@@ -28,10 +28,15 @@
 	top: 20px;
 	right: 24px;
 	height: 32px;
-	width: 190px;
+	width: 410px;
 	display: flex;
 	align-items: center;
-	justify-content: flex-end;
+	justify-content: space-between;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
 }
 
 .legend:last-child {