fe_service_ebtp_frontend/src/pages/ElecEvaluation/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';
import ViewEvalAlarmUpdateModal from '../../Evaluation/BidControl/BidControlManager/components/ViewEvalAlarmUpdateModal';


interface alarmData {
  tilte: string;//标题
  id: string;//告警id
  reserveId: string;//预约id
  tpName: string;//项目名称
  tpNumber: string;//项目编号
  bsName: string;//标段名称
  placeName: string; //评标室名称
  startDate: string; //开始时间
  endDate: string; //结束时间
  status: string;//处理状态：0未处理；1已处理',
  roomStatus: string;//评标室状态 0-未开启 1-进行中 2-已结束
  pNumber: string;//人数信息
  remark: string;//处理说明
  attachment: string;//附件id
}

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 alarm: alarmData = {
    tilte: "测试",
    id: '',
    reserveId: '',
    tpName: '',
    tpNumber: '',
    bsName: '',
    placeName: '',
    startDate: '',
    endDate: '',
    status: '',
    roomStatus: '',
    pNumber: '',
    remark: '',
    attachment: ''
  }
  const [alarmData, setAlarmData] = useState<alarmData>(alarm);
  //委托列表
  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: false,
      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={() => { EnvData(record); 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);
    }
  };
  /**
   * modal封装数据
   * @param record 列表数据 
   */
  const EnvData = (record: any) => {
    alarm.tilte = getTypeValue(record.type);
    alarm.tpName = record.projectName;
    alarm.tpNumber = record.projectNum;
    alarm.bsName = record.sectionName;
    alarm.id = record.id;
    alarm.reserveId = record.reserveId;
    alarm.placeName = record.areaName;
    alarm.startDate = record.startDate;
    alarm.endDate = record.endDate;
    alarm.pNumber = record.pnumber;
    alarm.status = record.status;
    alarm.roomStatus = record.roomStatus;
    alarm.remark = record.remark;
    alarm.attachment = record.attachment;
    setAlarmData(alarm);
  }

  function getTypeValue(key: any) {
    let val = "";
    if (key === "2") {
      val = "人员数量异常";
    } else if (key === "3") {
      val = "陌生人告警";
    } else {
      val = key;
    }
    return val;
  }

  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>
      {viewDetailModalVisible ? (
        <ViewEvalAlarmUpdateModal
          alarmData={alarmData}
          detail={viewDetailModalVisible}
          isLookType={true}
          onCancel={() => setViewDetailModalVisible(false)}
          onOk={() => { }}
        >
        </ViewEvalAlarmUpdateModal>
      ) : null
      }
    </Spin >
  )
};
export default AbnormalAalarm;