Enhance sorting functionality and data presentation in customs data components. Updated BuyerList, SupplierList, HsCodeAnalysis, DestinationCountryAnalysis, and OriginCountryAnalysis to support sorting by transaction count, weight, and amount. Improved pagination and data fetching logic for better performance and user experience. Removed unused import trading partners and export trading partners components for cleaner code.

src/views/adweb/data/components/BuyerList.vue

@@ -1,29 +1,33 @@
 <template>
     <a-card title="采购商">
         <template #extra>
+            <span>排序：</span>
             <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
                 <a-radio-button value="count">交易次数</a-radio-button>
-                <a-radio-button value="sum_weight">交易重量</a-radio-button>
-                <a-radio-button value="sum_amount">交易金额</a-radio-button>
+                <a-radio-button value="weight">交易重量</a-radio-button>
+                <a-radio-button value="amount">交易金额</a-radio-button>
             </a-radio-group>
         </template>
         <div>
-        <a-table
-            :columns="columns"
-            :data-source="tableData"
-            :loading="loading"
-            row-key="fk"
-            :pagination="false"
-        />
-    </div>
+            <a-table :columns="columns" :data-source="tableData" :loading="loading" row-key="fk" :pagination="{
+                current: pagination.current,
+                pageSize: pagination.pageSize,
+                total: pagination.total,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: (total) => `共 ${total} 条`,
+                onShowSizeChange: handleTableChange,
+            }" @change="handleTableChange"></a-table>
+        </div>
     </a-card>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch, computed } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { getBuyerReport } from '../customsData.api';
 
 const props = defineProps({
-    buyerData: {  // 修改属性名
+    queryParam: {  // 修改属性名
         type: Object,
         required: true
     }
@@ -42,7 +46,7 @@ const columns = [
         dataIndex: 'num_supplier',
         key: 'num_supplier',
         customRender: ({ text }) => {
-          return text ? text.toLocaleString('en-US') : '0';
+            return text ? text.toLocaleString('en-US') : '0';
         },
     },
     {
@@ -62,37 +66,71 @@ const columns = [
         dataIndex: 'count',
         key: 'count',
         customRender: ({ text }) => {
-          return text ? text.toLocaleString('en-US') : '0';
+            return text ? text.toLocaleString('en-US') : '0';
         },
     },
 ];
 
-// 计算表格数据
-const tableData = computed(() => {
-    if (!props.buyerData?.buckets) return [];  // 修改属性名
-    
-    return props.buyerData.buckets;
+const pagination = ref({
+    current: 1,
+    pageSize: 10,
+    total: 0
 });
 
 // 格式化函数
 const formatNumber = (value: number | string) => {
-      if (!value) return '0.00';
-      return Number(value).toLocaleString('en-US', {
+    if (!value) return '0.00';
+    return Number(value).toLocaleString('en-US', {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2,
-      });
+    });
 };
 
 onMounted(async () => {
     // 这里可以添加获取数据的逻辑
+    await handleTableChange(pagination.value.current, pagination.value.pageSize, sortMode.value);
 });
 
+// Replace registerTransactionTable with this new method
+const handleTableChange = async (pag, filters, sorter) => {
+    loading.value = true;
+    try {
+        const params = {
+            sort: sortMode.value,
+            page: pag.current,
+            page_size: pag.pageSize,
+            ...props.queryParam,
+        };
+
+        const res = await getBuyerReport(params);
+        if (res.result.data.result && res.result.data.result.buckets) {
+            pagination.value = {
+                current: pag.current,
+                pageSize: pag.pageSize,
+                total: res.result.data.result.numBuckets || 0,
+            };
+            tableData.value = res.result.data.result.buckets;
+        }
+    } catch (error) {
+        console.error('Failed to fetch data:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const tableData = ref([]);
+
 // 监听数据变化
 watch(
-    () => props.buyerData // 修改属性名
+    () => props.queryParam // 修改属性名
 );
+
+// 监听排序方式变化
+watch(sortMode, (newSortMode) => {
+    handleTableChange(pagination.value, {}, { field: newSortMode });
+});
 </script>
 
 <style scoped>
 /* Add any necessary styles here */
-</style> 
+</style>

src/views/adweb/data/components/DestinationCountryAnalysis.vue

@@ -2,7 +2,8 @@
 <template>
     <a-card title="目的国" :loading="loading">
         <template #extra>
-            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+            <span>排序：</span>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;" @change="handleSortChange">
             <a-radio-button value="count">交易次数</a-radio-button>
             <a-radio-button value="sum_weight">交易重量</a-radio-button>
             <a-radio-button value="sum_amount">交易金额</a-radio-button>
@@ -40,8 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import { ref, onMounted, watch, computed, nextTick, onUnmounted, defineEmits } from 'vue';
 import * as echarts from 'echarts';
+// Define emits
+const emit = defineEmits();
 
 const props = defineProps({
     destinationCountryData: {  // 修改属性名
@@ -197,6 +200,11 @@ const updateChart = () => {
     chart.setOption(option);
 };
 
+const handleSortChange = (event) => {
+    sortMode.value = event.target.value; // Update sort mode correctly
+    emit('update:sortMode', sortMode.value); // Emit the updated sort mode
+};
+
 // 监听数据变化
 watch(
     () => props.destinationCountryData,  // 修改属性名

src/views/adweb/data/components/HsCodeAnalysis.vue

@@ -2,10 +2,12 @@
 <template>
   <a-card title="产品">
     <template #extra>
-      <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+      <span>排序：</span>
+      <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;"
+        @change="handleSortChange">
         <a-radio-button value="count">交易次数</a-radio-button>
-        <a-radio-button value="sum_weight">交易重量</a-radio-button>
-        <a-radio-button value="sum_amount">交易金额</a-radio-button>
+        <a-radio-button value="weight">交易重量</a-radio-button>
+        <a-radio-button value="amount">交易金额</a-radio-button>
       </a-radio-group>
     </template>
     <div>
@@ -34,26 +36,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref, onMounted, watch, computed } from 'vue';
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
 import { useECharts } from '/@/hooks/web/useECharts';
 
 export default defineComponent({
   props: {
     width: {
-      type: String as PropType<string>,
+      type: String,
       default: '100%',
     },
     height: {
-      type: String as PropType<string>,
+      type: String,
       default: '350px',
     },
     hsCodeData: {
+      type: Object,
       default: () => ({}),
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const chartRef = ref<HTMLDivElement | null>(null);
-    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    const { setOptions } = useECharts(chartRef);
     const viewType = ref<'chart' | 'table'>('chart');
     const sortMode = ref('count');
 
@@ -100,6 +103,10 @@ export default defineComponent({
       return props.hsCodeData?.buckets || [];
     });
 
+    const handleSortChange = (value: string) => {
+      emit('update:sortMode', value.target.value);
+    };
+
     const updateChart = () => {
       const chartData = tableData.value;
       if (!chartData.length) return;
@@ -109,6 +116,30 @@ export default defineComponent({
 
       const colors = ['#53A2D3', '#FF6B6B', '#4ECDC4', '#45B7AF', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B59B6', '#3498DB', '#E67E22'];
 
+      // 根据排序方式选择数据
+      const seriesData = top10Data.map((item, index) => {
+        let value;
+        switch (sortMode.value) {
+          case 'count':
+            value = Number(item.count);
+            break;
+          case 'weight':
+            value = Number(item.sum_weight);
+            break;
+          case 'amount':
+            value = Number(item.sum_amount);
+            break;
+          default:
+            value = 0;
+        }
+        return {
+          value,
+          itemStyle: {
+            color: colors[index]
+          }
+        };
+      });
+
       setOptions({
         tooltip: {
           trigger: 'axis',
@@ -116,7 +147,6 @@ export default defineComponent({
             type: 'shadow',
           },
         },
-
         grid: {
           left: '3%',
           right: '4%',
@@ -138,7 +168,7 @@ export default defineComponent({
         yAxis: [
           {
             type: 'value',
-            name: '交易次数',
+            name: sortMode.value === 'count' ? '交易次数' : (sortMode.value === 'weight' ? '交易重量（KG）' : '金额（$）'),
             position: 'left',
             axisLine: {
               lineStyle: {
@@ -149,15 +179,10 @@ export default defineComponent({
         ],
         series: [
           {
-            name: '交易次数',
+            name: sortMode.value === 'count' ? '交易次数' : (sortMode.value === 'weight' ? '交易重量' : '交易金额'),
             type: 'bar',
             yAxisIndex: 0,
-            data: top10Data.map((item, index) => ({
-              value: Number(item.count),
-              itemStyle: {
-                color: colors[index]
-              }
-            })),
+            data: seriesData,
           }
         ],
       });
@@ -182,6 +207,7 @@ export default defineComponent({
       columns,
       tableData,
       formatNumber,
+      handleSortChange,
     };
   },
 });

src/views/adweb/data/components/OriginCountryAnalysis.vue

@@ -1,10 +1,11 @@
 <template>
     <a-card title="原产国" :loading="loading">
         <template #extra>
-            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
+            <span>排序：</span>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;" @change="handleSortChange">
                 <a-radio-button value="count">交易次数</a-radio-button>
-                <a-radio-button value="sum_weight">交易重量</a-radio-button>
-                <a-radio-button value="sum_amount">交易金额</a-radio-button>
+                <a-radio-button value="weight">交易重量</a-radio-button>
+                <a-radio-button value="amount">交易金额</a-radio-button>
             </a-radio-group>
         </template>
         <!-- 添加切换按钮组 -->
@@ -34,9 +35,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import { ref, onMounted, watch, computed, nextTick, onUnmounted, defineEmits } from 'vue';
 import * as echarts from 'echarts';
 
+// Define emits
+const emit = defineEmits();
+
 const props = defineProps({
     originCountryData: {
         type: Object,
@@ -83,7 +87,9 @@ const columns = [
         key: 'percentage',
         customRender: ({ record }) => {
             const total = props.originCountryData.allBuckets.count; // 计算总数
-            const percent = total > 0 ? ((record.count / total) * 100).toFixed(2) : 0; // 计算百分比
+            const percent = total > 0 && (record.count > 0 || record.sum_weight > 0 || record.sum_amount > 0) 
+                ? ((record.count / total) * 100).toFixed(2) 
+                : 0.00; // 计算百分比
             return `${percent}%`;
         }
     }
@@ -127,20 +133,32 @@ const initChart = () => {
 const updateChart = () => {
     if (!chart || !props.originCountryData?.buckets) return;
 
+    const valueKeyMap = {
+        count: 'count',
+        weight: 'sum_weight',
+        amount: 'sum_amount'
+    }
     // 获取前10个数据并计算总数
     const data = props.originCountryData.buckets
-        .sort((a, b) => Number(b.count) - Number(a.count))
+        .sort((a, b) => Number(b[valueKeyMap[sortMode.value]]) - Number(a[valueKeyMap[sortMode.value]]))
         .slice(0, 10);
 
-    const total = props.originCountryData.allBuckets.count;
-    const otherCount = total - data.reduce((sum, item) => sum + Number(item.count), 0);  // 计算剩余的总数
+    // 根据 sortMode 映射到 allBuckets 的对应关系
+    const totalKeyMap = {
+        count: 'count',
+        weight: 'weight_sum',
+        amount: 'amount_sum'
+    };
+
+    const total = props.originCountryData.allBuckets[totalKeyMap[sortMode.value]]; // 使用映射获取总数
+    const otherCount = total - data.reduce((sum, item) => sum + Number(item[valueKeyMap[sortMode.value]]), 0);
 
     const option = {
         tooltip: {
             trigger: 'item',
             formatter: (params) => {
                 const percent = ((params.value / total) * 100).toFixed(2);
-                return `${params.name}<br/>交易次数: ${formatNumber(params.value)}<br/>占比: ${percent}%`;
+                return `${params.name}<br/>${sortMode.value === 'count' ? '交易次数' : sortMode.value === 'weight' ? '交易重量' : '交易金额'}: ${formatNumber(params.value)}<br/>占比: ${percent}%`;
             }
         },
         legend: {
@@ -163,7 +181,7 @@ const updateChart = () => {
                 label: {
                     show: true,
                     formatter: (params) => {
-                        const percent = ((params.value / total) * 100).toFixed(2);
+                        const percent = total > 0 ? ((params.value / total) * 100).toFixed(2) : 0.00;
                         return `${params.name}\n${percent}%`;
                     }
                 },
@@ -177,11 +195,11 @@ const updateChart = () => {
                 data: [
                     ...data.map(item => ({
                         name: item.val_cn || item.val,
-                        value: Number(item.count)
+                        value: Number(item[valueKeyMap[sortMode.value]])
                     })),
                     {
                         name: '其他',
-                        value: otherCount  // 添加“其他”部分
+                        value: otherCount
                     }
                 ]
             }
@@ -191,6 +209,11 @@ const updateChart = () => {
     chart.setOption(option);
 };
 
+const handleSortChange = (event) => {
+    sortMode.value = event.target.value; // Update sort mode correctly
+    emit('update:sortMode', sortMode.value); // Emit the updated sort mode
+};
+
 // 监听数据变化
 watch(
     () => props.originCountryData,

src/views/adweb/data/components/SupplierList.vue

@@ -1,29 +1,45 @@
 <template>
     <a-card title="供应商">
         <template #extra>
+            <span>排序：</span>
             <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
                 <a-radio-button value="count">交易次数</a-radio-button>
-                <a-radio-button value="sum_weight">交易重量</a-radio-button>
-                <a-radio-button value="sum_amount">交易金额</a-radio-button>
+                <a-radio-button value="weight">交易重量</a-radio-button>
+                <a-radio-button value="amount">交易金额</a-radio-button>
             </a-radio-group>
         </template>
         <div>
-            <a-table :columns="columns" :data-source="tableData" :loading="loading" row-key="fk" :pagination="false" />
+            <a-table :columns="columns" :data-source="tableData" :loading="loading" row-key="fk" :pagination="{
+                current: pagination.current,
+                pageSize: pagination.pageSize,
+                total: pagination.total,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: (total) => `共 ${total} 条`,
+                onShowSizeChange: handleTableChange,
+            }" @change="handleTableChange">
+            </a-table>
         </div>
     </a-card>
-
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch, computed } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { getSupplierReport } from '../customsData.api';
+
 
 const props = defineProps({
-    supplierData: {  // 修改属性名
+    queryParam: {  // 修改属性名
         type: Object,
         required: true
     }
 });
 const loading = ref(false);
+const pagination = ref({
+    current: 1,
+    pageSize: 10,
+    total: 0
+});
 
 const sortMode = ref('count');
 
@@ -62,12 +78,36 @@ const columns = [
         },
     },
 ];
+
+// Replace registerTransactionTable with this new method
+const handleTableChange = async (pag, filters, sorter) => {
+  loading.value = true;
+  try {
+    const params = {
+      sort: sortMode.value,
+      page: pag.current,
+      page_size: pag.pageSize,
+      ...props.queryParam,
+    };
+
+    const res = await getSupplierReport(params);
+    if (res.result.data.result && res.result.data.result.buckets) {
+      pagination.value = {
+        current: pag.current,
+        pageSize: pag.pageSize,
+        total: res.result.data.result.numBuckets || 0,
+      };
+      tableData.value = res.result.data.result.buckets;
+    }
+  } catch (error) {
+    console.error('Failed to fetch data:', error);
+  } finally {
+    loading.value = false;
+  }
+};
 // 计算表格数据
-const tableData = computed(() => {
-    if (!props.supplierData?.buckets) return [];  // 修改属性名
+const tableData = ref([]);
 
-    return props.supplierData.buckets;
-});
 // 格式化函数
 const formatNumber = (value: number | string) => {
     if (!value) return '0.00';
@@ -78,12 +118,17 @@ const formatNumber = (value: number | string) => {
 };
 
 onMounted(async () => {
-
+    await handleTableChange(pagination.value.current, pagination.value.pageSize, sortMode.value);
 });
 // 监听数据变化
 watch(
-    () => props.supplierData // 修改属性名
+    () => props.queryParam // 修改属性名
 );
+
+// 监听排序方式变化
+watch(sortMode, (newSortMode) => {
+    handleTableChange(pagination.value, {}, { field: newSortMode });
+});
 </script>
 
 <style scoped>

src/views/adweb/data/components/TradeAnalysis.vue

@@ -70,7 +70,7 @@ export default defineComponent({
         title: '日期',
         dataIndex: 'val',
         key: 'val',
-        customRender: ({ text }) => formatDate(text),
+        customRender: ({ text }) => text === '合计' ? text : formatDate(text),
       },
       {
         title: '供应商',
@@ -112,11 +112,20 @@ export default defineComponent({
 
     // 计算表格数据
     const tableData = computed(() => {
-      return props.monthlyTrendData
+      const data = props.monthlyTrendData;
+      const total = {
+        val: '合计',
+        num_supplier: data.reduce((sum, item) => sum + (item.num_supplier || 0), 0),
+        num_buyer: data.reduce((sum, item) => sum + (item.num_buyer || 0), 0),
+        sum_weight: data.reduce((sum, item) => sum + (item.sum_weight || 0), 0),
+        sum_amount: data.reduce((sum, item) => sum + (item.sum_amount || 0), 0),
+        count: data.reduce((sum, item) => sum + (item.count || 0), 0),
+      };
+      return [...data, total]; // 添加合计行
     });
 
     const updateChart = () => {
-      const chartData = tableData.value;
+      const chartData = props.monthlyTrendData;
       
       setOptions({
         tooltip: {

src/views/adweb/data/customsData.vue

@@ -203,7 +203,6 @@
       <!-- 按钮行 -->
       <a-row class="button-row" justify="end">
         <a-button type="primary" @click="handleSearch">搜索</a-button>
-        <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
       </a-row>
     </div>
   </div>
@@ -212,29 +211,40 @@
   <div v-show="showDataContent" class="table-container">
     <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange" class="custom-tabs" type="card">
       <a-tab-pane key="transaction" tab="交易信息">
-        <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          showTotal: (total) => `共 ${total} 条`,
-          onChange: handleTableChange,
-          onShowSizeChange: handleTableChange,
-        }" @change="handleTableChange">
-
-          <template #bodyCell="{ column, record, text }">
-            <template v-if="column.key === 'supplier_t'">
-              <a @click="handleSupplierClick(record.supplier_id)">{{ text }}</a>
-            </template>
-            <template v-if="column.key === 'buyer_t'">
-              <a @click="handleBuyerClick(record.buyer_id)">{{ text }}</a>
-            </template>
-            <template v-if="column.key === 'freight_intro'">
-              <a @click="handleFreightIntroClick()">详细信息</a>
-            </template>
+        <a-card title="交易信息">
+          <template #extra>
+            <span>排序：</span>
+            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;"
+              @change="handleSortChange">
+              <a-radio-button value="date">交易日期</a-radio-button>
+              <a-radio-button value="weight">交易重量</a-radio-button>
+            </a-radio-group>
           </template>
-        </a-table>
+          <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="{
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条`,
+            onChange: handleTableChange,
+            onShowSizeChange: handleTableChange,
+          }" @change="handleTableChange">
+
+            <template #bodyCell="{ column, record, text }">
+              <template v-if="column.key === 'supplier_t'">
+                <a @click="handleSupplierClick(record.supplier_id)">{{ text }}</a>
+              </template>
+              <template v-if="column.key === 'buyer_t'">
+                <a @click="handleBuyerClick(record.buyer_id)">{{ text }}</a>
+              </template>
+              <template v-if="column.key === 'freight_intro'">
+                <a @click="handleFreightIntroClick()">详细信息</a>
+              </template>
+            </template>
+          </a-table>
+        </a-card>
+
         <div :inert="isModalVisible">
           <!-- 其他内容 -->
           <a-modal v-model:open="isModalVisible" title="企业详情" :width="1200" @close="closeModal">
@@ -242,7 +252,8 @@
               <div v-if="supplier">
                 <h1>{{ supplier.name }}</h1> <!-- 添加企业名称 -->
                 <p><strong>地址:</strong> {{ supplier.address }}</p> <!-- 添加企业地址 -->
-                <p v-if="supplier.postal_code"><strong>联系方式:</strong> postal code:{{ supplier.postal_code }}</p> <!-- 添加联系方式 -->
+                <p v-if="supplier.postal_code"><strong>联系方式:</strong> postal code:{{ supplier.postal_code }}</p>
+                <!-- 添加联系方式 -->
               </div>
             </div>
             <!-- 选项卡 -->
@@ -289,32 +300,6 @@
                     onChange: handleTableChangeExportDetails,
                   }" />
               </a-tab-pane>
-              <!-- <a-tab-pane key="importTradingPartners" tab="进口贸易伙伴">
-                <a-table :columns="importTradingPartnersColumns" :data-source="importTradingPartnersData" :loading="loading"
-                  :pagination="{
-                    current: paginationImportTradingPartners.current,
-                    pageSize: paginationImportTradingPartners.pageSize,
-                    total: paginationImportTradingPartners.total,
-                    showSizeChanger: true,
-                    showQuickJumper: true,
-                    showTotal: (total) => `共 ${total} 条`,
-                    onChange: handleTableChangeImportTradingPartners,
-                  }" />
-              </a-tab-pane>
-              <a-tab-pane key="exportTradingPartners" tab="出口贸易伙伴">
-                <a-table :columns="exportTradingPartnersColumns" :data-source="exportTradingPartnersData" :loading="loading"
-                  :pagination="{
-                    current: paginationExportTradingPartners.current,
-                    pageSize: paginationExportTradingPartners.pageSize,
-                    total: paginationExportTradingPartners.total,
-                    showSizeChanger: true,
-                    showQuickJumper: true,
-                    showTotal: (total) => `共 ${total} 条`,
-                    onChange: handleTableChangeExportTradingPartners,
-                  }" />
-              </a-tab-pane>
-              <a-tab-pane key="enterpriseAtlas" tab="企业图谱">
-              </a-tab-pane> -->
             </a-tabs>
           </a-modal>
         </div>
@@ -330,28 +315,28 @@
             <trade-analysis :monthly-trend-data="monthlyTrendData" />
           </div>
           <div class="analysis-item">
-            <HsCodeAnalysis :hs-code-data="hsCodeData" />
+            <HsCodeAnalysis :hs-code-data="hsCodeData" @update:sortMode="handleSortMode" />
           </div>
           <a-row :gutter="16">
             <!-- 新增行 -->
             <a-col :span="12">
               <!-- 左侧列 -->
               <div class="analysis-item">
-                <OriginCountryAnalysis :origin-country-data="originCountryData" />
+                <OriginCountryAnalysis :origin-country-data="originCountryData" @update:sortMode="handleSortModeOriginCountryData"  />
               </div>
             </a-col>
             <a-col :span="12">
               <!-- 右侧列 -->
               <div class="analysis-item">
-                <DestinationCountryAnalysis :destination-country-data="destinationCountryData" />
+                <DestinationCountryAnalysis :destination-country-data="destinationCountryData" @update:sortMode="handleSortModeDestinationCountryData"/>
               </div>
             </a-col>
           </a-row>
           <div class="analysis-item">
-            <SupplierList :supplierData="supplierData" />
+            <SupplierList :queryParam = "queryParam"/>
           </div>
           <div class="analysis-item">
-            <BuyerList :buyerData="buyerData" />
+            <BuyerList :queryParam = "queryParam" />
           </div>
         </div>
       </a-tab-pane>
@@ -380,6 +365,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue';
+import dayjs, { Dayjs } from 'dayjs';
 import {
   list,
   listCompanies,
@@ -428,8 +414,8 @@ const queryParam = reactive<any>({});
 const form = ref({
   product: '',
   hsCode: '',
-  startDate: null,
-  endDate: null,
+  startDate: dayjs('20230101'),//后面更换
+  endDate: dayjs('20230630'),//后面更换
   supplier: '',
   supplierReg: '',
   supplierAddress: '',
@@ -536,36 +522,6 @@ const handleSearch = async () => {
   }
 };
 
-// 修改重置方法
-const handleReset = () => {
-  // 隐藏数据内容
-  showDataContent.value = false;
-
-  // 重置表单
-  form.value = {
-    product: '',
-    hsCode: '',
-    startDate: null,
-    endDate: null,
-    supplier: '',
-    supplierReg: '',
-    supplierAddress: '',
-    options: ['excludeNVL'],
-    buyer: '',
-    buyerReg: '',
-    buyerAddress: '',
-    buyerOptions: ['excludeNVL'],
-    // ... 其他字段重置
-  };
-
-  // 重置查询参数，但保留基础参数
-  Object.assign(queryParam, {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
-    date: [20230101, 20230630],
-  });
-};
-
 const showAdvancedSearch = ref(false);
 
 const toggleAdvancedSearch = () => {
@@ -577,7 +533,6 @@ onMounted(() => {
   Object.assign(queryParam, {
     source_type: 1,
     data_source: ['IMP_AMERICA_BL_SEA'],
-    date: [20230101, 20230630],
   });
 });
 
@@ -595,12 +550,9 @@ const handleTableChange = async (pag, filters, sorter) => {
   loading.value = true;
   try {
     const params = {
+      sort: sortMode.value,
       page: pag.current,
       page_size: pag.pageSize,
-      sortField: sorter?.field,
-      sortOrder: sorter?.order,
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
       ...queryParam,
     };
 
@@ -663,7 +615,6 @@ const handleTabChange = async (key: string) => {
       fetchHsCodeData(),
       fetchOriginCountryData(),
       fetchDestinationCountryData(),
-      fetchSupplierData(),
       fetchBuyerData(),
     ]);
   } else if (key === 'shippingAnalysis') {
@@ -674,10 +625,6 @@ const handleTabChange = async (key: string) => {
       fetchTransTypeData(),
       fetchIncotermsData()
     ]);
-  } else if (key === 'importTradingPartners') {
-    await loadImportTradingPartnersData(); // Load import trading partners data
-  } else if (key === 'exportTradingPartners') {
-    await loadExportTradingPartnersData(); // Load export trading partners data
   }
 };
 
@@ -688,8 +635,6 @@ const monthlyTrendData = ref([]);
 const loadMonthlyTrendData = async () => {
   try {
     const params = {
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
       ...queryParam,
     };
 
@@ -700,7 +645,6 @@ const loadMonthlyTrendData = async () => {
         ...item,
       }));
     }
-    console.log(monthlyTrendData.value);
   } catch (error) {
     console.error('Failed to fetch data:', error);
   } finally {
@@ -711,11 +655,10 @@ const loadMonthlyTrendData = async () => {
 const hsCodeData = ref({});
 
 // 获取HS编码数据
-const fetchHsCodeData = async () => {
+const fetchHsCodeData = async (sortMode = 'count') => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
+    sort: sortMode,
   };
   const res = await getHsCodeReport(params);
   hsCodeData.value = res.result.data.result;
@@ -724,11 +667,10 @@ const fetchHsCodeData = async () => {
 const originCountryData = ref({});
 
 // 获取原产国数据
-const fetchOriginCountryData = async () => {
+const fetchOriginCountryData = async (sortMode = 'count') => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
+    sort: sortMode
   };
   const res = await getOrigCountryReport(params);
   originCountryData.value = res.result.data.result;
@@ -737,36 +679,20 @@ const fetchOriginCountryData = async () => {
 const destinationCountryData = ref({});
 
 // 获取目的国数据
-const fetchDestinationCountryData = async () => {
+const fetchDestinationCountryData = async (sortMode = 'count') => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
+    sort: sortMode
   };
   const res = await getDestCountryReport(params);
   destinationCountryData.value = res.result.data.result;
 };
 
-const supplierData = ref({});
-
-// 获取供应商数据
-const fetchSupplierData = async () => {
-  const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
-    ...queryParam,
-  };
-  const res = await getSupplierReport(params);
-  supplierData.value = res.result.data.result;
-};
-
 const buyerData = ref({});
 
 // 获取采购商数据
 const fetchBuyerData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
   };
   const res = await getBuyerReport(params);
@@ -777,8 +703,6 @@ const origPortData = ref({});
 // 获取起运港数据
 const fetchOrigPortData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
   };
   const res = await getOrigPortReport(params);
@@ -789,8 +713,6 @@ const destPortData = ref({});
 // 获取起运港数据
 const fetchDestPortData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
   };
   const res = await getDestPortReport(params);
@@ -801,8 +723,6 @@ const transTypeData = ref({});
 // 获取运输方式数据
 const fetchTransTypeData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
   };
   const res = await getTransTypeReport(params);
@@ -813,8 +733,6 @@ const incotermsData = ref({});
 // 获取成交方式数据
 const fetchIncotermsData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     ...queryParam,
   };
   const res = await getIncotermsReport(params);
@@ -831,11 +749,9 @@ const handleSupplierClick = async (supplierId) => {
   loading.value = true;
   selectedComId.value = supplierId; // Set the selected comId
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
-    date: [20230101, 20230630],
     com_id: supplierId,
     com_role: 2,
+    ...queryParam,
   };
   const response = await getCompanyInfo(params);
   supplier.value = {
@@ -859,11 +775,9 @@ const handleBuyerClick = async (buyerId) => {
   loading.value = true;
   selectedComId.value = buyerId;
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
-    date: [20230101, 20230630],
     com_id: buyerId,
     com_role: 1,
+    ...queryParam,
   };
   const response = await getCompanyInfo(params);
   supplier.value = {
@@ -885,8 +799,6 @@ const freightHistoryData = ref([]);
 const loadFreightHistoryData = async () => {
   try {
     const params = {
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
       com_id: selectedComId.value,
       ...queryParam,
     };
@@ -933,8 +845,6 @@ const companyHsCodeData = ref({});
 // 获取企业HS编码数据
 const fetchCompanyHsCodeData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     com_id: selectedComId.value,
     com_role: 2,
     ...queryParam,
@@ -942,8 +852,6 @@ const fetchCompanyHsCodeData = async () => {
   const res = await getCompanyHsCode(params);
   companyHsCodeData.value.as_supplier = res.data.result.as_supplier.hs_code;
   const params1 = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     com_id: selectedComId.value,
     com_role: 1,
     ...queryParam,
@@ -959,8 +867,6 @@ const tradePartnersData = ref({});
 // 获取贸易伙伴数据
 const fetchTradePartnersData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     com_id: selectedComId.value,
     com_role: 2,
     ...queryParam,
@@ -968,8 +874,6 @@ const fetchTradePartnersData = async () => {
   const res = await getCompanyPartner(params);
   tradePartnersData.value.as_supplier = res.data.result.as_supplier.buyer;
   const params1 = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     com_id: selectedComId.value,
     com_role: 1,
     ...queryParam,
@@ -982,8 +886,6 @@ const regionDistributionData = ref({});
 // 获取企业区域分布数据
 const fetchRegionDistributionData = async () => {
   const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     com_id: selectedComId.value,
     com_role: 2,
     ...queryParam,
@@ -991,8 +893,6 @@ const fetchRegionDistributionData = async () => {
   const res = await getRegionDistribution(params);
   regionDistributionData.value.as_supplier = res.data.result.as_supplier.dest_country;
   const params1 = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
     com_id: selectedComId.value,
     com_role: 1,
     ...queryParam,
@@ -1067,8 +967,6 @@ const loadExportDetailsData = async () => { // 新增加载出口详单数据的
   loading.value = true;
   try {
     const params = {
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
       com_id: selectedComId.value,
       com_role: 2,
       ...queryParam,
@@ -1126,8 +1024,6 @@ const loadImportDetailsData = async () => { // 新增加载进口详单数据的
   loading.value = true;
   try {
     const params = {
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
       com_id: selectedComId.value,
       com_role: 1,
       ...queryParam,
@@ -1159,119 +1055,24 @@ const resetModalData = () => {
   tradePartnersData.value = {}; // 重置贸易伙伴数据
   regionDistributionData.value = {}; // 重置区域分布数据
 };
-
-// Add these new variables
-const importTradingPartnersData = ref([]); // 新增用于存储进口贸易伙伴数据
-const importTradingPartnersColumns = [ // 新增表格列定义
-  {
-    title: '企业名称',
-    dataIndex: 'companyName',
-    key: 'companyName',
-  },
-  {
-    title: '重量 (KG)',
-    dataIndex: 'weight',
-    key: 'weight',
-  },
-  {
-    title: '金额 ($)',
-    dataIndex: 'amount',
-    key: 'amount',
-  },
-  {
-    title: '交易次数',
-    dataIndex: 'transactionCount',
-    key: 'transactionCount',
-  },
-];
-
-const paginationImportTradingPartners = ref({
-  current: 1,
-  pageSize: 10,
-  total: 0,
-});
-
-// 新增处理进口贸易伙伴表格的分页和排序
-const handleTableChangeImportTradingPartners = async (pag, filters, sorter) => {
-  paginationImportTradingPartners.value.current = pag.current; // 更新当前页
-  paginationImportTradingPartners.value.pageSize = pag.pageSize; // 更新每页条数
-  // 其他处理逻辑...
-};
-
-// 新增加载进口贸易伙伴数据的方法
-const loadImportTradingPartnersData = async () => {
-  loading.value = true;
-  try {
-    const params = {
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
-      ...queryParam,
-    };
-    const res = await getCompanyPartner(params); // 假设这个API可以获取进口贸易伙伴数据
-    importTradingPartnersData.value = res.data.result; // 存储回的数据
-    paginationImportTradingPartners.value.total = res.data.total; // 更新总数
-  } catch (error) {
-    console.error('Failed to fetch import trading partners:', error);
-  } finally {
-    loading.value = false;
-  }
+const handleSortMode = (value) => {
+  fetchHsCodeData(value);
 };
 
-// Add these new variables
-const exportTradingPartnersData = ref([]); // 新增用于存储出口贸易伙伴数据
-const exportTradingPartnersColumns = [ // 新增表格列定义
-  {
-    title: '企业名称',
-    dataIndex: 'companyName',
-    key: 'companyName',
-  },
-  {
-    title: '重量 (KG)',
-    dataIndex: 'weight',
-    key: 'weight',
-  },
-  {
-    title: '金额 ($)',
-    dataIndex: 'amount',
-    key: 'amount',
-  },
-  {
-    title: '交易次数',
-    dataIndex: 'transactionCount',
-    key: 'transactionCount',
-  },
-];
+const handleSortModeOriginCountryData = (value) => {
+  fetchOriginCountryData(value);
+}
 
-const paginationExportTradingPartners = ref({
-  current: 1,
-  pageSize: 10,
-  total: 0,
-});
+const handleSortModeDestinationCountryData = (value) => {
+  fetchDestinationCountryData(value);
+}
 
-// 新增处理出口贸易伙伴表格的分页和排序
-const handleTableChangeExportTradingPartners = async (pag, filters, sorter) => {
-  paginationExportTradingPartners.value.current = pag.current; // 更新当前页
-  paginationExportTradingPartners.value.pageSize = pag.pageSize; // 更新每页条数
-  // 其他处理逻辑...
-};
+const sortMode = ref('date'); // Set default sort mode to 'date'
 
-// 新增加载出口贸易伙伴数据的方法
-const loadExportTradingPartnersData = async () => {
-  loading.value = true;
-  try {
-    const params = {
-      source_type: 1,
-      data_source: ['IMP_AMERICA_BL_SEA'],
-      ...queryParam,
-    };
-    const res = await getCompanyPartner(params); // 假设这个API可以获取出口贸易伙伴数据
-    exportTradingPartnersData.value = res.data.result; // 存储回的数据
-    paginationExportTradingPartners.value.total = res.data.total; // 更新总数
-  } catch (error) {
-    console.error('Failed to fetch export trading partners:', error);
-  } finally {
-    loading.value = false;
-  }
+// Modify handleSortChange to include sort parameter in the API request
+const handleSortChange = async (event) => {
+  sortMode.value = event.target.value; // Update sort mode
+  await handleTableChange(pagination.value)
 };
 </script>