添加google广告页

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>
@@ -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";

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',
+      },
+      dataSource:{
+        default:{
+          x:[],
+          pv:[],
+        }
+    },
+    },
+    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.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,
+            }
+          ],
+        });
+      };
+
+      watch(
+        () => props.dataSource,
+        () => {
+          updateChart();
+        },
+        { deep: true }
+      );
+
+      onMounted(() => {
+        updateChart();
+      });
+
+      return { chartRef };
+    },
+  });
+</script>

src/views/adweb/marketing/googleads.vue

@@ -0,0 +1,604 @@
+<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 class="r2">
+        <a-col :span="6">
+            <p class="t1">账户名称</p>
+            <p class="t3">{{ 111 }}</p>
+        </a-col>
+        <a-col :span="6">
+            <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="t1">账户优化分数</p>
+            <p class="t3">{{ 444 }}</p>
+        </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" />
+              </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="columns"
+            :data-source="tableData"
+            :loading="loading"
+            :pagination="false"
+            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-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-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="false">
+                <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.enquires }} | {{ record.enquiresProportion }}
+                  </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 } 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';
+
+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 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 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;
+  getCountryMapData();
+}
+
+const switchChart = (type: string) => {
+  activeChart.value = type;
+};
+
+const columns = ref([
+  {
+    title: '广告系列名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+  },
+  {
+    title: '展示次数',
+    dataIndex: 'impressions',
+    key: 'impressions',
+  },
+  {
+    title: '点击次数',
+    dataIndex: 'clicks',
+    key: 'clicks',
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    key: 'ctr',
+  },
+  {
+    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: 'ctr',
+    key: 'ctr',
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+]);
+
+const positionColumns = ref([
+  {
+    title: '展示位置',
+    dataIndex: 'position',
+    key: 'position',
+  },
+  {
+    title: '展示次数',
+    dataIndex: 'impressions',
+    key: 'impressions',
+  },
+  {
+    title: '点击次数',
+    dataIndex: 'clicks',
+    key: 'clicks',
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    key: 'ctr',
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+]);
+
+const keywordData = ref([]);
+const positionData = ref([]);
+</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: 30px 20px;
+  margin: 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);
+    }
+  }
+}
+.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;
+    }
+  }
+}
+</style>
+