Merge branch 'master' into cpq-dev

package.json

@@ -33,7 +33,6 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "ant-design-vue": "^4.1.2",
     "axios": "^1.6.7",
-    "canvg": "1.5.3",
     "china-area-data": "^5.0.1",
     "clipboard": "^2.0.11",
     "codemirror": "^5.65.3",

src/components/chart/mapAdweb.vue

@@ -45,7 +45,14 @@ type EChartsOption = echarts.ComposeOption<
 import mapJson from '@/assets/data/worldGeo-zh.json'
 import { onMounted, defineProps, watch } from "vue";
 
+// 添加计算最大值的函数
+const getMaxValue = (data: any[]) => {
+  return Math.max(...data.map(item => item.value));
+};
+
 onMounted(() => {
+  // 获取数据最大值
+  const maxValue = getMaxValue(props.dataSource);
 
   // 定义ECharts配置项
   const option: EChartsOption = {
@@ -57,7 +64,7 @@ onMounted(() => {
     visualMap: {
       left: 'left',
       min: 0,
-      max: 500,
+      max: maxValue,
       inRange: {
         color: [
           '#313695',
@@ -73,12 +80,12 @@ onMounted(() => {
           '#a50026'
         ]
       },
-      text: ['High', 'Low'], // 文本，默认为数值文本
+      text: ['High', 'Low'],
       calculable: true
     },
     series: [
       {
-        name: '国家 访问数量',
+        name: '国家',
         type: 'map',
         map: 'world',
         emphasis: {
@@ -101,22 +108,23 @@ onMounted(() => {
   let myChart = echarts.init(chartDom);
   // 设置图表配置项
   myChart.setOption(option);
-
 })
 
 const props = defineProps({
   dataSource: []
 });
 // 使用watch监听特定的prop
-watch(() => props.dataSource, (newValue, oldValue) => {
-  // 当prop发生变化时执行的操作
-  // 获取图表容器
+watch(() => props.dataSource, (newValue) => {
   let chartDom = document.getElementById('mapChart');
-  // 初始化图表
   let myChart = echarts.init(chartDom);
-  // 设置图表配置项
-  // 在这里可以根据新值进行相应的操作，例如更新图表数据
-  myChart.setOption({ series: [{ data: newValue }] });
+  
+  // 获取新的最大值
+  const maxValue = getMaxValue(newValue);
+  
+  myChart.setOption({ 
+    visualMap: { max: maxValue },
+    series: [{ data: newValue }] 
+  });
 });
 </script>
 <template>

src/views/adweb/data/chart/enquiryChart.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, onMounted, watch } 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',
+      },
+      dataSource:{
+        default:{
+          x:[],
+          pv:[],
+          uv:[],
+          enquiry: []
+        }
+    },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+      const updateChart = () => {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line',
+              label: {
+                show: true,
+                backgroundColor: '#333',
+              },
+            },
+          },
+          legend: {
+            data: ['访客数(UV)', '浏览量(PV)', '询盘数(EN)'],
+            textStyle: {
+              color: '#ccc',
+            },
+          },
+          xAxis: {
+            data: props.dataSource.x,
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          yAxis: {
+            splitLine: { show: true },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          series: [
+            {
+              name: '访客数(UV)',
+              type: 'line',
+              smooth: false,
+              symbol: 'circle',
+              showAllSymbol: 'auto',
+              symbolSize: 6,
+              lineStyle: {
+                color: '#53A2D3',
+              },
+              itemStyle: {
+                color: '#53A2D3',
+              },
+              data: props.dataSource.pv,
+            },
+            {
+              name: '询盘数(EN)',
+              type: 'line',
+              symbol: 'circle',
+              z: -12,
+              lineStyle: {
+                color: '#399C5C',
+              },
+              itemStyle: {
+                color: '#399C5C',
+              },
+              data: props.dataSource.enquiry,
+            }
+          ],
+        });
+      };
+
+      watch(
+        () => props.dataSource,
+        () => {
+          updateChart();
+        },
+        { deep: true }
+      );
+
+      onMounted(() => {
+        updateChart();
+      });
+
+      return { chartRef };
+    },
+  });
+</script>

src/views/adweb/data/enquiryAnalysis.vue

@@ -47,8 +47,8 @@
           <a-row class="r5" :gutter="[20,20]">
             <a-row class="r5-1">
               <a-col :span="24">
-                <area-chart v-if="coreDataChart.x.length > 0"
-                            :dataSource="coreDataChart"></area-chart>
+                <enquiry-chart v-if="coreDataChart.x.length > 0"
+                            :dataSource="coreDataChart"></enquiry-chart>
                 <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
               </a-col>
             </a-row>
@@ -81,7 +81,7 @@
             </span>
                   </template>
                   <template v-if="column.key === 'numSlot' ">
-                    {{ record.totalUsers }} | {{ record.totalUsersProportion }}
+                    {{ record.enquires }} | {{ record.enquiresProportion }}
                   </template>
                 </template>
               </a-table>
@@ -94,7 +94,7 @@
 </template>
 <script lang="ts" name="data-enquiryAnalysis" setup>
 import selectSite from "@/components/Adweb/selectSite.vue";
-import areaChart from "./chart/areaChart.vue";
+import enquiryChart from "./chart/enquiryChart.vue";
 import { reactive, ref } from "vue";
 import { getAction } from "@/api/manage/manage";
 import MapAdweb from "@/components/chart/mapAdweb.vue";
@@ -199,14 +199,13 @@ const getFlowIndexNumber = async () => {
 };
 const getCountryMapData = async () => {
   try {
-    const res = await getAction("/dmp-data/country/stats", queryParam);
+    const res = await getAction("/dmp-data/enquiry-country/stats", queryParam);
     if (res.code === 200) {
       chartDetailData.value = res.result;
       countryMapData.value = chartDetailData.value.map(entry => ({
         name: entry.countryName,
-        value: entry.totalUsers
+        value: entry.enquires
       }));
-      console.log("countryMapData", countryMapData.value);
     }
   } catch (error) {
     console.error(error);

src/views/adweb/marketing/charts/Line.vue

@@ -0,0 +1,94 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, onMounted, watch } 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',
+      },
+      dailyStats:{
+        default:{
+          dates:[],
+          values:[]
+        }
+    },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+      const updateChart = () => {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line',
+              label: {
+                show: true,
+                backgroundColor: '#333',
+              },
+            },
+          },
+          
+          xAxis: {
+            data: props.dailyStats.dates,
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          yAxis: {
+            splitLine: { show: true },
+            axisLine: {
+              lineStyle: {
+                color: '#ccc',
+              },
+            },
+          },
+          series: [
+            {
+              name: '',
+              type: 'line',
+              smooth: false,
+              symbol: 'circle',
+              showAllSymbol: 'auto',
+              symbolSize: 6,
+              lineStyle: {
+                color: '#53A2D3',
+              },
+              itemStyle: {
+                color: '#53A2D3',
+              },
+              data: props.dailyStats.values,
+            },
+          ],
+        });
+      };
+
+      watch(
+        () => props.dailyStats,
+        () => {
+          updateChart();
+        },
+        { deep: true }
+      );
+
+      onMounted(() => {
+        updateChart();
+      });
+
+      return { chartRef };
+    },
+  });
+</script>

src/views/adweb/marketing/googleads.api.ts

@@ -0,0 +1,58 @@
+import {defHttp} from '/@/utils/http/axios';
+
+// 查询 Google Ads 账户数据
+export const getGoogleAdsCustomerStats = (params: {
+  siteCode: string;
+}) => {
+  return defHttp.get({url: '/marketing/googleads/customer/stats', params});
+};
+
+// 查询 Google Ads 每日统计数据
+export const getGoogleAdsDailyStats = (params: {
+    siteCode: string;
+    start?: string;
+    end?: string;
+    dateType?: string;
+  }) => {
+    return defHttp.get({url: '/marketing/googleads/daily/stats', params});
+  };
+
+// 查询 Google Ads 广告系列统计数据
+export const getGoogleAdsCampaignStats = (params: {
+  siteCode: string;
+  start?: string;
+  end?: string;
+  dateType?: string;
+}) => {
+  return defHttp.get({url: '/marketing/googleads/campaign/stats', params});
+};
+
+// 查询 Google Ads 关键词统计数据
+export const getGoogleAdsKeywordStats = (params: {
+  siteCode: string;
+  start?: string;
+  end?: string;
+  dateType?: string;
+}) => {
+  return defHttp.get({url: '/marketing/googleads/keyword/stats', params});
+};
+
+// 查询 Google Ads 展示位置统计数据
+export const getGoogleAdsPlacementStats = (params: {
+  siteCode: string;
+  start?: string;
+  end?: string;
+  dateType?: string;
+}) => {
+  return defHttp.get({url: '/marketing/googleads/placement/stats', params});
+};
+
+// 查询 Google Ads 国家统计数据
+export const getGoogleAdsCountryStats = (params: {
+  siteCode: string;
+  start?: string;
+  end?: string;
+  dateType?: string;
+}) => {
+  return defHttp.get({url: '/marketing/googleads/country/stats', params});
+};

src/views/adweb/marketing/googleads.vue

@@ -0,0 +1,927 @@
+<template>
+  <div class="search-form">
+    <!-- 站点选择和时间筛选 -->
+    <a-row class="r1" :gutter="8">
+      <a-col :xl="7" :xxl="6">
+        <div class="choose-site">
+          <span class="t1">站点：</span>
+          <select-site @set-site-info="changeSite" select-width="100%" />
+        </div>
+      </a-col>
+      <a-col :xl="8" :xxl="6">
+        <div class="choose-site">
+          <span class="t1">统计时间：</span>
+          <a-range-picker @change="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate"
+            style="width: 70%" />
+        </div>
+      </a-col>
+      <a-col :xl="9" :xxl="12">
+        <a-button-group class="time-btn-group">
+          <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
+          <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''"
+            @click="setTime('thirtyDay')">近30天</a-button>
+          <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''"
+            @click="setTime('sevenDay')">近一周</a-button>
+          <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''"
+            @click="setTime('yesterday')">昨日</a-button>
+          <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+        </a-button-group>
+      </a-col>
+    </a-row>
+  </div>
+  <a-spin :spinning="loading" tip="加载中...">
+    <a-row>
+      <a-col :span="16">
+        <a-row class="r2">
+          <a-col :span="24">
+            <p class="t3 company-name">{{ customerStats.descriptiveName }}</p>
+          </a-col>
+        </a-row>
+        <a-row class="r2">
+          <a-col :span="8">
+            <p class="t1">账户余额</p>
+            <p class="t3">
+              <span class="value">{{ customerStats.balance }}</span>
+              <span class="currency">{{ customerStats.currency }}</span>
+            </p>
+          </a-col>
+          <a-col :span="8">
+            <p class="t1">总花费</p>
+            <p class="t3">
+              <span class="value">{{ customerStats.cost }}</span>
+              <span class="currency">{{ customerStats.currency }}</span>
+            </p>
+          </a-col>
+          <a-col :span="8">
+            <p class="t1">转化数</p>
+            <p class="t3">{{ customerStats.conversions }}</p>
+          </a-col>
+        </a-row>
+      </a-col>
+      <a-col :span="8">
+        <a-row class="r2" style="height: 195px">
+          <a-col :span="24">
+            <p class="t1">优化得分</p>
+            <div class="score-circle" style="padding-bottom: 10px;">
+              <a-progress type="circle" :percent="customerStats.optiScore.toFixed(2)" :width="80" :stroke-color="{
+                '0%': '#FFB800',
+                '100%': '#FFC53D'
+              }" />
+            </div>
+          </a-col>
+        </a-row>
+      </a-col>
+    </a-row>
+
+    <a-row>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="核心数据">
+          <a-row class="r5" :gutter="8">
+            <a-row class="r5-1">
+              <a-col :span="24">
+                <template v-if="dailyStats.values && dailyStats.values.length > 0">
+                  <div class="fl">
+                    <a-button-group>
+                      <a-button :class="{ active: activeChart === 'impression' }"
+                        @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 === 'conversion' }"
+                        @click="switchChart('conversion')">转化数</a-button>
+                      <a-button :class="{ active: activeChart === 'cost' }" @click="switchChart('cost')">花费</a-button>
+                    </a-button-group>
+                  </div>
+
+                  <line-chart :chartType="activeChart" :dailyStats="dailyStats" />
+                </template>
+                <template v-else>
+                  <a-empty></a-empty>
+                </template>
+              </a-col>
+            </a-row>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="广告系列">
+          <a-table :columns="campaignColumns" :data-source="tableData" :loading="loading" :pagination="{
+            pageSize: 10,
+            showSizeChanger: false,
+            showQuickJumper: true,
+            showTotal: total => `共 ${total} 条`
+          }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+            style="width: 100%" />
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="8">
+      <a-col :span="12">
+        <a-card style="margin: 10px" title="TOP关键词">
+          <a-table :columns="keywordColumns" :data-source="keywordData" :loading="loading" :pagination="{
+            pageSize: 10,
+            showSizeChanger: false,
+            showQuickJumper: true,
+            showTotal: total => `共 ${total} 条`
+          }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+            style="width: 100%" />
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card style="margin: 10px" title="TOP展示位">
+          <a-table :columns="positionColumns" :data-source="positionData" :loading="loading" :pagination="{
+            pageSize: 10,
+            showSizeChanger: false,
+            showQuickJumper: true,
+            showTotal: total => `共 ${total} 条`
+          }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+            style="width: 100%" />
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="TOP国家/地区">
+          <a-row class="r5">
+            <a-col :span="18">
+              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400"></map-adweb>
+              <a-empty v-else style="margin-top: 50px;">
+              </a-empty>
+            </a-col>
+
+            <a-col :span="6">
+              <a-table :rowKey="(record, index) => { return index }" class="chartTable" :scroll="{ y: 500 }"
+                :pagination=false :columns="chartDetailDataCol" :data-source="chartDetailData" :showHeader="true">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'flagSlot'">
+                    <span class="img-box">
+                      <span :class="'flag-icon flag-icon-' + record.countryCode"></span>
+                    </span>
+                  </template>
+                  <template v-if="column.key === 'numSlot'">
+                    {{ record.clicks }} | {{ record.impressions }}
+                  </template>
+                </template>
+              </a-table>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-spin>
+
+</template>
+
+<script setup lang="ts" name="marketing-googleads">
+import { getAction } from '@/api/manage/manage';
+import { ref, reactive, onMounted } from 'vue';
+import dayjs from 'dayjs';
+import selectSite from "@/components/Adweb/selectSite.vue";
+import LineChart from './charts/Line.vue';
+import MapAdweb from '@/components/chart/mapAdweb.vue';
+import {
+  getGoogleAdsCustomerStats,
+  getGoogleAdsDailyStats,
+  getGoogleAdsCampaignStats,
+  getGoogleAdsKeywordStats,
+  getGoogleAdsPlacementStats,
+  getGoogleAdsCountryStats
+} from './googleads.api';
+import "flag-icon-css/css/flag-icons.css";
+
+const rangeDate = ref([]);
+const queryParam = reactive<any>({});
+queryParam.limit = 10;
+queryParam.siteCode = localStorage.getItem("siteCode");
+const loading = ref(false);
+const activeChart = ref('impression');
+const chartDetailData = ref([]);
+const countryMapData = ref([]);
+const chartDetailDataCol = ref([
+  {
+    title: '',
+    key: 'flagSlot',
+    width: '30px'
+  },
+  {
+    title: '国家/地区名称',
+    dataIndex: 'countryName',
+    key: 'countryName'
+  },
+  {
+    title: '点击数 | 展示数',
+    key: 'numSlot',
+    align: 'right'
+  }
+]);
+
+const changeSite = (selectedSiteInfo: any) => {
+  queryParam.siteCode = selectedSiteInfo.code;
+  localStorage.setItem("siteCode", queryParam.siteCode);
+  reloadData();
+}
+
+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;
+    reloadData();
+  }
+};
+
+const setTime = (time) => {
+  queryParam.dateType = time;
+  queryParam.start = "";
+  queryParam.end = "";
+
+  if (time == "") {
+    rangeDate.value = undefined;
+  } else if (time == "sevenDay") {
+    rangeDate.value = [dayjs().add(-7, 'd'), dayjs().add(-1, 'd')];
+  } else if (time == "thirtyDay") {
+    rangeDate.value = [dayjs().add(-30, 'd'), dayjs().add(-1, 'd')];
+  } else if (time == "yesterday") {
+    rangeDate.value = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')];
+  } else if (time == "today") {
+    rangeDate.value = [dayjs(), dayjs()];
+  }
+
+  reloadData();
+};
+
+//日期选择只能今天之前
+const disabledDate = (current) => {
+  return current && current > dayjs();
+}
+
+//重新刷新页面数据
+const reloadData = () => {
+  loading.value = true;
+  getCustomerStats();
+  getDailyStats();
+  getCampaignStats();
+  getKeywordStats();
+  getPlacementStats();
+  getCountryStats();
+  loading.value = false;
+}
+
+// 存储所有图表数据
+const allChartData = ref({
+  dates: [] as string[],
+  impression: [] as number[],
+  clicks: [] as number[],
+  ctr: [] as number[],
+  conversion: [] as number[],
+  cost: [] as number[]
+});
+
+// 修改 getDailyStats 函数
+const getDailyStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsDailyStats(queryParam);
+    if (res) {
+      // 按日期排序并保存原始数据
+      const sortedData = res.sort((a, b) =>
+        new Date(a.date).getTime() - new Date(b.date).getTime()
+      );
+
+      // 保存所有数据
+      allChartData.value = {
+        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),
+        conversion: sortedData.map(item => Number(item.conversions) || 0),
+        cost: sortedData.map(item => Number(item.cost) || 0)
+      };
+
+      // 设置初始显示数据
+      dailyStats.value = {
+        dates: allChartData.value.dates,
+        values: allChartData.value[activeChart.value] || []
+      };
+    }
+  } catch (error) {
+    console.error('获取每日统计数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 简化切换图表类型的函数
+const switchChart = (type: string) => {
+  activeChart.value = type;
+  // 直接使用已有数据更新图表
+  dailyStats.value = {
+    dates: allChartData.value.dates,
+    values: allChartData.value[type] || []
+  };
+};
+
+const campaignColumns = ref([
+  {
+    title: '广告系列名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+  },
+  {
+    title: '类型',
+    dataIndex: 'advertisingChannelType',
+    key: 'advertisingChannelType',
+  },
+  {
+    title: '出价策略',
+    dataIndex: 'biddingStrategyType',
+    key: 'biddingStrategyType',
+  },
+  {
+    title: '每日预算',
+    dataIndex: 'budget',
+    key: 'budget',
+  },
+  {
+    title: '展示数',
+    dataIndex: 'impressions',
+    key: 'impressions',
+  },
+  {
+    title: '点击数',
+    dataIndex: 'clicks',
+    key: 'clicks',
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    key: 'ctr',
+    customRender: ({ text }) => `${text.toFixed(2)}`
+  },
+  {
+    title: 'CPC',
+    dataIndex: 'averageCpc',
+    key: 'cpc',
+    slots: { customRender: 'cpc' },
+    tooltip: '单次点击费用'
+  },
+  {
+    title: 'CPM',
+    dataIndex: 'averageCpm',
+    key: 'cpm',
+    slots: { customRender: 'cpm' },
+    tooltip: '千次展示费用'
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversions',
+    key: 'conversions',
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+  }
+]);
+
+const tableData = ref([]);
+
+const keywordColumns = ref([
+  {
+    title: '关键词',
+    dataIndex: 'keyword',
+    key: 'keyword',
+  },
+  {
+    title: '展示次数',
+    dataIndex: 'impressions',
+    key: 'impressions',
+  },
+  {
+    title: '点击次数',
+    dataIndex: 'clicks',
+    key: 'clicks',
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+]);
+
+const positionColumns = ref([
+  {
+    title: '展示位置',
+    dataIndex: 'placement',
+    key: 'placement',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '展示次数',
+    dataIndex: 'impressions',
+    key: 'impressions',
+  },
+  {
+    title: '点击次数',
+    dataIndex: 'clicks',
+    key: 'clicks',
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+]);
+
+const keywordData = ref([]);
+const positionData = ref([]);
+
+// 修改响应式数据的类型定义
+const customerStats = ref({
+  customerId: '-',
+  descriptiveName: '-',
+  currency: '',
+  balance: '-',
+  cost: '-',
+  conversions: '-',
+  optiScore: 0
+});
+
+// 添加格式化数字的函数
+const formatNumber = (num: string | number) => {
+  if (!num) return '-';
+  // 处理字符串类型的数字
+  const numStr = typeof num === 'string' ? num : num.toString();
+  // 分离整数和小数部分
+  const parts = numStr.split('.');
+  // 对整数部分添加千位分隔符
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  // 重新组合整数和小数部分
+  return parts.join('.');
+};
+
+// 获取客户统计数据
+const getCustomerStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsCustomerStats(queryParam);
+    const stats = res;
+
+    // // 处理余额和花费的分割
+    // const balanceParts = (stats.balance ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
+    // const costParts = (stats.cost ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
+
+    customerStats.value = {
+      customerId: stats.customerId ?? '-',
+      descriptiveName: stats.descriptiveName ?? '-',
+      currency: stats.currencyCode ?? '',
+      balance: stats.balance ? formatNumber(stats.balance) : '-',
+      cost: stats.cost ? formatNumber(stats.cost) : '-',
+      conversions: stats.conversions ? formatNumber(stats.conversions) : '-',
+      optiScore: stats.optiScore ? stats.optiScore * 100 : 0
+    };
+  } catch (error) {
+    console.error('获取客户统计数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const dailyStats = ref({
+  dates: [] as string[],
+  values: [] as number[]
+});
+
+const getCampaignStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsCampaignStats(queryParam);
+    if (res) {
+      tableData.value = res.map(item => ({
+        name: item.name,
+        status: item.status,
+        advertisingChannelType: item.advertisingChannelType,
+        biddingStrategyType: item.biddingStrategyType,
+        budget: item.budget,
+        impressions: item.impressions,
+        clicks: item.clicks,
+        ctr: item.ctr,
+        averageCpc: item.averageCpc,
+        averageCpm: item.averageCpm,
+        conversions: item.conversions,
+        cost: item.cost
+      }));
+    }
+  } catch (error) {
+    console.error('获取广告系列数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getKeywordStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsKeywordStats(queryParam);
+    if (res) {
+      keywordData.value = res.map(item => ({
+        keyword: item.keyword,
+        impressions: item.impressions,
+        clicks: item.clicks,
+        ctr: item.ctr,
+        cost: item.cost
+      }));
+    }
+  } catch (error) {
+    console.error('获取关键词统计数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getPlacementStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsPlacementStats(queryParam);
+    if (res) {
+      positionData.value = res.map(item => ({
+        placement: item.placement,
+        type: item.type,
+        impressions: item.impressions,
+        clicks: item.clicks,
+        ctr: item.ctr,
+        cost: item.cost
+      }));
+    }
+  } catch (error) {
+    console.error('获取展示位置统计数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getCountryStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsCountryStats(queryParam);
+    if (res) {
+      // 处理地图数据
+      countryMapData.value = res.map(item => ({
+        name: item.countryName,
+        value: item.clicks,
+      }));
+
+      // 处理表格数据
+      chartDetailData.value = res.map(item => ({
+        countryCode: item.countryCode?.toLowerCase(),
+        countryName: item.countryName,
+        clicks: item.clicks,
+        impressions: item.impressions,
+      }));
+    }
+  } catch (error) {
+    console.error('获取国家统计数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  getCustomerStats();
+  getDailyStats();
+  getCampaignStats();
+  getKeywordStats();
+  getPlacementStats();
+  getCountryStats();
+});
+</script>
+
+<style scoped lang="less">
+.r1 {
+  margin: 20px;
+
+  .choose-site {
+    display: flex;
+  }
+
+  .t1 {
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 32px;
+    margin-left: 10px;
+  }
+
+  .ant-form-item {
+    flex: 1;
+  }
+
+  .ant-calendar-picker {
+    margin-right: 20px;
+  }
+
+
+  /deep/ .ant-btn {
+    background: transparent;
+    margin-right: 10px;
+    padding: 4px 15px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+
+    &.active {
+      color: @primary-color;
+      background: #e6f7ff;
+      border-color: @primary-color;
+    }
+  }
+
+  .time-btn-group {
+    /deep/ .ant-btn {
+      background: #fff;
+      padding: 4px 15px;
+      border: 1px solid #d9d9d9;
+      transition: all 0.3s;
+      margin-right: 0;
+
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+
+      &:not(:first-child) {
+        margin-left: -1px;
+      }
+
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+        position: relative;
+        z-index: 1;
+        background: #fff;
+      }
+
+      &.active {
+        color: @primary-color;
+        background: #e6f7ff;
+        border-color: @primary-color;
+        position: relative;
+        z-index: 2;
+      }
+    }
+  }
+}
+
+.r2 {
+  background: #fff;
+  padding: 20px;
+  margin: 15px 10px 10px;
+
+  .ant-col:not(:last-child) {
+    border-right: 1px solid #e6e6e6;
+  }
+
+  p {
+    margin: 0;
+    text-align: center;
+
+    &.t1 {
+      color: #333;
+      margin-bottom: 15px;
+
+      img {
+        margin-right: 10px;
+        width: 15px;
+        margin-top: -5px;
+      }
+    }
+
+    &.t2 {
+      color: @primary-color;
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+
+    &.t3 {
+      font-size: 32px;
+      font-weight: 700;
+      letter-spacing: 0px;
+      line-height: 38px;
+      color: rgba(13, 62, 122, 1);
+
+      .value {
+        font-size: 32px;
+      }
+
+      .currency {
+        font-size: 16px;
+        margin-left: 4px;
+      }
+
+      &.company-name {
+        font-size: 18px;
+        text-align: left;
+        line-height: 1;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.r5 {
+  background: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  margin: 0 !important;
+
+  .wrap {
+    box-shadow: 0px 2px 4px 0px @primary-color;
+    padding: 15px;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #fff;
+    transition: all .3s;
+
+    &.blue {
+      box-shadow: 0px 2px 4px 0px @primary-color;
+    }
+
+    &.effect:hover {
+      box-shadow: none;
+      background: rgb(241, 248, 255);
+    }
+
+    img {
+      width: 15px;
+    }
+
+    .fr {
+      float: right;
+      width: calc(100% - 15px);
+      text-align: center;
+
+      p:last-child {
+        font-size: 30px;
+        text-align: center;
+        margin-top: 10px;
+
+      }
+    }
+  }
+
+  /deep/ .ant-table-thead>tr>th {
+    background: rgb(241, 248, 255);
+    border: none;
+    color: #000;
+    padding: 10px;
+  }
+
+  /deep/ .ant-table-tbody .ant-table-row td {
+    padding: 10px;
+    color: #000;
+  }
+
+  .r5-1 {
+    display: inline-block;
+    width: 100%;
+    margin-top: 30px;
+
+    .fl {
+      float: left;
+      position: relative;
+
+      .ant-btn {
+        border-radius: 0;
+        border: none;
+        margin-right: 10px;
+      }
+
+      .ant-btn-group {
+        .ant-btn {
+          background: #f5f5f5;
+
+          &:hover {
+            background: #fff;
+          }
+
+          &.active {
+            color: @primary-color;
+            background: #e6f7ff;
+            border-color: @primary-color;
+            z-index: 2;
+          }
+        }
+      }
+    }
+
+    .fr {
+      float: right;
+      line-height: 2;
+
+      span {
+        margin-right: 30px;
+
+        i {
+          display: inline-block;
+          width: 25px;
+          height: 3px;
+          background: #544BEB;
+          position: relative;
+          top: -4px;
+          margin-right: 20px;
+        }
+
+        &:last-child i {
+          background: #F0B358;
+        }
+      }
+    }
+  }
+
+  .box {
+    border-radius: 10px;
+    text-align: center;
+    min-height: 180px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    p {
+      color: #fff;
+
+      img {
+        width: 19px;
+        margin: -5px 10px 0 0;
+      }
+    }
+
+    .num {
+      font-size: 30px;
+      margin-bottom: 10px;
+    }
+
+    &.b1 {
+      background: rgb(233, 107, 95);
+    }
+
+    &.b2 {
+      background: rgb(88, 204, 168);
+    }
+
+    &.b3 {
+      background: rgb(124, 152, 252);
+    }
+
+    &.b4 {
+      background: #F0B358;
+    }
+  }
+}
+
+.score-circle {
+  text-align: center;
+  margin-top: 20px;
+}
+
+// 添加表格样式
+:deep(.table-striped) {
+  background-color: #fafafa;
+}
+
+// 修改表格头部样式
+:deep(.ant-table-thead > tr > th) {
+  background: #e6f7ff !important;
+  font-weight: 700; // 字重改为700
+  color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
+}
+
+:deep(.ant-table-tbody > tr > td) {
+  border-bottom: 1px solid #f0f0f0;
+}
+</style>

src/views/adweb/seo/Pdf.vue

@@ -336,7 +336,7 @@
         <div class="col-sm-6" v-if="detailInfo?.outLinkImg?.length > 0">
           <p class="img-title">外链总数趋势</p>
           <div class="img-wrap-outlink">
-            <img :src="detailInfo.outLinkImg[0]" />
+            <img :src="detailInfo.outLinkImg[0].url" />
           </div>
 
           <div class="content" id="miaoshu1">
@@ -348,7 +348,7 @@
         <div class="col-sm-6" v-if="detailInfo?.outLinkImg2?.length > 0">
           <p class="img-title">外链变化趋势</p>
           <div class="img-wrap-outlink">
-            <img :src="detailInfo.outLinkImg2[0]" />
+            <img :src="detailInfo.outLinkImg2[0].url" />
           </div>
           <div class="content" id="miaoshu2">
             <p>
@@ -539,7 +539,6 @@ const longTailPageListColumns = ref([
 
 // 处理从 SeoPdfExport 接收的数据
 const handleSeoPdfExportData = (data) => {  
-  console.log(data);
   customerName.value = data.customerName;
   monthStr.value = data.monthStr;
   detailInfo.value = data.detailInfo;
@@ -594,7 +593,6 @@ const exportPdf = async () => {
 // 生命周期钩子
 onMounted(async () => {
   const pdfData = JSON.parse(localStorage.getItem('pdfExportData'));
-  console.log(pdfData);
   if (pdfData) {
     handleSeoPdfExportData(pdfData);
     // Wait for the next tick to ensure all data is rendered

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

@@ -661,4 +661,16 @@
     }
   }
 }
+
+// 添加表格头部样式
+:deep(.ant-table-thead > tr > th) {
+  background: #e6f7ff !important;
+  font-weight: 700; // 字重改为700
+  color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
+}
+
+// 添加斑马线样式
+:deep(.table-striped) {
+  background-color: #fafafa;
+}
 </style>