视频预警

apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue

@@ -0,0 +1,147 @@
+<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;
+  },
+});
+
+const warningDetail = shallowRef<any>(null);
+
+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>
+        <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>
+        <p>异常原因：时长不够</p>
+      </TimelineItem>
+      <TimelineItem>
+        <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>