修改table样式

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>