54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
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;
|