gt_client_pad/src/pages/SmartOps/components/DeviceAnalysis.js

import TabsContent from '@/components/TabsContent';
import { UnityAction } from '@/utils/utils';
import { connect } from '@umijs/max';
import { Spin, Table, Tabs } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import styles from './DeviceAnalysis.less';
import ThresholdBar from './ThresholdBar';
const { TabPane } = Tabs;

const DeviceAnalysis = (props) => {
  const Status = [
    { name: '异常', type: '1', data: [] },
    { name: '全部', type: '2', data: [] },
  ];

  const { list = [], processList, loading } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [tab, setTab] = useState('1');

  const columns = [
    {
      title: '设备名称',
      width: '20%',
      render: (record) => (
        <div>
          {record.DeviceName}({record.DeviceCode})
        </div>
      ),
    },
    {
      title: '巡检项',
      width: '14%',
      dataIndex: 'ProcessSectionId',
      render: (id) => {
        return processList.find((item) => item.id == id)?.name;
      },
    },
    {
      title: '设定值范围',
      width: '14%',
      render: (record) => {
        let thresholds = record.fault_range.split(',');
        return (
          <div>
            {record.fault_range && (
              <ThresholdBar
                current={record.fault_result}
                thresholds={thresholds}
              />
            )}
          </div>
        );
      },
    },
    {
      title: '状态',
      width: '20%',
      dataIndex: 'Reason',
    },
  ];

  useEffect(() => {
    UnityAction.on('SynDev', selectedItem);
    return () => UnityAction.off('SynDev', selectedItem);
  }, [data, tab]);

  const selectedItem = (e) => {
    setSelectedRowKeys([e]);
    console.log(data);
    const itemIndex = data?.findIndex((item) => item.type == tab);
    const index = data[itemIndex]?.data?.findIndex(
      (item) => item.DeviceCode == e,
    );
    if (index !== 0 || index != -1) {
      const dom = document.querySelector(`tr[data-row-key="${index}"]`);
      if (dom) {
        let v = document.getElementsByClassName('ant-table-body')[itemIndex];
        v.scrollTop = dom.offsetTop;
      }
    }
  };

  const data = useMemo(() => {
    return Status.map((item, idx) => {
      const data = list?.filter((cur) => cur.grade_alarm == item.type);
      return { ...item, data };
    });
  }, [list]);

  const handleBtnClick = (plcs, title) => {
    if (!plcs) return;
    const msg = JSON.stringify(plcs); //[{ dataitemid: 'Raw_Water_Tank_Level', deviceid: '1436022785' }]
    UnityAction.sendMsg(
      'ProcessAnalysisAbout',
      JSON.stringify({
        title,
        data: msg,
      }),
    );
  };

  const onTabChange = (tab) => {
    setTab(tab);
    UnityAction.sendMsg('ProcessAnalysisType', tab);
  };

  const rowSelection = {
    type: 'radio',
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
      UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode);
    },
  };

  const onSelectRow = (record, index) => {
    const selectedList = [...selectedRowKeys];
    if (selectedList[0] === index) return;
    selectedList[0] = index;
    setSelectedRowKeys(selectedList);
    UnityAction.sendMsg('SynDev', record.DeviceCode);
  };

  const setRowClassName = (record, index) => {
    return index === selectedRowKeys[0] ||
      record.DeviceCode == selectedRowKeys[0]
      ? styles.tableSelect
      : '';
  };

  return (
    <Spin spinning={loading}>
      <div className="card-box">
        <TabsContent
          small={true}
          center={false}
          defaultActiveKey="1"
          items={data?.map((item) => {
            return {
              label: `${item.name}(${item.data?.length || 0})`,
              key: item.type,
              children: (
                <Table
                  dataSource={item.data}
                  columns={columns}
                  // rowKey={'DeviceCode'}
                  // rowSelection={rowSelection}
                  rowClassName={setRowClassName}
                  onRow={(record, index) => ({
                    onClick: () => onSelectRow(record, index),
                  })}
                  pagination={false}
                  scroll={{ y: document.body.clientHeight - 730 }}
                />
              ),
            };
          })}
          onChange={onTabChange}
        />
      </div>
    </Spin>
  );
};
export default connect(({ smartOps, loading }) => ({
  loading: loading.effects['smartOps/queryList'],
  list: smartOps.list.list,
  processList: smartOps.processList,
}))(DeviceAnalysis);