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

<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 './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;
    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.reportTime }}
      </DescriptionsItem>

      <DescriptionsItem label="级别">
        <Tag
          :color="
            warningDetail.level === '特大'
              ? 'red'
              : warningDetail.level === '重要'
                ? 'orange'
                : 'blue'
          "
        >
          {{ warningDetail.levelName }}
        </Tag>
      </DescriptionsItem>

      <DescriptionsItem label="预警类型">
        {{ 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.deviceName }}
      </DescriptionsItem>

      <DescriptionsItem label="处理状态">
        <Tag>
          {{ warningDetail.stateName }}
        </Tag>
      </DescriptionsItem>

      <DescriptionsItem label="处理情况" :span="2">
        {{ warningDetail.processingDetails || '-' }}
      </DescriptionsItem>

      <DescriptionsItem label="处理时间" :span="2">
        {{ warningDetail.processingTime || '-' }}
      </DescriptionsItem>

      <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>
  </BasicModal>
</template>

<style scoped lang="scss">
.file-box {
  .img-box {
    float: left;
    margin-left: 5px;
  }
}
</style>