From e51711304d3226ebf75a5571e0dcea8c5f59d7f6 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Sun, 22 Jun 2025 16:01:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9table=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dataEngine/hotTranslation.vue  |  64 ++-
 .../dataEngine/keyBrandMovement.vue           | 215 ++++++--
 src/views/components/dataEngine/keyWord.vue   | 478 ++++++++++++------
 .../components/dataEngine/userPainPoints.vue  | 171 +++++--
 .../components/dataEngine/userPersona.vue     |   4 +-
 5 files changed, 680 insertions(+), 252 deletions(-)

diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index 06cae15..b69c1c8 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -16,7 +16,46 @@
           </template>
         </a-popover>
       </a-space>
-      <a-table :columns="columns" :data="dataList" :filter-icon-align-left="alignLeft" @change="handleChange">
+      <a-table
+        :columns="columns"
+        :data="dataList"
+        :filter-icon-align-left="alignLeft"
+        @change="handleChange"
+        :scroll="true"
+        :pagination="false"
+      >
+        <template #hotTitle>
+          <a-space>
+            <span>热度指数</span>
+            <a-popover position="tl">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
+                </template>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #sentimentTitle>
+          <a-space>
+            <span>情感倾向</span>
+            <a-popover position="tr">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
+                </template>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">
+                  统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。
+                </p>
+              </template>
+            </a-popover>
+          </a-space>
+        </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" />
@@ -127,17 +166,26 @@ const columns = [
     title: '排名',
     dataIndex: 'rank',
     slotName: 'rank',
+    width: 60,
+    minWidth: 60,
   },
   {
     title: '话题名称',
     dataIndex: 'name',
+    width: 300,
+    minWidth: 300,
   },
   {
     title: '关键词',
     dataIndex: 'keywords',
     slotName: 'keywords',
+    width: 250,
+    minWidth: 250,
   },
   {
+    titleSlotName: 'hotTitle',
+    width: 180,
+    minWidth: 180,
     title: '热度指数',
     dataIndex: 'hot',
     sortable: {
@@ -146,13 +194,18 @@ const columns = [
     slotName: 'hot',
   },
   {
+    titleSlotName: 'sentimentTitle',
     title: '情感倾向',
     dataIndex: 'sentiment',
     slotName: 'sentiment',
+    width: 120,
+    minWidth: 120,
   },
   {
     title: '操作',
     slotName: 'optional',
+    width: 120,
+    minWidth: 120,
   },
 ];
 // 切换排序方向
@@ -273,7 +326,14 @@ const handleOk = () => {
   background: #fff !important;
   border-color: #fff !important;
   color: #737478 !important;
-  margin-left: -5px;
+  margin-left: -10px;
+}
+
+.pop-btn2 {
+  background: transparent !important;
+  border-color: transparent !important;
+  color: #737478 !important;
+  margin-left: -10px;
 }
 
 :deep(.arco-icon) {
diff --git a/src/views/components/dataEngine/keyBrandMovement.vue b/src/views/components/dataEngine/keyBrandMovement.vue
index 9a23ed4..77f1bc1 100644
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@@ -16,47 +16,88 @@
           </template>
         </a-popover>
       </a-space>
-      <a-table :data="dataList" :pagination="false" style="font-size: 12px">
-        <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 }">
-              <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="frequency">
-            <template #cell="{ record }">
-              <a-statistic
-                style="font-size: 14px"
-                v-if="record.trend > 0"
-                :value="record.trend * 100"
-                :value-style="{ color: '#F64B31' }"
-              >
-                <template #prefix>
-                  <icon-arrow-rise />
+      <a-table
+        :columns="columns"
+        :data="dataList"
+        :filter-icon-align-left="alignLeft"
+        @change="handleChange"
+        :scroll="true"
+        :pagination="false"
+      >
+        <template #hotTitle>
+          <a-space>
+            <span>热度指数</span>
+            <a-popover position="tl">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
                 </template>
-                <template #suffix>%</template>
-              </a-statistic>
-              <a-statistic
-                v-else
-                style="font-size: 14px"
-                :value="record.trend * 100"
-                :value-style="{ color: '#25C883' }"
-              ></a-statistic>
-            </template>
-          </a-table-column>
-          <a-table-column title="占总声量比例" data-index="content">
-            <template #cell="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
-          </a-table-column>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
+              </template>
+            </a-popover>
+          </a-space>
         </template>
+        <template #trendTitle>
+          <a-space>
+            <span>变化幅度</span>
+            <a-popover position="tl">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
+                </template>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">仅基于品牌出现频次。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #volume_rateTitle>
+          <a-space>
+            <span>占总声量比例</span>
+            <a-popover position="tr">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
+                </template>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </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" />
+          <img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
+          <span v-else>{{ record.rank }}</span>
+        </template>
+        <template #hot="{ record }">
+          <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
+        </template>
+        <template #trend="{ record }">
+          <a-statistic
+            style="font-size: 14px"
+            v-if="record.trend > 0"
+            :value="record.trend * 100"
+            :value-style="{ color: '#F64B31' }"
+          >
+            <template #prefix>
+              <icon-arrow-rise />
+            </template>
+            <template #suffix>%</template>
+          </a-statistic>
+          <a-statistic v-else style="font-size: 14px" :value="record.trend * 100" :value-style="{ color: '#25C883' }">
+            <template #prefix>
+              <icon-arrow-rise />
+            </template>
+            <template #suffix>%</template>
+          </a-statistic>
+        </template>
+        <template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
       </a-table>
     </a-space>
     <!--  舆情 & 敏感动态-->
@@ -76,12 +117,7 @@
           </template>
         </a-popover>
       </a-space>
-      <a-table :data="otherList" :pagination="false" style="font-size: 12px">
-        <template #columns>
-          <a-table-column title="品牌" data-index="brand" />
-          <a-table-column title="事件标题" data-index="title" />
-          <a-table-column title="事件详情" data-index="content" />
-        </template>
+      <a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
       </a-table>
     </a-space>
   </view>
@@ -108,7 +144,76 @@ const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCatego
 const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
 const dataList = ref([]);
 const otherList = ref([]);
-
+const columns = [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    slotName: 'rank',
+    width: 60,
+    minWidth: 60,
+  },
+  {
+    title: '品牌名称',
+    dataIndex: 'name',
+    width: 120,
+    minWidth: 120,
+  },
+  {
+    titleSlotName: 'hotTitle',
+    width: 180,
+    minWidth: 180,
+    title: '热度指数',
+    dataIndex: 'hot',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    slotName: 'hot',
+  },
+  {
+    titleSlotName: 'trendTitle',
+    title: '变化幅度',
+    dataIndex: 'trend',
+    width: 180,
+    minWidth: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    slotName: 'trend',
+  },
+  {
+    titleSlotName: 'volume_rateTitle',
+    title: '占总声量比例',
+    dataIndex: 'volumeRate',
+    width: 180,
+    minWidth: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    slotName: 'volumeRate',
+  },
+];
+const columns2 = [
+  {
+    title: '品牌',
+    dataIndex: 'brand',
+    width: 100,
+    minWidth: 100,
+  },
+  {
+    title: '事件标题',
+    dataIndex: 'title',
+    width: 180,
+    minWidth: 180,
+    sortable: {},
+  },
+  {
+    title: '事件详情',
+    dataIndex: 'content',
+    width: 220,
+    minWidth: 220,
+    sortable: {},
+  },
+];
 const search = () => {
   getFocusBrandsList();
   getEventDynamicsList();
@@ -128,8 +233,10 @@ const getFocusBrandsList = async () => {
     params['industry_id'] = selectedSubCategory.value;
   }
   const res = await fetchFocusBrandsList(params);
-  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
-  dataList.value = res;
+  if (res.code == 200) {
+    // 这里需要根据API返回的数据结构处理成tagRows需要的格式
+    dataList.value = res.data;
+  }
 };
 
 const getEventDynamicsList = async () => {
@@ -147,8 +254,10 @@ const getEventDynamicsList = async () => {
     params['industry_id'] = selectedSubCategory.value;
   }
   const res = await fetchEventDynamicsList(params);
-  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
-  otherList.value = res;
+  if (res.code == 200) {
+    // 这里需要根据API返回的数据结构处理成tagRows需要的格式
+    otherList.value = res.data;
+  }
 };
 
 onMounted(() => {
@@ -191,4 +300,10 @@ watch(selectedIndustry, () => {
   color: #6d4cfe !important;
   border-color: #6d4cfe !important;
 }
+.pop-btn2 {
+  background: transparent !important;
+  border-color: transparent !important;
+  color: #737478 !important;
+  margin-left: -10px;
+}
 </style>
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 5b26ab0..6c54794 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -16,68 +16,92 @@
           </template>
         </a-popover>
       </a-space>
-      <a-table :data="dataList" :pagination="false">
-        <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" />
+      <a-table
+        :columns="columns"
+        :data="dataList"
+        :filter-icon-align-left="alignLeft"
+        @change="handleChange"
+        :scroll="true"
+        :pagination="false"
+      >
+        <template #heatLevel>
+          <a-space>
+            <span>热度指数</span>
+            <a-popover position="tl">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
+                </template>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #trendTitle>
+          <a-space>
+            <span>变化幅度</span>
+            <a-popover position="tr">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
+                </template>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">仅基于关键词出现频次。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
 
-              <span v-else>{{ record.rank }}</span>
+        <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" />
+          <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 #tred="{ record }">
+          <a-statistic
+            style="font-size: 14px"
+            v-if="record.trend > 0"
+            :value="record.trend * 100"
+            :value-style="{ color: '#F64B31' }"
+          >
+            <template #prefix>
+              <icon-arrow-rise />
             </template>
-          </a-table-column>
-          <a-table-column title="关键词名称" data-index="name" />
-          <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="heatLevel">
-            <template #cell="{ record }">
-              <a-statistic
-                style="font-size: 14px"
-                v-if="record.trend > 0"
-                :value="record.trend * 100"
-                :value-style="{ color: '#F64B31' }"
-              >
-                <template #prefix>
-                  <icon-arrow-rise />
-                </template>
-                <template #suffix>%</template>
-              </a-statistic>
-              <a-statistic
-                v-else
-                style="font-size: 14px"
-                :value="record.trend * 100"
-                :value-style="{ color: '#25C883' }"
-              >
-                <template #prefix>
-                  <icon-arrow-fall />
-                </template>
-                <template #suffix>%</template>
-              </a-statistic>
-            </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>
+            <template #suffix>%</template>
+          </a-statistic>
+          <a-statistic
+            v-else
+            style="font-size: 14px"
+            :value="record.trend * 100"
+            :value-style="{ color: '#25C883' }"
+          ></a-statistic>
         </template>
       </a-table>
     </a-space>
@@ -99,46 +123,47 @@
         </a-popover>
       </a-space>
       <a-space align="center">
-        <a-space direction="vertical">
-          <template>
-            <div ref="chartRef" style="width: 400px; height: 400px"></div>
-          </template>
-        </a-space>
         <a-space>
-          <a-space>
+          <a-space style="width: 320px">
             <div id="container" style="height: 180px; width: 180px"></div>
             <a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
               <a-space>
                 <span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
                 <span>正面情绪 </span>
-                <span style="width: 40px">{{ fellingRate[0] * 100 }}%</span>
+                <span style="width: 40px">{{ getFormatter(fellingRate[0] * 100) }}</span>
               </a-space>
               <a-space>
                 <span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
                 <span>负面情绪 </span>
-                <span style="width: 40px">{{ fellingRate[1] * 100 }}%</span>
+                <span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
               </a-space>
             </a-space>
           </a-space>
-          <a-table :pagination="false" :span-method="dataSpanMethod" :data="rowData" style="margin-left: 40px">
-            <template #columns>
-              <a-table-column title="情绪分布">
-                <template #cell="{ record }">
-                  <a-space v-if="record.felling == '2'">
-                    <img src="@/assets/img/hottranslation/good.png" style="width: 16px; height: 16px" />
-                    <a-space>正面情绪</a-space>
-                  </a-space>
-                  <a-space v-else-if="record.felling == '1'">
-                    <img src="@/assets/img/hottranslation/normal.png" style="width: 16px; height: 16px" />
-                    <a-space>中性情绪</a-space>
-                  </a-space>
-                  <a-space v-else-if="record.felling == '0'">
-                    <img src="@/assets/img/hottranslation/poor.png" style="width: 16px; height: 16px" />
-                    <a-space>负面情绪</a-space>
-                  </a-space>
-                </template>
-              </a-table-column>
-              <a-table-column title="主要观点" data-index="content" />
+          <a-table
+            :columns="columns2"
+            :data="rowData"
+            :span-method="spanMethod"
+            :filter-icon-align-left="alignLeft"
+            @change="handleChange"
+            :scroll="true"
+            :pagination="false"
+          >
+            <template #felling="{ 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>
         </a-space>
@@ -159,51 +184,95 @@
           </template>
         </a-popover>
       </a-space>
-      <a-table :data="keywordList" :pagination="false">
-        <template #columns>
-          <a-table-column title="排名" data-index="rank" />
-          <a-table-column title="新兴关键词名称" data-index="name" />
-          <a-table-column title="首次大规模出现" data-index="first_appeared_at">
-            <template #cell="{ record }">
-              <div>{{ formatTimestamp(record.first_appeared_at) }}</div>
-            </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="trend">
-            <template #cell="{ record }">
-              <a-statistic
-                style="font-size: 14px"
-                :value="record.trend * 100"
-                :value-style="{ color: '#F64B31' }"
-                v-if="record.trend > 0"
-              >
-                <template #prefix>
-                  <icon-arrow-rise />
+      <a-table
+        :columns="columns3"
+        :data="keywordList"
+        :filter-icon-align-left="alignLeft"
+        @change="handleChange"
+        :scroll="true"
+        :pagination="false"
+      >
+        <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" />
+          <img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
+          <span v-else>{{ record.rank }}</span>
+        </template>
+        <template #felling="{ 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 #first_appeared_at="{ record }">
+          <div>{{ formatTimestamp(record.first_appeared_at) }}</div>
+        </template>
+        <template #hot="{ record }">
+          <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
+        </template>
+
+        <template #hotTitle="{ record }">
+          <a-space>
+            <span>当前热度指数</span>
+            <a-popover position="tr">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
                 </template>
-                <template #suffix>%</template>
-              </a-statistic>
-              <a-statistic
-                v-else
-                style="font-size: 14px"
-                :value="record.trend * 100"
-                :value-style="{ color: '#25C883' }"
-              >
-                <template #prefix>
-                  <icon-arrow-fall />
+              </a-button>
+              <template #content>
+                <p style="margin: 0">综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #trendTitle="{ record }">
+          <a-space>
+            <span>变化幅度</span>
+            <a-popover position="tr">
+              <a-button type="primary" class="pop-btn2">
+                <template #icon>
+                  <icon-question-circle />
                 </template>
-                <template #suffix>%</template>
-              </a-statistic>
+              </a-button>
+              <template #content>
+                <p style="margin: 0">仅基于关键词出现频次。</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #tred="{ record }">
+          <a-statistic
+            style="font-size: 14px"
+            :value="record.trend * 100"
+            :value-style="{ color: '#F64B31' }"
+            v-if="record.trend > 0"
+          >
+            <template #prefix>
+              <icon-arrow-rise />
             </template>
-          </a-table-column>
-          <a-table-column title="操作" data-index="optional">
-            <template #cell="{ record }">
-              <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
+            <template #suffix>%</template>
+          </a-statistic>
+          <a-statistic v-else style="font-size: 14px" :value="record.trend * 100" :value-style="{ color: '#25C883' }">
+            <template #prefix>
+              <icon-arrow-fall />
             </template>
-          </a-table-column>
+            <template #suffix>%</template>
+          </a-statistic>
+        </template>
+        <template #optional="{ record }">
+          <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
         </template>
       </a-table>
     </a-space>
@@ -303,6 +372,119 @@ const keywordList = ref([]);
 const fellingRate = ref([]);
 const visible = ref(false);
 const topicInfo = ref({});
+const columns = [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    slotName: 'rank',
+    width: 60,
+    minWidth: 60,
+  },
+  {
+    title: '关键词名称',
+    dataIndex: 'name',
+    width: 250,
+    minWidth: 250,
+  },
+  {
+    titleSlotName: 'heatLevel',
+    title: '热度指数',
+    dataIndex: 'hot',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    slotName: 'hot',
+    width: 180,
+    minWidth: 180,
+  },
+  {
+    titleSlotName: 'trendTitle',
+    title: '变化幅度',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    dataIndex: 'tred',
+    slotName: 'tred',
+    width: 180,
+    minWidth: 180,
+  },
+  {
+    title: '情感倾向',
+    dataIndex: 'sentiment',
+    slotName: 'sentiment',
+  },
+];
+const columns2 = [
+  {
+    title: '情绪分布',
+    dataIndex: 'felling',
+    slotName: 'felling',
+    width: 120,
+    minWidth: 120,
+  },
+  {
+    title: '主要观点',
+    dataIndex: 'content',
+  },
+];
+
+const spanMethod = ({ record, columnIndex }) => {
+  // console.log(record.felling);
+  // if (record.felling === 2) {
+  //   return {
+  //     rowspan: 3,
+  //   };
+  // }
+};
+
+const columns3 = [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    slotName: 'rank',
+    width: 180,
+    minWidth: 180,
+  },
+  {
+    title: '新兴关键词名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '首次大规模出现',
+    dataIndex: 'first_appeared_at',
+    slotName: 'first_appeared_at',
+  },
+  {
+    titleSlotName: 'hotTitle',
+    title: '当前热度指数',
+    dataIndex: 'hot',
+    slotName: 'hot',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    titleSlotName: 'trendTitle',
+    title: '变化幅度',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    dataIndex: 'tred',
+    slotName: 'tred',
+    width: 180,
+    minWidth: 180,
+  },
+  {
+    title: '操作',
+    slotName: 'optional',
+    width: 120,
+    minWidth: 120,
+  },
+];
+const getFormatter = (value) => {
+  const formattedValue = Number.isInteger(value) ? value.toString() : value.toFixed(2);
+  return formattedValue + '%';
+};
 const getIndustryEmotions = async () => {
   const params = {
     industry_id: selectedIndustry.value,
@@ -318,23 +500,25 @@ const getIndustryEmotions = async () => {
     params['industry_id'] = selectedSubCategory.value;
   }
   const res = await fetchIndustryEmotions(params);
-  fellingRate.value = [];
-  fellingRate.value.push(res['good_felling_rate']);
-  fellingRate.value.push(res['bad_felling_rate']);
+  if (res.code == 200) {
+    let data = res['data'];
+    fellingRate.value = [];
+    fellingRate.value.push(data['good_felling_rate']);
+    fellingRate.value.push(data['bad_felling_rate']);
 
-  drawChart();
-  rowData.value = res['industry_emotion_view_points'];
-  let items = groupedData();
-  console.log('行业情绪', items);
+    drawChart();
+    rowData.value = data['industry_emotion_view_points'];
+    let items = groupedData();
+  }
 };
 
 // 详情
 const gotoDetail = async (record) => {
-  console.log(record);
   const res = await fetchNewKeywordDetail(record.id);
-  console.log(res);
-  visible.value = true;
-  topicInfo.value = res;
+  if (res.code === 200) {
+    visible.value = true;
+    topicInfo.value = res.data;
+  }
 };
 const groupedData = () => {
   const groups = {
@@ -374,9 +558,9 @@ const getKeywordTrendsList = async () => {
     params['industry_id'] = selectedSubCategory.value;
   }
   const res = await fetchKeywordTrendsList(params);
-  console.log('关键词热度榜', res);
-  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
-  dataList.value = res;
+  if (res.code === 200) {
+    dataList.value = res.data;
+  }
 };
 
 const formatTimestamp = (timestamp) => {
@@ -384,7 +568,6 @@ const formatTimestamp = (timestamp) => {
   try {
     return dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm');
   } catch (e) {
-    console.error('时间格式转换错误', e);
     return '格式错误';
   }
 };
@@ -480,6 +663,13 @@ onMounted(() => {
   background: #fff !important;
   border-color: #fff !important;
   color: #737478 !important;
-  margin-left: -5px;
+  margin-left: -8px;
+}
+
+.pop-btn2 {
+  background: transparent !important;
+  border-color: transparent !important;
+  color: #737478 !important;
+  margin-left: -8px;
 }
 </style>
diff --git a/src/views/components/dataEngine/userPainPoints.vue b/src/views/components/dataEngine/userPainPoints.vue
index 6344307..321a2fa 100644
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@@ -17,45 +17,54 @@
           </template>
         </a-popover>
       </a-space>
-      <a-table :data="dataList" :pagination="false">
-        <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="frequency">
-            <template #cell="{ record }">
-              <a-tag v-if="record.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
-                >低频</a-tag
-              >
-              <a-tag
-                v-else-if="record.frequency == 1"
-                style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
-                >中频</a-tag
-              >
-              <a-tag
-                v-else-if="record.frequency == 2"
-                style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
-                >高频</a-tag
-              >
-            </template>
-          </a-table-column>
-          <a-table-column title="代表性发言" data-index="content"> </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>
+      <a-table
+        :columns="columns"
+        :data="dataList"
+        :filter-icon-align-left="alignLeft"
+        @change="handleChange"
+        :scroll="true"
+        :pagination="false"
+      >
+        <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" />
+          <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 #frequency="{ record }">
+          <a-tag v-if="record.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
+            >低频</a-tag
+          >
+          <a-tag v-else-if="record.frequency == 1" style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
+            >中频</a-tag
+          >
+          <a-tag v-else-if="record.frequency == 2" style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
+            >高频</a-tag
+          >
+        </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>
@@ -67,15 +76,15 @@
       <div>
         <a-space direction="vertical" style="font-size: 12px">
           <a-space>
-            <span style="margin-right: 16px; width: 60px">痛点</span>
+            <span style="width: 80px">痛点</span>
             <span>{{ topicInfo.name }}</span>
           </a-space>
           <a-space>
-            <span style="margin-right: 16px; width: 60px; font-size: 12px">关键词</span>
+            <span style="width: 80px; font-size: 12px">关键词</span>
             <a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
           </a-space>
           <a-space>
-            <span style="margin-right: 16px; width: 60px; font-size: 12px">频次</span>
+            <span style="width: 80px; font-size: 12px">频次</span>
             <a-tag v-if="topicInfo.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
               >低频</a-tag
             >
@@ -91,14 +100,24 @@
             >
           </a-space>
           <a-space>
-            <span style="margin-right: 16px; width: 60px; font-size: 12px">代表性发言</span>
+            <span style="width: 80px; font-size: 12px">代表性发言</span>
             <span>{{ topicInfo.content }}</span>
           </a-space>
           <a-space direction="top">
-            <span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
-            <a-space direction="vertical" style="margin-left: 15px">
+            <span style="width: 80px; font-size: 12px; display: inline-block">原始来源</span>
+            <a-space direction="vertical">
               <a-space v-for="item in topicInfo.user_pain_point_sources" :key="item">
-                <a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
+                <a-link
+                  style="
+                    background-color: initial;
+                    display: inline-block;
+                    width: 280px;
+                    text-overflow: ellipsis;
+                  "
+                  :href="item.link"
+                  target="_blank"
+                  >{{ item.title }}</a-link
+                >
                 <img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
               </a-space>
             </a-space>
@@ -125,14 +144,58 @@ const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
 const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
 const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
 const dataList = ref([]);
-
+const columns = [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    slotName: 'rank',
+    width: 60,
+    minWidth: 60,
+  },
+  {
+    title: '痛点名称',
+    dataIndex: 'name',
+    width: 300,
+    minWidth: 300,
+  },
+  {
+    title: '关键词',
+    dataIndex: 'keywords',
+    slotName: 'keywords',
+    width: 250,
+    minWidth: 250,
+  },
+  {
+    width: 180,
+    minWidth: 180,
+    title: '频次',
+    dataIndex: 'frequency',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    slotName: 'frequency',
+  },
+  {
+    title: '代表性发言',
+    dataIndex: 'content',
+    slotName: 'content',
+    width: 320,
+    minWidth: 320,
+  },
+  {
+    title: '操作',
+    slotName: 'optional',
+    width: 120,
+    minWidth: 120,
+  },
+];
 // 详情
 const gotoDetail = async (record) => {
-  console.log(record);
   const res = await fetchUserPainPointsDetail(record.id);
-  console.log(res);
-  visible.value = true;
-  topicInfo.value = res;
+  if (res.code == 200) {
+    topicInfo.value = res.data;
+    visible.value = true;
+  }
 };
 
 const getUserPainPointsList = async () => {
@@ -150,9 +213,9 @@ const getUserPainPointsList = async () => {
     params['industry_id'] = selectedSubCategory.value;
   }
   const res = await fetchUserPainPointsList(params);
-  console.log('关键词热度榜', res);
-  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
-  dataList.value = res;
+  if (res.code === 200) {
+    dataList.value = res.data;
+  }
 };
 // 弹窗的取消
 const handleCancel = () => {
diff --git a/src/views/components/dataEngine/userPersona.vue b/src/views/components/dataEngine/userPersona.vue
index 0a5b5ee..9b5cdf3 100644
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/src/views/components/dataEngine/userPersona.vue
@@ -2,7 +2,7 @@
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
     <a-space style="width: 100%; display: flex">
-      <a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
+      <a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
         <a-space align="center">
           <span>性别分布</span>
           <a-popover position="tl">
@@ -37,7 +37,7 @@
           </a-space>
         </a-space>
       </a-space>
-      <a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
+      <a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
         <a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
           <a-space align="center">
             <span>年龄分布</span>