renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加no-data组件

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/_base/navbar/index.vue
View File

@ -91,10 +91,6 @@ const handleDopdownClick = (index: any, ind: any) => {
:selected-keys="selectedKey"
:default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
>
<template #collapse-icon>
<icon-caret-down size="16" />
<icon-caret-up size="16" />
</template>
<a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
<span class="menu-item-text">工作台</span>
</a-menu-item>
@ -102,7 +98,7 @@ const handleDopdownClick = (index: any, ind: any) => {
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
<a-button>
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
<icon-caret-down size="16" />
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
</a-button>
<template #content>
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
@ -204,6 +200,12 @@ const handleDopdownClick = (index: any, ind: any) => {
}
}
}
.arco-icon-down {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.arco-dropdown-open .arco-icon-down {
transform: rotate(180deg);
}
}
.cneter-tip {
font-size: 16px;

BIN
src/components/no-data/img/icon-empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

49
src/components/no-data/index.vue Normal file
View File

@ -0,0 +1,49 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-07-01 16:09:21
-->
<template>
<div class="no-data">
<slot name="pic">
<img :src="emptyIcon" class="img" alt="" width="106" height="72" />
</slot>
<slot>
<div v-if="text" class="text mt-36px">{{ text }}</div>
</slot>
</div>
</template>
<script setup>
import icon from './img/icon-empty.png';
const props = defineProps({
text: {
type: String,
default: '暂无数据',
},
emptyIcon: {
type: String,
default: icon,
},
});
</script>
<style lang="scss" scoped>
.no-data {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 10%;
padding-bottom: 10%;
line-height: 1.5em;
.text {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
}
</style>

0
src/components/no-data/style.scss Normal file
View File

6
src/main.ts
View File

@ -1,6 +1,11 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-30 16:03:42
*/
import App from './App.vue';
import router from './router';
import store from './stores';
import NoData from '@/components/no-data';
import '@/api/index';
import './styles';
@ -13,4 +18,5 @@ import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
const app = createApp(App);
app.use(store);
app.use(router);
app.component('NoData', NoData);
app.mount('#app');

7
src/views/components/dataEngine/hotCloud.vue
View File

@ -13,8 +13,10 @@
</a-tooltip>
</div>
<div class="multi-row-tag-cloud">
<div class="multi-row-tag-cloud h-472px">
<NoData v-if="tagRows.length === 0" text="暂无数据" />
<!-- 动态生成多行标签 -->
<template v-else>
<div
v-for="(row, rowIndex) in tagRows"
:key="rowIndex"
@ -47,6 +49,7 @@
</a-space>
</a-tag>
</div>
</template>
</div>
</a-space>
</view>
@ -96,7 +99,7 @@ const getIndustryTerms = async () => {
};
// 标签数据（按行分组）
const tagRows = ref();
const tagRows = ref([]);
const hoverTag = ref(null);
const lineHeightStart = [28, 52, 58, 72, 58, 52, 28]; // 7行时

3
src/views/components/dataEngine/hotTranslation.vue
View File

@ -21,6 +21,9 @@
:pagination="false"
@change="handleChange"
>
<template #empty>
<NoData />
</template>
<template #hotTitle>
<a-space>
<span>热度指数</span>

6
src/views/components/dataEngine/keyBrandMovement.vue
View File

@ -24,6 +24,9 @@
:pagination="false"
@change="handleChange"
>
<template #empty>
<NoData />
</template>
<template #hotTitle>
<a-space>
<span>热度指数</span>
@ -86,6 +89,9 @@
</div>
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
<template #empty>
<NoData />
</template>
</a-table>
</a-space>
</view>

9
src/views/components/dataEngine/keyWord.vue
View File

@ -23,6 +23,9 @@
:pagination="false"
@change="handleChange"
>
<template #empty>
<NoData />
</template>
<template #heatLevel>
<a-space>
<span>热度指数</span>
@ -110,6 +113,9 @@
:pagination="false"
@change="handleChange"
>
<template #empty>
<NoData />
</template>
<template #felling="{ record }">
<div class="flex items-center">
<img :src="fellingStatus[record.felling].icon" class="w-20px h-20px mr-4px" />
@ -142,6 +148,9 @@
:pagination="false"
@change="handleChange"
>
<template #empty>
<NoData />
</template>
<template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />

3
src/views/components/dataEngine/userPainPoints.vue
View File

@ -25,6 +25,9 @@
:pagination="false"
@change="handleChange"
>
<template #empty>
<NoData />
</template>
<template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />

21
src/views/components/dataEngine/userPersona.vue
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;
nextTick(() => {
drawAgeChart();
});
}
};

4
src/views/components/workplace/index.vue
View File

@ -14,13 +14,13 @@
@refresh="getProductList"
/>
</div>
<a-empty v-if="products.length === 0" />
<NoData v-if="products.length === 0" />
</Container>
<Container title="成功案例" class="body mt-24px">
<div class="flex flex-wrap">
<Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
</div>
<a-empty v-if="cases.length === 0" />
<NoData v-if="cases.length === 0" />
</Container>
</div>
</template>