148 lines
4.0 KiB
Vue
148 lines
4.0 KiB
Vue
<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>
|