Merge branch 'master' into cpq-dev

index.html

@@ -161,7 +161,7 @@
           <div class="app-loading-dots">
             <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
           </div>
-          <div class="app-loading-title"><%= title %></div>
+          <!-- <div class="app-loading-title"><%= title %></div> -->
         </div>
       </div>
     </div>

src/hooks/setting/index.ts

@@ -1,6 +1,7 @@
 import type { GlobConfig } from '/#/config';
 
 import { getAppEnvConfig } from '/@/utils/env';
+import { windows } from "rimraf";
 
 export const useGlobSetting = (): Readonly<GlobConfig> => {
   const {
@@ -22,10 +23,17 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
   // }
 
   // 短标题：替换shortName的下划线为空格
-  const shortTitle = VITE_GLOB_APP_SHORT_NAME.replace(/_/g, " ");
+  let shortTitle = VITE_GLOB_APP_SHORT_NAME.replace(/_/g, " ");
+  let title = VITE_GLOB_APP_TITLE;
+
+  // TODO:: 待域名申请好之后修改配置
+  if (window.location.hostname != 'v3.adwebcloud.com') {
+    shortTitle = '苏豪通';
+    title = '苏豪通'
+  }
   // Take global configuration
   const glob: Readonly<GlobConfig> = {
-    title: VITE_GLOB_APP_TITLE,
+    title: title,
     domainUrl: VITE_GLOB_DOMAIN_URL,
     apiUrl: VITE_GLOB_API_URL,
     shortName: VITE_GLOB_APP_SHORT_NAME,

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/DeviceStatsPV.vue

@@ -0,0 +1,144 @@
+<template>
+        <!-- 图表视图 -->
+        <div ref="chartRef" style="height: 550px"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps({
+    deviceStats: {
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+// 格式化整数
+const formatNumber = (num: string | number) => {
+    return Number(num).toLocaleString();
+};
+
+
+const updateChart = () => {
+    if (!chart || !props.deviceStats) return;
+
+    // 获取前10个数据并计算总数
+    const data = props.deviceStats
+        .sort((a, b) => Number(b.pageViews) - Number(a.pageViews));
+    
+    const total = data.reduce((sum, item) => sum + Number(item.pageViews), 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.device,
+                    value: item.pageViews
+                }))
+            }
+        ]
+    };
+
+    chart.setOption(option);
+};
+
+// 监听数据变化
+watch(
+    () => props.deviceStats,
+    () => {
+        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/DeviceStatsUV.vue

@@ -0,0 +1,145 @@
+<template>
+        <!-- 图表视图 -->
+        <div ref="chartRef" style="height: 550px"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps({
+    deviceStats: {
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+// 格式化整数
+const formatNumber = (num: string | number) => {
+    return Number(num).toLocaleString();
+};
+
+
+const updateChart = () => {
+    if (!chart || !props.deviceStats) return;
+
+    // 获取前数据并计算总数
+    const data = props.deviceStats
+        .sort((a, b) => Number(b.totalUsers) - Number(a.totalUsers));
+    
+    const total = data.reduce((sum, item) => sum + Number(item.totalUsers), 0);
+
+    console.log(total, data)
+    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.device,
+                    value: item.totalUsers
+                }))
+            }
+        ]
+    };
+
+    chart.setOption(option);
+};
+
+// 监听数据变化
+watch(
+    () => props.deviceStats,
+    () => {
+        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/HsCodeAnalysis.vue

@@ -0,0 +1,186 @@
+<!-- src/views/adweb/data/components/HsCodeAnalysis.vue -->
+<template>
+    <a-card title="产品">
+      <div>
+        <div class="switch-view">
+          <a-radio-group v-model:value="viewType" button-style="solid">
+            <a-radio-button value="chart">图表</a-radio-button>
+            <a-radio-button value="table">列表</a-radio-button>
+          </a-radio-group>
+        </div>
+        
+        <!-- 图表视图 -->
+        <div v-show="viewType === 'chart'" ref="chartRef" :style="{ height, width }"></div>
+        
+        <!-- 列表视图 -->
+        <div v-show="viewType === 'table'">
+          <a-table :columns="columns" :data-source="tableData" :pagination="false">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.dataIndex === 'val'">
+                {{ record.val }}
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </a-card>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent, PropType, ref, Ref, onMounted, watch, computed } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  
+  export default defineComponent({
+    props: {
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: '350px',
+      },
+      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,38 @@
 
             <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>
+                    <a-row :gutter="16"> <!-- 新增行 -->
+                        <a-col :span="12"> <!-- 左侧列 -->
+                            <div class="analysis-item">
+                                <OriginCountryAnalysis 
+                                    :origin-country-data="originCountryData"
+                                />
+                            </div>
+                        </a-col>
+                        <a-col :span="12"> <!-- 右侧列 -->
+                            <div class="analysis-item">
+                                <DestinationCountryAnalysis 
+                                    :destination-country-data="destinationCountryData"
+                                />
+                            </div>
+                        </a-col>
+                    </a-row>
+                    <div class="analysis-item">
+                        <SupplierList :supplierData="supplierData"/>
+                    </div>
+                    <div class="analysis-item">
+                        <BuyerList :buyerData="buyerData"/>
+                    </div>
                 </div>
             </a-tab-pane>
 
@@ -260,9 +291,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 +557,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 +753,24 @@ const handleTabChange = async (key: string) => {
 
 // 分析报告内容样式
 .analysis-content {
-    min-height: 400px;
-    padding: 24px;
-    background: #fafafa;
-    border-radius: 4px;
-    border: 1px solid #f0f0f0;
+    background: #fff;
+
+    .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);
+            }
+        }
+    }
 }
 
 // 表格工具栏样式

src/views/adweb/data/trafficAnalysis.vue

@@ -114,7 +114,29 @@
           </a-row>
         </a-card>
       </a-col>
+
+      <a-col :span="12">
+        <a-card style="margin: 10px" title="访客数设备分布">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-col :span="24">
+              <DeviceStatsUV :deviceStats="deviceStats"></DeviceStatsUV>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card style="margin: 10px" title="浏览量设备分布">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-col :span="24">
+              <DeviceStatsPV :deviceStats="deviceStats"></DeviceStatsPV>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+
+      <!-- 来源媒介 -->
       <a-col :span="24">
+        
         <a-card style="margin: 10px" title="来源媒介">
           <a-row class="r5" :gutter="[20,20]">
             <a-col :span="24">
@@ -169,6 +191,8 @@
           </a-row>
         </a-card>
       </a-col>
+
+      <!-- 最多访问TOP10 -->
       <a-col :span="24">
         <a-card style="margin: 10px" title="最多访问TOP10">
           <a-row class="r5" :gutter="[20,20]">
@@ -212,9 +236,11 @@
 <script lang="ts" name="data-trafficAnalysis" setup>
 import selectSite from "@/components/Adweb/selectSite.vue";
 import areaChart from "./chart/areaChart.vue";
-import { reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 import { getAction } from "@/api/manage/manage";
 import MapAdweb from "@/components/chart/mapAdweb.vue";
+import DeviceStatsPV from "./components/DeviceStatsPV.vue";
+import DeviceStatsUV from "./components/DeviceStatsUV.vue";
 import "flag-icon-css/css/flag-icons.css";
 import dayjs from 'dayjs';
 
@@ -354,6 +380,7 @@ function reloadData() {
   getCountryMapData();
   getMediaList();
   getMostAccessList();
+  getDeviceStats();
 }
 
 const flowIndexNums = ref({
@@ -446,7 +473,6 @@ const getCountryMapData = async () => {
         name: entry.countryName,
         value: entry.totalUsers
       }));
-      console.log("countryMapData", countryMapData.value);
     }
   } catch (error) {
     console.error(error);
@@ -454,6 +480,22 @@ const getCountryMapData = async () => {
 };
 const mediaDatasource = ref([]);
 
+const deviceStats = ref([]); // 设备统计数据
+
+// 新增获取设备统计数据的函数
+const getDeviceStats = async () => {
+  try {
+    const res = await getAction("/dmp-data/device/stats", queryParam);
+    if (res.code === 200) {
+      deviceStats.value = res.result; // Update the deviceStats with the response
+    } else {
+      deviceStats.value = []; // Reset if there's an error
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 //来源媒介列表、最多访问top10列表
 const getMediaList = async () => {
   try {
@@ -487,9 +529,7 @@ const rangeDate = ref([]);
 
 const onChangeDatePicker = (date, dateString) => {
   if (dateString.length > 0) {
-    console.log("rangeDate:", rangeDate.value);
     rangeDate.value = date;
-    console.log("date:", date);
     queryParam.start = dateString[0];
     queryParam.end = dateString[1];
     queryParam.dateType = undefined;

src/views/adweb/enquiry/AdwebEnquiry.data.ts

@@ -5,6 +5,7 @@ export const columns: BasicColumn[] = [
     title: '站点名称',
     align: 'left',
     dataIndex: 'siteName',
+    defaultHidden: true
   },
   {
     title: '姓名',
@@ -17,7 +18,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'fromEmail',
   },
   {
-    title: 'whatsApp',
+    title: 'WhatsApp',
     align: 'left',
     dataIndex: 'whatsApp',
     customRender: function ({ text }) {
@@ -46,6 +47,7 @@ export const columns: BasicColumn[] = [
     title: '来源IP',
     align: 'left',
     dataIndex: 'fromIp',
+    defaultHidden: true,
 
     customRender: function ({ text, record }) {
       if (text == null || text == '' || text == undefined) {
@@ -99,6 +101,7 @@ export const columns: BasicColumn[] = [
     title: '来源插件',
     align: 'left',
     dataIndex: 'pluginName',
+    defaultHidden: true
   },
   {
     title: '询盘时间',
@@ -109,7 +112,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '入库时间',
+    title: '创建时间',
     align: 'left',
     dataIndex: 'ctime',
     customRender: function ({ text }) {
@@ -123,6 +126,7 @@ export const wasteColumns: BasicColumn[] = [
     title: '站点名称',
     align: 'left',
     dataIndex: 'siteName',
+    defaultHidden: true
   },
   {
     title: '姓名',
@@ -211,7 +215,7 @@ export const wasteColumns: BasicColumn[] = [
     },
   },
   {
-    title: '入库时间',
+    title: '创建时间',
     align: 'left',
     dataIndex: 'ctime',
     customRender: function ({ text }) {
@@ -260,7 +264,7 @@ export const superQuerySchema = {
   transContent: { title: 'transContent', order: 35, view: 'textarea', type: 'string' },
   countryCode: { title: '国家code', order: 36, view: 'text', type: 'string' },
   countryName: { title: '国家名', order: 37, view: 'text', type: 'string' },
-  whatsApp: { title: 'whatsApp', order: 38, view: 'text', type: 'string' },
+  whatsApp: { title: 'WhatsApp', order: 38, view: 'text', type: 'string' },
   wasteEnquiry: { title: '0：不是；1：是', order: 39, view: 'number', type: 'number' },
   pushStatus: { title: '推送状态，0：待发送，1：成功，2不予发送', order: 40, view: 'number', type: 'number' },
   pushErrorNum: { title: '推送错误次数', order: 41, view: 'number', type: 'number' },
@@ -271,7 +275,7 @@ export const superQuerySchema = {
   fromPage: { title: '来源页面', order: 46, view: 'text', type: 'string' },
   customerIp: { title: 'form表单传入Ip', order: 47, view: 'text', type: 'string' },
   phone: { title: '手机号', order: 48, view: 'text', type: 'string' },
-  whatsapp: { title: 'whatsapp', order: 49, view: 'text', type: 'string' },
+  whatsapp: { title: 'WhatsApp', order: 49, view: 'text', type: 'string' },
   readStatus: { title: '阅读状态，0是未阅读，1是已阅读', order: 50, view: 'number', type: 'number' },
   principalUid: { title: '负责人的id', order: 51, view: 'text', type: 'string' },
   principalType: { title: '0代表系统根据规则分配，1代表主账户指定', order: 52, view: 'number', type: 'number' },

src/views/adweb/enquiry/modules/enquiryDetail.vue

@@ -28,7 +28,7 @@
         <p><span>姓名：</span>{{ filter_Null_format(record.contact)}}</p>
         <p><span>邮箱：</span><a :href="'mailto:'+record.fromEmail">{{filter_Null_format(record.fromEmail)}}</a></p>
         <p><span>电话：</span>{{ filter_Null_format(record.phone)}}</p>
-        <p><span>whatsApp：</span>{{filter_Null_format(record.whatsApp)}}</p>
+        <p><span>WhatsApp：</span>{{filter_Null_format(record.whatsApp)}}</p>
         <p><span>客户IP：</span>{{ filter_Null_format(record.customerIp) }}</p>
         <p style="display: none"><span>来源IP：</span>{{ filter_Null_format(record.fromIp) }}</p>
         <p><span>来源国家/地区：</span>{{ filter_Null_format(record.countryName) }}</p>

src/views/adweb/marketing/googleads.vue

@@ -86,7 +86,7 @@
                         @click="switchChart('impression')">展示</a-button>
                       <a-button :class="{ active: activeChart === 'clicks' }"
                         @click="switchChart('clicks')">点击</a-button>
-                      <a-button :class="{ active: activeChart === 'ctr' }" @click="switchChart('ctr')">点击率</a-button>
+                      <a-button :class="{ active: activeChart === 'ctr' }" @click="switchChart('ctr')">点击率（%）</a-button>
                       <a-button :class="{ active: activeChart === 'conversion' }"
                         @click="switchChart('conversion')">转化数</a-button>
                       <a-button :class="{ active: activeChart === 'cost' }" @click="switchChart('cost')">花费</a-button>
@@ -175,8 +175,7 @@
 </template>
 
 <script setup lang="ts" name="marketing-googleads">
-import { getAction } from '@/api/manage/manage';
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive } from 'vue';
 import dayjs from 'dayjs';
 import selectSite from "@/components/Adweb/selectSite.vue";
 import LineChart from './charts/Line.vue';
@@ -298,7 +297,7 @@ const getDailyStats = async () => {
         dates: sortedData.map(item => item.date),
         impression: sortedData.map(item => Number(item.impressions) || 0),
         clicks: sortedData.map(item => Number(item.clicks) || 0),
-        ctr: sortedData.map(item => Number(item.ctr) || 0),
+        ctr: sortedData.map(item => (Number(item.ctr) * 100).toFixed(2) || 0.00),
         conversion: sortedData.map(item => Number(item.conversions) || 0),
         cost: sortedData.map(item => Number(item.cost) || 0)
       };
@@ -343,16 +342,6 @@ const campaignColumns = ref([
     key: 'advertisingChannelType',
   },
   {
-    title: '出价策略',
-    dataIndex: 'biddingStrategyType',
-    key: 'biddingStrategyType',
-  },
-  {
-    title: '每日预算',
-    dataIndex: 'budget',
-    key: 'budget',
-  },
-  {
     title: '展示数',
     dataIndex: 'impressions',
     key: 'impressions',
@@ -363,10 +352,12 @@ const campaignColumns = ref([
     key: 'clicks',
   },
   {
-    title: '点击率',
+    title: '点击率(%)',
     dataIndex: 'ctr',
     key: 'ctr',
-    customRender: ({ text }) => `${text.toFixed(2)}`
+    customRender: ({ text }) => {
+            return text ? (Number(text) * 100).toFixed(2) + '%' : '0.00%';
+        },
   },
   {
     title: 'CPC',
@@ -377,14 +368,6 @@ const campaignColumns = ref([
     customRender: ({ text }) => `${text.toFixed(2)}`
   },
   {
-    title: 'CPM',
-    dataIndex: 'averageCpm',
-    key: 'cpm',
-    slots: { customRender: 'cpm' },
-    tooltip: '千次展示费用',
-    customRender: ({ text }) => `${text.toFixed(2)}`  
-  },
-  {
     title: '转化数',
     dataIndex: 'conversions',
     key: 'conversions',
@@ -495,7 +478,7 @@ const getCustomerStats = async () => {
       customerId: stats.customerId ?? '-',
       descriptiveName: stats.descriptiveName ?? '-',
       currency: stats.currencyCode ?? '',
-      balance: stats.balance ? formatNumber(stats.balance) : '-',
+      balance: stats.balance ? formatNumber(stats.balance) : '0',
       cost: stats.cost ? formatNumber(stats.cost) : '-',
       conversions: stats.conversions ? formatNumber(stats.conversions) : '-',
       optiScore: stats.optiScore ? stats.optiScore * 100 : 0

src/views/adweb/seo/SeoPdfExport.vue

@@ -16,17 +16,7 @@
           </a-button>
           <SeoPdfExportModal @register="registerModal" @success="handleSuccess"></SeoPdfExportModal>
           <a-form-item label="站点名称" name="siteName">
-            <a-select
-              label-in-value
-              v-model:value="formState.siteName"
-              placeholder="请选择站点"
-              showSearch
-              style="width: 100%"
-              :options="siteOptions"
-              :filter-option="filterOption"
-              @change="handleChange"
-              :field-names="{ label: 'name', value: 'code' }"
-            ></a-select>
+            <SelectSite @set-site-info="handleChange"></SelectSite>
           </a-form-item>
           <a-form-item label="客户名称" name="customerName">
             <a-input placeholder="请输入客户名称" v-model:value="formState.customerName"
@@ -71,7 +61,7 @@
           </section>
           <section class="s1">
             <p class="p1" style="font-size: 15px;margin-top: 15px">
-              尊敬的【{{ formState.siteName.label
+              尊敬的【{{ formState.siteName.name
               }}】：</p>
             <p class="p1" style="text-indent: 28px">
               我非常高兴向您呈上{{ dayjs(formState.range).format("YYYY-MM")
@@ -391,7 +381,7 @@ const [registerModal, { openModal }] = useModal();
 import { useMessage } from "@/hooks/web/useMessage";
 import AreaChart from "@/views/adweb/data/chart/areaChart.vue";
 import { JUpload } from "@/components/Form/src/jeecg/components/JUpload";
-import { PageEnum } from "@/enums/pageEnum";
+import SelectSite from "@/components/Adweb/selectSite.vue"
 import { router } from "@/router";
 
 const fileList = ref([]);
@@ -498,8 +488,9 @@ const wrapperCol = ref({ span: 18 });
 const flag = ref(true);
 const siteOptions = ref([]);
 
-const handleChange = (value: string) => {
-  formState.customerName = value.label;
+const handleChange = (value) => {
+  formState.siteName = value
+  formState.customerName = value.name;
 };
 
 const filterOption = (input: string, option: any) => {
@@ -552,7 +543,7 @@ const ipagination = ref({
 });
 const getInfo = () => {
   let queryParam = {
-    siteCode: formState.siteName.value,
+    siteCode: formState.siteName.code,
     start: dayjs(formState.range).startOf("month").format("YYYY-MM-DD"),
     end: dayjs(formState.range).endOf("month").format("YYYY-MM-DD")
   };
@@ -640,7 +631,7 @@ const mostAccessColumns = ref([
 const getMostAccessList = async () => {
   try {
     let queryParam = {
-      siteCode: formState.siteName.value,
+      siteCode: formState.siteName.code,
       limit: 10,
       start: dayjs(formState.range).startOf("month").format("YYYY-MM-DD"),
       end: dayjs(formState.range).endOf("month").format("YYYY-MM-DD")
@@ -659,7 +650,7 @@ const appointKeywordNum = ref(null);
 const longTailKeywordNum = ref(null);
 const getComprehenInfo = async () => {
   let d = {
-    siteCode: formState.siteName.value
+    siteCode: formState.siteName.code
   };
   await getAction("/seo/seoKeywordsRank/comprehensiveInfo", d).then(res => {
     if (res.code == 200) {
@@ -686,7 +677,7 @@ const rankInfo = ref({
 //获取三个list的数据
 const getRankInfo = () => {
   let d = {
-    siteCode: formState.siteName.value
+    siteCode: formState.siteName.code
   };
   getAction("/seo/seoKeywordsRank/getRankInfo", d).then(res => {
     if (res.code == 200) {
@@ -695,7 +686,7 @@ const getRankInfo = () => {
     }
   });
   let d2 = {
-    siteCode: formState.siteName.value,
+    siteCode: formState.siteName.code,
     exportMonth: formState.range.format("YYYY-MM")
   };
   getAction("seo/seoMonthPdf/getSeoKeywordsRank", d2).then(res => {

src/views/dashboard/Analysis/homePage/adweb3Home.vue

@@ -62,7 +62,7 @@
               </a-col>
               <a-col :span="8">
                 <div class="web-content">
-                  <p class="title">提单时间</p>
+                  <p class="title">创建时间</p>
                   <p class="content">
                     <span>{{ filter_Null_format(baseInfo.createTime) }}</span>
                   </p>

src/views/sys/login/LoginSelect.vue

@@ -146,11 +146,12 @@
         let multi_depart = loginResult.multi_depart;
         //0:无部门 1:一个部门 2:多个部门
         if (multi_depart == 0) {
-          notification.warn({
-            message: '提示',
-            description: `您尚未归属部门,请确认账号信息`,
-            duration: 3,
-          });
+          //登陆时不弹部门检查弹框
+          // notification.warn({
+          //   message: '提示',
+          //   description: `您尚未归属部门,请确认账号信息`,
+          //   duration: 3,
+          // });
           isMultiDepart.value = false;
         } else if (multi_depart == 2) {
           isMultiDepart.value = true;

src/views/system/loginmini/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background-color: rgba(251, 251, 251, 1)">
+  <div class="login-bg">
     <a-row>
       <a-col :span="24">
         <div :class="prefixCls">
@@ -11,16 +11,16 @@
         </div>
       </a-col>
     </a-row>
+    
     <a-row>
+      
       <a-col :span="12">
-        <div class="login-bg">
-          <img :src="loginBg" alt="">
-        </div>
+        
       </a-col>
       <a-col :span="12" class="login-box">
         <div class="login-content">
           <div class="login-title">
-            登录 AdWeb V3
+            登录 苏豪通
           </div>
           <div class="login-form-box">
             <a-form ref="loginRef" :model="formData" @keyup.enter.native="loginHandleClick">
@@ -76,6 +76,7 @@
       </a-col>
     </a-row>
   </div>
+
 </template>
 <script lang="ts" setup name="login-mini">
 import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
@@ -85,7 +86,7 @@ import { useUserStore } from '/@/store/modules/user';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useI18n } from '/@/hooks/web/useI18n';
 import logoImg from '/@/assets/loginmini/icon/soho_logo.png';
-import loginBg from '/@/assets/loginmini/icon/login_bg.webp';
+import loginBg from '/@/assets/loginmini/icon/soho01.png';
 import { useLocaleStore } from '/@/store/modules/locale';
 import { useDesign } from "/@/hooks/web/useDesign";
 import { useAppInject } from "/@/hooks/web/useAppInject";
@@ -265,7 +266,12 @@ onMounted(() => {
   }
   .login-bg{
     width: 100%;
+    height: 100vh;
     z-index: -1;
+    background-image: url('/@/assets/loginmini/icon/soho01.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
   }
 </style>