新增:隐患结果页添加骨架屏与空数据提示

- 新增:隐患结果页添加骨架屏与空数据提示
- 修改:优化隐患数据与对话列表之间分割线的显示逻辑
This commit is contained in:
yueliuli 2026-05-08 15:34:22 +08:00
parent 709d9fe796
commit 08315bf54b
2 changed files with 17 additions and 15 deletions

2
src/components.d.ts vendored
View File

@ -25,6 +25,7 @@ declare module 'vue' {
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElForItem: typeof import('element-plus/es')['ElForItem']
ElForm: typeof import('element-plus/es')['ElForm']
@ -45,6 +46,7 @@ declare module 'vue' {
ElSegmented: typeof import('element-plus/es')['ElSegmented']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTag: typeof import('element-plus/es')['ElTag']

View File

@ -73,6 +73,9 @@ interface ResultData {
const router = useRouter()
const hazardLoading = ref(true)
const dialogLoading = ref(true)
const vidUrl = ref('')
const resultData = ref<ResultData>({
class_list: [],
@ -362,6 +365,7 @@ onMounted(async () => {
if (data.value.隐患列表.length > 0) {
handleHazardClick(0)
}
hazardLoading.value = false
})
runApiAudio('result', 'GET', {
@ -369,6 +373,7 @@ onMounted(async () => {
// path: 'VID_20251104_085655_024.AVI',
}).then((res) => {
getAudioRecData(res as AudioResult)
dialogLoading.value = false
})
}
})
@ -389,15 +394,13 @@ onMounted(async () => {
<!-- 内层容器自动填充剩余高度 -->
<el-container style="flex: 1; min-height: 0;">
<el-aside width="200px" style="border-right: 1px solid var(--ep-border-color);">
<!-- <el-row class="flex flex-col" style="border-bottom: 1px solid var(--ep-border-color);"> -->
<el-scrollbar>
<el-skeleton v-if="hazardLoading" :rows="5" animated style="padding: 0.75rem; width: calc(100% - 1.5rem);" />
<el-scrollbar v-else-if="data.隐患列表.length > 0">
<el-row class="flex flex-col">
<ItemList title="隐患" :data="data.隐患列表" @click="handleHazardClick" />
</el-row>
</el-scrollbar>
<!-- <el-row style="flex: 1; overflow-y: auto;">
<ItemList title="物体列表" :data="data.物体列表" />
</el-row> -->
<el-empty v-else description="无隐患数据" style="height: 100%; width: 100%;" />
</el-aside>
<el-container style="border-right: 1px solid var(--ep-border-color)">
<el-main style="border-bottom: 1px solid var(--ep-border-color); padding: 0;">
@ -424,10 +427,10 @@ onMounted(async () => {
</el-footer>
</el-container>
<el-aside style="width: 300px;">
<!-- <el-row style="border-bottom: 1px solid var(--ep-border-color);"> -->
<el-scrollbar>
<el-row class="px-3 py-2">
<el-col v-if="selectedHazard >= 0">
<el-skeleton v-if="hazardLoading || dialogLoading" :rows="5" animated style="padding: 0.75rem; width: calc(100% - 1.5rem);" />
<el-scrollbar v-else-if="selectedHazard >= 0 || data.对话列表.length > 0">
<el-row v-if="selectedHazard >= 0" class="px-3 py-2">
<el-col>
<template v-for="group in groupedFields" :key="group[0].group">
<el-row :gutter="12">
<el-col v-for="field in group" :key="field.key" :span="24 / group.length">
@ -457,13 +460,9 @@ onMounted(async () => {
</el-button>
</el-row>
</el-col>
<el-col v-else>
<el-row class="px-1 py-1">
无选中隐患
</el-row>
</el-col>
</el-row>
<el-row v-if="data.对话列表.length > 0" style="height: calc(100% - 400px); flex: auto; border-top: 1px solid var(--ep-border-color);">
<div v-if="selectedHazard >= 0 && data.对话列表.length > 0" style="width: 100%; border-bottom: 1px solid var(--ep-border-color);" />
<el-row v-if="data.对话列表.length > 0" style="height: calc(100% - 400px); flex: auto;">
<SubtitleList
title="对话"
:data="data.对话列表"
@ -479,6 +478,7 @@ onMounted(async () => {
</el-button>
</el-row> -->
</el-scrollbar>
<el-empty v-else description="无隐患与对话数据" style="height: 100%; width: 100%;" />
</el-aside>
</el-container>
</el-container>