视频告警页面

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

@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue';
+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();
+    modalApi.close();
   },
 });
 
@@ -21,16 +25,22 @@ 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;
+  return (
+    timelineConfig[type as keyof typeof timelineConfig]?.includes(
+      currentStatus,
+    ) || false
+  );
 }
 
+const currFiles = ref<AlarmEventAttachmentsVO[]>([]);
+
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
@@ -42,11 +52,11 @@ async function handleOpenChange(open: boolean) {
   };
 
   // 从传递的数据中查找对应的记录
-  const record = data.find((item: any) => item.id === id);
-  if (record) {
-    warningDetail.value = record;
+  if (data) {
+    warningDetail.value = data;
   }
-
+  // 加载事件附件信息
+  currFiles.value = await queryAlarmEventAttachmentsList(id);
   modalApi.modalLoading(false);
 }
 </script>
@@ -56,7 +66,7 @@ async function handleOpenChange(open: boolean) {
     :footer="false"
     :fullscreen-button="false"
     title="预警详情"
-    class="w-[70%]"
+    class="w-[60%]"
   >
     <Descriptions
       v-if="warningDetail"
@@ -67,11 +77,13 @@ async function handleOpenChange(open: boolean) {
       style="margin-bottom: 30px"
     >
       <DescriptionsItem label="预警编号">
-        {{ warningDetail.alarmId }}
+        {{ warningDetail.id }}
       </DescriptionsItem>
+
       <DescriptionsItem label="预警时间">
-        {{ warningDetail.alarmTime }}
+        {{ warningDetail.reportTime }}
       </DescriptionsItem>
+
       <DescriptionsItem label="级别">
         <Tag
           :color="
@@ -82,83 +94,83 @@ async function handleOpenChange(open: boolean) {
                 : 'blue'
           "
         >
-          {{ warningDetail.level }}
+          {{ warningDetail.levelName }}
         </Tag>
       </DescriptionsItem>
+
       <DescriptionsItem label="预警类型">
-        {{ warningDetail.alarmType }}
+        {{ 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.location }}
+        {{ warningDetail.deviceName }}
       </DescriptionsItem>
+
       <DescriptionsItem label="处理状态">
-        <Tag
-          :color="
-            warningDetail.processingStatus === '待分配'
-              ? 'red'
-              : warningDetail.processingStatus === '处理中'
-                ? 'orange'
-                : 'green'
-          "
-        >
-          {{ warningDetail.processingStatus }}
+        <Tag>
+          {{ warningDetail.stateName }}
         </Tag>
       </DescriptionsItem>
+
       <DescriptionsItem label="处理情况" :span="2">
         {{ warningDetail.processingDetails || '-' }}
       </DescriptionsItem>
-      <DescriptionsItem label="处理时间">
+
+      <DescriptionsItem label="处理时间" :span="2">
         {{ 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 :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="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>
+
+    <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 === '处理异常'">
+      <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 === '处理异常'">
+      <TimelineItem
+        v-if="
+          warningDetail.processingStatus === '已完成' ||
+          warningDetail.processingStatus === '处理中' ||
+          warningDetail.processingStatus === '处理异常'
+        "
+      >
         <p style="display: flex">类型：处理中</p>
         <p>时间：2025-06-01 11:07:59</p>
         <p>处理人：张三</p>
@@ -171,3 +183,12 @@ async function handleOpenChange(open: boolean) {
     </Timeline>
   </BasicModal>
 </template>
+
+<style scoped lang="scss">
+.file-box {
+  .img-box {
+    float: left;
+    margin-left: 5px;
+  }
+}
+</style>