Refactor customs data components to enhance data presentation and interaction. Updated customsData.vue to include new import and export details tables, added freight introduction links, and improved data loading logic. Introduced CompanyProduct component for product visualization and enhanced RegionDistribution and TradePartners components for better data handling and display. Consolidated data fetching methods for improved performance.

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

@@ -0,0 +1,294 @@
+<template>
+    <a-card title="产品">
+        <div class="product-container">
+
+            <div class="product-section">
+                <h3>进口产品</h3>
+                <div class="switch-view">
+                    <a-radio-group v-model:value="importViewType" 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="importViewType === 'chart'" ref="importChartRef" :style="{ height, width }"></div>
+
+                <!-- 进口列表视图 -->
+                <div v-show="importViewType === 'table'">
+                    <a-table :columns="columns" :data-source="importTableData" :pagination="false">
+                        <template #bodyCell="{ column, record }">
+                            <template v-if="column.dataIndex === 'val'">
+                                {{ record.val }}
+                            </template>
+                        </template>
+                    </a-table>
+                </div>
+            </div>
+
+            <!-- 竖线分割 -->
+            <div class="divider"></div>
+
+            <div class="product-section">
+                <h3>出口产品</h3>
+                <div class="switch-view">
+                    <a-radio-group v-model:value="exportViewType" 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="exportViewType === 'chart'" ref="exportChartRef" :style="{ height, width }"></div>
+
+                <!-- 出口列表视图 -->
+                <div v-show="exportViewType === 'table'">
+                    <a-table :columns="columns" :data-source="exportTableData" :pagination="false">
+                        <template #bodyCell="{ column, record }">
+                            <template v-if="column.dataIndex === 'val'">
+                                {{ record.val }}
+                            </template>
+                        </template>
+                    </a-table>
+                </div>
+            </div>
+
+        </div>
+    </a-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref, onMounted, watch, computed, onUpdated } 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 importChartRef = ref<HTMLDivElement | null>(null);
+        const exportChartRef = ref<HTMLDivElement | null>(null);
+        const { setOptions: setImportChartOptions } = useECharts(importChartRef as Ref<HTMLDivElement>);
+        const { setOptions: setExportChartOptions } = useECharts(exportChartRef 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 updateChart = () => {
+            const importChartData = importTableData.value;
+            const exportChartData = exportTableData.value;
+
+            if (importChartData.length) {
+                setImportChartOptions({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow',
+                        },
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true,
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: importChartData.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',
+                            data: importChartData.map(item => item.count),
+                        }
+                    ],
+                });
+            }
+
+            if (exportChartData.length) {
+                setExportChartOptions({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow',
+                        },
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true,
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: exportChartData.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',
+                            data: exportChartData.map(item => item.count),
+                            itemStyle: {
+                                color: 'yellow'
+                            }
+                        }
+                    ],
+                });
+            }
+        };
+
+        watch(
+            () => props.hsCodeData,
+            () => {
+                updateChart();
+            },
+            { deep: true }
+        );
+
+        onMounted(() => {
+            updateChart();
+        });
+
+        // 新增进口视图类型
+        const importViewType = ref<'chart' | 'table'>('chart');
+        const exportViewType = ref<'chart' | 'table'>('chart');
+
+        // 计算进口表格数据
+        const importTableData = computed(() => {
+            return props.hsCodeData?.as_supplier?.buckets || [];
+        });
+
+        // 计算出口表格数据
+        const exportTableData = computed(() => {
+            return props.hsCodeData?.as_buyer?.buckets || [];
+        });
+
+        // 监听视图类型变化，更新图表
+        onUpdated(() => {
+            updateChart();
+        });
+
+        return {
+            importChartRef,
+            exportChartRef,
+            viewType,
+            columns,
+            formatNumber,
+            importViewType,
+            exportViewType,
+            importTableData,
+            exportTableData,
+        };
+    },
+});
+</script>
+
+<style scoped>
+.product-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.product-section {
+    width: 48%;
+    /* Adjust width as needed */
+}
+
+.switch-view {
+    text-align: right;
+    margin-bottom: 16px;
+}
+.divider {
+  width: 1px; /* 竖线的宽度 */
+  background-color: #ccc; /* 竖线的颜色 */
+  height: auto; /* 根据内容自动调整高度 */
+  margin: 0 16px; /* 左右间距 */
+}
+</style>

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

@@ -1,30 +1,88 @@
 <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 title="区域分布">
+        <div class="product-container">
+
+            <div class="product-section">
+                <h3>原产国</h3>
+                <div class="switch-view">
+                    <a-radio-group v-model:value="viewModeOrigin" 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="viewModeOrigin === 'chart'" ref="originChartRef" :style="{ height: '400px', width: '100%' }"></div>
+
+                <!-- 原产国列表视图 -->
+                <div v-show="viewModeOrigin === 'table'">
+                    <a-table
+                        :columns="originColumns"
+                        :data-source="originTableData"
+                        :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.dataIndex === 'count'">
+                                {{ formatNumber(record[column.dataIndex]) }}
+                            </template>
+                        </template>
+                    </a-table>
+                </div>
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="product-section">
+                <h3>目的国</h3>
+                <div class="switch-view">
+                    <a-radio-group v-model:value="viewModeDestination" 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="viewModeDestination === 'chart'" ref="destinationChartRef" :style="{ height: '400px', width: '100%' }"></div>
+
+                <!-- 目的国列表视图 -->
+                <div v-show="viewModeDestination === 'table'">
+                    <a-table
+                        :columns="destinationColumns"
+                        :data-source="destinationTableData"
+                        :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.dataIndex === 'count'">
+                                {{ formatNumber(record[column.dataIndex]) }}
+                            </template>
+                        </template>
+                    </a-table>
+                </div>
+            </div>
+
+        </div>
     </a-card>
 </template>
 
@@ -39,12 +97,34 @@ const props = defineProps({
     }
 });
 
-const chartRef = ref(null);
 const loading = ref(false);
-const viewMode = ref('chart');
-let chart = null;
+const viewModeOrigin = ref('chart');
+const viewModeDestination = ref('chart');
+const pagination = ref({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+});
+let originChart = null;
+let destinationChart = null;
 
-const columns = [
+const originChartRef = ref(null);
+const destinationChartRef = ref(null);
+
+const originColumns = [
+    {
+        title: '原产国',
+        dataIndex: 'origin_country',
+        key: 'origin_country',
+    },
+    {
+        title: '交易次数',
+        dataIndex: 'count',
+        key: 'count',
+    }
+];
+
+const destinationColumns = [
     {
         title: '目的国',
         dataIndex: 'val_cn',
@@ -57,38 +137,51 @@ const columns = [
     }
 ];
 
-const formatNumber = (num: string | number) => {
-    return Number(num).toLocaleString();
-};
-
-const formatDecimal = (num: string | number) => {
-    return Number(num).toLocaleString(undefined, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-    });
-};
+const originTableData = computed(() => {
+    if (!props.data?.as_buyer?.buckets) return [];
+    
+    return props.data.as_buyer.buckets.map((item, index) => ({
+        key: index,
+        origin_country: item.origin_country || item.origin,
+        count: item.count,
+    }));
+});
 
-const tableData = computed(() => {
-    if (!props.data?.buckets) return [];
+const destinationTableData = computed(() => {
+    if (!props.data?.as_supplier?.buckets) return [];
     
-    return props.data.buckets.map((item, index) => ({
+    return props.data.as_supplier.buckets.map((item, index) => ({
         key: index,
         val_cn: item.val_cn || item.val,
         count: item.count,
     }));
 });
 
-const initChart = () => {
-    if (!chartRef.value) return;
+// Define the formatNumber function
+const formatNumber = (num: string | number) => {
+    return Number(num).toLocaleString();
+};
+
+const initOriginChart = () => {
+    const chartRef = originChartRef.value;
+    if (!chartRef) return;
     
-    chart = echarts.init(chartRef.value);
-    updateChart();
+    originChart = echarts.init(chartRef);
+    updateOriginChart();
 };
 
-const updateChart = () => {
-    if (!chart || !props.data?.buckets) return;
+const initDestinationChart = () => {
+    const chartRef = destinationChartRef.value;
+    if (!chartRef) return;
+    
+    destinationChart = echarts.init(chartRef);
+    updateDestinationChart();
+};
+
+const updateOriginChart = () => {
+    if (!originChart || !props.data?.as_buyer?.buckets) return;
 
-    const data = props.data.buckets
+    const data = props.data.as_buyer.buckets
         .sort((a, b) => Number(b.count) - Number(a.count))
         .slice(0, 10);
     
@@ -102,37 +195,44 @@ const updateChart = () => {
                 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%'],
+                data: data.map(item => ({
+                    name: item.origin_country || item.origin,
+                    value: Number(item.count)
+                }))
+            }
+        ]
+    };
+
+    originChart.setOption(option);
+};
+
+const updateDestinationChart = () => {
+    if (!destinationChart || !props.data?.as_supplier?.buckets) return;
+
+    const data = props.data.as_supplier.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}%`;
+            }
         },
         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)
@@ -141,51 +241,69 @@ const updateChart = () => {
         ]
     };
 
-    chart.setOption(option);
+    destinationChart.setOption(option);
 };
 
 watch(
     () => props.data,
     () => {
-        updateChart();
+        updateOriginChart();
+        updateDestinationChart();
     },
     { deep: true }
 );
 
-watch(viewMode, (newValue) => {
+watch(viewModeOrigin, (newValue) => {
     if (newValue === 'chart') {
         nextTick(() => {
-            initChart();
+            initOriginChart();
+            initDestinationChart();
         });
     }
 });
 
 onMounted(() => {
-    if (viewMode.value === 'chart') {
-        initChart();
+    if (viewModeOrigin.value === 'chart') {
+        initOriginChart();
+        initDestinationChart();
     }
 });
 
 window.addEventListener('resize', () => {
-    if (viewMode.value === 'chart') {
-        chart?.resize();
-    }
+    originChart?.resize();
+    destinationChart?.resize();
 });
 
 onUnmounted(() => {
-    chart?.dispose();
+    originChart?.dispose();
+    destinationChart?.dispose();
     window.removeEventListener('resize', () => {
-        chart?.resize();
+        originChart?.resize();
+        destinationChart?.resize();
     });
 });
 </script>
 
 <style scoped>
-.ant-card {
-    margin-bottom: 24px;
+.product-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.product-section {
+    width: 48%; /* Adjust width as needed */
+}
+
+.switch-view {
+    text-align: right;
+    margin-bottom: 16px;
 }
 
-:deep(.ant-table-pagination) {
-    margin: 16px 0;
+/* 新增竖线分割样式 */
+.divider {
+    width: 1px; /* 竖线的宽度 */
+    background-color: #ccc; /* 竖线的颜色 */
+    height: auto; /* 根据内容自动调整高度 */
+    margin: 0 16px; /* 左右间距 */
 }
 </style> 

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

@@ -1,174 +1,301 @@
-<!-- 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>
+  <a-card title="贸易伙伴">
+      <div class="product-container">
+
+          <div class="product-section">
+              <h3>供应商</h3>
+              <div class="switch-view">
+                  <a-radio-group v-model:value="importViewType" 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="importViewType === 'chart'" ref="importChartRef" :style="{ height, width }"></div>
+
+              <!-- 进口列表视图 -->
+              <div v-show="importViewType === 'table'">
+                  <a-table :columns="columns" :data-source="importTableData" :pagination="false">
+                      <template #bodyCell="{ column, record }">
+                          <template v-if="column.dataIndex === 'val'">
+                              {{ record.val }}
+                          </template>
+                      </template>
+                  </a-table>
+              </div>
+          </div>
+
+          <!-- 竖线分割 -->
+          <div class="divider"></div>
+
+          <div class="product-section">
+              <h3>采购商</h3>
+              <div class="switch-view">
+                  <a-radio-group v-model:value="exportViewType" 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="exportViewType === 'chart'" ref="exportChartRef" :style="{ height, width }"></div>
+
+              <!-- 出口列表视图 -->
+              <div v-show="exportViewType === 'table'">
+                  <a-table :columns="buyerColumns" :data-source="exportTableData" :pagination="false">
+                      <template #bodyCell="{ column, record }">
+                          <template v-if="column.dataIndex === 'val'">
+                              {{ record.val }}
+                          </template>
+                      </template>
+                  </a-table>
+              </div>
+          </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: {
+  </a-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref, onMounted, watch, computed, onUpdated } from 'vue';
+import { useECharts } from '/@/hooks/web/useECharts';
+
+export default defineComponent({
+  props: {
       width: {
-        type: String as PropType<string>,
-        default: '100%',
+          type: String as PropType<string>,
+          default: '100%',
       },
       height: {
-        type: String as PropType<string>,
-        default: '350px',
+          type: String as PropType<string>,
+          default: '350px',
       },
       data: {
-        default: () => ({}),
+          default: () => ({}),
       },
-    },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  },
+  setup(props) {
+      const importChartRef = ref<HTMLDivElement | null>(null);
+      const exportChartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions: setImportChartOptions } = useECharts(importChartRef as Ref<HTMLDivElement>);
+      const { setOptions: setExportChartOptions } = useECharts(exportChartRef 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,
-        });
+          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';
+          {
+              title: '供应商',
+              dataIndex: 'val',
+              key: 'val',
           },
-        },
-      ];
-  
-      // 计算表格数据
-      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',
-            },
+          {
+              title: '交易次数',
+              dataIndex: 'count',
+              key: 'count',
+              customRender: ({ text }) => {
+                  return text ? Number(text).toLocaleString('en-US') : '0';
+              },
           },
-          
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
+      ];
+
+      const buyerColumns = [
+          {
+              title: '采购商',
+              dataIndex: 'val',
+              key: 'val',
           },
-          xAxis: {
-            type: 'category',
-            data: top10Data.map(item => item.val),
-            axisLabel: {
-              rotate: 45,
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
+          {
+              title: '交易次数',
+              dataIndex: 'count',
+              key: 'count',
+              customRender: ({ text }) => {
+                  return text ? Number(text).toLocaleString('en-US') : '0';
               },
-            },
           },
-          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]
-                }
-              })),
-            }
-          ],
-        });
+      ];
+
+      const updateChart = () => {
+          const importChartData = importTableData.value;
+          const exportChartData = exportTableData.value;
+
+          if (importChartData.length) {
+              setImportChartOptions({
+                  tooltip: {
+                      trigger: 'axis',
+                      axisPointer: {
+                          type: 'shadow',
+                      },
+                  },
+                  grid: {
+                      left: '3%',
+                      right: '4%',
+                      bottom: '3%',
+                      containLabel: true,
+                  },
+                  xAxis: {
+                      type: 'category',
+                      data: importChartData.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',
+                          data: importChartData.map(item => item.count),
+                      }
+                  ],
+              });
+          }
+
+          if (exportChartData.length) {
+              setExportChartOptions({
+                  tooltip: {
+                      trigger: 'axis',
+                      axisPointer: {
+                          type: 'shadow',
+                      },
+                  },
+                  grid: {
+                      left: '3%',
+                      right: '4%',
+                      bottom: '3%',
+                      containLabel: true,
+                  },
+                  xAxis: {
+                      type: 'category',
+                      data: exportChartData.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',
+                          data: exportChartData.map(item => item.count),
+                          itemStyle: {
+                              color: 'yellow'
+                          }
+                      }
+                  ],
+              });
+          }
       };
-  
+
       watch(
-        () => props.data,
-        () => {
-          updateChart();
-        },
-        { deep: true }
+          () => props.data,
+          () => {
+              updateChart();
+          },
+          { deep: true }
       );
-  
+
       onMounted(() => {
-        updateChart();
+          updateChart();
+      });
+
+      // 新增进口视图类型
+      const importViewType = ref<'chart' | 'table'>('chart');
+      const exportViewType = ref<'chart' | 'table'>('chart');
+
+      // 计算进口表格数据
+      const importTableData = computed(() => {
+          return props.data?.as_supplier?.buckets || [];
+      });
+
+      // 计算出口表格数据
+      const exportTableData = computed(() => {
+          return props.data?.as_buyer?.buckets || [];
+      });
+
+      // 监听视图类型变化，更新图表
+      onUpdated(() => {
+          updateChart();
       });
-  
+
       return {
-        chartRef,
-        viewType,
-        columns,
-        tableData,
-        formatNumber,
+          importChartRef,
+          exportChartRef,
+          viewType,
+          columns,
+          buyerColumns,
+          formatNumber,
+          importViewType,
+          exportViewType,
+          importTableData,
+          exportTableData,
       };
-    },
-  });
-  </script>
-  
-  <style scoped>
-  .switch-view {
-    text-align: right;
-    margin-bottom: 16px;
-  }
-  </style>
+  },
+});
+</script>
+
+<style scoped>
+.product-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.product-section {
+  width: 48%;
+  /* Adjust width as needed */
+}
+
+.switch-view {
+  text-align: right;
+  margin-bottom: 16px;
+}
+
+/* 新增竖线分割样式 */
+.divider {
+  width: 1px; /* 竖线的宽度 */
+  background-color: #ccc; /* 竖线的颜色 */
+  height: auto; /* 根据内容自动调整高度 */
+  margin: 0 16px; /* 左右间距 */
+}
+</style>

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

@@ -19,7 +19,8 @@ export const columns: BasicColumn[] = [
     {
         title: "货运介绍",
         align: "center",
-        dataIndex: "orig_country_cn",
+        dataIndex: "freight_intro",
+        key:"freight_intro",
         width: 100,
     },
     {

src/views/adweb/data/customsData.vue

@@ -227,6 +227,12 @@
             <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>
         <div :inert="isModalVisible">
@@ -248,7 +254,7 @@
                     <FreightHistory :data="freightHistoryData" />
                   </div>
                   <div class="analysis-item">
-                    <HsCodeAnalysis :hsCodeData="companyHsCodeData" />
+                    <CompanyProduct :hsCodeData="companyHsCodeData" />
                   </div>
                   <div class="analysis-item">
                     <TradePartners :data="tradePartnersData" />
@@ -258,8 +264,20 @@
                   </div>
                 </div>
               </a-tab-pane>
+              <a-tab-pane key="importDetails" tab="进口详单">
+                <!-- 新增表格展示进口详单 -->
+                <a-table :columns="importDetailsColumns" :data-source="importDetailsData" :loading="loading"
+                  :pagination="{
+                    current: paginationImportDetails.current,
+                    pageSize: paginationImportDetails.pageSize,
+                    total: paginationImportDetails.total,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                    showTotal: (total) => `共 ${total} 条`,
+                    onChange: handleTableChangeImportDetails,
+                  }" />
+              </a-tab-pane>
               <a-tab-pane key="exportDetails" tab="出口详单">
-                <!-- 新增表格展示出口详单 -->
                 <a-table :columns="exportDetailsColumns" :data-source="exportDetailsData" :loading="loading"
                   :pagination="{
                     current: paginationExportDetails.current,
@@ -271,12 +289,32 @@
                     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-tab-pane> -->
             </a-tabs>
           </a-modal>
         </div>
@@ -377,6 +415,8 @@ import IncotermsAnalysis from './components/IncotermsAnalysis.vue';
 import FreightHistory from './components/FreightHistory.vue';
 import TradePartners from './components/TradePartners.vue';
 import RegionDistribution from './components/RegionDistribution.vue';
+import CompanyProduct from './components/CompanyProduct.vue';
+import { index } from 'd3';
 
 const supplier = ref<{ name: string; address: string; postal_code: string } | null>(null);
 
@@ -605,7 +645,7 @@ const handleCompareClick = (company) => {
   console.log('Compare clicked for company:', company.name);
 };
 
-// 在 handleTabChange 中添加企业列表数据加载逻辑
+// Consolidate handleTabChange function
 const handleTabChange = async (key: string) => {
   activeTabKey.value = key;
   if (key === 'companies') {
@@ -618,30 +658,27 @@ const handleTabChange = async (key: string) => {
       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);
-    }
+    // Load trade analysis data
+    await Promise.all([
+      loadMonthlyTrendData(),
+      fetchHsCodeData(),
+      fetchOriginCountryData(),
+      fetchDestinationCountryData(),
+      fetchSupplierData(),
+      fetchBuyerData(),
+    ]);
   } else if (key === 'shippingAnalysis') {
-    try {
-      await Promise.all([
-        fetchOrigPortData(),
-        fetchDestPortData(),
-        fetchTransTypeData(),
-        fetchIncotermsData()
-      ])
-    } catch (error) {
-      console.error('Failed to load analysis data:', error);
-    }
+    // Load shipping analysis data
+    await Promise.all([
+      fetchOrigPortData(),
+      fetchDestPortData(),
+      fetchTransTypeData(),
+      fetchIncotermsData()
+    ]);
+  } else if (key === 'importTradingPartners') {
+    await loadImportTradingPartnersData(); // Load import trading partners data
+  } else if (key === 'exportTradingPartners') {
+    await loadExportTradingPartnersData(); // Load export trading partners data
   }
 };
 
@@ -788,12 +825,12 @@ const fetchIncotermsData = async () => {
 const isModalVisible = ref(false);
 
 // Add a new ref to store the selected supplierId
-const selectedSupplierId = ref<string | null>(null);
+const selectedComId = ref<string | null>(null);
 
-// Modify the handleSupplierClick function to set the selectedSupplierId
+// Modify the handleSupplierClick function to set the selectedComId
 const handleSupplierClick = async (supplierId) => {
   loading.value = true;
-  selectedSupplierId.value = supplierId; // Set the selected supplierId
+  selectedComId.value = supplierId; // Set the selected comId
   const params = {
     source_type: 1,
     data_source: ['IMP_AMERICA_BL_SEA'],
@@ -815,6 +852,34 @@ const handleSupplierClick = async (supplierId) => {
   await fetchRegionDistributionData();
 };
 
+const handleFreightIntroClick = async () => {
+
+}
+
+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,
+  };
+  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(',') : ''
+  };
+  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
@@ -823,7 +888,7 @@ const loadFreightHistoryData = async () => {
     const params = {
       source_type: 1,
       data_source: ['IMP_AMERICA_BL_SEA'],
-      com_id: selectedSupplierId.value,
+      com_id: selectedComId.value,
       ...queryParam,
     };
 
@@ -871,13 +936,22 @@ const fetchCompanyHsCodeData = async () => {
   const params = {
     source_type: 1,
     data_source: ['IMP_AMERICA_BL_SEA'],
-    com_id: selectedSupplierId.value,
+    com_id: selectedComId.value,
     com_role: 2,
     ...queryParam,
   };
   const res = await getCompanyHsCode(params);
-  console.log(res);
-  companyHsCodeData.value = res.data.result.as_supplier.hs_code;
+  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,
+  };
+  const res1 = await getCompanyHsCode(params1);
+  companyHsCodeData.value.as_buyer = res1.data.result.as_buyer?.hs_code;
+
 };
 
 // 贸易伙伴数据
@@ -888,12 +962,21 @@ const fetchTradePartnersData = async () => {
   const params = {
     source_type: 1,
     data_source: ['IMP_AMERICA_BL_SEA'],
-    com_id: selectedSupplierId.value,
+    com_id: selectedComId.value,
     com_role: 2,
     ...queryParam,
   };
   const res = await getCompanyPartner(params);
-  tradePartnersData.value = res.data.result.as_supplier.buyer;
+  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,
+  };
+  const res1 = await getCompanyPartner(params1);
+  tradePartnersData.value.as_buyer = res1.data.result.as_buyer.buyer;
 };
 
 const regionDistributionData = ref({});
@@ -902,12 +985,21 @@ const fetchRegionDistributionData = async () => {
   const params = {
     source_type: 1,
     data_source: ['IMP_AMERICA_BL_SEA'],
-    com_id: selectedSupplierId.value,
+    com_id: selectedComId.value,
     com_role: 2,
     ...queryParam,
   };
   const res = await getRegionDistribution(params);
-  regionDistributionData.value = res.data.result.as_supplier.dest_country;
+  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,
+  };
+  const res1 = await getRegionDistribution(params1);
+  regionDistributionData.value.as_buyer = res1.data.result.as_buyer.dest_country;
 };
 
 // Call the function to load data
@@ -922,6 +1014,8 @@ const handleTabChange1 = async (key: string) => {
   activeTabKey1.value = key;
   if (key === 'tradeOverview') {
     await loadFreightHistoryData(); // Load freight history data
+  } else if (key === 'importDetails') {
+    await loadImportDetailsData();
   } else if (key === 'exportDetails') {
     await loadExportDetailsData(); // Load export details data
   } else if (key === 'exportTradingPartners') {
@@ -976,7 +1070,7 @@ const loadExportDetailsData = async () => { // 新增加载出口详单数据的
     const params = {
       source_type: 1,
       data_source: ['IMP_AMERICA_BL_SEA'],
-      com_id: selectedSupplierId.value,
+      com_id: selectedComId.value,
       com_role: 2,
       ...queryParam,
     };
@@ -992,6 +1086,65 @@ const loadExportDetailsData = async () => { // 新增加载出口详单数据的
   }
 };
 
+const importDetailsData = ref([]); // 新增用于存储进口详单数据
+const importDetailsColumns = [ // 新增表格列定义
+  {
+    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 paginationImportDetails = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const handleTableChangeImportDetails = async (pag, filters, sorter) => {
+  paginationImportDetails.value.current = pag.current; // 更新当前页
+  paginationImportDetails.value.pageSize = pag.pageSize; // 更新每页条数
+  // 其他处理逻辑...
+};
+
+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,
+    };
+    const res = await getCompanyRecord(params);
+    importDetailsData.value = res.data.result.as_buyer.response.docs.map((item) => ({
+      ...item,
+      date: item.date ? item.date.split(' ')[0] : '', // 只保留日期部分
+    })); // 存储回的数据
+  } catch (error) {
+    console.error('Failed to fetch import details:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
 // 修改关闭弹窗的逻辑
 const closeModal = () => {
   activeTabKey1.value = 'tradeOverview'
@@ -1007,6 +1160,120 @@ 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;
+  }
+};
+
+// 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 paginationExportTradingPartners = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+// 新增处理出口贸易伙伴表格的分页和排序
+const handleTableChangeExportTradingPartners = async (pag, filters, sorter) => {
+  paginationExportTradingPartners.value.current = pag.current; // 更新当前页
+  paginationExportTradingPartners.value.pageSize = pag.pageSize; // 更新每页条数
+  // 其他处理逻辑...
+};
+
+// 新增加载出口贸易伙伴数据的方法
+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;
+  }
+};
 </script>
 
 <style scoped lang="less">