视频告警页面完善

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

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue';
+import { ref, shallowRef } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
-import {
-  Descriptions,
-  DescriptionsItem,
-  Tag,
-  Timeline,
-  TimelineItem,
-} from 'ant-design-vue';
+import { Descriptions, DescriptionsItem, Image, Tag } from 'ant-design-vue';
+import { queryAlarmEventAttachmentsList } from '#/api/sis/alarmEventAttachments';
+import type { AlarmEventAttachmentsVO } from '#/api/sis/alarmEventAttachments/model';
+import { fallImg } from './data';
+import { alarmEventProcessList } from '#/api/sis/alarmEventProcess';
+import type { AlarmEventProcessVO } from '#/api/sis/alarmEventProcess/model';
 
 const [BasicModal, modalApi] = useVbenModal({
   onOpenChange: handleOpenChange,
   onClosed() {
-    warningDetail.value = null;
+    // warningDetail.value = null;
+    modalApi.close();
   },
 });
 
 const warningDetail = shallowRef<any>(null);
+const currFiles = ref<AlarmEventAttachmentsVO[]>([]);
 
 async function handleOpenChange(open: boolean) {
   if (!open) {
@@ -27,15 +28,31 @@ async function handleOpenChange(open: boolean) {
     id: number | string;
     data: any[];
   };
-
   // 从传递的数据中查找对应的记录
-  const record = data.find((item: any) => item.id === id);
-  if (record) {
-    warningDetail.value = record;
+  if (data) {
+    warningDetail.value = data;
   }
-
+  // 加载事件附件信息
+  currFiles.value = await queryAlarmEventAttachmentsList(id);
+  // 加载处理流程
+  loadProcessList();
   modalApi.modalLoading(false);
 }
+
+const process = ref<AlarmEventProcessVO[]>([]);
+
+function loadProcessList() {
+  const data = modalApi.getData();
+  const params = {
+    pageNum: 1,
+    pageSize: 50,
+    alarmId: data.id,
+  };
+  alarmEventProcessList(params).then((res) => {
+    const { rows = [] } = res;
+    process.value = rows;
+  });
+}
 </script>
 
 <template>
@@ -43,7 +60,7 @@ async function handleOpenChange(open: boolean) {
     :footer="false"
     :fullscreen-button="false"
     title="预警详情"
-    class="w-[70%]"
+    class="w-[60%]"
   >
     <Descriptions
       v-if="warningDetail"
@@ -54,11 +71,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="
@@ -69,79 +88,66 @@ 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>
-        <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>
+
+<style scoped lang="scss">
+.file-box {
+  .img-box {
+    float: left;
+    margin-left: 5px;
+  }
+}
+</style>