视频预警
This commit is contained in:
@@ -1,17 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
|
||||
import {
|
||||
Descriptions,
|
||||
DescriptionsItem,
|
||||
Tag,
|
||||
Timeline,
|
||||
TimelineItem,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
warningDetail.value = null;
|
||||
// warningDetail.value = null;
|
||||
modalApi.close();
|
||||
},
|
||||
});
|
||||
|
||||
const warningDetail = shallowRef<any>(null);
|
||||
|
||||
// 时间线显示条件配置
|
||||
const timelineConfig = {
|
||||
'已完成': ['已完成'],
|
||||
'处理异常': ['已完成', '处理异常'],
|
||||
'处理中': ['已完成', '处理中', '处理异常']
|
||||
};
|
||||
|
||||
function showTimelineItem(type: string): boolean {
|
||||
const currentStatus = warningDetail.value?.processingStatus;
|
||||
return timelineConfig[type as keyof typeof timelineConfig]?.includes(currentStatus) || false;
|
||||
}
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
@@ -45,6 +64,7 @@ async function handleOpenChange(open: boolean) {
|
||||
:column="2"
|
||||
bordered
|
||||
:labelStyle="{ width: '120px' }"
|
||||
style="margin-bottom: 30px"
|
||||
>
|
||||
<DescriptionsItem label="预警编号">
|
||||
{{ warningDetail.alarmId }}
|
||||
@@ -93,6 +113,61 @@ async function handleOpenChange(open: boolean) {
|
||||
<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 v-if="showTimelineItem('已完成')">
|
||||
<p style="display: flex">类型:已完成</p>
|
||||
<p>时间:2025-06-01 11:07:59</p>
|
||||
<p>处理人:张三</p>
|
||||
</TimelineItem>
|
||||
<TimelineItem v-if="showTimelineItem('处理异常')">
|
||||
<p style="display: flex">类型:处理异常</p>
|
||||
<p>时间:2025-06-01 11:07:59</p>
|
||||
<p>处理人:张三</p>
|
||||
<p>异常原因:时长不够</p>
|
||||
</TimelineItem>
|
||||
<TimelineItem v-if="showTimelineItem('处理中')">
|
||||
<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> -->
|
||||
<Timeline>
|
||||
<TimelineItem v-if="warningDetail.processingStatus === '已完成'">
|
||||
<p style="display: flex">类型:已完成</p>
|
||||
<p>时间:2025-06-01 11:07:59</p>
|
||||
<p>处理人:张三</p>
|
||||
</TimelineItem>
|
||||
<TimelineItem v-if="warningDetail.processingStatus === '已完成' || warningDetail.processingStatus === '处理异常'">
|
||||
<p style="display: flex">类型:处理异常</p>
|
||||
<p>时间:2025-06-01 11:07:59</p>
|
||||
<p>处理人:张三</p>
|
||||
<p>异常原因:时长不够</p>
|
||||
</TimelineItem>
|
||||
<TimelineItem v-if="warningDetail.processingStatus === '已完成'|| warningDetail.processingStatus === '处理中' || warningDetail.processingStatus === '处理异常'">
|
||||
<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>
|
||||
|
Reference in New Issue
Block a user