google ads页面优化

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,7 +80,7 @@ onMounted(() => {
           '#a50026'
         ]
       },
-      text: ['High', 'Low'], // 文本，默认为数值文本
+      text: ['High', 'Low'],
       calculable: true
     },
     series: [
@@ -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/marketing/charts/Line.vue

@@ -16,10 +16,10 @@
         type: String as PropType<string>,
         default: '350px',
       },
-      dataSource:{
+      dailyStats:{
         default:{
-          x:[],
-          pv:[],
+          dates:[],
+          values:[]
         }
     },
     },
@@ -41,7 +41,7 @@
           },
           
           xAxis: {
-            data: props.dataSource.x,
+            data: props.dailyStats.dates,
             axisLine: {
               lineStyle: {
                 color: '#ccc',
@@ -58,7 +58,7 @@
           },
           series: [
             {
-              name: '访客数(UV)',
+              name: '',
               type: 'line',
               smooth: false,
               symbol: 'circle',
@@ -70,14 +70,14 @@
               itemStyle: {
                 color: '#53A2D3',
               },
-              data: props.dataSource.pv,
-            }
+              data: props.dailyStats.values,
+            },
           ],
         });
       };
 
       watch(
-        () => props.dataSource,
+        () => props.dailyStats,
         () => {
           updateChart();
         },

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

@@ -1,65 +1,103 @@
 <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>
+  <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">{{ customerStats.descriptiveName }}</p>
+          </a-col>
         </a-row>
-    </div>
-    <a-spin :spinning="loading" tip="加载中...">
         <a-row class="r2">
-        <a-col :span="6">
-            <p class="t1">账户名称</p>
-            <p class="t3">{{ 111 }}</p>
-        </a-col>
-        <a-col :span="6">
+          <a-col :span="8">
             <p class="t1">账户余额</p>
-            <p class="t3">{{ 222 }}</p>
-        </a-col>
-        <a-col :span="6">
-            <p class="t1">昨日花费</p>
-            <p class="t3">{{ 333 }}</p>
-        </a-col>
-        <a-col :span="6">
+            <p class="t3">
+              <span class="value">{{ customerStats.balance.value }}</span>
+              <span class="unit">{{ customerStats.balance.unit }}</span>
+            </p>
+          </a-col>
+          <a-col :span="8">
+            <p class="t1">总花费</p>
+            <p class="t3">
+              <span class="value">{{ customerStats.cost.value }}</span>
+              <span class="unit">{{ customerStats.cost.unit }}</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: 220px">
+          <a-col :span="24">
             <p class="t1">账户优化分数</p>
-            <p class="t3">{{ 444 }}</p>
-        </a-col>
+            <div class="score-circle" style="padding-bottom: 10px;">
+              <a-progress type="circle" :percent="customerStats.optiScore" :width="80" :stroke-color="{
+                '0%': '#FFB800',
+                '100%': '#FFC53D'
+              }" />
+            </div>
+          </a-col>
         </a-row>
-        <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">
-                <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" />
+                <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>
@@ -69,68 +107,61 @@
     <a-row>
       <a-col :span="24">
         <a-card style="margin: 10px" title="广告系列">
-          <a-table
-            :columns="columns"
-            :data-source="tableData"
-            :loading="loading"
-            :pagination="false"
-            style="width: 100%"
-          />
+          <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="false"
-            style="width: 100%"
-          />
+          <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="false"
-            style="width: 100%"
-          />
+          <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-row class="r5">
             <a-col :span="18">
-              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData"
-                         height="400"></map-adweb>
+              <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="false">
+              <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 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.enquires }} | {{ record.enquiresProportion }}
+                  <template v-if="column.key === 'numSlot'">
+                    {{ record.clicks }} | {{ record.impressions }}
                   </template>
                 </template>
               </a-table>
@@ -139,17 +170,26 @@
         </a-card>
       </a-col>
     </a-row>
-</a-spin>
+  </a-spin>
 
 </template>
 
 <script setup lang="ts" name="marketing-googleads">
 import { getAction } from '@/api/manage/manage';
-import { ref, reactive } from 'vue';
+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>({});
@@ -159,23 +199,23 @@ const loading = ref(false);
 const activeChart = ref('impression');
 const chartDetailData = ref([]);
 const countryMapData = ref([]);
-
-//访客数地域分布
-const getCountryMapData = async () => {
-  try {
-    const res = await getAction("/dmp-data/country/stats", queryParam);
-    if (res.code === 200) {
-      chartDetailData.value = res.result;
-      countryMapData.value = chartDetailData.value.map(entry => ({
-        name: entry.countryName,
-        value: entry.totalUsers
-      }));
-      console.log("countryMapData", countryMapData.value);
-    }
-  } catch (error) {
-    console.error(error);
+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;
@@ -222,15 +262,71 @@ const disabledDate = (current) => {
 
 //重新刷新页面数据
 const reloadData = () => {
-//   loading.value = true;
-  getCountryMapData();
+  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 columns = ref([
+const campaignColumns = ref([
   {
     title: '广告系列名称',
     dataIndex: 'name',
@@ -242,12 +338,27 @@ const columns = ref([
     key: 'status',
   },
   {
-    title: '展示次数',
+    title: '类型',
+    dataIndex: 'advertisingChannelType',
+    key: 'advertisingChannelType',
+  },
+  {
+    title: '出价策略',
+    dataIndex: 'biddingStrategyType',
+    key: 'biddingStrategyType',
+  },
+  {
+    title: '每日预算',
+    dataIndex: 'budget',
+    key: 'budget',
+  },
+  {
+    title: '展示数',
     dataIndex: 'impressions',
     key: 'impressions',
   },
   {
-    title: '点击次数',
+    title: '点击数',
     dataIndex: 'clicks',
     key: 'clicks',
   },
@@ -255,12 +366,32 @@ const columns = ref([
     title: '点击率',
     dataIndex: 'ctr',
     key: 'ctr',
+    customRender: ({ text }) => `${text}%`
+  },
+  {
+    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([]);
@@ -282,11 +413,6 @@ const keywordColumns = ref([
     key: 'clicks',
   },
   {
-    title: '点击率',
-    dataIndex: 'ctr',
-    key: 'ctr',
-  },
-  {
     title: '花费',
     dataIndex: 'cost',
     key: 'cost',
@@ -296,8 +422,8 @@ const keywordColumns = ref([
 const positionColumns = ref([
   {
     title: '展示位置',
-    dataIndex: 'position',
-    key: 'position',
+    dataIndex: 'placement',
+    key: 'placement',
   },
   {
     title: '展示次数',
@@ -310,11 +436,6 @@ const positionColumns = ref([
     key: 'clicks',
   },
   {
-    title: '点击率',
-    dataIndex: 'ctr',
-    key: 'ctr',
-  },
-  {
     title: '花费',
     dataIndex: 'cost',
     key: 'cost',
@@ -323,6 +444,162 @@ const positionColumns = ref([
 
 const keywordData = ref([]);
 const positionData = ref([]);
+
+// 修改响应式数据的类型定义
+const customerStats = ref({
+  descriptiveName: '-',
+  customerId: '-',
+  balance: {
+    value: '-',
+    unit: ''
+  },
+  cost: {
+    value: '-',
+    unit: ''
+  },
+  conversions: '-',
+  optiScore: 0
+});
+
+// 获取客户统计数据
+const getCustomerStats = async () => {
+  try {
+    loading.value = true;
+    const res = await getGoogleAdsCustomerStats(queryParam);
+    // 更新客户统计数据，处理 null 值
+    const stats = res;
+
+    // 处理余额和花费的分割
+    const balanceParts = (stats.balance ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
+    const costParts = (stats.cost ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
+
+    customerStats.value = {
+      descriptiveName: stats.descriptiveName ?? '-',
+      customerId: stats.customerId ?? '-',
+      balance: {
+        value: balanceParts ? balanceParts[1] : '-',
+        unit: balanceParts ? balanceParts[2] : ''
+      },
+      cost: {
+        value: costParts ? costParts[1] : '-',
+        unit: costParts ? costParts[2] : ''
+      },
+      conversions: 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,
+        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">
@@ -410,10 +687,11 @@ const positionData = ref([]);
     }
   }
 }
+
 .r2 {
   background: #fff;
-  padding: 30px 20px;
-  margin: 10px;
+  padding: 20px;
+  margin: 15px 10px 10px;
 
   .ant-col:not(:last-child) {
     border-right: 1px solid #e6e6e6;
@@ -426,6 +704,8 @@ const positionData = ref([]);
     &.t1 {
       color: #333;
       margin-bottom: 15px;
+      font-size: 18px;
+      font-weight: 800;
 
       img {
         margin-right: 10px;
@@ -448,9 +728,19 @@ const positionData = ref([]);
       letter-spacing: 0px;
       line-height: 38px;
       color: rgba(13, 62, 122, 1);
+
+      .value {
+        font-size: 32px;
+      }
+
+      .unit {
+        font-size: 16px;
+        margin-left: 4px;
+      }
     }
   }
 }
+
 .r5 {
   background: #fff;
   padding: 10px;
@@ -492,7 +782,7 @@ const positionData = ref([]);
     }
   }
 
-  /deep/ .ant-table-thead > tr > th {
+  /deep/ .ant-table-thead>tr>th {
     background: rgb(241, 248, 255);
     border: none;
     color: #000;
@@ -522,11 +812,11 @@ const positionData = ref([]);
       .ant-btn-group {
         .ant-btn {
           background: #f5f5f5;
-          
+
           &:hover {
             background: #fff;
           }
-          
+
           &.active {
             color: @primary-color;
             background: #e6f7ff;
@@ -600,5 +890,23 @@ const positionData = ref([]);
     }
   }
 }
-</style>
 
+.score-circle {
+  text-align: center;
+  margin-top: 40px;
+}
+
+// 添加表格样式
+:deep(.table-striped) {
+  background-color: #fafafa;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background: #f5f5f5;
+  font-weight: 500;
+}
+
+:deep(.ant-table-tbody > tr > td) {
+  border-bottom: 1px solid #f0f0f0;
+}
+</style>