import React, { useEffect, useState } from 'react'; import request from 'umi-request'; import moment from 'moment'; import HistoryInfo from '../index'; const Demo = () => { const [data, setData] = useState([]); const [series, setSeries] = useState([]); const [columns, setColumns] = useState([ { title: '采集时间', dataIndex: 'time', key: 'time', width: 160, }, ]); useEffect(() => { fetchData(initialParams); }, []); const fetchData = (params = {}) => { request(baseUrl + '/PandaCore/Monitor/Device/SensorsDataForStation', { method: 'post', data: params, }).then((res) => { let resData = res.data; let columnsData = resData.map((item, index) => { return { title: `${item.equipmentName}-${item.sensorName}${ item.unit ? '(' + item.unit + ')' : '' }`, dataIndex: `value${index + 1}`, key: `value${index + 1}`, }; }); let tableData = resData[0].dataModel.map((item, index) => ({ key: index, time: item.pt })); tableData.forEach((item, i) => { resData.forEach((child, index) => { child.dataModel.forEach((value, j) => { if (i === j) item[`value${index + 1}`] = value.pv; }); }); }); setData(tableData); setColumns(columnsData); handleSeries(resData); }); }; const handleSeries = (v) => { let resData = v; let seriesData = []; resData.forEach((item) => { let data = []; item.dataModel.forEach((child) => { data.push([moment(child.pt).valueOf(), child.pv]); }); let obj = { name: item.equipmentName + item.sensorName, sensorName: item.sensorName, decimalPoint: item.decimalPoint, unit: item.unit, data: data, }; seriesData.push(obj); }); setSeries(seriesData); }; const onChangeParams = (value = []) => { let params = initialParams; const { dateRange, ignoreOutliers, zoom, unit } = value; let requestArr = []; dateRange.forEach((item) => { let param = { ...params, stream: params.stream.map((child) => ({ ...child, dateFrom: item.dateFrom, dateTo: item.dateTo, })), ignoreOutliers, zoom, unit, }; requestArr.push(fetchData(param)); }); Promise.all(requestArr).then((values) => { console.log(values); }); }; return ( <div style={{ height: '800px' }}> <HistoryInfo title={'指标曲线'} columns={columns} dataSource={data} chartOptions={{ series }} tableProps={{ bordered: true, pagination: { pageSize: 20 } }} onChange={onChangeParams} // defaultChecked={'fourHour'} /> </div> ); }; export default Demo; const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api'; const initialParams = { stream: [ { stationCode: 'EGBF00000006', sensors: '出水瞬时流量,今日供水量,今日用电量', pointVersions: '二供泵房', dateFrom: '2021-03-15 16:01:21', dateTo: '2021-03-16 16:01:21', }, { stationCode: 'EGJZ00007117', sensors: '进水压力,出水压力,泵1状态', pointVersions: '二供机组', dateFrom: '2021-03-15 16:01:21', dateTo: '2021-03-16 16:01:21', }, ], ignoreOutliers: false, // 过滤异常值 isVertical: false, // 是否展示竖表 zoom: '', // 数据抽稀 unit: '', // 数据抽稀 min h };