fe_service_ebtp_frontend/src/pages/AbnormalAlarm/index.tsx

import React, { useState, useRef } from 'react';
import { message, PageHeader, Button, Spin } from 'antd';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { getPage, handleAlarm } from './service';


const AbnormalAalarm: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [spin, setSpin] = useState<boolean>(false);
  //显隐 查看详情窗口
  const [viewDetailModalVisible, setViewDetailModalVisible] = useState<boolean>(false);

  //查询分页数据
  const [pageData, pageDataSet] = useState<any>({
    pageNo: 1,
    pageSize: 10
  });

  //委托列表
  const columns: ProColumns<any>[] = [
    {
      title: '序号', valueType: 'index', width: 50, hideInSearch:true, align: 'center'
    },
    { title: '项目名称', dataIndex: 'projectName', width: '15%', hideInSearch: false, align: 'center' },
    { title: '标段名称', dataIndex: 'sectionName', hideInSearch: false, align: 'center' },
    { title: '评审室名称', dataIndex: 'areaName', width: '10%',hideInSearch:true, align: 'center' },
    { title: '告警设备类型', dataIndex: 'deviceType', hideInSearch:true, align: 'center' },
    { title: '告警设备编号', dataIndex: 'deviceCode', width: '15%', hideInSearch:true, align: 'center'},
    { title: '告警消息', dataIndex: 'type', hideInSearch: false, align: 'center',
      valueEnum: {
         1: { text: '设备离线'},
         2: { text: '人员数量异常'},
         3: { text: '陌生人进入'},
      }
    },
    {
      title: '处理状态', dataIndex: 'status', align: 'center',hideInSearch: true,
      valueEnum: {
        0: { text: '未处理'},
        1: { text: '已处理'},
      }
    },
    {
      title: '操作', width: '9%', align: 'center',
      valueType: 'option',
      render: (_, record) => {
        if (record.type === "1") {
          if(record.status === "0"){
            return <Button type="text" onClick={() => { handle(record); }}>处理</Button>
          }
        } else {
          return (<Button type='text' onClick={() => { setViewDetailModalVisible(true); }}>查看详情</Button>
          )
        } 
      }
    },
  ];

  /**
   * 处理
   * @param fields
   */
  const handle = async (fields: any) => {
    setSpin(true);
    const hide = message.loading('正在处理');
    try {
      await handleAlarm({
        id: fields.id,
        type: fields.type
      });
      hide();
      message.success('处理成功');
      actionRef?.current?.reload();
      return true;
    } catch (error) {
      hide();
      message.error('处理失败请重试！');
      return false;
    }finally{
      setSpin(false);
    }
  };

  return (
    <Spin spinning={spin}>
      <PageHeader title="异常告警" />
      <div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
        <ProTable<any>
          actionRef={actionRef}//action触发后更新表格
          columns={columns}//表格
          options={false}
          bordered={false}
          className='tableSearch'
          size='small'
          search={{ labelWidth: 'auto', span: 6 }}
          request={(params) =>
            getPage({
              ...params,
              pageNo: pageData.pageNo,
              pageSize: pageData.pageSize,
            }).then((res) => {
              const result = {
                data: res.data.records,
                total: res.data.total,
                success: res.success,
                pageSize: res.data.size,
                current: res.data.current
              }
              return result;
            })
          }
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: false,
            onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
            onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
          }}
          onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
        />
      </div>
    </Spin >
  )
};
export default AbnormalAalarm;