adweb3-web/src/views/adweb/data/trafficAnalysis.vue

<template>
  <div class="search-form">
    <!-- 站点选择和时间筛选 -->
    <a-row class="r1">
      <a-col :span="6">
        <div class="choose-site">
          <span class="t1">站点：</span>
          <select-site @set-site-info="changeSite" selectWidth="300px" />
        </div>
      </a-col>
      <a-col :span="8">
        <span class="t1">统计时间：</span>
        <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate"
                        style="width:70%" />
      </a-col>
      <a-col :span="10">
        <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-col>
    </a-row>
  </div>
  <a-spin :spinning="loading" tip="加载中...">
    <a-row class="r2">
      <a-col :span="6">
        <p class="t1"><img src="@/assets/trafficAnalysis/uvicon.svg" />访客数（UV）</p>
        <p class="t3">{{ flowIndexNums.uv }}</p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img src="@/assets/trafficAnalysis/pvicon.svg" />浏览量（PV）</p>
        <p class="t3">{{ flowIndexNums.pv }}</p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img src="@/assets/trafficAnalysis/sessions.svg" />会话数</p>
        <p class="t3">{{ flowIndexNums.sessions }}</p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img src="@/assets/trafficAnalysis/enquirycounticon.svg" />询盘数</p>
        <router-link
          :to="{ path: '/inquiry/list', query: {dateType: queryParam.dateType, start: queryParam.start, end: queryParam.end} }">
          <p class="t2">{{ flowIndexNums.enquiry }}</p>
        </router-link>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-card style="margin: 10px" title="核心数据">
          <a-row class="r5" :gutter="[20,20]">
            <a-row class="r5-1">
              <a-col :span="24">
                <div class="fr" v-if="coreDataChart.x.length > 0">
                  <span><i style="background: #544BEB;"></i>访客数（UV）</span>
                  <span><i style="background: #F0B358;"></i>浏览量（PV）</span>
                  <span><i style="background: #58CCA8;"></i>询盘数</span>
                </div>
                <area-chart v-if="coreDataChart.x.length > 0"
                            :dataSource="coreDataChart"></area-chart>
                <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
              </a-col>
            </a-row>
            <a-col style="width: 20%;">
              <div class="wrap">
                <img src="@/assets/trafficAnalysis/dailyVisitCount.svg" />
                <div class="fr">
                  <p>日均访问量</p>
                  <p style="font-size: 25px;">{{ statistics.averageVisit }}</p>
                </div>
              </div>
            </a-col>
            <a-col style="width: 20%;">
              <div class="wrap">
                <img src="@/assets/trafficAnalysis/avgVisitTime.svg" />
                <div class="fr">
                  <p>平均访问时长</p>
                  <p style="font-size: 25px;">{{ statistics.averageVisitDuration }}</p>
                </div>
              </div>
            </a-col>
            <a-col style="width: 20%;">
              <div class="wrap">
                <img src="@/assets/trafficAnalysis/avgVisitPage.svg" />
                <div class="fr">
                  <p>访客平均访问页面数</p>
                  <p style="font-size: 25px;">{{ statistics.averageVisitPage }}</p>
                </div>
              </div>
            </a-col>
            <a-col style="width: 20%;">
              <div class="wrap">
                <img src="@/assets/trafficAnalysis/tiaochu.svg" />
                <div class="fr">
                  <p>跳出率</p>
                  <p style="font-size: 25px;">{{ statistics.bounceRate }}</p>
                </div>
              </div>
            </a-col>
            <a-col style="width: 20%;">
              <div class="wrap">
                <img src="@/assets/trafficAnalysis/uvTransfer.svg" />
                <div class="fr">
                  <p>UV到询盘转化率</p>
                  <p style="font-size: 25px;">{{ statistics.conversionRate }}</p>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card style="margin: 10px" title="访客数地域分布">
          <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.totalUsers }} | {{ record.totalUsersProportion }}
                  </template>
                </template>
              </a-table>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card style="margin: 10px" title="来源媒介">
          <a-row class="r5" :gutter="[20,20]">
            <a-col :span="24">
              <a-table
                :columns="mediaListColumns"
                :data-source="mediaDatasource"
                size="middle"
                rowKey="type"
                :pagination="false">
                <div style="padding: 10px;" slot="filterDropdown">
                  affiliate：通过联属营销计划点击链接的用户<br />
                  cpc：（每次点击费用的缩写）点击付费广告的用户<br />
                  organic：点击搜索引擎中的链接的用户<br />
                  referral：点击网站上的链接（例如，视频说明中的链接）的用户<br />
                  (none)：直接流量
                </div>
                <a-icon slot="filterIcon" type='question-circle'
                        :style="{ fontSize:'16px',color:  '#108ee9' }" />
                <template #bodyCell="{ column, record, index, text }">
                  <template v-if="column.key === 'typeSlotFirst' ">
                    {{ record.type.split("/")[0] }}
                  </template>
                  <template v-if="column.key === 'typeSlotLast' ">
                    <a-popover>
                      <template slot="content">
                        <template v-if="record.type.split('/')[1] === ' affiliate'">
                          通过联属营销计划点击链接的用户
                        </template>
                        <template v-if="record.type.split('/')[1] === ' cpc'">
                          （每次点击费用的缩写）点击付费广告的用户
                        </template>
                        <template v-if="record.type.split('/')[1] === ' organic'">
                          点击搜索引擎中的链接的用户
                        </template>
                        <template v-if="record.type.split('/')[1] === ' referral'">
                          点击网站上的链接（例如，视频说明中的链接）的用户
                        </template>
                        <template v-if="record.type.split('/')[1] === ' (none)'">
                          直接流量
                        </template>
                      </template>
                      {{ record.type.split("/")[1] }}
                    </a-popover>
                  </template>
                  <template v-if="column.key === 'avgSessionDurationSlot' ">
                    <span style="margin-left: 30px;">{{ record.avgSessionDuration }} s</span>
                  </template>
                </template>

              </a-table>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card style="margin: 10px" title="最多访问TOP10">
          <a-row class="r5" :gutter="[20,20]">
            <a-col :span="24">
              <a-table
                :columns="mostAccessColumns"
                :data-source="mostAccessDatasource"
                size="middle"
                rowKey="type"
                :pagination="false">
                <template #bodyCell="{ column, record, index, text }">
                  <template v-if="column.key ==='pagePathSlot' ">
                    <a-popover>
                      <template slot="content">
                        {{ text }}
                      </template>
                      <a :href="text" target="_blank">
                        <div
                          style="width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                          {{ text }}
                        </div>
                      </a>
                    </a-popover>
                  </template>
                  <template v-if="column.key ==='centerSlot' ">
                    <span style="margin-left: 20px;">{{ text }}</span>
                  </template>
                  <template v-if="column.key ==='avgTimeOnPageSlot' ">
                    <span style="margin-left: 30px;">{{ text }} s</span>
                  </template>
                </template>
              </a-table>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" name="data-trafficAnalysis" setup>
import selectSite from "@/components/Adweb/selectSite.vue";
import areaChart from "./chart/areaChart.vue";
import { onMounted, reactive, ref, watch } from "vue";
import { getAction } from "@/api/manage/manage";
import moment from "moment";
import MapAdweb from "@/components/chart/mapAdweb.vue";
import 'flag-icon-css/css/flag-icons.css'


const queryParam = reactive<any>({});
queryParam.limit = 10;
queryParam.siteCode = localStorage.getItem("siteCode");
const loading = ref(false);
const chartDetailDataCol = ref([
  {
    title: "国旗",
    align: "center",
    key: "flagSlot",
    width: 30,
    scopedSlots: { customRender: "flagSlot" }
  },
  {
    title: "国家",
    align: "left",
    dataIndex: "countryName",
    customRender: function(text, record) {
      return text === null ? record.country : text;
    }
  },
  {
    title: "数量",
    align: "right",
    key: "numSlot",
    scopedSlots: { customRender: "numSlot" }
  }
]);
// 来源媒介列表
const mediaListColumns = ref([
  {
    title: "来源",
    key: "typeSlotFirst",
    scopedSlots: {
      customRender: "typeSlotFirst"
    }
  },
  {
    title: "媒介",
    key: "typeSlotLast",
    scopedSlots: {
      filterDropdown: "filterDropdown",
      filterIcon: "filterIcon",
      customRender: "typeSlotLast"
    }
  },
  {
    title: "访客数（UV）",
    dataIndex: "totalUsers",
  },
  {
    title: "占比",
    dataIndex: "totalUsersProportion"
  },
  {
    title: "新访客数",
    dataIndex: "newUsers",
  },
  {
    title: "新客占比",
    dataIndex: "newUsersRatio"
  },
  {
    title: "浏览量（PV）",
    dataIndex: "pageViews",
  },
  {
    title: "平均访问页面数",
    dataIndex: "pageViewsPerSession",
  },
  {
    title: "会话数",
    dataIndex: "sessions",
  },
  {
    title: "平均会话时长",
    key: "avgSessionDurationSlot",
    sortDirections: ['descend', 'ascend'],
    sorter: (a, b) => a.avgSessionDuration - b.avgSessionDuration,
    scopedSlots: {
      customRender: 'avgSessionDurationSlot',
    }
  }
]);

// 最多访问TOP10列表
const mostAccessColumns = ref([
  {
    title: "来源",
    dataIndex: "pagePath",
    scopedSlots: {
      customRender: "pagePathSlot"
    }
  },
  {
    title: "浏览量（PV）",
    dataIndex: "pageViews",
    defaultSortOrder: "descend",
    sorter: (a, b) => a.pageViews - b.pageViews,
    width: 160,
    scopedSlots: {
      customRender: "centerSlot"
    }
  },
  {
    title: "浏览量占比",
    dataIndex: "pvProportion",
    width: 160,
    scopedSlots: {
      customRender: "centerSlot"
    }
  }
  // {
  //   title: '平均页面停留时间',
  //   dataIndex: 'avgTimeOnPage',
  //   sortDirections: ['descend', 'ascend'],
  //   width: 160,
  //   scopedSlots: {
  //     customRender: 'avgTimeOnPageSlot',
  //   }
  // },
]);

function changeSite(selectedSiteInfo: any) {
  queryParam.siteCode = selectedSiteInfo.code;
  localStorage.setItem("siteCode", queryParam.siteCode);
  reloadData();
}

//重新刷新页面数据
function reloadData() {
  loading.value = true;
  getFlowIndexNumber();
  getCountryMapData();
  getMediaList();
  getMostAccessList();
}

const flowIndexNums = ref({
  uv: 0,
  pv: 0,
  sessions: 0,
  enquiry: 0
});
const coreDataChart = ref({
  x: [],
  uv: [],
  pv: [],
  enquiry: []
});
const statistics = ref({
  averageVisit: 0,
  averageVisitDuration: 0,
  averageVisitPage: 0,
  bounceRate: "0%",
  conversionRate: "0%"
});

//访客量、浏览量、询盘数量、折线图以及统计
const getFlowIndexNumber = async () => {
  try {
    const res = await getAction("/dmp-data/site-overview/stats", queryParam);
    if (!res.result) {
      flowIndexNums.value = {
        uv: 0,
        pv: 0,
        sessions: 0,
        enquiry: 0
      };
      coreDataChart.value = {
        x: [],
        uv: [],
        pv: [],
        enquiry: []
      };
      statistics.value = {
        averageVisit: 0,
        averageVisitDuration: 0,
        averageVisitPage: 0,
        bounceRate: "0%",
        conversionRate: "0%"
      };
      loading.value = false;
      return;
    }

    flowIndexNums.value.uv = res.result.totalUsers;
    flowIndexNums.value.pv = res.result.pageViews;
    flowIndexNums.value.sessions = res.result.sessions;
    flowIndexNums.value.enquiry = res.result.enquires;
    const r = res.result.dailyStats;
    const x = [], pv = [], uv = [], enquiry = [];
    if (r != null && r.length > 0) {
      for (let item of r) {
        x.push(item.date);
        pv.push(item.pageViews);
        uv.push(item.totalUsers);
        enquiry.push(item.enquires);
      }
    }
    coreDataChart.value.x = x;
    coreDataChart.value.pv = pv;
    coreDataChart.value.uv = uv;
    coreDataChart.value.enquiry = enquiry;

    statistics.value.averageVisit = res.result.dailyTotalUsers;
    statistics.value.averageVisitDuration = res.result.avgTimeOnPage;
    statistics.value.averageVisitPage = res.result.pageViewsPerSession;
    statistics.value.bounceRate = res.result.bounceRate;
    statistics.value.conversionRate = res.result.enquiryConversionRate;
    loading.value = false;
  } catch (error) {
    console.error(error);
  }
};
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 mediaDatasource = ref([]);

//来源媒介列表、最多访问top10列表
const getMediaList = async () => {
  try {
    const res = await getAction("/dmp-data/source-medium/stats", queryParam);
    if (res.code == 200) {
      mediaDatasource.value = res.result;
    } else {
      mediaDatasource.value = [];
    }
  } catch (error) {
    console.error(error);
  }
};
const mostAccessDatasource = ref([]);

//
const getMostAccessList = async () => {
  try {
    const res = await getAction("/dmp-data/page-path/stats", queryParam);
    if (res.code == 200) {
      mostAccessDatasource.value = res.result;
    } else {
      mostAccessDatasource.value = [];
    }
  } catch (error) {
    console.error(error);
  }
};

const rangeDate = ref([]);

const onChangeDatePciker = (date, dateString) => {
  if (dateString.length > 0) {
    rangeDate.value = date;
    queryParam.value.start = dateString[0];
    queryParam.value.end = dateString[1];
    queryParam.value.dateType = undefined;
    reloadData();
  }
};

//日期选择只能今天之前
function disabledDate(current) {
  return current && current > moment().subtract(0, "days");
}

const setTime = (time) => {
  queryParam.dateType = time;
  queryParam.start = "";
  queryParam.end = "";

  if (time == "") {
    rangeDate.value = undefined;
  } else if (time == "sevenDay") {
    rangeDate.value = [moment().subtract(7, "days"), moment().subtract(1, "days")];
  } else if (time == "thirtyDay") {
    rangeDate.value = [moment().subtract(30, "days"), moment().subtract(1, "days")];
  } else if (time == "yesterday") {
    rangeDate.value = [moment().subtract(1, "days"), moment().subtract(1, "days")];
  } else if (time == "today") {
    rangeDate.value = [moment(), moment()];
  }

  reloadData();
};

</script>
<style lang="less" scoped>
.self-pop {
  .ant-popover-inner-content {
    background: rgb(245, 243, 254);

    p {
      font-size: 13px;
    }
  }

  .ant-popover-arrow {
    border-color: rgb(245, 243, 254) !important;
  }
}

.img-box {
  width: 22px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
  }
}

.ant-alert {
  /deep/ .ant-btn {
    border-radius: 0;
    margin-left: 10px;
  }
}

.theme-color {
  color: @primary-color;
}

.r1 {
  margin: 20px;
  .choose-site {
    display: flex;
  }

  .t1 {
    font-size: 18px;
  }

  .ant-form-item {
    flex: 1;
  }
  .ant-calendar-picker {
    margin-right: 20px;
  }


  /deep/ .ant-btn {
    background: transparent;
    margin-right: 10px;

    &.active {
      color: @primary-color;
    }
  }
}

.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: 30px;
      font-weight: 500;
      line-height: 1;
      padding-left: 25px;
    }
  }
}

.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;
      }
    }

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