99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { shallowRef } from 'vue';
|
||
|
|
import { useVbenModal } from '@vben/common-ui';
|
||
|
|
import { Descriptions, DescriptionsItem, Tag } 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' }"
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
</Descriptions>
|
||
|
|
</BasicModal>
|
||
|
|
</template>
|