index.js

import React, { useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import Empty from '@wisdom-components/empty';
import classNames from 'classnames';
import { Modal, Button, Tabs, Input, Radio, ConfigProvider } from 'antd';
import BasicTable from '@wisdom-components/basictable';
import './index.less';

const { TabPane } = Tabs;

const RealTimeInfo = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('realtime-info');

  const {
    deviceConfService,
    pointAddressEntryService,
    sensorTypeService,
    deviceRealInfoService,
    deviceRealInfoParams,
    user,
    placeholder,
    defaultTargetValue,
    modalTitle,
    buttonText,
  } = props;

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [targetValue, setTargetValue] = useState(defaultTargetValue); // 重点/全部
  const [searchValue, setSearchValue] = useState(''); // 搜索框内容
  const [columns, setColumns] = useState(defaultColumns); // 搜索框内容
  const [tabData, setTabData] = useState([]);
  const [tabKey, setTabKey] = useState('');
  const [guid, setGuid] = useState('');
  const [deviceConf, setDeviceConf] = useState([]); // 设备配置
  const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据
  const [sensorType, setSensorType] = useState({}); // sensorType
  const [pointAddress, setPointAddress] = useState([]); // pointAddress
  const [tableData, setTableData] = useState([]); // 表格数据
  const [searchData, setSearchData] = useState([]); // 表格搜索数据

  const handleTabData = (data = {}) => {
    let tData = [];
    tData.push({
      key: data.code,
      title: data.name,
      guid: data.guid,
      versionID: data.versionID,
      deviceType: data.aName,
    });
    if (data.child && data.child.length) {
      data.child.forEach((child) => {
        tData.push({
          key: child.code,
          title: data.name + child.name,
          guid: child.guid,
          versionID: child.versionID,
          deviceType: child.aName,
        });
      });
    }
    setTabData(tData);
    setTabKey(tData[0].key);
  };

  // 过滤重点指标
  const filterEmphasis = (dataSource) => {
    const cur = tabData.filter((item) => item.key === tabKey);
    const conf =
      cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : [];
    const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : [];
    const data = dataSource.filter((item) => dPoints.includes(item.name));
    setSearchData(data);
  };

  const handleFilterColumns = (data = []) => {
    const keyArr = defaultColumns.map((item) => item.dataIndex);
    const filter = [];
    keyArr.forEach((key) => {
      let length = 0;
      data.forEach((item) => {
        if (item[key] === '--' || item[key] === '') {
          length++;
        }
      });
      if (data.length === length) {
        filter.push(key);
      }
    });
    const column = defaultColumns.filter((item) => !filter.includes(item.dataIndex));
    setColumns(column);
    setTableData(data);
  };

  const handleData = (data1 = [], data2 = [], data3 = {}) => {
    let time = data3.pt;
    if (time) time = time.slice(5, 19).replace('-', '/');
    let newData = data1.map((item, index) => {
      return {
        id: item.id,
        key: item.id,
        index: index + 1,
        name: item.name,
        value: 0,
        unit: '--',
        type: '--',
        time: time,
        desc: item.valDesc || '--',
        ...item,
      };
    });
    newData.forEach((item) => {
      let curData1 = data2.filter((child) => child.id == item.sensorTypeID);
      let curData2 = data3.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 || '--';
      }
    });
    handleFilterColumns(newData);
    const data = searchValue
      ? newData.filter((item) => item.name.indexOf(searchValue) !== -1)
      : newData;
    if (targetValue === 'emphasis') {
      filterEmphasis(data);
    } else {
      setSearchData(data);
    }
  };

  const GetDeviceConf = () => {
    const deviceType =
      deviceRealInfoParams.accountFieldParams.length > 0
        ? deviceRealInfoParams.accountFieldParams.map((item) => item.AName).join(',')
        : '二供泵房,二供机组';
    deviceConfService({
      user,
      showAll: true,
      deviceType,
    }).then((res) => {
      if (res.code === 0 && res.data.length) {
        setDeviceConf(res.data);
      }
    });
  };

  const GetDeviceRealInfo = () => {
    deviceRealInfoService(deviceRealInfoParams).then((res) => {
      if (res.code === 0 && res.data) {
        setDeviceInfo(res.data.list[0]);
        handleTabData(res.data.list[0]);
      }
    });
  };

  const GetSensorType = () => {
    sensorTypeService({}).then((res) => {
      if (res.code === 0 && res.data.length) {
        setSensorType(res.data);
      }
    });
  };

  const GetPointAddressEntry = () => {
    const cur = tabData.filter((item) => item.key === tabKey);
    !!cur.length &&
      pointAddressEntryService({ versionID: cur[0].versionID }).then((res) => {
        if (res.code === 0 && res.data.length) {
          setPointAddress(res.data);
        }
      });
  };

  useEffect(() => {
    if (isModalVisible) {
      GetDeviceConf();
      GetDeviceRealInfo();
      GetSensorType();
    }
  }, [isModalVisible]);

  useEffect(() => {
    GetPointAddressEntry();
  }, [tabKey]);

  useEffect(() => {
    handleData(pointAddress, sensorType, deviceInfo);
  }, [pointAddress]);

  useEffect(() => {
    if (targetValue === 'emphasis') {
      // 重点指标
      filterEmphasis(searchData);
    } else {
      // 全部
      if (searchValue) {
        const data = tableData.filter((item) => item.name.indexOf(searchValue) !== -1);
        setSearchData(data);
      } else {
        setSearchData(tableData);
      }
    }
  }, [targetValue]);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onSearch = (e) => {
    // 前端搜索
    if (e.target.value) {
      if (targetValue === 'emphasis') {
        // 重点指标
        const cur = tabData.filter((item) => item.key === tabKey);
        const conf =
          cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : [];
        const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : [];
        const data = tableData.filter((item) => dPoints.includes(item.name));
        const newDate = data.filter((item) => item.name.indexOf(e.target.value) !== -1);
        setSearchData(newDate);
      } else {
        // 全部
        const data = tableData.filter((item) => item.name.indexOf(e.target.value) !== -1);
        setSearchData(data);
      }
    } else {
      if (targetValue === 'emphasis') {
        // 重点指标
        filterEmphasis(tableData);
      } else {
        // 全部
        setSearchData(tableData);
      }
    }
    setSearchValue(e.target.value);
  };

  const onTabChange = (key) => {
    const g = tabData.filter((item) => item.key === key);
    setGuid(g[0].guid);
    setTabKey(key);
  };

  const onRadioChange = (e) => {
    setTargetValue(e.target.value);
  };

  const renderTitle = () => {
    return (
      <div className={classNames(`${prefixCls}-modal-title`)}>
        <Tabs
          tabBarExtraContent={{ left: <h3 style={{ fontWeight: 'bold' }}>{modalTitle}</h3> }}
          activeKey={tabKey}
          onChange={onTabChange}
          centered
        >
          {tabData.map((item) => (
            <TabPane tab={item.title} key={item.key} />
          ))}
        </Tabs>
      </div>
    );
  };

  return (
    <div className={classNames(prefixCls)}>
      <Button type="link" onClick={showModal}>
        {buttonText}
      </Button>
      <Modal
        className={classNames(`${prefixCls}-modal`)}
        width={915}
        title={renderTitle()}
        footer={null}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div className={classNames(`${prefixCls}-modal-content`)}>
          <div className={classNames(`${prefixCls}-search-wrap`)}>
            <div className={classNames(`${prefixCls}-search`)}>
              <div className={classNames(`${prefixCls}-label`)}>搜索：</div>
              <Input placeholder={placeholder} onChange={onSearch} value={searchValue} />
            </div>
            <div className={classNames(`${prefixCls}-target`)}>
              <div className={classNames(`${prefixCls}-label`)}>指标：</div>
              <Radio.Group onChange={onRadioChange} defaultValue={targetValue}>
                <Radio.Button value="emphasis">重点指标</Radio.Button>
                <Radio.Button value="all">全部</Radio.Button>
              </Radio.Group>
            </div>
          </div>
          <div className={classNames(`${prefixCls}-code-wrap`)}>
            <div>采集编码：{guid || '--'}</div>
            <div>更新时间：{(tableData.length && tableData[0].time) || '--'}</div>
          </div>
          <div className={classNames(`${prefixCls}-modal-table`)}>
            <BasicTable
              bordered
              columns={columns}
              locale={{ emptyText: <Empty /> }}
              pagination={false}
              dataSource={searchData}
              {...props}
            />
          </div>
        </div>
      </Modal>
    </div>
  );
};

RealTimeInfo.defaultProps = {
  buttonText: '查看更多',
  modalTitle: '实时指标监控',
  placeholder: '输入指标名称等',
  defaultTargetValue: 'emphasis',
  user: null,
  deviceRealInfoParams: {},
  deviceConfService: () => {},
  pointAddressEntryService: () => {},
  sensorTypeService: () => {},
  deviceRealInfoService: () => {},
};

RealTimeInfo.propTypes = {
  buttonText: PropTypes.string,
  modalTitle: PropTypes.string,
  placeholder: PropTypes.string,
  defaultTargetValue: PropTypes.string,
  user: PropTypes.string,
  deviceRealInfoParams: PropTypes.object,
  deviceConfService: PropTypes.func,
  pointAddressEntryService: PropTypes.func,
  sensorTypeService: PropTypes.func,
  deviceRealInfoService: PropTypes.func,
};

export default RealTimeInfo;

const defaultColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 60,
  },
  {
    title: '指标名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '最新指标',
    dataIndex: 'value',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '单位',
    dataIndex: 'unit',
  },
  {
    title: '指标类型',
    dataIndex: 'type',
  },
  {
    title: '数据描述',
    dataIndex: 'desc',
  },
  {
    title: '更新时间',
    dataIndex: 'time',
  },
];