Enhance customsData API and UI for trade analysis reports

- Updated API endpoints in customsData.api.ts to include new routes for destination country, trend, HS code, origin country, supplier, and buyer reports.
- Introduced new request and response interfaces for better type safety and clarity.
- Enhanced customsData.vue to integrate new components for trade analysis, including monthly trend, HS code, origin country, destination country, supplier, and buyer data.
- Improved data fetching logic on tab change to load analysis data efficiently.
- Updated UI layout for better organization and presentation of trade analysis reports.

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

@@ -0,0 +1,90 @@
+<template>
+    <a-card title="采购商">
+        <div>
+        <a-table
+            :columns="columns"
+            :data-source="tableData"
+            :loading="loading"
+            row-key="fk"
+            :pagination="false"
+        />
+    </div>
+    </a-card>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, computed } from 'vue';
+
+const props = defineProps({
+    buyerData: {  // 修改属性名
+        type: Object,
+        required: true
+    }
+});
+const loading = ref(false);
+
+const columns = [
+    {
+        title: '采购商名称',
+        dataIndex: 'val',
+        key: 'val',
+    },
+    {
+        title: '供应商数量',
+        dataIndex: 'num_supplier',
+        key: 'num_supplier',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+    },
+    {
+        title: '金额($)',
+        dataIndex: 'sum_amount',
+        key: 'sum_amount',
+        customRender: ({ text }) => formatNumber(text),
+    },
+    {
+        title: '重量(KG)',
+        dataIndex: 'sum_weight',
+        key: 'sum_weight',
+        customRender: ({ text }) => formatNumber(text),
+    },
+    {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+    },
+];
+
+// 计算表格数据
+const tableData = computed(() => {
+    if (!props.buyerData?.buckets) return [];  // 修改属性名
+    
+    return props.buyerData.buckets;
+});
+
+// 格式化函数
+const formatNumber = (value: number | string) => {
+      if (!value) return '0.00';
+      return Number(value).toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+};
+
+onMounted(async () => {
+    // 这里可以添加获取数据的逻辑
+});
+
+// 监听数据变化
+watch(
+    () => props.buyerData // 修改属性名
+);
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style> 

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

@@ -0,0 +1,226 @@
+<!-- src/views/adweb/data/components/DestinationCountryAnalysis.vue -->
+<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_supplier'">
+                    {{ formatNumber(record[column.dataIndex]) }}
+                </template>
+                <template v-if="column.dataIndex === 'sum_weight' || column.dataIndex === 'sum_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({
+    destinationCountryData: {  // 修改属性名
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+// 定义表格列
+const columns = [
+    {
+        title: '目的国',  // 修改标题
+        dataIndex: 'country',
+        key: 'country',
+    },
+    {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+        sorter: (a, b) => Number(a.count) - Number(b.count),
+    },
+    {
+        title: '采购商数量',
+        dataIndex: 'num_buyer',
+        key: 'num_buyer',
+        sorter: (a, b) => Number(a.num_buyer) - Number(b.num_buyer),
+    },
+    {
+        title: '重量(KG)',
+        dataIndex: 'sum_weight',
+        key: 'sum_weight',
+        sorter: (a, b) => Number(a.sum_weight) - Number(b.sum_weight),
+    },
+    {
+        title: '金额($)',
+        dataIndex: 'sum_amount',
+        key: 'sum_amount',
+        sorter: (a, b) => Number(a.sum_amount) - Number(b.sum_amount),
+    }
+];
+
+// 格式化整数
+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.destinationCountryData?.buckets) return [];  // 修改属性名
+    
+    return props.destinationCountryData.buckets.map((item, index) => ({
+        key: index,
+        country: item.val_cn || item.val,
+        count: item.count,
+        num_buyer: item.num_buyer,
+        sum_weight: item.sum_weight,
+        sum_amount: item.sum_amount
+    }));
+});
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+const updateChart = () => {
+    if (!chart || !props.destinationCountryData?.buckets) return;  // 修改属性名
+
+    // 获取前10个数据并计算总数
+    const data = props.destinationCountryData.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.destinationCountryData,  // 修改属性名
+    () => {
+        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/HsCodeAnalysis.vue

@@ -0,0 +1,186 @@
+<!-- src/views/adweb/data/components/HsCodeAnalysis.vue -->
+<template>
+    <a-card title="HS编码分析">
+      <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',
+      },
+      hsCodeData: {
+        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: 'HS编码',
+          dataIndex: 'val',
+          key: 'val',
+        },
+        {
+          title: '重量（KG）',
+          dataIndex: 'sum_weight',
+          key: 'sum_weight',
+          customRender: ({ text }) => formatNumber(text),
+        },
+        {
+          title: '金额（$）',
+          dataIndex: 'sum_amount',
+          key: 'sum_amount',
+          customRender: ({ text }) => formatNumber(text),
+        },
+        {
+          title: '交易次数',
+          dataIndex: 'count',
+          key: 'count',
+          customRender: ({ text }) => {
+            return text ? Number(text).toLocaleString('en-US') : '0';
+          },
+        },
+      ];
+  
+      // 计算表格数据
+      const tableData = computed(() => {
+        return props.hsCodeData?.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.hsCodeData,
+        () => {
+          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/components/OriginCountryAnalysis.vue

@@ -0,0 +1,226 @@
+<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_supplier'">
+                    {{ formatNumber(record[column.dataIndex]) }}
+                </template>
+                <template v-if="column.dataIndex === 'sum_weight' || column.dataIndex === 'sum_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({
+    originCountryData: {
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+// 定义表格列
+const columns = [
+    {
+        title: '原产国',
+        dataIndex: 'country',
+        key: 'country',
+    },
+    {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+        sorter: (a, b) => Number(a.count) - Number(b.count),
+    },
+    {
+        title: '供应商数量',
+        dataIndex: 'num_supplier',
+        key: 'num_supplier',
+        sorter: (a, b) => Number(a.num_supplier) - Number(b.num_supplier),
+    },
+    {
+        title: '重量(KG)',
+        dataIndex: 'sum_weight',
+        key: 'sum_weight',
+        sorter: (a, b) => Number(a.sum_weight) - Number(b.sum_weight),
+    },
+    {
+        title: '金额($)',
+        dataIndex: 'sum_amount',
+        key: 'sum_amount',
+        sorter: (a, b) => Number(a.sum_amount) - Number(b.sum_amount),
+    }
+];
+
+// 格式化整数
+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.originCountryData?.buckets) return [];
+    
+    return props.originCountryData.buckets.map((item, index) => ({
+        key: index,
+        country: item.val_cn || item.val,
+        count: item.count,
+        num_supplier: item.num_supplier,
+        sum_weight: item.sum_weight,
+        sum_amount: item.sum_amount
+    }));
+});
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+const updateChart = () => {
+    if (!chart || !props.originCountryData?.buckets) return;
+
+    // 获取前10个数据并计算总数
+    const data = props.originCountryData.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.originCountryData,
+    () => {
+        updateChart();
+    },
+    { deep: true }
+);
+
+// 监听视图模式变化
+watch(viewMode, (newValue) => {
+    if (newValue === 'chart') {
+        // 在下一个 tick 后初始化图表，确保 DOM 已更新
+        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/SupplierList.vue

@@ -0,0 +1,88 @@
+<template>
+    <a-card title="供应商">
+        <div>
+        <a-table
+            :columns="columns"
+            :data-source="tableData"
+            :loading="loading"
+            row-key="fk"
+            :pagination="false"
+        />
+    </div>
+    </a-card>
+   
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, computed } from 'vue';
+
+const props = defineProps({
+    supplierData: {  // 修改属性名
+        type: Object,
+        required: true
+    }
+});
+const loading = ref(false);
+
+const columns = [
+    {
+        title: '供应商名称',
+        dataIndex: 'val',
+        key: 'val',
+    },
+    {
+        title: '采购商数量',
+        dataIndex: 'num_buyer',
+        key: 'num_buyer',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+    },
+    {
+        title: '金额($)',
+        dataIndex: 'sum_amount',
+        key: 'sum_amount',
+        customRender: ({ text }) => formatNumber(text),
+    },
+    {
+        title: '重量(KG)',
+        dataIndex: 'sum_weight',
+        key: 'sum_weight',
+        customRender: ({ text }) => formatNumber(text),
+    },
+    {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+    },
+];
+// 计算表格数据
+const tableData = computed(() => {
+    if (!props.supplierData?.buckets) return [];  // 修改属性名
+    
+    return props.supplierData.buckets;
+});
+// 格式化函数
+const formatNumber = (value: number | string) => {
+      if (!value) return '0.00';
+      return Number(value).toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+    };
+
+onMounted(async () => {
+   
+});
+// 监听数据变化
+watch(
+    () => props.supplierData // 修改属性名
+);
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>

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

@@ -0,0 +1,246 @@
+<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',
+    },
+    monthlyTrendData:{
+      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';
+        },
+      },
+      {
+        title: '重量（KG）',
+        dataIndex: 'sum_weight',
+        key: 'sum_weight',
+        customRender: ({ text }) => formatNumber(text),
+      },
+      {
+        title: '金额（$）',
+        dataIndex: 'sum_amount',
+        key: 'sum_amount',
+        customRender: ({ text }) => formatNumber(text),
+      },
+      {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+        customRender: ({ text }) => {
+          return text ? text.toLocaleString('en-US') : '0';
+        },
+      },
+    ];
+
+    // 计算表格数据
+    const tableData = computed(() => {
+      return props.monthlyTrendData
+    });
+
+    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: true },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          {
+            type: 'value',
+            name: '交易次数',
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          }
+        ],
+        series: [
+          {
+            name: '供应商数量',
+            type: 'line',
+            yAxisIndex: 0,
+            smooth: false,
+            symbol: 'circle',
+            showAllSymbol: 'auto',
+            symbolSize: 6,
+            lineStyle: {
+              color: '#53A2D3',
+            },
+            itemStyle: {
+              color: '#53A2D3',
+            },
+            data: chartData.map(item => item.num_supplier),
+          },
+          {
+            name: '采购商数量',
+            type: 'line',
+            yAxisIndex: 0,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              color: '#FF951A',
+            },
+            itemStyle: {
+              color: '#FF951A',
+            },
+            data: chartData.map(item => item.num_buyer),
+          },
+          {
+            name: '交易次数',
+            type: 'line',
+            yAxisIndex: 1,
+            symbol: 'circle',
+            z: -12,
+            lineStyle: {
+              color: '#399C5C',
+            },
+            itemStyle: {
+              color: '#399C5C',
+            },
+            data: chartData.map(item => item.count),
+          }
+        ],
+      });
+    };
+
+    watch(
+      () => props.monthlyTrendData,
+      () => {
+        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

@@ -2,7 +2,13 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
     list = '/tradesparq/cds_v2/old_api/record',
-    listCompanies = '/tradesparq/tes/search/company',
+    listCompanies = '/tradesparq/cds_v2/old_api/company/info',
+    destCountry = '/tradesparq/cds_v2/old_api/report/dest_country',//
+    trend = '/tradesparq/cds_v2/old_api/trend',//月度趋势
+    hsCode = '/tradesparq/cds_v2/old_api/report/hs_code', // HS编码分析接口
+    origCountry = '/tradesparq/cds_v2/old_api/report/orig_country', // 原产地分析接口
+    supplierReport = '/tradesparq/cds_v2/old_api/report/supplier_report', // 新增供应商报告接口
+    buyerReport = '/tradesparq/cds_v2/old_api/report/buyer_report', // 采购商分析接口
 }
 
 // 定义请求参数类型
@@ -45,7 +51,7 @@ export interface TradeRecordQueryParams {
     orig_port_t?: string; // 起运港
     dest_country_code?: string[]; // 目的地编码数组
     dest_port_t?: string; // 目的港
-    [key: string]: any; // 允许其他未定义的参数
+    [key: string]: any; // 允许其他义的参数
 }
 
 // 定义响应数据类型
@@ -59,7 +65,162 @@ export interface TradeRecordResponse {
     }>;
 }
 
+// 定义目的国请求参数类型
+export interface DestCountryParams {
+    source_type?: number;
+    data_source?: string[];
+    date?: number[];
+    hs_code?: string;
+    supplier_t?: string;
+    buyer_t?: string;
+    [key: string]: any;
+}
+
+// 定义目的国响应数据类型
+export interface DestCountryResponse {
+    status_code: number;
+    data: {
+        result: {
+            buckets: Array<{
+                val: string;           // 国家英文名
+                code: string;          // 国家代码
+                val_cn: string;        // 国家中文名
+                num_buyer: string;      // 采购商数量
+                sum_amount: string;     // 总金额
+                sum_weight: string;     // 总重量
+                count: string;          // 交易次数
+            }>;
+            numBuckets: number;        // 总bucket数量
+        };
+    };
+}
+
+// 定义趋势请求参数类型
+export interface TrendParams {
+    source_type?: number;
+    data_source?: string[];
+    date?: number[];
+    hs_code?: string;
+    supplier_t?: string;
+    buyer_t?: string;
+    [key: string]: any;
+}
+
+// 定义趋势响应数据类型
+export interface TrendResponse {
+    status_code: number;
+    data: {
+        result: Array<{
+            val: string;           // 月份信息
+            num_supplier: number;  // 供应商数量
+            num_buyer: number;     // 采购商数量
+            sum_amount: number;    // 金额
+            sum_weight: number;    // 重量
+            count: number;        // 交易次数
+        }>;
+    };
+}
+
+// 定义HS编码分析请求参数类型
+export interface HsCodeParams {
+    source_type?: number;
+    data_source?: string[];
+    date?: number[];
+    hs_code?: string;
+    supplier_t?: string;
+    buyer_t?: string;
+    [key: string]: any;
+}
+
+// 定义HS编码分析响应数据类型
+export interface HsCodeResponse {
+    status_code: number;
+    data: {
+        result: {
+            buckets: Array<{
+                val: string;           // HS编码
+                sum_amount: string;    // 总金额
+                sum_weight: string;    // 总重量
+                count: string;         // 交易次数
+            }>;
+            numBuckets: number;       // 总bucket数量
+        };
+    };
+}
 
+// 定义原产地请求参数类型
+export interface OrigCountryParams {
+    source_type?: number;
+    data_source?: string[];
+    date?: number[];
+    hs_code?: string;
+    supplier_t?: string;
+    buyer_t?: string;
+    [key: string]: any;
+}
+
+// 定义原产地响应数据类型
+export interface OrigCountryResponse {
+    status_code: number;
+    data: {
+        result: {
+            buckets: Array<{
+                val: string;           // 国家英文名
+                code: string;          // 国家代码
+                val_cn: string;        // 国家中文名
+                num_supplier: string;   // 供应商数量
+                sum_amount: string;     // 总金额
+                sum_weight: string;     // 总重量
+                count: string;          // 交易次数
+            }>;
+            numBuckets: number;        // 总bucket数量
+        };
+    };
+}
+
+// 定义供应商报告响应数据类型
+export interface SupplierReportResponse {
+    status_code: number;
+    data: {
+        result: {
+            buckets: Array<{
+                val: string;           // 供应商名称
+                fk: string;            // 供应商唯一标识
+                num_buyer: string;     // 采购商数量
+                sum_amount: string;    // 总金额
+                sum_weight: string;    // 总重量
+                count: string;         // 交易次数
+            }>;
+            numBuckets: number;        // 总bucket数量
+        };
+    };
+}
+
+// 定义采购商分析请求参数类型
+export interface BuyerReportParams {
+    source_type?: number;
+    data_source?: string[];
+    date?: number[];
+    hs_code?: string;
+    supplier_t?: string;
+    buyer_t?: string;
+    [key: string]: any;
+}
+
+// 定义采购商分析响应数据类型
+export interface BuyerReportResponse {
+    status_code: number;
+    data: {
+        result: Array<{
+            val: string;           // 采购商名称
+            num_supplier: string;  // 供应商数量
+            sum_amount: string;    // 总金额
+            sum_weight: string;    // 总重量
+            count: string;         // 交易次数
+        }>;
+        numBuckets: number;        // 总bucket数量
+    };
+}
 
 /**
  * 获取交易详单列表及总数
@@ -80,3 +241,101 @@ export const list = async (params: TradeRecordQueryParams) => {
 export const listCompanies = (params) => {
     return defHttp.post({ url: Api.listCompanies, params });
 };
+
+/**
+ * 获取目的国统计数据
+ */
+export const getDestCountryReport = (params: DestCountryParams) => {
+    return defHttp.post<DestCountryResponse>(
+        {
+            url: Api.destCountry,
+            params
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+/**
+ * 获取趋势统计数据
+ */
+export const getTrendReport = (params: TrendParams) => {
+    return defHttp.post<TrendResponse>(
+        {
+            url: Api.trend,
+            params
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+/**
+ * 获取HS编码分析统计数据
+ */
+export const getHsCodeReport = (params: HsCodeParams) => {
+    return defHttp.post<HsCodeResponse>(
+        {
+            url: Api.hsCode,
+            params
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+/**
+ * 获取原产地统计数据
+ */
+export const getOrigCountryReport = (params: OrigCountryParams) => {
+    return defHttp.post<OrigCountryResponse>(
+        {
+            url: Api.origCountry,
+            params
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+/**
+ * 获取供应商报告统计数据
+ */
+export const getSupplierReport = async (params: DestCountryParams) => {
+    return defHttp.post<SupplierReportResponse>(
+        {
+            url: Api.supplierReport,
+            params
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+/**
+ * 获取采购商分析统计数据
+ */
+export const getBuyerReport = (params: BuyerReportParams) => {
+    return defHttp.post<BuyerReportResponse>(
+        {
+            url: Api.buyerReport,
+            params
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+

src/views/adweb/data/customsData.vue

@@ -245,7 +245,32 @@
 
             <a-tab-pane key="tradeAnalysis" tab="贸易类分析报告">
                 <div class="analysis-content">
-                    贸易类分析报告内容
+                    <div class="analysis-item">
+                        <trade-analysis 
+                            :monthly-trend-data="monthlyTrendData"
+                        />
+                    </div>
+                    <div class="analysis-item">
+                        <HsCodeAnalysis 
+                            :hs-code-data="hsCodeData" 
+                        />
+                    </div>
+                    <div class="analysis-item">
+                        <OriginCountryAnalysis 
+                            :origin-country-data="originCountryData"
+                        />
+                    </div>
+                    <div class="analysis-item">
+                        <DestinationCountryAnalysis 
+                            :destination-country-data="destinationCountryData"
+                        />
+                    </div>
+                    <div class="analysis-item">
+                        <SupplierList :supplierData="supplierData"/>
+                    </div>
+                    <div class="analysis-item">
+                        <BuyerList :buyerData="buyerData"/>
+                    </div>
                 </div>
             </a-tab-pane>
 
@@ -260,9 +285,15 @@
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue';
-import { list, listCompanies } from "./customsData.api";
+import { list, listCompanies, getTrendReport, getHsCodeReport, getOrigCountryReport, getDestCountryReport, getSupplierReport, getBuyerReport } from "./customsData.api";
 import { columns } from "./customsData.data";
 import CompanyList from './components/CompanyList.vue';
+import TradeAnalysis from './components/TradeAnalysis.vue';
+import HsCodeAnalysis from './components/HsCodeAnalysis.vue';
+import OriginCountryAnalysis from './components/OriginCountryAnalysis.vue';
+import DestinationCountryAnalysis from './components/DestinationCountryAnalysis.vue';
+import SupplierList from './components/SupplierList.vue';
+import BuyerList from './components/BuyerList.vue';
 
 // 当前激活的标签页
 const activeTabKey = ref('transaction');
@@ -520,8 +551,118 @@ const handleTabChange = async (key: string) => {
         } catch (error) {
             console.error('Failed to fetch companies:', error);
         }
+    } else if (key === 'tradeAnalysis') {
+        // 当切换到贸易类分析报告标签页时，加载月度趋势数据
+        try {
+            await Promise.all([
+                loadMonthlyTrendData(),
+                fetchHsCodeData(),
+                fetchOriginCountryData(),
+                fetchDestinationCountryData(),
+                fetchSupplierData(),
+                fetchBuyerData()
+            ]);
+        } catch (error) {
+            console.error('Failed to load analysis data:', error);
+        }
     }
 };
+
+// 月度趋势分析数据
+const monthlyTrendData = ref([]);
+
+// 加载月度趋势分析数据
+const loadMonthlyTrendData = async () => {
+    try {
+        const params = {
+            source_type: 1,
+            data_source: ['IMP_AMERICA_BL_SEA'],
+            ...queryParam
+        };
+
+        const res = await getTrendReport(params);
+        if (res.result.data.result && res.result.data.result) {
+            // 处理日期格式
+            monthlyTrendData.value = res.result.data.result.map(item => ({
+                ...item
+            }));
+        }
+        console.log(monthlyTrendData.value)
+    } catch (error) {
+        console.error('Failed to fetch data:', error);
+    } finally {
+        loading.value = false;
+    }
+
+};
+
+const hsCodeData = ref({});
+
+// 获取HS编码数据
+const fetchHsCodeData = async () => {
+    const params = {
+        source_type: 1,
+        data_source: ['IMP_AMERICA_BL_SEA'],
+        ...queryParam
+    };
+    const res = await getHsCodeReport(params);
+    hsCodeData.value = res.result.data.result;
+};
+
+const originCountryData = ref({});
+
+// 获取原产国数据
+const fetchOriginCountryData = async () => {
+    const params = {
+        source_type: 1,
+        data_source: ['IMP_AMERICA_BL_SEA'],
+        ...queryParam
+    };
+    const res = await getOrigCountryReport(params);
+    originCountryData.value = res.result.data.result;
+};
+
+const destinationCountryData = ref({});
+
+// 获取目的国数据
+const fetchDestinationCountryData = async () => {
+    const params = {
+        source_type: 1,
+        data_source: ['IMP_AMERICA_BL_SEA'],
+        ...queryParam
+    };
+    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);
+    buyerData.value = res.result.data.result;
+}
+onMounted(() => {
+    
+});
 </script>
 
 <style scoped lang="less">
@@ -606,11 +747,27 @@ const handleTabChange = async (key: string) => {
 
 // 分析报告内容样式
 .analysis-content {
-    min-height: 400px;
     padding: 24px;
-    background: #fafafa;
+    background: #fff;
     border-radius: 4px;
     border: 1px solid #f0f0f0;
+
+    .analysis-item {
+        margin-bottom: 24px; // 添加组件之间的间距
+
+        &:last-child {
+            margin-bottom: 0; // 最后一个组件不需要底部间距
+        }
+
+        :deep(.ant-card) {
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+            &:hover {
+                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+            }
+        }
+    }
 }
 
 // 表格工具栏样式