From e2b956687521c1b326e5374fbc33e0d08e5efe99 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Sat, 21 Jun 2025 11:39:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=AF=AD=E7=9A=84=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/index.ts                          |  1 -
 src/views/components/dataEngine/hotCloud.vue  |  2 +-
 .../components/dataEngine/hotTranslation.vue  | 73 +++++++++++++++++--
 .../dataEngine/keyBrandMovement.vue           |  6 +-
 src/views/components/dataEngine/keyWord.vue   |  8 +-
 src/views/components/dataEngine/topHeader.vue | 29 ++++----
 .../components/dataEngine/userPainPoints.vue  |  2 +-
 yarn.lock                                     |  5 ++
 8 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/src/api/all/index.ts b/src/api/all/index.ts
index b2f861e..7ef7aac 100644
--- a/src/api/all/index.ts
+++ b/src/api/all/index.ts
@@ -1,5 +1,4 @@
 import Http from '@/api';
-
 // 导出一个函数，用于获取行业树
 export const fetchIndustriesTree = (params = {}) => {
   // 发送GET请求，获取行业树
diff --git a/src/views/components/dataEngine/hotCloud.vue b/src/views/components/dataEngine/hotCloud.vue
index 632dc05..39c4446 100644
--- 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>
diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index 8b0e0ad..6c4485f 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -12,11 +12,12 @@
             </template>
           </a-button>
           <template #content>
-            <p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
+            <p style="margin: 0">基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</p>
           </template>
         </a-popover>
       </a-space>
-      <a-table :data="dataList">
+
+      <a-table :data="dataList" @change="handleTableChange">
         <template #columns>
           <a-table-column title="排名" data-index="rank">
             <template #cell="{ record }">
@@ -32,7 +33,36 @@
               <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">
+          <a-table-column title="热度" data-index="hot">
+            <template #header>
+              <div style="display: flex; align-items: center; gap: 4px">
+                <!-- 左侧问号提示 -->
+                <a-popover position="tl">
+                  <a-button
+                    type="text"
+                    size="mini"
+                    style="padding: 0; width: 16px; height: 16px; color: #737478"
+                    @click.stop
+                  >
+                    <icon-question-circle style="font-size: 12px" />
+                  </a-button>
+                  <template #content>
+                    <p style="margin: 0; font-size: 12px">基于社交内容平台的行业数据，热度值越高表示话题讨论度越高</p>
+                  </template>
+                </a-popover>
+
+                <span style="margin: 0 4px"></span>
+                <a-button
+                  type="text"
+                  size="mini"
+                  style="padding: 0; width: 16px; height: 16px; color: #6d4cfe"
+                  @click="toggleHeatSort"
+                >
+                  <icon-arrow-up v-if="heatSortDirection === 'asc'" style="font-size: 12px" />
+                  <icon-arrow-down v-else style="font-size: 12px" />
+                </a-button>
+              </div>
+            </template>
             <template #cell="{ record }">
               <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
             </template>
@@ -67,7 +97,7 @@
         </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 +165,31 @@ 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 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,6 +223,10 @@ const getIndustriesTree = async () => {
   getIndustryTopics();
 };
 
+const handleSort = () => {
+  console.log('table change');
+};
+
 // 行业热门话题
 const getIndustryTopics = async () => {
   let parms = {
@@ -230,4 +283,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>
diff --git a/src/views/components/dataEngine/keyBrandMovement.vue b/src/views/components/dataEngine/keyBrandMovement.vue
index 6ec882a..d62a6ad 100644
--- 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>
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 6158445..4416bff 100644
--- 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>
diff --git a/src/views/components/dataEngine/topHeader.vue b/src/views/components/dataEngine/topHeader.vue
index 4f6eaee..3f1c380 100644
--- 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">
diff --git a/src/views/components/dataEngine/userPainPoints.vue b/src/views/components/dataEngine/userPainPoints.vue
index 805f499..e22befe 100644
--- 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>
diff --git a/yarn.lock b/yarn.lock
index 7033a55..a549868 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4911,6 +4911,11 @@ vm2@^3.9.8:
     acorn "^8.7.0"
     acorn-walk "^8.2.0"
 
+vue-cropper@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/vue-cropper/-/vue-cropper-1.1.4.tgz"
+  integrity sha512-5m98vBsCEI9rbS4JxELxXidtAui3qNyTHLHg67Qbn7g8cg+E6LcnC+hh3SM/p94x6mFh6KRxT1ttnta+wCYqWA==
+
 vue-demi@*, vue-demi@^0.13.11:
   version "0.13.11"
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz"