gt_client_pad/src/pages/EqSelfInspection/components/Table/LiquidLevelCom.js

import TabsContent from '@/components/TabsContent';
import ThresholdDetail from '@/components/ThresholdDetail';
import { Popover, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import styles from '../PatrolReportDetail.less';
import Empty from './Empty';

export default function LiquidLevelCom(props) {
  const {
    sendMessageToUnity,
    select,
    allData,
    type,
    statusCheck,
    changeStatus,
  } = props;
  const [activeKey, setActiveKey] = useState('1');

  const handleTabsChange = (activeKey) => {
    setActiveKey(activeKey);
  };

  const { errorTableData, normalData } = useMemo(() => {
    let data = { errorTableData: [], normalData: [] };
    allData?.forEach((item) => {
      if (item.status == 1 && statusCheck.includes(1)) {
        data.errorTableData.push(item);
      } else if (item.status == 0 && statusCheck.includes(0)) {
        data.normalData.push(item);
      }
    });
    return data;
  }, [statusCheck, allData]);

  const items = useMemo(() => {
    let items = [];
    let showAllTabs = statusCheck.length == 3;
    if (showAllTabs || errorTableData.length > 0) {
      items.push({
        key: '1',
        label: `异常(${errorTableData.length || 0})`,
        children: <div></div>,
      });
    }
    if (showAllTabs || normalData.length > 0) {
      items.push({
        key: '0',
        label: `历史记录(${normalData.length || 0})`,
        children: <div></div>,
      });
    }
    return items;
  }, [statusCheck, allData]);

  useEffect(() => {
    if (items.length == 0) {
      changeStatus(0);
    } else {
      setActiveKey(items[0].key);
      changeStatus(1);
    }
  }, [items]);
  const content = (
    <div className={styles.popoverContent}>
      <p>固定液位1为H1，固定液位2为H2，实际液位为H实</p>
      <p>液位差值：液位标准值(H1)与液位实际值(H2)的差值</p>
      <p>液位差比值：H1标准值与实际值的差值与H2的标准值与实际值的差值的比值</p>
    </div>
  );
  if (items.length == 0) return null;

  return (
    <div className={styles.detailCard}>
      <div className={styles.tableTop}>
        <div className={styles.tipTitle}>
          液位校验
          <Popover content={content}>
            <i></i>
          </Popover>
        </div>
        <TabsContent
          active={activeKey}
          onChange={handleTabsChange}
          small
          items={items}
        ></TabsContent>
      </div>

      {activeKey === '1' && (
        <LiquidTable
          onClickItem={sendMessageToUnity}
          select={select}
          items={errorTableData}
          key={type}
          type={type}
        />
      )}
      {activeKey === '0' && (
        <LiquidTable
          onClickItem={sendMessageToUnity}
          select={select}
          items={normalData}
          key={type}
          type={type}
        />
      )}
    </div>
  );
}

function LiquidTable(props) {
  const { items } = props;

  const columns = [
    {
      title: '设备名称',
      width: '12%',
      dataIndex: 'device_name',
    },
    {
      title: '时间',
      dataIndex: 'record_time',
      render: (text) => {
        if (text) {
          return dayjs(text).format('YYYY.MM.DD HH:mm');
        }
        return '-';
      },
    },
    {
      title: '类型',
      key: 'template_item_name',
      dataIndex: 'template_item_name',
    },
    {
      title: '液位数',
      dataIndex: 'origin_value',
    },
    {
      title: '差值/比值',
      dataIndex: 'value',
    },
    {
      title: '设定值范围',
      width: '18%',
      render: (record) => (
        <ThresholdDetail
          current={record.value || 0}
          data={{
            JsonNumThreshold: record?.json_num_threshold,
            Type: record.type || 2,
          }}
        />
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '1.25rem',
      render: (status) => {
        switch (status) {
          case -1:
          case 0:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#12CEB3' }}
                ></i>
                正常
              </div>
            );
          case 1:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#FFE26D' }}
                ></i>
                异常
              </div>
            );
          case 2:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#FFE26D' }}
                ></i>
                警告
              </div>
            );
        }
      },
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={items}
      rowKey="device_code"
      locale={{
        emptyText: <Empty />,
      }}
      pagination={false}
    />
  );
}