adweb3-web/src/views/adweb/marketing/googleads.vue

<template>
  <div class="googlleads">
    <div class="search-form">
      <!-- 站点选择和时间筛选 -->
      <a-row class="r1 search-form-container" :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 />
                  </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" />
                <a-empty v-else style="margin-top: 50px" />
              </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.impressions }} | {{ record.clicks }} </template>
                  </template>
                </a-table>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script setup lang="ts" name="marketing-googleads">
  import { ref, reactive } 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) * 100).toFixed(2) || 0.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: 'impressions',
      key: 'impressions',
    },
    {
      title: '点击数',
      dataIndex: 'clicks',
      key: 'clicks',
    },
    {
      title: '点击率(%)',
      dataIndex: 'ctr',
      key: 'ctr',
      customRender: ({ text }) => {
        return text ? (Number(text) * 100).toFixed(2) + '%' : '0.00%';
      },
    },
    {
      title: 'CPC',
      dataIndex: 'averageCpc',
      key: 'cpc',
      slots: { customRender: 'cpc' },
      tooltip: '单次点击费用',
      customRender: ({ text }) => `${text.toFixed(2)}`,
    },
    {
      title: '转化数',
      dataIndex: 'conversions',
      key: 'conversions',
      customRender: ({ text }) => `${text.toFixed(2)}`,
    },
    {
      title: '花费',
      dataIndex: 'cost',
      key: 'cost',
      customRender: ({ text }) => `${text.toFixed(2)}`,
    },
  ]);

  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',
      customRender: ({ text }) => `${text.toFixed(2)}`,
    },
  ]);

  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',
      customRender: ({ text }) => `${text.toFixed(2)}`,
    },
  ]);

  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) : '0',
        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.impressions,
        }));

        // 处理表格数据
        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">
  .googlleads {
    padding-top: 72px;

    .search-form {
      position: fixed;
      width: 100%;
      z-index: 999;
      top: 110px;
      background-color: #f5f5f5;
      //background-color: var(--header-bg-color) !important;

      .search-form-container {
        align-items: center;
      }
    }
  }

  .r1 {
    margin: 20px;

    .choose-site {
      display: flex;
      align-items: center;

      :deep(.ant-form-item) {
        margin-bottom: 0;
      }
    }

    .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 0.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>