detail.config.ts 6.15 KB
import { alarmLevel } from '/@/views/device/list/config/detail.config';
import { FormSchema } from '/@/components/Form';
import { BasicColumn } from '/@/components/Table';
import moment from 'moment';
import { findDictItemByCode } from '/@/api/system/dict';
import { AlarmStatus } from '/@/enums/alarmEnum';
import { Tag } from 'ant-design-vue';
import { h } from 'vue';

export const getAlarmSearchSchemas = (deviceAlaramDetailMode?: boolean): FormSchema[] => {
  return [
    {
      field: 'status',
      label: '告警/确认状态',
      component: 'Cascader',
      helpMessage: [
        '激活未确认: 可以处理,清除',
        '激活已确认: 只可清除,已经处理',
        '清除未确认: 只可处理,已经清除',
        '清除已确认: 不需要做处理和清除',
      ],
      componentProps: {
        popupClassName: 'alarm-stauts-cascader',
        options: [
          {
            value: '0',
            label: '清除',
            children: [
              {
                value: AlarmStatus.CLEARED_UN_ACK,
                label: '清除未确认',
              },
              {
                value: AlarmStatus.CLEARED_ACK,
                label: '清除已确认',
              },
            ],
          },
          {
            value: '1',
            label: '激活',
            children: [
              {
                value: AlarmStatus.ACTIVE_UN_ACK,
                label: '激活未确认',
              },
              {
                value: AlarmStatus.ACTIVE_ACK,
                label: '激活已确认',
              },
            ],
          },
        ],
        placeholder: '请选择告警/确认状态',
      },
    },
    {
      field: 'alarmType',
      label: '告警场景',
      component: 'Input',
      componentProps: {
        maxLength: 255,
        placeholder: '请输入告警场景',
      },
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 255) {
                return Promise.reject('字数不超过255个字');
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
    {
      field: 'deviceName',
      label: '告警设备',
      component: 'Input',
      componentProps: {
        maxLength: 255,
        placeholder: '请输入告警设备',
      },
      ifShow: () => !deviceAlaramDetailMode,
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 255) {
                return Promise.reject('字数不超过255个字');
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
    {
      field: 'severity',
      label: '告警级别',
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请选择告警级别',
        api: findDictItemByCode,
        params: {
          dictCode: 'severity_type',
        },
        labelField: 'itemText',
        valueField: 'itemValue',
      },
    },
    {
      field: 'alarmTime',
      label: '告警时间',
      component: 'RangePicker',
      colProps: { span: 12 },
      componentProps: {
        showTime: {
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
        },
      },
    },
  ];
};

const handleAlarmStatus = (status: string) => {
  return status.split('_').includes('ACTIVE');
};

const handleAlarmAckStatus = (status: string) => {
  return status.split('_').includes('ACK');
};

export const alarmColumns: BasicColumn[] = [
  {
    title: '告警状态',
    dataIndex: 'status',
    customRender({ record }: { record }) {
      const flag = handleAlarmStatus(record.status);
      return h(Tag, { color: flag ? 'red' : 'green' }, () => (flag ? '激活' : '清除'));
    },
    width: 90,
  },
  {
    title: '告警设备',
    dataIndex: 'deviceName',
    width: 180,
    customRender: ({ record }) => {
      const { deviceAlias, deviceName } = record || {};
      return deviceAlias || deviceName;
    },
  },
  {
    title: '告警场景',
    dataIndex: 'type',
    width: 180,
  },
  {
    title: '告警级别',
    dataIndex: 'severity',
    width: 90,
    format: (text) => alarmLevel(text),
  },
  {
    title: '告警详情',
    dataIndex: 'details',
    slots: { customRender: 'details' },
    width: 160,
  },
  {
    title: '确认状态',
    dataIndex: 'ackStatus',
    customRender({ record }: { record }) {
      const flag = handleAlarmAckStatus(record.status);
      return h(Tag, { color: flag ? 'blue' : 'orange' }, () => (flag ? '已确认' : '未确认'));
    },
    width: 110,
  },
  {
    title: '告警时间',
    dataIndex: 'createdTime',
    width: 130,
  },
];

export const alarmSchemasForm: FormSchema[] = [
  {
    field: 'deviceName',
    label: '告警设备',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },

  {
    field: 'startTs',
    label: '开始时间',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'endTs',
    label: '结束时间',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'ackTs',
    label: '处理时间',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    ifShow: ({ values }) => values.status === '激活已确认' || values.status === '清除已确认',
  },
  {
    field: 'clearTs',
    label: '清除时间',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    ifShow: ({ values }) => values.status === '清除已确认' || values.status === '清除未确认',
  },
  {
    field: 'type',
    label: '告警场景',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'severity',
    label: '严重程度',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'status',
    label: '状态',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'details',
    label: '详情',
    component: 'InputTextArea',
  },
];