feat: table组件替换

src/views/components/dataEngine/hotTranslation.vue

@@ -10,70 +10,77 @@
           <icon-question-circle size="16" class="!color-#737478" />
         </Tooltip>
       </div>
-      <a-table
-        :columns="columns"
-        :data="dataList"
-        :filter-icon-align-left="alignLeft"
-        :scroll="true"
+      <Table
+        :dataSource="dataList"
         :pagination="false"
+        :showSorterTooltip="false"
         @change="handleChange"
       >
-        <template #empty>
+        <Table.Column
+          v-for="column in columns"
+          :key="column.dataIndex"
+          :title="column.title"
+          :dataIndex="column.dataIndex"
+          :width="column.width"
+          :minWidth="column.minWidth"
+          :sortable="column.sortable"
+        >
+          <template v-if="column.slotName === 'rank'" #customRender="{ 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 v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
+            <a-tag
+              v-for="item in record.keywords"
+              :key="item"
+              class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
+              >{{ item }}</a-tag
+            >
+          </template>
+          <template v-else-if="column.slotName === 'hot'" #customRender="{ record }">
+            <img
+              v-for="i in record.hot"
+              :key="i"
+              :src="starImages[i - 1]"
+              style="width: 16px; height: 16px"
+              class="mr-2px"
+            />
+          </template>
+          <template v-else-if="column.slotName === 'sentiment'" #customRender="{ record }">
+            <img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
+            <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
+            <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
+          </template>
+          <template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
+            <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
+          </template>
+          <template v-else-if="column.titleSlotName === 'hotTitle'" #title>
+            <div class="flex items-center">
+              <span class="mr-8px">热度指数</span>
+              <Tooltip>
+                <template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
+                <icon-question-circle size="14" class="!color-#737478" />
+              </Tooltip>
+            </div>
+          </template>
+          <template v-else-if="column.titleSlotName === 'sentimentTitle'" #title>
+            <div class="flex items-center">
+              <span class="mr-8px">情感倾向</span>
+              <Tooltip>
+                <template #title
+                  >统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
+                >
+                <icon-question-circle size="14" class="!color-#737478" />
+              </Tooltip>
+            </div>
+          </template>
+        </Table.Column>
+        <template #emptyText>
           <NoData />
         </template>
-        <template #hotTitle>
-          <div class="flex items-center">
-            <span class="mr-8px">热度指数</span>
-            <Tooltip>
-              <template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
-              <icon-question-circle size="14" class="!color-#737478" />
-            </Tooltip>
-          </div>
-        </template>
-        <template #sentimentTitle>
-          <div class="flex items-center">
-            <span class="mr-8px">情感倾向</span>
-            <Tooltip>
-              <template #title
-                >统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
-              >
-              <icon-question-circle size="14" class="!color-#737478" />
-            </Tooltip>
-          </div>
-        </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 #keywords="{ record }">
-          <a-tag
-            v-for="item in record.keywords"
-            :key="item"
-            class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-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"
-            class="mr-2px"
-          />
-        </template>
-        <template #sentiment="{ record }">
-          <img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
-          <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
-          <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
-        </template>
-
-        <template #optional="{ record }">
-          <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
-        </template>
-      </a-table>
+      </Table>
     </div>
     <Modal
       v-model:open="visible"
@@ -146,7 +153,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Modal, Button, Tooltip,Space } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
 import { ref, computed } from 'vue';
 import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
 import star1 from '@/assets/img/hottranslation/star-fill1.png';
@@ -256,7 +263,7 @@ onMounted(() => {
 const getIndustriesTree = async () => {
   const res = await fetchIndustriesTree();
   industriesTree.value = res;
-  selectedIndustry.value = res[0].id;
+  selectedIndustry.value = res[0]?.id;
   getIndustryTopics();
 };
 

src/views/components/dataEngine/keyBrandMovement.vue

@@ -16,62 +16,72 @@
           <icon-question-circle size="16" class="!color-#737478" />
         </Tooltip>
       </div>
-      <a-table
-        :columns="columns"
-        :data="dataList"
-        :filter-icon-align-left="alignLeft"
-        :scroll="true"
+      <Table
+        :dataSource="dataList"
         :pagination="false"
+        :showSorterTooltip="false"
         @change="handleChange"
       >
-        <template #empty>
+        <Table.Column
+          v-for="column in columns"
+          :key="column.dataIndex"
+          :title="column.title"
+          :dataIndex="column.dataIndex"
+          :width="column.width"
+          :minWidth="column.minWidth"
+          :sortable="column.sortable"
+        >
+          <template v-if="column.slotName === 'rank'" #customRender="{ 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 v-else-if="column.slotName === 'hot'" #customRender="{ record }">
+            <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
+          </template>
+          <template v-else-if="column.slotName === 'trend'" #customRender="{ record }">
+            <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
+              <icon-arrow-up v-if="record.trend > 0" size="16" />
+              <icon-arrow-down v-else size="16" />
+              {{ `${(record.trend * 100).toFixed(2)}%` }}
+            </div>
+          </template>
+          <template v-else-if="column.slotName === 'volumeRate'" #customRender="{ record }">
+            <a-statistic :value="record.volume_rate * 100" />%
+          </template>
+          <template v-else-if="column.titleSlotName === 'hotTitle'" #title>
+            <Space>
+              <span>热度指数</span>
+              <Tooltip>
+                <template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
+                <icon-question-circle size="14" class="!color-#737478" />
+              </Tooltip>
+            </Space>
+          </template>
+          <template v-else-if="column.titleSlotName === 'trendTitle'" #title>
+            <Space>
+              <span>变化幅度</span>
+              <Tooltip>
+                <template #title>仅基于品牌出现频次。</template>
+                <icon-question-circle size="14" class="!color-#737478" />
+              </Tooltip>
+            </Space>
+          </template>
+          <template v-else-if="column.titleSlotName === 'volume_rateTitle'" #title>
+            <Space>
+              <span>占总声量比例</span>
+              <Tooltip>
+                <template #title>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
+                <icon-question-circle size="14" class="!color-#737478" />
+              </Tooltip>
+            </Space>
+          </template>
+        </Table.Column>
+        <template #emptyText>
           <NoData />
         </template>
-        <template #hotTitle>
-          <Space>
-            <span>热度指数</span>
-            <Tooltip>
-              <template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
-              <icon-question-circle size="14" class="!color-#737478" />
-            </Tooltip>
-          </Space>
-        </template>
-        <template #trendTitle>
-          <Space>
-            <span>变化幅度</span>
-            <Tooltip>
-              <template #title>仅基于品牌出现频次。</template>
-              <icon-question-circle size="14" class="!color-#737478" />
-            </Tooltip>
-          </Space>
-        </template>
-        <template #volume_rateTitle>
-          <Space>
-            <span>占总声量比例</span>
-            <Tooltip>
-              <template #title>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
-              <icon-question-circle size="14" class="!color-#737478" />
-            </Tooltip>
-          </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 }">
-          <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
-            <icon-arrow-up v-if="record.trend > 0" size="16" />
-            <icon-arrow-down v-else size="16" />
-            {{ `${(record.trend * 100).toFixed(2)}%` }}
-          </div>
-        </template>
-        <template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
-      </a-table>
+      </Table>
     </Space>
     <!--  舆情 & 敏感动态-->
     <Space
@@ -88,18 +98,27 @@
         </Tooltip>
       </div>
 
-      <a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
-        <template #empty>
+      <Table :dataSource="otherList" :pagination="false" :showSorterTooltip="false" style="font-size: 12px">
+        <Table.Column
+          v-for="column in columns2"
+          :key="column.dataIndex"
+          :title="column.title"
+          :dataIndex="column.dataIndex"
+          :width="column.width"
+          :minWidth="column.minWidth"
+          :sortable="column.sortable"
+        />
+        <template #emptyText>
           <NoData />
         </template>
-      </a-table>
+      </Table>
     </Space>
   </view>
 </template>
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Tooltip, Space } from 'ant-design-vue';
+import { Tooltip, Space, Table } from 'ant-design-vue';
 import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
 import { ref, onMounted, computed } from 'vue';
 import star1 from '@/assets/img/hottranslation/star-fill1.png';

src/views/components/dataEngine/keyWord.vue

@@ -15,15 +15,15 @@
         </Tooltip>
       </div>
 
-      <a-table
+      <Table
         :columns="columns"
-        :data="dataList"
-        :filter-icon-align-left="alignLeft"
-        :scroll="true"
+        :dataSource="dataList"
+        :scroll="{ x: true }"
         :pagination="false"
+        :showSorterTooltip="false"
         @change="handleChange"
       >
-        <template #empty>
+        <template #emptyText>
           <NoData />
         </template>
         <template #heatLevel>
@@ -69,7 +69,7 @@
             {{ `${(record.trend * 100).toFixed(2)}%` }}
           </div>
         </template>
-      </a-table>
+      </Table>
     </Space>
     <!-- 行业情绪 -->
     <Space
@@ -103,17 +103,16 @@
             </div>
           </div>
         </div>
-        <a-table
+        <Table
           class="flex-1"
           :columns="columns2"
-          :data="sortedRowData"
-          :span-method="spanMethod"
-          :filter-icon-align-left="alignLeft"
-          :scroll="true"
+          :dataSource="sortedRowData"
+          :scroll="{ x: true }"
           :pagination="false"
+          :showSorterTooltip="false"
           @change="handleChange"
         >
-          <template #empty>
+          <template #emptyText>
             <NoData />
           </template>
           <template #felling="{ record }">
@@ -122,7 +121,7 @@
               <span>{{ fellingStatus[record.felling].label }}</span>
             </div>
           </template>
-        </a-table>
+        </Table>
       </div>
     </Space>
     <!-- 新兴关键词 -->
@@ -140,15 +139,15 @@
         </Tooltip>
       </div>
 
-      <a-table
+      <Table
         :columns="columns3"
-        :data="keywordList"
-        :filter-icon-align-left="alignLeft"
-        :scroll="true"
+        :dataSource="keywordList"
+        :scroll="{ x: true }"
         :pagination="false"
+        :showSorterTooltip="false"
         @change="handleChange"
       >
-        <template #empty>
+        <template #emptyText>
           <NoData />
         </template>
         <template #rank="{ record }">
@@ -209,7 +208,7 @@
         <template #optional="{ record }">
           <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
         </template>
-      </a-table>
+      </Table>
     </Space>
     <!-- modal -->
     <Modal

src/views/components/dataEngine/userPainPoints.vue

@@ -17,44 +17,51 @@
           <icon-question-circle size="16" class="!color-#737478" />
         </Tooltip>
       </div>
-      <a-table
-        :columns="columns"
-        :data="dataList"
-        :filter-icon-align-left="alignLeft"
-        :scroll="true"
+      <Table
+        :dataSource="dataList"
         :pagination="false"
+        :showSorterTooltip="false"
         @change="handleChange"
       >
-        <template #empty>
+        <Table.Column
+          v-for="column in columns"
+          :key="column.dataIndex"
+          :title="column.title"
+          :dataIndex="column.dataIndex"
+          :width="column.width"
+          :minWidth="column.minWidth"
+          :sortable="column.sortable"
+        >
+          <template v-if="column.slotName === 'rank'" #customRender="{ 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 v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
+            <a-tag
+              v-for="item in record.keywords"
+              :key="item"
+              class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
+              >{{ item }}</a-tag
+            >
+          </template>
+          <template v-else-if="column.slotName === 'frequency'" #customRender="{ record }">
+            <a-tag
+              :class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
+                frequencyStatus[record.frequency].color
+              }`"
+              >{{ frequencyStatus[record.frequency].label }}</a-tag
+            >
+          </template>
+          <template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
+            <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
+          </template>
+        </Table.Column>
+        <template #emptyText>
           <NoData />
         </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 #keywords="{ record }">
-          <a-tag
-            v-for="item in record.keywords"
-            :key="item"
-            class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
-            >{{ item }}</a-tag
-          >
-        </template>
-        <template #frequency="{ record }">
-          <a-tag
-            :class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
-              frequencyStatus[record.frequency].color
-            }`"
-            >{{ frequencyStatus[record.frequency].label }}</a-tag
-          >
-        </template>
-
-        <template #optional="{ record }">
-          <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
-        </template>
-      </a-table>
+      </Table>
     </Space>
 
     <Modal
@@ -120,7 +127,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Modal, Button, Tooltip, Space } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
 import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
 import { ref, onMounted, computed } from 'vue';
 import top1 from '@/assets/img/captcha/top1.svg';

src/views/components/dataEngine/userPersona.vue

@@ -92,36 +92,30 @@
         <div class="flex flex-col h-486px">
           <Tabs defaultActiveKey="1" class="h-100%" @change="tabChange" size="large">
             <TabPane key="1" tab="省份">
-              <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
-                <template #empty>
+              <Table :dataSource="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }" :showSorterTooltip="false">
+                <template #emptyText>
                   <NoData />
                 </template>
-                <template #columns>
-                  <a-table-column title="排名" data-index="rank" />
-                  <a-table-column title="省份" data-index="geo" />
-                  <a-table-column title="分布占比" data-index="rate" />
-
-                  <a-table-column title="TGI指数" data-index="tgi" />
-                </template>
-              </a-table>
+                <Column title="排名" dataIndex="rank" />
+                <Column title="省份" dataIndex="geo" />
+                <Column title="分布占比" dataIndex="rate" />
+                <Column title="TGI指数" dataIndex="tgi" />
+              </Table>
             </TabPane>
             <TabPane key="2" tab="城市">
-              <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
-                <template #empty>
+              <Table :dataSource="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }" :showSorterTooltip="false">
+                <template #emptyText>
                   <NoData />
                 </template>
-                <template #columns>
-                  <a-table-column title="排名" data-index="rank" />
-                  <a-table-column title="城市" data-index="geo" />
-                  <a-table-column title="分布占比" data-index="rate">
-                    <template #cell="{ record }">
-                      <span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
-                    </template>
-                  </a-table-column>
-
-                  <a-table-column title="TGI指数" data-index="tgi" />
-                </template>
-              </a-table>
+                <Column title="排名" dataIndex="rank" />
+                <Column title="城市" dataIndex="geo" />
+                <Column title="分布占比" dataIndex="rate">
+                  <template #customRender="{ record }">
+                    <span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
+                  </template>
+                </Column>
+                <Column title="TGI指数" dataIndex="tgi" />
+              </Table>
             </TabPane>
           </Tabs>
         </div>
@@ -138,8 +132,9 @@ import * as echarts from 'echarts';
 import chinaJson from '@/assets/maps/china.json';
 
 echarts.registerMap('china', chinaJson);
-import { Tabs, Tooltip, Space } from 'ant-design-vue';
+import { Tabs, Tooltip, Space, Table } from 'ant-design-vue';
 const { TabPane } = Tabs;
+const { Column } = Table;
 
 const scope = ref(1); // 地域范围，1-省，2-市
 const chartInstance = (ref < echarts.ECharts) | (null > null);