Basic.tsx

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
};