feat: 增加no-data组件
This commit is contained in:
@ -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();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user