import React, { useEffect, useState } from 'react'; import Empty from '@wisdom-components/empty'; import RealTimeInfo from '../index'; import request from 'umi-request'; const Demo = () => { const [data, setData] = useState([]); const [targetValue, setTargetValue] = useState('emphasis'); const [guid, setGuid] = useState(''); const [updateTime, setUpdateTime] = useState(''); const GetPointAddressEntry = (params = {}) => { return request(baseUrl + '/Publish/GCK/PointAddress/GetPointAddressEntry', { method: 'get', params: { versionID: 4, }, }); }; const GetSensorType = (params = {}) => { return request(baseUrl + '/Publish/GCK/Sensor/GetSensorType', { method: 'get', params: {}, }); }; const GetDeviceRealInfo = (params = {}) => { return request(baseUrl + '/Publish/GCK/Device/DeviceRealInfo', { method: 'post', data: { userID: '1', pageIndex: 1, pageSize: 20, isFocus: false, accountFieldParams: [{ AName: '二供泵房' }, { AName: '二供机组' }], equipmentCode: 'EGBF00000001', }, }); }; const fetchData = async () => { let data1 = await GetPointAddressEntry(); let data2 = await GetSensorType(); let data3 = await GetDeviceRealInfo(); setUpdateTime(data3.data.list[0].PT); setGuid(data3.data.list[0].child[0].guid); handleData(data1.data, data2.data, data3.data); }; const handleData = (data1 = [], data2 = [], data3 = []) => { let newData = data1.map((item, index) => { return { id: item.id, key: item.id, index: index + 1, name: item.Name, value: 0, unit: '--', type: '--', time: data3.list[0].pt, ...item, }; }); newData.forEach((item) => { let curData1 = data2.filter((child) => child.id == item.sensorTypeID); let curData2 = data3.list[0].dataList.filter((child) => child.paid == item.id); if (curData1.length) { item.unit = curData1[0].unit || '--'; item.type = curData1[0].name || '--'; } if (curData2.length) { item.value = curData2[0].pv || '--'; } }); setData(newData); }; useEffect(() => { fetchData(); }, []); const onSearch = (e) => { console.log(e.type, e.target.value); }; const onRadioChange = (e) => { setTargetValue(e.target.value); console.log('value', e.target.value); }; return ( <RealTimeInfo onSearch={onSearch} onRadioChange={onRadioChange} targetValue={targetValue} guid={guid} updateTime={updateTime} bordered columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 500 }} locale={{ emptyText: <Empty /> }} /> ); }; export default Demo; const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api'; const columns = [ { title: '序号', dataIndex: 'index', }, { title: '指标名称', dataIndex: 'name', width: 150, }, { title: '最新指标', dataIndex: 'value', render: (text) => <a>{text}</a>, }, { title: '单位', dataIndex: 'unit', }, { title: '指标类型', dataIndex: 'type', }, { title: '更新时间', dataIndex: 'time', }, ];