|
@@ -1,7 +1,55 @@ |
|
|
import cls from './index.module.css'; |
|
|
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) { |
|
|
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; |
|
|
export default GridList; |