新增企业数据分析功能，包括月度趋势、HS编码、贸易伙伴和区域分布数据接口；更新相关组件以支持新数据展示，重构供应商详情弹窗逻辑，删除不再使用的组件。

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

@@ -0,0 +1,24 @@
+<template>
+    <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>
+    </a-table>
+</template>
+
+<script setup lang="ts">
+    
+</script>
+

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

@@ -0,0 +1,201 @@
+<template>
+  <a-card title="货运历史">
+    <div>
+      <div class="switch-view">
+        <a-radio-group v-model:value="viewType" button-style="solid">
+          <a-radio-button value="chart">图表</a-radio-button>
+          <a-radio-button value="table">列表</a-radio-button>
+        </a-radio-group>
+      </div>
+      
+      <!-- 图表视图 -->
+      <div v-show="viewType === 'chart'" ref="chartRef" :style="{ height, width }"></div>
+      
+      <!-- 列表视图 -->
+      <div v-show="viewType === 'table'">
+        <a-table :columns="columns" :data-source="tableData" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'date'">
+              {{ record.date }}
+            </template>
+          </template>
+        </a-table>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref, onMounted, watch, computed } from 'vue';
+import { useECharts } from '/@/hooks/web/useECharts';
+
+export default defineComponent({
+  props: {
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '350px',
+    },
+    data:{
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const chartRef = ref<HTMLDivElement | null>(null);
+    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    const viewType = ref<'chart' | 'table'>('chart');
+
+    // 格式化函数
+    const formatNumber = (value: number | string) => {
+      if (!value) return '0.00';
+      return Number(value).toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+    };
+
+    // 日期格式化函数
+    const formatDate = (dateStr: string) => {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+    };
+
+    // 表格列定义
+    const columns = [
+      {
+        title: '日期',
+        dataIndex: 'val',
+        key: 'val',
+        customRender: ({ text }) => formatDate(text),
+      },
+      {
+        title: '进口交易次数',
+        dataIndex: 'num_supplier',
+        key: 'num_supplier',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+      },
+      {
+        title: '出口交易次数',
+        dataIndex: 'num_buyer',
+        key: 'num_buyer',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+      },
+    ];
+
+    // 计算表格数据
+    const tableData = computed(() => {
+      return props.data
+    });
+
+    const updateChart = () => {
+      const chartData = tableData.value;
+      
+      setOptions({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        legend: {
+          data: ['进口交易次数', '出口交易次数'],
+          textStyle: {
+            color: '#ccc',
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: chartData.map(item => formatDate(item.val)),
+          axisLine: {
+            lineStyle: {
+              color: '#ccc',
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '交易次数',
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          }
+        ],
+        series: [
+          {
+            name: '进口交易次数',
+            type: 'line',
+            yAxisIndex: 0,
+            symbol: 'circle',
+            z: -12,
+            lineStyle: {
+              color: '#399C5C',
+            },
+            itemStyle: {
+              color: '#399C5C',
+            },
+            data: chartData.map(item => item.num_supplier),
+          },
+          {
+            name: '出口交易次数',
+            type: 'line',
+            yAxisIndex: 0,
+            symbol: 'circle',
+            z: -12,
+            lineStyle: {
+              color: '#FF951A',
+            },
+            itemStyle: {
+              color: '#FF951A',
+            },
+            data: chartData.map(item => item.num_buyer),
+          }
+        ],
+      });
+    };
+
+    watch(
+      () => props.data,
+      () => {
+        updateChart();
+      },
+      { deep: true }
+    );
+
+    onMounted(() => {
+      updateChart();
+    });
+
+    return {
+      chartRef,
+      viewType,
+      columns,
+      tableData,
+      formatNumber,
+      formatDate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.switch-view {
+  text-align: right;
+  margin-bottom: 16px;
+}
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+    <a-card title="目的港" :loading="loading">
+        <template #extra>
+            <a-radio-group v-model:value="viewMode" button-style="solid">
+                <a-radio-button value="chart">图表</a-radio-button>
+                <a-radio-button value="table">列表</a-radio-button>
+            </a-radio-group>
+        </template>
+
+        <div v-show="viewMode === 'chart'" ref="chartRef" style="height: 400px"></div>
+
+        <a-table
+            v-show="viewMode === 'table'"
+            :columns="columns"
+            :data-source="tableData"
+            :pagination="false"
+            size="middle"
+        >
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.dataIndex === 'count' || column.dataIndex === 'num_buyer'">
+                    {{ formatNumber(record[column.dataIndex]) }}
+                </template>
+                <template v-if="column.dataIndex === 'weight' || column.dataIndex === 'amount'">
+                    {{ formatDecimal(record[column.dataIndex]) }}
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+const columns = [
+    {
+        title: '目的国',
+        dataIndex: 'val_cn',
+        key: 'val_cn',
+    },
+    {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+    }
+];
+
+const formatNumber = (num: string | number) => {
+    return Number(num).toLocaleString();
+};
+
+const formatDecimal = (num: string | number) => {
+    return Number(num).toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    });
+};
+
+const tableData = computed(() => {
+    if (!props.data?.buckets) return [];
+    
+    return props.data.buckets.map((item, index) => ({
+        key: index,
+        val_cn: item.val_cn || item.val,
+        count: item.count,
+    }));
+});
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+const updateChart = () => {
+    if (!chart || !props.data?.buckets) return;
+
+    const data = props.data.buckets
+        .sort((a, b) => Number(b.count) - Number(a.count))
+        .slice(0, 10);
+    
+    const total = data.reduce((sum, item) => sum + Number(item.count), 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}%`;
+            }
+        },
+        legend: {
+            orient: 'vertical',
+            right: 10,
+            top: 'center',
+            type: 'scroll'
+        },
+        series: [
+            {
+                name: '交易次数',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: true,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    formatter: (params) => {
+                        const percent = ((params.value / total) * 100).toFixed(2);
+                        return `${params.name}\n${percent}%`;
+                    }
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 14,
+                        fontWeight: 'bold'
+                    }
+                },
+                data: data.map(item => ({
+                    name: item.val_cn || item.val,
+                    value: Number(item.count)
+                }))
+            }
+        ]
+    };
+
+    chart.setOption(option);
+};
+
+watch(
+    () => props.data,
+    () => {
+        updateChart();
+    },
+    { deep: true }
+);
+
+watch(viewMode, (newValue) => {
+    if (newValue === 'chart') {
+        nextTick(() => {
+            initChart();
+        });
+    }
+});
+
+onMounted(() => {
+    if (viewMode.value === 'chart') {
+        initChart();
+    }
+});
+
+window.addEventListener('resize', () => {
+    if (viewMode.value === 'chart') {
+        chart?.resize();
+    }
+});
+
+onUnmounted(() => {
+    chart?.dispose();
+    window.removeEventListener('resize', () => {
+        chart?.resize();
+    });
+});
+</script>
+
+<style scoped>
+.ant-card {
+    margin-bottom: 24px;
+}
+
+:deep(.ant-table-pagination) {
+    margin: 16px 0;
+}
+</style> 

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

@@ -1,57 +0,0 @@
-<template>
-  <div inert="true">
-    <a-range-picker v-model:value="date" />
-    <div v-if="supplier">
-      <h1>{{ supplier.name }}</h1> <!-- 添加企业名称 -->
-      <p>地址: {{ supplier.address }}</p> <!-- 添加企业地址 -->
-      <p>联系方式: {{ supplier.contact }}</p> <!-- 添加联系方式 -->
-    </div>
-  </div>
-  
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { getCompanyInfo } from '../customsData.api'; // Adjust the import based on your API structure
-import type { Dayjs } from 'dayjs';
-type RangeValue = [Dayjs, Dayjs];
-const date = ref<RangeValue>();
-
-const props = defineProps({
-  supplierId: {
-    type: String,
-    required: true,
-  },
-});
-
-const supplier = ref<{ name: string; address: string; contact: string } | null>(null);
-const loading = ref(true);
-
-const fetchSupplierDetails = async () => {
-  loading.value = true;
-  const params = {
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
-    date: [20230101, 20230630],
-    com_id:props.supplierId,
-    com_role: 2,
-  }
-  const response = await getCompanyInfo(params);
-  supplier.value = response.result.data.result; // Adjust based on your API response structure
-  loading.value = false;
-};
-
-// Watch for changes in supplierId prop
-watch(() => props.supplierId, (newId) => {
-  if (newId) {
-    fetchSupplierDetails();
-  }
-});
-</script>
-
-<style scoped lang="less">
-.supplier-details {
-  padding: 20px;
-}
-
-</style> 

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

@@ -0,0 +1,174 @@
+<!-- src/views/adweb/data/components/HsCodeAnalysis.vue -->
+<template>
+    <a-card title="贸易伙伴">
+      <div>
+        <div class="switch-view">
+          <a-radio-group v-model:value="viewType" button-style="solid">
+            <a-radio-button value="chart">图表</a-radio-button>
+            <a-radio-button value="table">列表</a-radio-button>
+          </a-radio-group>
+        </div>
+        
+        <!-- 图表视图 -->
+        <div v-show="viewType === 'chart'" ref="chartRef" :style="{ height, width }"></div>
+        
+        <!-- 列表视图 -->
+        <div v-show="viewType === 'table'">
+          <a-table :columns="columns" :data-source="tableData" :pagination="false">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.dataIndex === 'val'">
+                {{ record.val }}
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </a-card>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent, PropType, ref, Ref, onMounted, watch, computed } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  
+  export default defineComponent({
+    props: {
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: '350px',
+      },
+      data: {
+        default: () => ({}),
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const viewType = ref<'chart' | 'table'>('chart');
+  
+      // 格式化函数
+      const formatNumber = (value: string | number) => {
+        if (!value) return '0.00';
+        return Number(value).toLocaleString('en-US', {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        });
+      };
+  
+      // 表格列定义
+      const columns = [
+        {
+          title: '采购商',
+          dataIndex: 'val',
+          key: 'val',
+        },
+        {
+          title: '交易次数',
+          dataIndex: 'count',
+          key: 'count',
+          customRender: ({ text }) => {
+            return text ? Number(text).toLocaleString('en-US') : '0';
+          },
+        },
+      ];
+  
+      // 计算表格数据
+      const tableData = computed(() => {
+        return props.data?.buckets || [];
+      });
+  
+      const updateChart = () => {
+        const chartData = tableData.value;
+        if (!chartData.length) return;
+        
+        // 取前10条数据展示
+        const top10Data = chartData.slice(0, 10);
+        
+        const colors = ['#53A2D3', '#FF6B6B', '#4ECDC4', '#45B7AF', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B59B6', '#3498DB', '#E67E22'];
+        
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+            },
+          },
+          
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'category',
+            data: top10Data.map(item => item.val),
+            axisLabel: {
+              rotate: 45,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              name: '交易次数',
+              position: 'left',
+              axisLine: {
+                lineStyle: {
+                  color: '#53A2D3',
+                },
+              },
+            }
+          ],
+          series: [
+            {
+              name: '交易次数',
+              type: 'bar',
+              yAxisIndex: 0,
+              data: top10Data.map((item, index) => ({
+                value: Number(item.count),
+                itemStyle: {
+                  color: colors[index]
+                }
+              })),
+            }
+          ],
+        });
+      };
+  
+      watch(
+        () => props.data,
+        () => {
+          updateChart();
+        },
+        { deep: true }
+      );
+  
+      onMounted(() => {
+        updateChart();
+      });
+  
+      return {
+        chartRef,
+        viewType,
+        columns,
+        tableData,
+        formatNumber,
+      };
+    },
+  });
+  </script>
+  
+  <style scoped>
+  .switch-view {
+    text-align: right;
+    margin-bottom: 16px;
+  }
+  </style>

src/views/adweb/data/customsData.api.ts

@@ -14,6 +14,11 @@ enum Api {
     transType = '/tradesparq/cds_v2/old_api/report/trans_type', // 新增交易类型分析接口
     incoterms = '/tradesparq/cds_v2/old_api/report/incoterms',  // 添加新的 API 路径
     companyInfo = '/tradesparq/cds_v2/old_api/company/info', //企业基本信息
+    monthly = '/tradesparq/cds_v2/old_api/company/monthly', // 月度接口
+    companyHsCode = '/tradesparq/cds_v2/old_api/company/hscode', // 企业HS编码数据
+    companyPartner = '/tradesparq/cds_v2/old_api/company/partner', // 企业贸易伙伴数据
+    regionDistribution = '/tradesparq/cds_v2/old_api/company/region', // 企业区域分布数据
+    companyRecord = '/tradesparq/cds_v2/old_api/company/record', // 企业详单数据
 }
 
 // 定义请求参数类型
@@ -452,3 +457,67 @@ export const getCompanyInfo = (params: any) => {
     )
 }
 
+/**
+ * 获取企业月度趋势分析数据
+ */
+export const getMonthly = (params: any) => {
+    return defHttp.post<any>(
+        {
+            url: Api.monthly,
+            params
+        },
+        {
+            errorMessageMode:'message',
+            isTransformResponse: false,
+        }
+    )
+}
+
+/**
+ * 获取企业HS编码数据
+ */
+export const getCompanyHsCode = (params: any) => {
+    return defHttp.post<any>(
+        {
+            url: Api.companyHsCode,
+            params
+        }
+    )
+}
+
+/**
+ * 获取企业贸易伙伴数据
+ */
+export const getCompanyPartner = (params: any) => {
+    return defHttp.post<any>(
+        {
+            url: Api.companyPartner,
+            params
+        }
+    )
+}
+
+/**
+ * 获取企业区域分布数据
+ */
+export const getRegionDistribution = (params: any) => {
+    return defHttp.post<any>(
+        {
+            url: Api.regionDistribution,
+            params
+        }
+    )
+}
+
+/**
+ * 获取企业详单数据
+ */
+export const getCompanyRecord = (params: any) => {
+    return defHttp.post<any>(
+        {
+            url: Api.companyRecord,
+            params
+        }
+    )
+}
+

src/views/adweb/data/customsData.vue

@@ -231,21 +231,45 @@
         </a-table>
         <div :inert="isModalVisible">
           <!-- 其他内容 -->
-          <a-modal v-model:open="isModalVisible" title="企业详情">
+          <a-modal v-model:open="isModalVisible" title="企业详情" :width="1200" @close="closeModal">
             <div>
               <div v-if="supplier">
                 <h1>{{ supplier.name }}</h1> <!-- 添加企业名称 -->
                 <p><strong>地址:</strong> {{ supplier.address }}</p> <!-- 添加企业地址 -->
-                <p><strong>联系方式:</strong> postal code:{{ supplier.postal_code }}</p> <!-- 添加联系方式 -->
+                <p v-if="supplier.postal_code"><strong>联系方式:</strong> postal code:{{ supplier.postal_code }}</p> <!-- 添加联系方式 -->
               </div>
             </div>
-            <!-- 新增选项卡 -->
-            <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange"  type="card">
+            <!-- 选项卡 -->
+            <a-tabs v-model:activeKey="activeTabKey1" @change="handleTabChange1" type="card">
               <a-tab-pane key="tradeOverview" tab="贸易总览">
                 <!-- 贸易总览内容 -->
+                <div class="analysis-content">
+                  <div class="analysis-item">
+                    <FreightHistory :data="freightHistoryData" />
+                  </div>
+                  <div class="analysis-item">
+                    <HsCodeAnalysis :hsCodeData="companyHsCodeData" />
+                  </div>
+                  <div class="analysis-item">
+                    <TradePartners :data="tradePartnersData" />
+                  </div>
+                  <div class="analysis-item">
+                    <RegionDistribution :data="regionDistributionData" />
+                  </div>
+                </div>
               </a-tab-pane>
               <a-tab-pane key="exportDetails" tab="出口详单">
-                <!-- 出口详单内容 -->
+                <!-- 新增表格展示出口详单 -->
+                <a-table :columns="exportDetailsColumns" :data-source="exportDetailsData" :loading="loading"
+                  :pagination="{
+                    current: paginationExportDetails.current,
+                    pageSize: paginationExportDetails.pageSize,
+                    total: paginationExportDetails.total,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                    showTotal: (total) => `共 ${total} 条`,
+                    onChange: handleTableChangeExportDetails,
+                  }" />
               </a-tab-pane>
               <a-tab-pane key="exportTradingPartners" tab="出口贸易伙伴">
                 <!-- 出口贸易伙伴内容 -->
@@ -331,7 +355,12 @@ import {
   getDestPortReport,
   getTransTypeReport,
   getIncotermsReport,
-  getCompanyInfo
+  getCompanyInfo,
+  getMonthly,
+  getCompanyHsCode,
+  getCompanyPartner,
+  getRegionDistribution,
+  getCompanyRecord
 } from './customsData.api';
 import { columns } from './customsData.data';
 import CompanyList from './components/CompanyList.vue';
@@ -345,11 +374,11 @@ import OrigPortAnalysis from './components/OrigPortAnalysis.vue';
 import DestPortAnalysis from './components/DestPortAnalysis.vue';
 import TransTypeAnalysis from './components/TransTypeAnalysis.vue';
 import IncotermsAnalysis from './components/IncotermsAnalysis.vue';
-import { Dayjs } from 'dayjs';
+import FreightHistory from './components/FreightHistory.vue';
+import TradePartners from './components/TradePartners.vue';
+import RegionDistribution from './components/RegionDistribution.vue';
 
 const supplier = ref<{ name: string; address: string; postal_code: string } | null>(null);
-type RangeValue = [Dayjs, Dayjs];
-const date = ref<RangeValue>();
 
 // 当前激活的标签页
 const activeTabKey = ref('transaction');
@@ -398,7 +427,7 @@ const form = ref({
 // 添加控制数据展示的状态
 const showDataContent = ref(false);
 
-// ���改 handleSearch 方法
+// 修改 handleSearch 方法
 const handleSearch = async () => {
   showDataContent.value = true;
 
@@ -496,11 +525,6 @@ const handleReset = () => {
     data_source: ['IMP_AMERICA_BL_SEA'],
     date: [20230101, 20230630],
   });
-
-  // 重新加载数据
-  if (activeTabKey.value === 'transaction') {
-    reloadTransaction();
-  }
 };
 
 const showAdvancedSearch = ref(false);
@@ -763,30 +787,229 @@ const fetchIncotermsData = async () => {
 
 const isModalVisible = ref(false);
 
-// 修改供应商名称的点击事件
+// Add a new ref to store the selected supplierId
+const selectedSupplierId = ref<string | null>(null);
+
+// Modify the handleSupplierClick function to set the selectedSupplierId
 const handleSupplierClick = async (supplierId) => {
   loading.value = true;
+  selectedSupplierId.value = supplierId; // Set the selected supplierId
   const params = {
     source_type: 1,
     data_source: ['IMP_AMERICA_BL_SEA'],
     date: [20230101, 20230630],
-    com_id:supplierId,
+    com_id: supplierId,
     com_role: 2,
-  }
+  };
   const response = await getCompanyInfo(params);
   supplier.value = {
     ...response.result.data.result,
-    postal_code: response.result.data.result.postal_code ? response.result.data.result.postal_code.join(',') : '' // 检查 postal_code 是否为 null
-  }; // Adjust based on your API response structure
-  loading.value = false; // 请求供应商详细信息
-  isModalVisible.value = true; // 显示弹窗
+    postal_code: response.result.data.result.postal_code ? response.result.data.result.postal_code.join(',') : ''
+  };
+  loading.value = false;
+  isModalVisible.value = true;
+  activeTabKey1.value = 'tradeOverview';
+  await loadFreightHistoryData();
+  await fetchCompanyHsCodeData();
+  await fetchTradePartnersData();
+  await fetchRegionDistributionData();
+};
+
+const freightHistoryData = ref([]);
+
+// Fetch freight history data for both roles and combine
+const loadFreightHistoryData = async () => {
+  try {
+    const params = {
+      source_type: 1,
+      data_source: ['IMP_AMERICA_BL_SEA'],
+      com_id: selectedSupplierId.value,
+      ...queryParam,
+    };
+
+    // Fetch export data (com_role: 2)
+    const exportParams = { ...params, com_role: 2 };
+    const exportRes = await getMonthly(exportParams);
+    const exportData = exportRes?.result?.data?.result?.as_supplier?.monthly?.buckets?.map((item) => ({
+      val: item.val,
+      num_supplier: item.count,
+      num_buyer: 0, // Initialize import count
+    })) || [];
+
+    // Fetch import data (com_role: 1)
+    const importParams = { ...params, com_role: 1 };
+    const importRes = await getMonthly(importParams);
+    const importData = importRes?.result?.data?.result?.as_buyer?.monthly?.buckets?.map((item) => ({
+      val: item.val,
+      num_supplier: 0,
+      num_buyer: item.count, // Initialize export count
+    })) || [];
+
+    // Combine data by date
+    const combinedData = [...exportData, ...importData].reduce((acc, item) => {
+      const existing = acc.find((i) => i.val === item.val);
+      if (existing) {
+        existing.num_supplier += item.num_supplier;
+        existing.num_buyer += item.num_buyer;
+      } else {
+        acc.push(item);
+      }
+      return acc;
+    }, []);
+
+    freightHistoryData.value = combinedData;
+  } catch (error) {
+    console.error('Failed to fetch freight history data:', error);
+  }
+};
+
+// 企业HS编码数据
+const companyHsCodeData = ref({});
+
+// 获取企业HS编码数据
+const fetchCompanyHsCodeData = async () => {
+  const params = {
+    source_type: 1,
+    data_source: ['IMP_AMERICA_BL_SEA'],
+    com_id: selectedSupplierId.value,
+    com_role: 2,
+    ...queryParam,
+  };
+  const res = await getCompanyHsCode(params);
+  console.log(res);
+  companyHsCodeData.value = res.data.result.as_supplier.hs_code;
+};
+
+// 贸易伙伴数据
+const tradePartnersData = ref({});
+
+// 获取贸易伙伴数据
+const fetchTradePartnersData = async () => {
+  const params = {
+    source_type: 1,
+    data_source: ['IMP_AMERICA_BL_SEA'],
+    com_id: selectedSupplierId.value,
+    com_role: 2,
+    ...queryParam,
+  };
+  const res = await getCompanyPartner(params);
+  tradePartnersData.value = res.data.result.as_supplier.buyer;
 };
 
-onMounted(() => { });
+const regionDistributionData = ref({});
+// 获取企业区域分布数据
+const fetchRegionDistributionData = async () => {
+  const params = {
+    source_type: 1,
+    data_source: ['IMP_AMERICA_BL_SEA'],
+    com_id: selectedSupplierId.value,
+    com_role: 2,
+    ...queryParam,
+  };
+  const res = await getRegionDistribution(params);
+  regionDistributionData.value = res.data.result.as_supplier.dest_country;
+};
+
+// Call the function to load data
+onMounted(() => {
+});
+
+// Current active tab for the modal
+const activeTabKey1 = ref('tradeOverview'); // Set default tab key
+
+// Handle tab change for the modal
+const handleTabChange1 = async (key: string) => {
+  activeTabKey1.value = key;
+  if (key === 'tradeOverview') {
+    await loadFreightHistoryData(); // Load freight history data
+  } else if (key === 'exportDetails') {
+    await loadExportDetailsData(); // Load export details data
+  } else if (key === 'exportTradingPartners') {
+    // Load export trading partners data
+    console.log('Load export trading partners data');
+  } else if (key === 'enterpriseAtlas') {
+    // Load enterprise atlas data
+    console.log('Load enterprise atlas data');
+  }
+};
+
+const exportDetailsData = ref([]); // 新增用于存储出口详单数据
+const exportDetailsColumns = [ // 新增表格列定义
+  {
+    title: '供应商',
+    dataIndex: 'supplier_t',
+    key: 'supplier_t',
+  },
+  {
+    title: '采购商',
+    dataIndex: 'buyer_t',
+    key: 'buyer_t',
+  },
+  {
+    title: '货运介绍',
+    dataIndex: 'freightDescription',
+    key: 'freightDescription',
+  },
+  {
+    title: '日期',
+    dataIndex: 'date',
+    key: 'date',
+    sorter: (a, b) => new Date(a.date) - new Date(b.date),
+  },
+];
+
+const paginationExportDetails = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const handleTableChangeExportDetails = async (pag, filters, sorter) => {
+  paginationExportDetails.value.current = pag.current; // 更新当前页
+  paginationExportDetails.value.pageSize = pag.pageSize; // 更新每页条数
+  // 其他处理逻辑...
+};
+
+const loadExportDetailsData = async () => { // 新增加载出口详单数据的方法
+  loading.value = true;
+  try {
+    const params = {
+      source_type: 1,
+      data_source: ['IMP_AMERICA_BL_SEA'],
+      com_id: selectedSupplierId.value,
+      com_role: 2,
+      ...queryParam,
+    };
+    const res = await getCompanyRecord(params);
+    exportDetailsData.value = res.data.result.as_supplier.response.docs.map((item) => ({
+      ...item,
+      date: item.date ? item.date.split(' ')[0] : '', // 只保留日期部分
+    })); // 存储回的数据
+  } catch (error) {
+    console.error('Failed to fetch export details:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 修改关闭弹窗的逻辑
+const closeModal = () => {
+  activeTabKey1.value = 'tradeOverview'
+  isModalVisible.value = false; // 关闭弹窗
+  resetModalData(); // 重置数据
+};
+
+// 添加重置数据的函数
+const resetModalData = () => {
+  supplier.value = null; // 重置供应商信息
+  freightHistoryData.value = []; // 重置货运历史数据
+  companyHsCodeData.value = {}; // 重置企业HS编码数据
+  tradePartnersData.value = {}; // 重置贸易伙伴数据
+  regionDistributionData.value = {}; // 重置区域分布数据
+};
 </script>
 
 <style scoped lang="less">
-
 .search-form {
   padding: 20px;
   background-color: #f5f5f5;