General-AI-Platform-Web/src/pages/Business/BusinessState/components/detailDeviceStateLog.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-22 15:23:36
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-06-19 11:33:59
 * @FilePath: \general-ai-platform-web\src\pages\Business\BusinessState\components\detailDeviceStateLog.tsx
 * @Description: 设备日志
 * @交互说明
 * 1、设备日志列表的分页展示
 */

import { apiDeviceStatusLog } from '@/services/business/device';
import { isSuccessApi } from '@/utils/forApi';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { useRef, useState } from 'react';
import { proTablePaginationOptions } from '../../../../../config/defaultTable';
type DetailDeviceStateLogProps = {
  commInfo: Record<string, any>;
};
// TODO 根据具体数据展示
const DetailDeviceStateLog: React.FC<DetailDeviceStateLogProps> = (props) => {
  const actionRef = useRef<ActionType>();
  //  动态设置每页数量
  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
  // 业务模型列表信息
  const columns: ProColumns<Record<string, any>>[] = [
    {
      title: <FormattedMessage id="device_state.table.stateLog.list.ip" defaultMessage="名称" />,
      dataIndex: 'IP',
      hideInSearch: true,
      key: 'fixedName',
      fixed: 'left',
      width: '40%',
    },
    {
      title: (
        <FormattedMessage id="device_state.table.stateLog.list.runTime" defaultMessage="运行时长" />
      ),
      dataIndex: 'duration',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: (
        <FormattedMessage
          id="device_state.table.stateLog.list.updateTime"
          defaultMessage="更新时间"
        />
      ),
      dataIndex: 'update_time',
      hideInSearch: true,
      valueType: 'dateTime',
    },
  ];
  return (
    <div className="detailDeviceStateLog_wrap">
      <ProCard className="gn_card_wrap" bodyStyle={{ padding: 0 }}>
        <ProTable
          className="gn_pro_table"
          cardProps={{
            bodyStyle: { padding: 0 },
          }}
          // 标题栏
          search={false}
          options={{ fullScreen: false, setting: false, density: false, reload: false }}
          actionRef={actionRef}
          rowKey="id"
          pagination={{
            ...proTablePaginationOptions,
            pageSize: currentPageSize,
            onChange: (pageNo, pageSize) => setCurrentPageSize(pageSize),
          }}
          columnsState={{
            persistenceKey: 'bs_server_log_list',
            persistenceType: 'localStorage',
          }}
          request={async (params = {}) => {
            const { current, ...rest } = params;
            const reqParams = {
              entity_id: props?.commInfo?.id,
              pageNo: current,
              ...rest,
            };
            let resp = await apiDeviceStatusLog({ ...reqParams });
            console.log(resp, 'getDeviceStateLogList_resp');
            if (!isSuccessApi(resp)) {
              return { data: [], success: true };
            }
            return {
              data: resp.data?.data,
              success: resp.success,
              total: resp.data.count,
              current: current,
              pageSize: currentPageSize,
            };
          }}
          columns={columns}
        />
      </ProCard>
    </div>
  );
};

export default DetailDeviceStateLog;