admin-vben5/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
  Descriptions,
  DescriptionsItem,
  Image,
  Tag,
  Timeline,
  TimelineItem,
} from 'ant-design-vue';
import { queryAlarmEventAttachmentsList } from '#/api/sis/alarmEventAttachments';
import type { AlarmEventAttachmentsVO } from '#/api/sis/alarmEventAttachments/model';
import { fallImg } from './data';

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    // warningDetail.value = null;
    modalApi.close();
  },
});

const warningDetail = shallowRef<any>(null);

// 时间线显示条件配置
const timelineConfig = {
  已完成: ['已完成'],
  处理异常: ['已完成', '处理异常'],
  处理中: ['已完成', '处理中', '处理异常'],
};

function showTimelineItem(type: string): boolean {
  const currentStatus = warningDetail.value?.processingStatus;
  return (
    timelineConfig[type as keyof typeof timelineConfig]?.includes(
      currentStatus,
    ) || false
  );
}

const currFiles = ref<AlarmEventAttachmentsVO[]>([]);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const { id, data } = modalApi.getData() as {
    id: number | string;
    data: any[];
  };

  // 从传递的数据中查找对应的记录
  if (data) {
    warningDetail.value = data;
  }
  // 加载事件附件信息
  currFiles.value = await queryAlarmEventAttachmentsList(id);
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    title="预警详情"
    class="w-[60%]"
  >
    <Descriptions
      v-if="warningDetail"
      size="small"
      :column="2"
      bordered
      :labelStyle="{ width: '120px' }"
      style="margin-bottom: 30px"
    >
      <DescriptionsItem label="预警编号">
        {{ warningDetail.id }}
      </DescriptionsItem>

      <DescriptionsItem label="预警时间">
        {{ warningDetail.reportTime }}
      </DescriptionsItem>

      <DescriptionsItem label="级别">
        <Tag
          :color="
            warningDetail.level === '特大'
              ? 'red'
              : warningDetail.level === '重要'
                ? 'orange'
                : 'blue'
          "
        >
          {{ warningDetail.levelName }}
        </Tag>
      </DescriptionsItem>

      <DescriptionsItem label="预警类型">
        {{ warningDetail.bigTypeName + ' - ' + warningDetail.smallTypeName }}
      </DescriptionsItem>

      <DescriptionsItem label="设备ip"
        >{{ warningDetail.deviceIp }}
      </DescriptionsItem>

      <DescriptionsItem label="设备ip"
        >{{ warningDetail.deviceName }}
      </DescriptionsItem>

      <DescriptionsItem label="描述" :span="2">
        {{ warningDetail.description }}
      </DescriptionsItem>

      <DescriptionsItem label="所在位置">
        {{ warningDetail.deviceName }}
      </DescriptionsItem>

      <DescriptionsItem label="处理状态">
        <Tag>
          {{ warningDetail.stateName }}
        </Tag>
      </DescriptionsItem>

      <DescriptionsItem label="处理情况" :span="2">
        {{ warningDetail.processingDetails || '-' }}
      </DescriptionsItem>

      <DescriptionsItem label="处理时间" :span="2">
        {{ warningDetail.processingTime || '-' }}
      </DescriptionsItem>

      <DescriptionsItem :span="1" label="附件信息">
        <div class="file-box">
          <div class="img-box" v-for="item in currFiles">
            <Image
              style="width: 120px; height: 120px"
              :src="item.imagePath"
              :fallback="fallImg"
            />
          </div>
        </div>
      </DescriptionsItem>

      <DescriptionsItem :span="1" label="报警视频"></DescriptionsItem>
    </Descriptions>

    <Timeline>
      <TimelineItem v-if="warningDetail.processingStatus === '已完成'">
        <p style="display: flex">类型：已完成</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
      </TimelineItem>
      <TimelineItem
        v-if="
          warningDetail.processingStatus === '已完成' ||
          warningDetail.processingStatus === '处理异常'
        "
      >
        <p style="display: flex">类型：处理异常</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
        <p>异常原因：时长不够</p>
      </TimelineItem>
      <TimelineItem
        v-if="
          warningDetail.processingStatus === '已完成' ||
          warningDetail.processingStatus === '处理中' ||
          warningDetail.processingStatus === '处理异常'
        "
      >
        <p style="display: flex">类型：处理中</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
      </TimelineItem>
      <TimelineItem>
        <p style="display: flex">类型：创建预警</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
      </TimelineItem>
    </Timeline>
  </BasicModal>
</template>

<style scoped lang="scss">
.file-box {
  .img-box {
    float: left;
    margin-left: 5px;
  }
}
</style>