feat: 增加no-data组件

This commit is contained in:
rd
2025-07-01 16:39:47 +08:00
parent bc5aea9457
commit 817b648420
12 changed files with 139 additions and 45 deletions

View File

@ -11,7 +11,7 @@
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-space>
<a-space v-if="genderData.length > 0">
<div id="container" class="w-300px h-300px"></div>
<a-space direction="vertical" style="font-size: 14px">
@ -31,6 +31,9 @@
</a-space>
</a-space>
</a-space>
<div v-else>
<NoData class="w-100% h-100%" />
</div>
</div>
<!-- 2. 年龄分布 -->
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 flex flex-col">
@ -42,15 +45,17 @@
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-space align="center">
<a-space v-if="ageValueData.length > 0" align="center">
<span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
<span style="color: #6d4cfe">占比</span>
<span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
<span style="color: #f64b31">TGI比</span>
</a-space>
</a-space>
<div id="age-container" class="w-100% flex-1"></div>
<div v-if="ageValueData.length === 0" class="w-100% flex-1">
<NoData />
</div>
<div v-else id="age-container" class="w-100% flex-1"></div>
</div>
</div>
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
@ -88,6 +93,9 @@
<a-tabs default-active-key="1" class="h-100%" @change="tabChange">
<a-tab-pane key="1" title="省份">
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column title="排名" data-index="rank" />
<a-table-column title="省份" data-index="geo" />
@ -99,6 +107,9 @@
</a-tab-pane>
<a-tab-pane key="2" title="城市">
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column title="排名" data-index="rank" />
<a-table-column title="城市" data-index="geo" />
@ -171,7 +182,9 @@ const getAgeDistributionsList = async () => {
const { code, data } = await fetchAgeDistributionsList(params);
if (code === 200) {
ageValueData.value = data;
drawAgeChart();
nextTick(() => {
drawAgeChart();
});
}
};