继续改变目录结构

src/components/公共组件/天然气流量/gridList/index.jsx

@@ -0,0 +1,53 @@
+import cls from './index.module.css';
+import { useContext, useEffect, useState } from 'react';
+import SocketContext from '../../../../store/socket-data-provider';
+
+function getData(type) {
+	let data = [];
+	switch (type) {
+		case 'gas-i':
+			data = [
+				{ id: 1, name: '1#天然气I', value: '0m³/h' },
+				{ id: 2, name: '2#天然气I', value: '0m³/h' },
+				{ id: 3, name: '3#天然气I', value: '0m³/h' },
+				{ id: 4, name: '4#天然气I', value: '0m³/h' },
+				{ id: 5, name: '5#天然气I', value: '0m³/h' },
+				{ id: 6, name: '6#天然气I', value: '0m³/h' },
+				{ id: 7, name: '7#天然气I', value: '0m³/h' },
+				{ id: 8, name: '8#天然气I', value: '0m³/h' },
+			];
+			break;
+		case 'gas-ii':
+			data = [
+				{ id: 11, name: '1#天然气II', value: '0m³/h' },
+				{ id: 12, name: '2#天然气II', value: '0m³/h' },
+				{ id: 13, name: '3#天然气II', value: '0m³/h' },
+				{ id: 14, name: '4#天然气II', value: '0m³/h' },
+				// { id: 15, name: '5#天然气II', value: '0m³/h' },
+			];
+			break;
+	}
+	return data;
+}
+
+function GridList(props) {
+	const { runState } = useContext(SocketContext);
+	const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
+
+	let dataList = getData(props.dataSource);
+	dataList = runState?.[key]
+		? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
+		: dataList;
+
+	return (
+		<div className={cls.gridList}>
+			{dataList.map((item) => (
+				<div key={item.id} className={cls.listItem}>
+					{item.name}: {item.value}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default GridList;