视频预警

This commit is contained in:
fyy
2025-08-12 13:51:35 +08:00
parent 0a77934d8b
commit 1d1afb0162
22 changed files with 2260 additions and 379 deletions

View File

@@ -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>