新增:隐患结果页添加骨架屏与空数据提示
- 新增:隐患结果页添加骨架屏与空数据提示 - 修改:优化隐患数据与对话列表之间分割线的显示逻辑
This commit is contained in:
parent
709d9fe796
commit
08315bf54b
|
|
@ -25,6 +25,7 @@ declare module 'vue' {
|
||||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||||
|
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||||
ElFooter: typeof import('element-plus/es')['ElFooter']
|
ElFooter: typeof import('element-plus/es')['ElFooter']
|
||||||
ElForItem: typeof import('element-plus/es')['ElForItem']
|
ElForItem: typeof import('element-plus/es')['ElForItem']
|
||||||
ElForm: typeof import('element-plus/es')['ElForm']
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
|
|
@ -45,6 +46,7 @@ declare module 'vue' {
|
||||||
ElSegmented: typeof import('element-plus/es')['ElSegmented']
|
ElSegmented: typeof import('element-plus/es')['ElSegmented']
|
||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
|
ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
|
||||||
|
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
ElTag: typeof import('element-plus/es')['ElTag']
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
|
|
|
||||||
|
|
@ -73,6 +73,9 @@ interface ResultData {
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const hazardLoading = ref(true)
|
||||||
|
const dialogLoading = ref(true)
|
||||||
|
|
||||||
const vidUrl = ref('')
|
const vidUrl = ref('')
|
||||||
const resultData = ref<ResultData>({
|
const resultData = ref<ResultData>({
|
||||||
class_list: [],
|
class_list: [],
|
||||||
|
|
@ -362,6 +365,7 @@ onMounted(async () => {
|
||||||
if (data.value.隐患列表.length > 0) {
|
if (data.value.隐患列表.length > 0) {
|
||||||
handleHazardClick(0)
|
handleHazardClick(0)
|
||||||
}
|
}
|
||||||
|
hazardLoading.value = false
|
||||||
})
|
})
|
||||||
|
|
||||||
runApiAudio('result', 'GET', {
|
runApiAudio('result', 'GET', {
|
||||||
|
|
@ -369,6 +373,7 @@ onMounted(async () => {
|
||||||
// path: 'VID_20251104_085655_024.AVI',
|
// path: 'VID_20251104_085655_024.AVI',
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
getAudioRecData(res as AudioResult)
|
getAudioRecData(res as AudioResult)
|
||||||
|
dialogLoading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -389,15 +394,13 @@ onMounted(async () => {
|
||||||
<!-- 内层容器:自动填充剩余高度 -->
|
<!-- 内层容器:自动填充剩余高度 -->
|
||||||
<el-container style="flex: 1; min-height: 0;">
|
<el-container style="flex: 1; min-height: 0;">
|
||||||
<el-aside width="200px" style="border-right: 1px solid var(--ep-border-color);">
|
<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-skeleton v-if="hazardLoading" :rows="5" animated style="padding: 0.75rem; width: calc(100% - 1.5rem);" />
|
||||||
<el-scrollbar>
|
<el-scrollbar v-else-if="data.隐患列表.length > 0">
|
||||||
<el-row class="flex flex-col">
|
<el-row class="flex flex-col">
|
||||||
<ItemList title="隐患" :data="data.隐患列表" @click="handleHazardClick" />
|
<ItemList title="隐患" :data="data.隐患列表" @click="handleHazardClick" />
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<!-- <el-row style="flex: 1; overflow-y: auto;">
|
<el-empty v-else description="无隐患数据" style="height: 100%; width: 100%;" />
|
||||||
<ItemList title="物体列表" :data="data.物体列表" />
|
|
||||||
</el-row> -->
|
|
||||||
</el-aside>
|
</el-aside>
|
||||||
<el-container style="border-right: 1px solid var(--ep-border-color)">
|
<el-container style="border-right: 1px solid var(--ep-border-color)">
|
||||||
<el-main style="border-bottom: 1px solid var(--ep-border-color); padding: 0;">
|
<el-main style="border-bottom: 1px solid var(--ep-border-color); padding: 0;">
|
||||||
|
|
@ -424,10 +427,10 @@ onMounted(async () => {
|
||||||
</el-footer>
|
</el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
<el-aside style="width: 300px;">
|
<el-aside style="width: 300px;">
|
||||||
<!-- <el-row style="border-bottom: 1px solid var(--ep-border-color);"> -->
|
<el-skeleton v-if="hazardLoading || dialogLoading" :rows="5" animated style="padding: 0.75rem; width: calc(100% - 1.5rem);" />
|
||||||
<el-scrollbar>
|
<el-scrollbar v-else-if="selectedHazard >= 0 || data.对话列表.length > 0">
|
||||||
<el-row class="px-3 py-2">
|
<el-row v-if="selectedHazard >= 0" class="px-3 py-2">
|
||||||
<el-col v-if="selectedHazard >= 0">
|
<el-col>
|
||||||
<template v-for="group in groupedFields" :key="group[0].group">
|
<template v-for="group in groupedFields" :key="group[0].group">
|
||||||
<el-row :gutter="12">
|
<el-row :gutter="12">
|
||||||
<el-col v-for="field in group" :key="field.key" :span="24 / group.length">
|
<el-col v-for="field in group" :key="field.key" :span="24 / group.length">
|
||||||
|
|
@ -457,13 +460,9 @@ onMounted(async () => {
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col v-else>
|
|
||||||
<el-row class="px-1 py-1">
|
|
||||||
无选中隐患
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
<div v-if="selectedHazard >= 0 && data.对话列表.length > 0" style="width: 100%; border-bottom: 1px solid var(--ep-border-color);" />
|
||||||
</el-row>
|
<el-row v-if="data.对话列表.length > 0" style="height: calc(100% - 400px); flex: auto;">
|
||||||
<el-row v-if="data.对话列表.length > 0" style="height: calc(100% - 400px); flex: auto; border-top: 1px solid var(--ep-border-color);">
|
|
||||||
<SubtitleList
|
<SubtitleList
|
||||||
title="对话"
|
title="对话"
|
||||||
:data="data.对话列表"
|
:data="data.对话列表"
|
||||||
|
|
@ -479,6 +478,7 @@ onMounted(async () => {
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-row> -->
|
</el-row> -->
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
<el-empty v-else description="无隐患与对话数据" style="height: 100%; width: 100%;" />
|
||||||
</el-aside>
|
</el-aside>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue