将行业热门话题洞察的需要修改成columns

2025-06-21 16:57:01 +08:00
parent 4f118047c4 f57428c3a7
commit 1bdff03e9a
29 changed files with 1312 additions and 150 deletions
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@ -11,7 +11,7 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">基于行业内内容提取的高频词汇。</p>
          </template>
        </a-popover>
      </a-space>
@ -84,12 +84,17 @@ const getIndustryTerms = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value !== 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchindustryTerms(params);
-  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
-  tagRows.value = processTagData(res.slice(0, 70));
+  if (res.code === 200) {
+    // 这里需要根据API返回的数据结构处理成tagRows需要的格式
+    tagRows.value = processTagData(res.data.slice(0, 70));
+  }
 };

 // 标签数据（按行分组）
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@ -12,62 +12,46 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</p>
          </template>
        </a-popover>
      </a-space>
-      <a-table :data="dataList">
-        <template #columns>
-          <a-table-column title="排名" data-index="rank">
-            <template #cell="{ 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" />
-              <img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
-              <span v-else>{{ record.rank }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="话题名称" data-index="name" />
-          <a-table-column title="关键词" data-index="keywords">
-            <template #cell="{ record }">
-              <a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="热度" data-index="heatLevel">
-            <template #cell="{ record }">
-              <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
-            </template>
-          </a-table-column>
-          <a-table-column title="情感" data-index="sentiment">
-            <template #cell="{ record }">
-              <img
-                v-if="record.felling == '2'"
-                src="@/assets/img/hottranslation/good.png"
-                style="width: 16px; height: 16px"
-              />
-              <img
-                v-else-if="record.felling == '1'"
-                src="@/assets/img/hottranslation/normal.png"
-                style="width: 16px; height: 16px"
-              />
-              <img
-                v-else-if="record.felling == '0'"
-                src="@/assets/img/hottranslation/poor.png"
-                style="width: 16px; height: 16px"
-              />
-            </template>
-          </a-table-column>
-          <a-table-column title="操作" data-index="optional">
-            <template #cell="{ record }">
-              <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
-            </template>
-          </a-table-column>
-        </template>
+      <a-table :columns="columns" :data="dataList" :filter-icon-align-left="alignLeft" @change="handleChange">
        <template #rank="{ record }">
-          <a-tag color="blue" v-if="record.rank == 1">1</a-tag>
+          <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" />
+          <img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
+          <span v-else>{{ record.rank }}</span>
+        </template>
+        <template #keywords="{ record }">
+          <a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
+        </template>
+        <template #hot="{ record }">
+          <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
+        </template>
+        <template #sentiment="{ record }">
+          <img
+            v-if="record.felling == '2'"
+            src="@/assets/img/hottranslation/good.png"
+            style="width: 16px; height: 16px"
+          />
+          <img
+            v-else-if="record.felling == '1'"
+            src="@/assets/img/hottranslation/normal.png"
+            style="width: 16px; height: 16px"
+          />
+          <img
+            v-else-if="record.felling == '0'"
+            src="@/assets/img/hottranslation/poor.png"
+            style="width: 16px; height: 16px"
+          />
+        </template>
+
+        <template #optional="{ record }">
+          <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
        </template>
      </a-table>
    </a-space>
-    <!-- modal -->
    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
      <template #title>
        <span style="text-align: left; width: 100%">行业热门话题洞察</span>
@ -135,12 +119,63 @@ import star5 from '@/assets/img/hottranslation/star-fill5.png';
 import top1 from '@/assets/img/captcha/top1.svg';
 import top2 from '@/assets/img/captcha/top2.svg';
 import top3 from '@/assets/img/captcha/top3.svg';
+import { IconQuestionCircle, IconArrowUp, IconArrowDown } from '@arco-design/web-vue/es/icon';
+// 新增排序状态和函数
+const heatSortDirection = ref('desc'); // 默认降序排列
+const columns = [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    slotName: 'rank',
+  },
+  {
+    title: '话题名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '关键词',
+    dataIndex: 'keywords',
+    slotName: 'keywords',
+  },
+  {
+    title: '热度指数',
+    dataIndex: 'hot',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    slotName: 'hot',
+  },
+  {
+    title: '情感倾向',
+    dataIndex: 'sentiment',
+    slotName: 'sentiment',
+  },
+  {
+    title: '操作',
+    slotName: 'optional',
+  },
+];
+// 切换排序方向
+const toggleHeatSort = () => {
+  heatSortDirection.value = heatSortDirection.value === 'asc' ? 'desc' : 'asc';
+  sortDataByHeat();
+};
+
+// 实际排序逻辑
+const sortDataByHeat = () => {
+  dataList.value.sort((a, b) => {
+    return heatSortDirection.value === 'asc' ? a.hot - b.hot : b.hot - a.hot;
+  });
+  // 排序后更新排名
+  dataList.value.forEach((item, index) => {
+    item.rank = index + 1;
+  });
+};

 const starImages = [star1, star2, star3, star4, star5];
 const topImages = [top1, top2, top3];
 // 行业大类
 const industriesTree = ref([]);
-
 // 行业热门话题洞察
 const dataList = ref([]);
 // 显示详情
@ -174,26 +209,36 @@ const getIndustriesTree = async () => {
  getIndustryTopics();
 };

+const handleSort = () => {
+  console.log('table change');
+};
+
 // 行业热门话题
 const getIndustryTopics = async () => {
  let parms = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
-  if (selectedSubCategory.value != 0) {
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value != undefined && selectedSubCategory.value != 0) {
    parms['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchIndustryTopics(parms);
-  dataList.value = res;
+  if (res.code == 200) {
+    dataList.value = res.data;
+  }
 };

 // 详情
 const gotoDetail = async (record) => {
  console.log(record);
  const res = await fetchIndustryTopicDetail(record.id);
-  console.log(res);
-  visible.value = true;
-  topicInfo.value = res;
+  if (res.code == 200) {
+    visible.value = true;
+    topicInfo.value = res.data;
+  }
 };

 // 弹窗的取消
@ -230,4 +275,14 @@ const handleOk = () => {
  color: #737478 !important;
  margin-left: -5px;
 }
+
+:deep(.arco-icon) {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* 按钮悬停效果 */
+:deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
+  background-color: transparent;
+}
 </style>
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@ -12,7 +12,7 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">基于该行业中近期提及频次高、用户互动活跃的品牌内容，筛选出关注度较高的代表性品牌。</p>
          </template>
        </a-popover>
      </a-space>
@ -70,7 +70,9 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">
+              基于情绪分析与敏感词识别，对行业内容中的负面或争议性话题进行监测，辅助判断舆情风险动态。
+            </p>
          </template>
        </a-popover>
      </a-space>
@ -116,6 +118,12 @@ const getFocusBrandsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
@ -129,6 +137,12 @@ const getEventDynamicsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@ -12,7 +12,7 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</p>
          </template>
        </a-popover>
      </a-space>
@ -92,7 +92,9 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">
+              对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。
+            </p>
          </template>
        </a-popover>
      </a-space>
@ -153,7 +155,7 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</p>
          </template>
        </a-popover>
      </a-space>
@ -306,6 +308,12 @@ const getIndustryEmotions = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
@ -356,6 +364,12 @@ const getKeywordTrendsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
@ -380,12 +394,20 @@ const getNewKeywordList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
-  if (selectedSubCategory.value != 0) {
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value != 0 && selectedSubCategory.value != undefined) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchNewKeywordList(params);
-  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
-  keywordList.value = res;
+  if (res.code == 200) {
+    // 这里需要根据API返回的数据结构处理成tagRows需要的格式
+    keywordList.value = res.data;
+  }
 };

 const drawChart = () => {
--- a/src/views/components/dataEngine/topHeader.vue
+++ b/src/views/components/dataEngine/topHeader.vue
@ -5,10 +5,9 @@
      direction="vertical"
      style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
    >
-      <a-space align="center">
-        <!-- 行业选择 -->
-        <a-space align="center">
-          <span>行业大类</span>
+      <a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
+        <span style="width: 60px; flex-shrink: 0; line-height: 28px">行业大类</span>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
          <a-tag
            size="Medium"
            v-for="item in industriesTree"
@ -24,12 +23,12 @@
            "
            >{{ item.name }}</a-tag
          >
-        </a-space>
+        </div>
      </a-space>
-      <a-space align="center" style="margin-left: 'auto'; margin-top: 20px">
-        <!-- 二级类目 -->
-        <a-space align="center">
-          <span>二级类目</span>
+      <!-- 二级类目 -->
+      <a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
+        <span style="width: 60px; flex-shrink: 0; line-height: 28px">二级类目</span>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
          <a-tag
            size="Medium"
            v-for="item in subCategories"
@ -45,12 +44,12 @@
            "
            >{{ item.name }}</a-tag
          >
-        </a-space>
+        </div>
      </a-space>
-      <a-space align="center" style="margin-left: 'auto'; margin-top: 20px">
-        <!-- 时间筛选 -->
-        <a-space align="center">
-          <span>时间筛选</span>
+      <!-- </a-space> -->
+      <a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
+        <span style="width: 60px; flex-shrink: 0; line-height: 28px">时间筛选</span>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
          <a-tag
            size="Medium"
            v-for="item in timePeriods"
@ -66,7 +65,7 @@
            "
            >{{ item.label }}
          </a-tag>
-        </a-space>
+        </div>
      </a-space>
      <!-- 搜索区域 -->
      <a-space style="margin-left: 'auto'; margin-top: 20px">
@ -161,11 +160,14 @@ onMounted(() => {
 // 获取行业大类数据
 const getIndustriesTree = async () => {
  const res = await fetchIndustriesTree();
-  industriesTree.value = res;
-  selectedIndustry.value = res[0].id;
-  selectedSubCategory.value = 0;
-  subCategories.value = [...industriesTree.value[0].children];
-  subCategories.value.unshift({ id: 0, name: '全部' });
+  if (res.code == 200) {
+    let data = res['data'];
+    industriesTree.value = data;
+    selectedIndustry.value = data[0].id;
+    selectedSubCategory.value = 0;
+    subCategories.value = [...industriesTree.value[0].children];
+    subCategories.value.unshift({ id: 0, name: '全部' });
+  }
 };
 const emit = defineEmits<{
  (e: 'search'): void;
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@ -13,7 +13,7 @@
            </template>
          </a-button>
          <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</p>
          </template>
        </a-popover>
      </a-space>
@ -140,6 +140,12 @@ const getUserPainPointsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/src/views/components/dataEngine/userPersona.vue
@ -173,6 +173,12 @@ const getAgeDistributionsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    parms['industry_id'] = selectedSubCategory.value;
  }
@ -189,6 +195,12 @@ const getGeoDistributionsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    parms['industry_id'] = selectedSubCategory.value;
  }
@ -202,6 +214,12 @@ const getGenderDistributionsList = async () => {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
+  if (selectedIndustry.value == undefined) {
+    return;
+  }
+  if (selectedSubCategory.value == undefined) {
+    return;
+  }
  if (selectedSubCategory.value != 0) {
    parms['industry_id'] = selectedSubCategory.value;
  }