update 基本完成页面布局

src/components/BottomBar/gasi/index.jsx

@@ -3,8 +3,23 @@ import BottomBarItem from '../BottomBarItem';
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import { randomInt } from '../../../utils';
+import { useState } from 'react';
+import { Switch } from 'antd';
 
 function GasI(props) {
+	const [showChart, setShowChart] = useState(true);
+
+	const dataList = [
+		{ id: 1, name: '1#助燃风', value: '122m³/h' },
+		{ id: 2, name: '2#助燃风', value: '200m³/h' },
+		{ id: 3, name: '3#助燃风', value: '112m³/h' },
+		{ id: 4, name: '4#助燃风', value: '189m³/h' },
+		{ id: 5, name: '5#助燃风', value: '109m³/h' },
+		{ id: 6, name: '6#助燃风', value: '167m³/h' },
+		{ id: 7, name: '7#助燃风', value: '172m³/h' },
+		{ id: 8, name: '8#助燃风', value: '145m³/h' },
+	];
+
 	const options = {
 		color: ['#12FFF5', '#2760FF', '#FFD160'],
 		grid: { top: 32, right: 12, bottom: 20, left: 48 },
@@ -83,14 +98,37 @@ function GasI(props) {
 		},
 	};
 
+	function handleSwitchChange(val) {
+		if (val) {
+			// 展示图表
+			setShowChart(true);
+		} else {
+			// 展示数据
+			setShowChart(false);
+		}
+	}
 	return (
 		<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
-			{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
+			<div className={cls.headWidget}>
-			{/* 当前流量  */}
+				<div className="flex items-center">
-			<div className={cls.currentFlow}>当前流量: 280m³</div>
+					<Switch size="small" defaultChecked onChange={handleSwitchChange} />
+					<span className={cls.switchLabel}>历史详情</span>
+				</div>
+			</div>
 
 			<div className={cls.chart}>
+				{showChart && (
 					<ReactECharts option={options} style={{ height: '100%' }} />
+				)}
+				{!showChart && (
+					<div className={cls.gridList}>
+						{dataList.map((item) => (
+							<div key={item.id} className={cls.listItem}>
+								{item.name}: {item.value}
+							</div>
+						))}
+					</div>
+				)}
 			</div>
 		</BottomBarItem>
 	);

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

@@ -19,7 +19,7 @@
 	line-height: 18px;
 	font-size: 18px;
 	text-align: center;
-    color: #12FFF5;
+	color: #12fff5;
 }
 
 .headWidget {
@@ -49,3 +49,35 @@
 	color: #fff !important;
 	background: #03233c !important;
 }
+
+.gridList {
+	margin-top: 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+
+.listItem {
+	border-radius: 2px;
+	padding: 12px 0;
+	text-align: center;
+	color: #fff;
+	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+}
+
+.headWidget {
+	position: absolute;
+	/* background: #00ee33; */
+	top: 22px;
+	right: 24px;
+	height: 32px;
+	width: 410px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
+}

src/components/BottomBar/gasii/gasChart/chart.config.js

@@ -0,0 +1,242 @@
+import * as echarts from 'echarts';
+import { randomInt } from '../../../../utils';
+
+export default {
+	color: [
+		'#12FFF5',
+		'#2760FF',
+		'#FFD160',
+		'#E80091',
+		'#8064ff',
+		'#ff8a3b',
+		'#8cd26d',
+		'#2aa1ff',
+	],
+	grid: { top: 38, right: 12, bottom: 20, left: 48 },
+	legend: {
+		show: true,
+		icon: 'roundRect',
+		top: 10,
+		right: 10,
+		padding: 0,
+		itemWidth: 8,
+		itemHeight: 8,
+		itemGap: 3,
+		height: 8,
+		textStyle: {
+			color: '#DFF1FE',
+			fontSize: 10,
+		},
+	},
+	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: [
+		{
+			name: '1#天然气I',
+			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,
+		},
+		{
+			name: '2#天然气I',
+			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,
+		},
+		{
+			name: '3#天然气I',
+			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: '#FFD16040' },
+					{ offset: 0.5, color: '#FFD16020' },
+					{
+						offset: 1,
+						color: '#FFD16010',
+					},
+				]),
+			},
+			// smooth: true,
+		},
+		{
+			name: '4#天然气I',
+			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: '#E8009140' },
+					{
+						offset: 0.5,
+						color: '#E8009120',
+					},
+					{ offset: 1, color: '#E8009110' },
+				]),
+			},
+			// smooth: true,
+		},
+		{
+			name: '5#天然气I',
+			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: '#8064ff40' },
+					{
+						offset: 0.5,
+						color: '#8064ff20',
+					},
+					{ offset: 1, color: '#8064ff10' },
+				]),
+			},
+			// smooth: true,
+		},
+		{
+			name: '6#天然气I',
+			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: '#ff8a3b40' },
+					{
+						offset: 0.5,
+						color: '#ff8a3b20',
+					},
+					{ offset: 1, color: '#ff8a3b10' },
+				]),
+			},
+			// smooth: true,
+		},
+		{
+			name: '7#天然气I',
+			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: '#8cd26d40' },
+					{
+						offset: 0.5,
+						color: '#8cd26d20',
+					},
+					{ offset: 1, color: '#8cd26d10' },
+				]),
+			},
+			// smooth: true,
+		},
+		{
+			name: '8#天然气I',
+			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: '#2aa1ff40' },
+					{
+						offset: 0.5,
+						color: '#2aa1ff20',
+					},
+					{ offset: 1, color: '#2aa1ff10' },
+				]),
+			},
+			// smooth: true,
+		},
+	],
+	tooltip: {
+		trigger: 'axis',
+	},
+};

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

@@ -1,104 +1,15 @@
 import cls from './index.module.css';
 import ReactECharts from 'echarts-for-react';
-import * as echarts from 'echarts';
+import options from './chart.config';
-import { randomInt } from '../../../../utils';
+
+const tConfig = {};
 
 function GasChart(props) {
-	const options = {
+	return (
-		color: ['#12FFF5', '#2760FF', '#FFD160'],
+		<div className={cls.gasChart}>
-		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+			<ReactECharts option={options} style={{ height: '100%' }} />
-		xAxis: {
+		</div>
-			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/gasChart/index.module.css

@@ -0,0 +1,3 @@
+.gasChart {
+  height: 100%;
+}

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

@@ -30,25 +30,24 @@ function getData(type) {
 }
 
 function GridList(props) {
-	const [dataList, setDataList] = useState([]);
+	// const [dataList, setDataList] = useState([]);
+	// setDataList(getData(props.dataSource))
+	// useEffect(() => {
+	// 	// 这种写法有点问题。。。
+	// 	console.log('data source change:', props.dataSource);
+	// 	setDataList(getData(props.dataSource));
+	// }, props.dataSource);
 
-	useEffect(() => {
+	const dataList = getData(props.dataSource);
-		// 这种写法有点问题。。。
-		console.log('data source change:', props.dataSource);
-		setDataList(getData(props.dataSource));
-	}, props.dataSource);
 
 	return (
-		<>
-			<h1>Grid List Of: {props.dataSource}</h1>
 		<div className={cls.gridList}>
 			{dataList.map((item) => (
-					<div className={cls.listItem}>
+				<div key={item.id} className={cls.listItem}>
 					{item.name}: {item.value}
 				</div>
 			))}
 		</div>
-		</>
 	);
 }
 

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

@@ -0,0 +1,14 @@
+.gridList {
+  margin-top: 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+
+.listItem {
+  border-radius: 2px;
+  padding: 12px 0;
+  text-align: center;
+	color: #fff;
+	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+}

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

@@ -25,7 +25,7 @@
 .headWidget {
 	position: absolute;
 	/* background: #00ee33; */
-	top: 20px;
+	top: 22px;
 	right: 24px;
 	height: 32px;
 	width: 410px;
@@ -65,6 +65,10 @@
 	background: #2760ff;
 }
 
+.radioGroup {
+	user-select: none;
+}
+
 .radioGroup * {
 	border: none !important;
 	border-radius: 0 !important;