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

<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
  Descriptions,
  DescriptionsItem,
  Tag,
  Timeline,
  TimelineItem,
} from 'ant-design-vue';

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;
}

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

  // 从传递的数据中查找对应的记录
  const record = data.find((item: any) => item.id === id);
  if (record) {
    warningDetail.value = record;
  }

  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    title="预警详情"
    class="w-[70%]"
  >
    <Descriptions
      v-if="warningDetail"
      size="small"
      :column="2"
      bordered
      :labelStyle="{ width: '120px' }"
      style="margin-bottom: 30px"
    >
      <DescriptionsItem label="预警编号">
        {{ warningDetail.alarmId }}
      </DescriptionsItem>
      <DescriptionsItem label="预警时间">
        {{ warningDetail.alarmTime }}
      </DescriptionsItem>
      <DescriptionsItem label="级别">
        <Tag
          :color="
            warningDetail.level === '特大'
              ? 'red'
              : warningDetail.level === '重要'
                ? 'orange'
                : 'blue'
          "
        >
          {{ warningDetail.level }}
        </Tag>
      </DescriptionsItem>
      <DescriptionsItem label="预警类型">
        {{ warningDetail.alarmType }}
      </DescriptionsItem>
      <DescriptionsItem label="描述" :span="2">
        {{ warningDetail.description }}
      </DescriptionsItem>
      <DescriptionsItem label="所在位置">
        {{ warningDetail.location }}
      </DescriptionsItem>
      <DescriptionsItem label="处理状态">
        <Tag
          :color="
            warningDetail.processingStatus === '待分配'
              ? 'red'
              : warningDetail.processingStatus === '处理中'
                ? 'orange'
                : 'green'
          "
        >
          {{ warningDetail.processingStatus }}
        </Tag>
      </DescriptionsItem>
      <DescriptionsItem label="处理情况" :span="2">
        {{ warningDetail.processingDetails || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="处理时间">
        {{ warningDetail.processingTime || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="设备名称">
        {{ warningDetail.deviceName || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="预处理时间" v-if="warningDetail.processingStatus === '处理中'">
        {{ warningDetail.expectedProcessingTime || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="处理图片" v-if="warningDetail.processingStatus === '已完成'">
        <img :src="warningDetail.imgUrl" alt="处理图片" style="max-width: 200px; max-height: 150px;">
      </DescriptionsItem>
    </Descriptions>
          <!-- <Timeline>
        <TimelineItem v-if="showTimelineItem('已完成')">
          <p style="display: flex">类型：已完成</p>
          <p>时间：2025-06-01 11:07:59</p>
          <p>处理人：张三</p>
        </TimelineItem>
        <TimelineItem v-if="showTimelineItem('处理异常')">
          <p style="display: flex">类型：处理异常</p>
          <p>时间：2025-06-01 11:07:59</p>
          <p>处理人：张三</p>
          <p>异常原因：时长不够</p>
        </TimelineItem>
        <TimelineItem v-if="showTimelineItem('处理中')">
          <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> -->
      <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>