Basic.js

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/Monitor/PointAddress/GetPointAddressEntry', {
      method: 'get',
      params: {
        versionID: 4,
      },
    });
  };

  const GetSensorType = (params = {}) => {
    return request(baseUrl + '/Publish/Monitor/Scada/GetSensorType', {
      method: 'get',
      params: {},
    });
  };

  const GetDeviceRealInfo = (params = {}) => {
    return request(baseUrl + '/Publish/Monitor/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 = 'http://192.168.10.150:8777';

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',
  },
];