update GridList

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

@@ -1,7 +1,55 @@
 import cls from './index.module.css';
+import { useEffect, useState } from 'react';
+
+function getData(type) {
+	let data = [];
+	switch (type) {
+		case 'gas-i':
+			data = [
+				{ id: 1, name: '1#天然气I', value: '122m³/h' },
+				{ id: 2, name: '2#天然气I', value: '200m³/h' },
+				{ id: 3, name: '3#天然气I', value: '112m³/h' },
+				{ id: 4, name: '4#天然气I', value: '189m³/h' },
+				{ id: 5, name: '5#天然气I', value: '109m³/h' },
+				{ id: 6, name: '6#天然气I', value: '167m³/h' },
+				{ id: 7, name: '7#天然气I', value: '172m³/h' },
+				{ id: 8, name: '8#天然气I', value: '145m³/h' },
+			];
+			break;
+		case 'gas-ii':
+			data = [
+				{ id: 11, name: '1#天然气II', value: '85m³/h' },
+				{ id: 12, name: '2#天然气II', value: '45m³/h' },
+				{ id: 13, name: '3#天然气II', value: '6m³/h' },
+				{ id: 14, name: '4#天然气II', value: '72m³/h' },
+				{ id: 15, name: '5#天然气II', value: '83m³/h' },
+			];
+			break;
+	}
+	return data;
+}
 
 function GridList(props) {
-	return <div className="gridList">Grid List Of: {props.dataSource}</div>;
+	const [dataList, setDataList] = useState([]);
+
+	useEffect(() => {
+		// 这种写法有点问题。。。
+		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}>
+						{item.name}: {item.value}
+					</div>
+				))}
+			</div>
+		</>
+	);
 }
 
 export default GridList;