gt_client_pad/src/pages/SmartOps/HistoryRecord.js

import PageContent from '@/components/PageContent';
import { getHistoryRecord } from '@/services/SmartOps';
import { GetTokenFromUrl } from '@/utils/utils';
import { useNavigate, useParams, useRequest } from '@umijs/max';
import { Button, DatePicker, Select, Spin, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './index.less';

const { RangePicker } = DatePicker;
const { Option } = Select;

const HistoryRecord = (props) => {
  const { projectId } = useParams();
  const navigate = useNavigate();

  const convertObject2FormData = (params) => {
    const formData = new FormData();
    Object.entries(params).forEach(([key, value]) => {
      if (value !== null && value !== undefined && value !== NaN) {
        formData.append(key, value);
      }
    });
    return formData;
  };

  const defaultParams = {
    project_id: Number(projectId),
    start_time: '',
    end_time: '',
    page: 1,
    page_size: 10,
  };

  const [queryParams, setQueryParams] = useState(defaultParams);

  const [formData, setFormData] = useState(
    convertObject2FormData(defaultParams),
  );

  const {
    data,
    run: getList,
    loading,
  } = useRequest((params = formData) => getHistoryRecord(params), {
    formatResult: (res) => {
      return res?.data;
    },
  });

  const columns = [
    {
      title: '时间',
      dataIndex: 'CTime',
      key: 'CTime',
      render: (text) => {
        return dayjs(text).format('YYYY-MM-DD HH:mm') || '--';
      },
    },
    {
      title: '工况分析',
      dataIndex: 'Num1',
      key: 'Num1',
      render: (text) => {
        if (text === undefined || text === null) {
          return '--';
        }
        return text;
      },
    },
    {
      title: '工艺分析',
      dataIndex: 'Num2',
      key: 'Num2',
      render: (text) => {
        if (text === undefined || text === null) {
          return '--';
        }
        if (String(text).includes(',')) {
          return text.split(',').length;
        }
        return text;
      },
    },
    {
      title: '感知分析',
      dataIndex: 'Num3',
      key: 'Num3',
      render: (text) => {
        if (text === undefined || text === null) {
          return '--';
        }
        return text;
      },
    },
    {
      title: '操作',
      render: (record) => (
        <a
          onClick={() => {
            navigate(
              `/smart-ops/${projectId}?time=${record.CTime}&idList=${
                record.Num2
              }&JWT-TOKEN=${GetTokenFromUrl()}`,
            );
          }}
        >
          详情
        </a>
      ),
    },
  ];

  const handleParamsChange = (key, value) => {
    const tempParams = {
      project_id: Number(projectId),
      start_time: queryParams.start_time || '',
      end_time: queryParams.end_time || '',
      page: queryParams.page || 1,
      page_size: queryParams.page_size || 10,
    };
    switch (key) {
      case 'date':
        if (value.length === 2) {
          tempParams.start_time = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
          tempParams.end_time = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
          console.log(
            '----------------',
            dayjs(value[0]).format('YYYY-MM-DD 00:00:00'),
            dayjs(value[1]).format('YYYY-MM-DD 00:00:00'),
          );
        } else {
          tempParams.start_time = '';
          tempParams.end_time = '';
        }
        break;
      case 'page':
        tempParams.page = value;
        handleSearch(convertObject2FormData(tempParams));
        break;
      default:
        break;
    }
    console.log('-------------------', tempParams);
    setQueryParams(tempParams);
  };

  const handleSearch = (params) => {
    if (params !== undefined) {
      getList(params);
      return;
    }
    getList(formData);
  };

  useEffect(() => {
    const tempFormData = convertObject2FormData(queryParams);
    // page变更自动请求接口
    setFormData(tempFormData);
  }, [queryParams]);

  return (
    <PageContent>
      <Spin spinning={loading}>
        <div className={styles.searchContent}>
          <Button
            className={[styles.marginBottom, styles.marginRight].join(' ')}
            type="primary"
            onClick={() => navigate(-1)}
          >
            返回
          </Button>
          <div className={styles.searchContent}>
            日期：
            <RangePicker
              className={styles.timePicker}
              onChange={(value) => handleParamsChange('date', value)}
            />
            <Button
              className={styles.marginLeft}
              type="primary"
              onClick={() => handleSearch()}
            >
              查询
            </Button>
          </div>
        </div>
        <Table
          dataSource={data?.list}
          columns={columns}
          pagination={data?.pagenation}
          onChange={({ current }) => handleParamsChange('page', current)}
        />
      </Spin>
    </PageContent>
  );
};
export default HistoryRecord;