流量分析重构

src/views/adweb/data/trafficAnalysis.vue

@@ -58,13 +58,14 @@
                   <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>
+                <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"/>
+                <img src="@/assets/trafficAnalysis/dailyVisitCount.svg" />
                 <div class="fr">
                   <p>日均访问量</p>
                   <p style="font-size: 25px;">{{ statistics.averageVisit }}</p>
@@ -73,7 +74,7 @@
             </a-col>
             <a-col style="width: 20%;">
               <div class="wrap">
-                <img src="@/assets/trafficAnalysis/avgVisitTime.svg"/>
+                <img src="@/assets/trafficAnalysis/avgVisitTime.svg" />
                 <div class="fr">
                   <p>平均访问时长</p>
                   <p style="font-size: 25px;">{{ statistics.averageVisitDuration }}</p>
@@ -82,7 +83,7 @@
             </a-col>
             <a-col style="width: 20%;">
               <div class="wrap">
-                <img src="@/assets/trafficAnalysis/avgVisitPage.svg"/>
+                <img src="@/assets/trafficAnalysis/avgVisitPage.svg" />
                 <div class="fr">
                   <p>访客平均访问页面数</p>
                   <p style="font-size: 25px;">{{ statistics.averageVisitPage }}</p>
@@ -91,7 +92,7 @@
             </a-col>
             <a-col style="width: 20%;">
               <div class="wrap">
-                <img src="@/assets/trafficAnalysis/tiaochu.svg"/>
+                <img src="@/assets/trafficAnalysis/tiaochu.svg" />
                 <div class="fr">
                   <p>跳出率</p>
                   <p style="font-size: 25px;">{{ statistics.bounceRate }}</p>
@@ -100,7 +101,7 @@
             </a-col>
             <a-col style="width: 20%;">
               <div class="wrap">
-                <img src="@/assets/trafficAnalysis/uvTransfer.svg"/>
+                <img src="@/assets/trafficAnalysis/uvTransfer.svg" />
                 <div class="fr">
                   <p>UV到询盘转化率</p>
                   <p style="font-size: 25px;">{{ statistics.conversionRate }}</p>
@@ -114,10 +115,10 @@
         <a-card style="margin: 10px" title="访客数地域分布">
           <a-row class="r5" :gutter="[20,20]">
             <a-col :span="12">
-              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" :aliases="[{dataKey:'country',alias:'国家'},{dataKey:'num',alias:'访问数量'}]"
+              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData"
+                         :aliases="[{dataKey:'country',alias:'国家'},{dataKey:'num',alias:'访问数量'}]"
                          :height="chartheight"></map-adweb>
               <a-empty v-else style="margin-top: 50px;">
-                <span slot="description">暂无数据</span>
               </a-empty>
             </a-col>
             <a-col :span="2">
@@ -133,14 +134,114 @@
                 :data-source="chartDetailData"
                 :showHeader="false">
                 <template #bodyCell="{ column, record, index, text }">
-                <template v-if="column.key === 'flagSlot' ">
+                  <template v-if="column.key === 'flagSlot' ">
             <span class="img-box">
-              <img src="../../../assets/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic"/>
+              <img src="../../../assets/flag_placeholder.png"
+                   :class="'flag flag-' + record.countryCode" alt="Czech Republic" />
             </span>
+                  </template>
+                  <template v-if="column.key === 'numSlot' ">
+                    {{ record.num }} | {{ record.proportion }}
+                  </template>
                 </template>
-                <template v-if="column.key === 'numSlot' ">
-                  {{ record.num }} | {{ record.proportion }}
+              </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 === 'avgPageNumSlot' ">
+                    <span
+                      style="margin-left: 20px;"></span>{{ record.pageViewsPerSession * record.sessions
+                    }}
+                  </template>
+                  <template v-if="column.key === 'centerSlot' ">
+                    <span style="margin-left: 20px;">{{ text }}</span>
+                  </template>
+                  <template v-if="column.key === 'avgSessionDurationSlot' ">
+                    <span style="margin-left: 30px;">{{ text }} 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>
@@ -169,22 +270,129 @@ const chartDetailDataCol = ref([
     title: "国旗",
     align: "center",
     width: 30,
-    scopedSlots: {customRender: 'flagSlot'}
+    scopedSlots: { customRender: "flagSlot" }
   },
   {
     title: "国家",
     align: "left",
-    dataIndex: 'countryName',
-    customRender: function (text, record) {
-      return text === null? record.country : text;
+    dataIndex: "countryName",
+    customRender: function(text, record) {
+      return text === null ? record.country : text;
     }
   },
   {
     title: "数量",
     align: "right",
-    dataIndex: 'num',
-    scopedSlots: {customRender: 'numSlot'}
+    dataIndex: "num",
+    scopedSlots: { customRender: "numSlot" }
+  }
+]);
+// 来源媒介列表
+const mediaListColumns = ref([
+  {
+    title: "来源",
+    scopedSlots: {
+      customRender: "typeSlotFirst"
+    }
+  },
+  {
+    title: "媒介",
+    scopedSlots: {
+      filterDropdown: "filterDropdown",
+      filterIcon: "filterIcon",
+      customRender: "typeSlotLast"
+    }
+  },
+  {
+    title: "访客数（UV）",
+    dataIndex: "users",
+    defaultSortOrder: "descend",
+    sorter: (a, b) => a.users - b.users,
+    scopedSlots: {
+      customRender: "centerSlot"
+    }
+  },
+  {
+    title: "占比",
+    dataIndex: "userProportion"
   },
+  {
+    title: "新访客数",
+    dataIndex: "newUsers",
+    sortDirections: ["descend", "ascend"],
+    sorter: (a, b) => a.newUsers - b.newUsers,
+    scopedSlots: {
+      customRender: "centerSlot"
+    }
+  },
+  {
+    title: "新客占比",
+    customRender: function(text, record, index) {
+      return (record.newUsers * 100 / record.users).toFixed(2) + " %";
+    }
+  },
+  {
+    title: "浏览量（PV）",
+    scopedSlots: {
+      customRender: "avgPageNumSlot"
+    }
+  },
+  {
+    title: "平均访问页面数",
+    dataIndex: "pageViewsPerSession",
+    sortDirections: ["descend", "ascend"],
+    sorter: (a, b) => a.pageviewsPerSession - b.pageviewsPerSession,
+    scopedSlots: {
+      customRender: "centerSlot"
+    }
+  },
+  {
+    title: "平均会话时长",
+    dataIndex: "avgSessionDuration",
+    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: "accessProportion",
+    width: 160,
+    scopedSlots: {
+      customRender: "centerSlot"
+    }
+  }
+  // {
+  //   title: '平均页面停留时间',
+  //   dataIndex: 'avgTimeOnPage',
+  //   sortDirections: ['descend', 'ascend'],
+  //   width: 160,
+  //   scopedSlots: {
+  //     customRender: 'avgTimeOnPageSlot',
+  //   }
+  // },
 ]);
 
 function changeSite(value, e) {
@@ -379,6 +587,7 @@ watch(queryParam, (newValue, oldValue) => {
     border-color: rgb(245, 243, 254) !important;
   }
 }
+
 .img-box {
   width: 22px;
   height: 15px;
@@ -482,33 +691,39 @@ watch(queryParam, (newValue, oldValue) => {
   }
 }
 
-.r5{
+.r5 {
   background: #fff;
-  padding: 10px ;
+  padding: 10px;
   border-radius: 10px;
-  margin: 0!important;
-  .wrap{
-    box-shadow: 0px 2px 4px 0px rgba(84,75,235,.3);
+  margin: 0 !important;
+
+  .wrap {
+    box-shadow: 0px 2px 4px 0px rgba(84, 75, 235, .3);
     padding: 15px;
     border-radius: 10px;
     overflow: hidden;
     background: #fff;
     transition: all .3s;
-    &.blue{
-      box-shadow: 0px 2px 4px 0px rgba(88,203,168,.3);
+
+    &.blue {
+      box-shadow: 0px 2px 4px 0px rgba(88, 203, 168, .3);
     }
-    &.effect:hover{
+
+    &.effect:hover {
       box-shadow: none;
-      background: rgb(241,248,255);
+      background: rgb(241, 248, 255);
     }
-    img{
+
+    img {
       width: 15px;
     }
-    .fr{
+
+    .fr {
       float: right;
       width: calc(100% - 15px);
       text-align: center;
-      p:last-child{
+
+      p:last-child {
         font-size: 30px;
         text-align: center;
         margin-top: 10px;
@@ -516,36 +731,43 @@ watch(queryParam, (newValue, oldValue) => {
       }
     }
   }
-  /deep/ .ant-table-thead>tr>th{
-    background: rgb(241,248,255);
+
+  /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{
+
+  /deep/ .ant-table-tbody .ant-table-row td {
     padding: 10px;
     color: #000;
   }
 
-  .r5-1{
+  .r5-1 {
     display: inline-block;
     width: 100%;
     margin-top: 30px;
-    .fl{
+
+    .fl {
       float: left;
       position: relative;
-      .ant-btn{
+
+      .ant-btn {
         border-radius: 0;
         border: none;
         margin-right: 10px;
       }
     }
-    .fr{
+
+    .fr {
       float: right;
       line-height: 2;
-      span{
+
+      span {
         margin-right: 30px;
-        i{
+
+        i {
           display: inline-block;
           width: 25px;
           height: 3px;
@@ -554,40 +776,49 @@ watch(queryParam, (newValue, oldValue) => {
           top: -4px;
           margin-right: 20px;
         }
-        &:last-child i{
+
+        &:last-child i {
           background: #F0B358;
         }
       }
     }
   }
-  .box{
+
+  .box {
     border-radius: 10px;
     text-align: center;
     min-height: 180px;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    p{
+
+    p {
       color: #fff;
-      img{
+
+      img {
         width: 19px;
         margin: -5px 10px 0 0;
       }
     }
-    .num{
+
+    .num {
       font-size: 30px;
       margin-bottom: 10px;
     }
-    &.b1{
-      background: rgb(233,107,95);
+
+    &.b1 {
+      background: rgb(233, 107, 95);
     }
-    &.b2{
-      background: rgb(88,204,168);
+
+    &.b2 {
+      background: rgb(88, 204, 168);
     }
-    &.b3{
-      background: rgb(124,152,252);
+
+    &.b3 {
+      background: rgb(124, 152, 252);
     }
-    &.b4{
+
+    &.b4 {
       background: #F0B358;
     }
   }