增加视频预警未指派页面

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+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 '../../common';
+import { alarmEventProcessList } from '#/api/sis/alarmEventProcess';
+import type { AlarmEventProcessVO } from '#/api/sis/alarmEventProcess/model';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    modalApi.close();
+  },
+});
+
+const warningDetail = shallowRef<any>(null);
+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);
+  // 加载处理流程
+  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>
+  <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.bigTypeName + ' - ' + warningDetail.smallTypeName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="设备IP"
+      >{{ warningDetail.deviceIp }}
+      </DescriptionsItem>
+
+      <DescriptionsItem label="设备名称"
+      >{{ warningDetail.deviceName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预警位置" :span="2">
+        {{ warningDetail.deviceName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预警级别">
+        <Tag
+          :color="
+            warningDetail.level === '特大'
+              ? 'red'
+              : warningDetail.level === '重要'
+                ? 'orange'
+                : 'blue'
+          "
+        >
+          {{ warningDetail.levelName }}
+        </Tag>
+      </DescriptionsItem>
+      <DescriptionsItem label="预警时间">
+        {{ warningDetail.reportTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预警描述" :span="2">
+        {{ warningDetail.description }}
+      </DescriptionsItem>
+
+
+
+      <DescriptionsItem label="处理状态" :span="2">
+        <Tag color="processing">
+          {{ warningDetail.stateName }}
+        </Tag>
+      </DescriptionsItem>
+
+<!--      <DescriptionsItem label="处理情况" :span="2">
+        {{ warningDetail.processingDetails || '-' }}
+      </DescriptionsItem>
+
+      <DescriptionsItem label="处理时间" :span="2">
+        {{ warningDetail.processingTime || '-' }}
+      </DescriptionsItem>-->
+
+      <DescriptionsItem :span="2" 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="2" label="报警视频"></DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
+
+<style scoped lang="scss">
+.file-box {
+  .img-box {
+    float: left;
+    margin-left: 5px;
+  }
+}
+</style>