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

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>