feat: 增加no-data组件

2025-07-01 16:39:47 +08:00
parent bc5aea9457
commit 817b648420
12 changed files with 139 additions and 45 deletions
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@ -13,40 +13,43 @@
        </a-tooltip>
      </div>

-      <div class="multi-row-tag-cloud">
+      <div class="multi-row-tag-cloud h-472px">
+        <NoData v-if="tagRows.length === 0" text="暂无数据" />
        <!-- 动态生成多行标签 -->
-        <div
-          v-for="(row, rowIndex) in tagRows"
-          :key="rowIndex"
-          class="tag-row"
-          :style="{ justifyContent: row.align || 'center' }"
-        >
-          <a-tag
-            v-for="(tag, tagIndex) in row.tags"
-            :key="tagIndex"
-            class="cursor-pointer"
-            :style="{
-              fontSize: `${getTagStyle(rowIndex, tagIndex, row.tags.length).fontSize}px`,
-              height: `${getTagStyle(rowIndex, tagIndex, row.tags.length).lineHeight}px`,
-              color: '#6d4cfe',
-              backgroundColor: '#F0EDFF',
-              margin: '0 12px 12px 0',
-              transition: 'all 0.3s',
-              paddingLeft: `${getPaddingLeft(rowIndex, tagIndex)}px`,
-              paddingRight: `${getPaddingLeft(rowIndex, tagIndex)}px`,
-              borderRadius: '32px',
-              fontWeight: 400,
-            }"
-            @mouseenter="hoverTag = tag"
-            @mouseleave="hoverTag = null"
+        <template v-else>
+          <div
+            v-for="(row, rowIndex) in tagRows"
+            :key="rowIndex"
+            class="tag-row"
+            :style="{ justifyContent: row.align || 'center' }"
          >
-            <a-space>
-              <a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
-                <a-space>{{ tag.term }}</a-space>
-              </a-tooltip>
-            </a-space>
-          </a-tag>
-        </div>
+            <a-tag
+              v-for="(tag, tagIndex) in row.tags"
+              :key="tagIndex"
+              class="cursor-pointer"
+              :style="{
+                fontSize: `${getTagStyle(rowIndex, tagIndex, row.tags.length).fontSize}px`,
+                height: `${getTagStyle(rowIndex, tagIndex, row.tags.length).lineHeight}px`,
+                color: '#6d4cfe',
+                backgroundColor: '#F0EDFF',
+                margin: '0 12px 12px 0',
+                transition: 'all 0.3s',
+                paddingLeft: `${getPaddingLeft(rowIndex, tagIndex)}px`,
+                paddingRight: `${getPaddingLeft(rowIndex, tagIndex)}px`,
+                borderRadius: '32px',
+                fontWeight: 400,
+              }"
+              @mouseenter="hoverTag = tag"
+              @mouseleave="hoverTag = null"
+            >
+              <a-space>
+                <a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
+                  <a-space>{{ tag.term }}</a-space>
+                </a-tooltip>
+              </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行时
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@ -21,6 +21,9 @@
        :pagination="false"
        @change="handleChange"
      >
+        <template #empty>
+          <NoData />
+        </template>
        <template #hotTitle>
          <a-space>
            <span>热度指数</span>
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@ -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>
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@ -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" />
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@ -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" />
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/src/views/components/dataEngine/userPersona.vue
@ -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();
+    });
  }
 };