|
|
@@ -1,844 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="wrap home">
|
|
|
- <!-- 站点选择和时间筛选 -->
|
|
|
- <a-row class="r1" :gutter="8">
|
|
|
- <a-col :xl="7" :xxl="6" v-if="siteList.length > 1">
|
|
|
- <div class="choose-site">
|
|
|
- <span class="t1">站点：</span>
|
|
|
- <select-site @comMethods="changeSite" />
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- <a-col :xl="8" :xxl="6">
|
|
|
- <div class="choose-site">
|
|
|
- <span class="t1">统计时间：</span>
|
|
|
- <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width:70%"/>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- <a-col :xl="9" :xxl="12">
|
|
|
- <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 style="height: 20px;"></div>
|
|
|
-
|
|
|
- <a-spin :spinning="loading" tip="加载中...">
|
|
|
- <a-row class="r2">
|
|
|
- <a-col :span="8">
|
|
|
- <p class="t1"><img src="@/assets/trafficAnalysis/uvicon.svg"/>访客数（UV）</p>
|
|
|
- <p class="t3">{{ flowIndexNums.uv }}</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="8">
|
|
|
- <p class="t1"><img src="@/assets/trafficAnalysis/pvicon.svg"/>浏览量（PV）</p>
|
|
|
- <p class="t3">{{ flowIndexNums.pv }}</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="8">
|
|
|
- <p class="t1"><img src="@/assets/trafficAnalysis/enquirycounticon.svg"/>询盘数</p>
|
|
|
- <router-link :to="{ path: '/inquiry/list', query: {dateType: this.queryParam.dateType, start: this.queryParam.start, end: this.queryParam.end} }">
|
|
|
- <p class="t2">{{ flowIndexNums.enquiry }}</p>
|
|
|
- </router-link>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
-
|
|
|
- <a-row class="r3">
|
|
|
- <a-col><p class="title">核心数据</p></a-col>
|
|
|
- </a-row>
|
|
|
- <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 :span="4" 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 :span="4" 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 :span="4" 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 :span="4" 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 :span="4" 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-row class="r3">
|
|
|
- <a-col><p class="title">访客数地域分布</p></a-col>
|
|
|
- </a-row>
|
|
|
- <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:'访问数量'}]"
|
|
|
- :height="chartheight"></map-adweb>
|
|
|
- <a-empty v-else style="margin-top: 50px;">
|
|
|
- <span slot="description">暂无数据</span>
|
|
|
- </a-empty>
|
|
|
- </a-col>
|
|
|
- <a-col :span="2">
|
|
|
- </a-col>
|
|
|
- <a-col :span="10">
|
|
|
- <a-table
|
|
|
- style="margin-top: 40px; margin-bottom: 40px;"
|
|
|
- :rowKey="(record,index)=>{return index}"
|
|
|
- class="chartTable"
|
|
|
- :scroll="{ y: 400 }"
|
|
|
- :pagination=false
|
|
|
- :columns="chartDetailDataCol"
|
|
|
- :data-source="chartDetailData"
|
|
|
- :showHeader="false">
|
|
|
- <template slot="flagSlot" slot-scope="text,record">
|
|
|
- <span class="img-box">
|
|
|
- <img src="../../../assets/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic"/>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <template slot="numSlot" slot-scope="text,record">
|
|
|
- {{ record.num }} | {{ record.proportion }}
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
-
|
|
|
- <a-row class="r3">
|
|
|
- <a-col><p class="title">来源/媒介</p></a-col>
|
|
|
- </a-row>
|
|
|
- <a-row class="r5" :gutter="[20,20]">
|
|
|
- <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 slot="typeSlotFirst" slot-scope="text,record">
|
|
|
- {{ record.type.split("/")[0] }}
|
|
|
- </template>
|
|
|
- <template slot="typeSlotLast" slot-scope="text,record">
|
|
|
- <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 slot="avgPageNumSlot" slot-scope="text,record">
|
|
|
- <span style="margin-left: 20px;"></span>{{ record.pageViewsPerSession * record.sessions }}
|
|
|
- </template>
|
|
|
- <template slot="centerSlot" slot-scope="text, record, index">
|
|
|
- <span style="margin-left: 20px;">{{ text }}</span>
|
|
|
- </template>
|
|
|
- <template slot="avgSessionDurationSlot" slot-scope="text, record, index">
|
|
|
- <span style="margin-left: 30px;">{{ text }} s</span>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </a-row>
|
|
|
-
|
|
|
- <a-row class="r3">
|
|
|
- <a-col><p class="title">最多访问TOP10</p></a-col>
|
|
|
- </a-row>
|
|
|
- <a-row class="r5" :gutter="[20,20]">
|
|
|
- <a-table
|
|
|
- :columns="mostAccessColumns"
|
|
|
- :data-source="mostAccessDatasource"
|
|
|
- size="middle"
|
|
|
- rowKey="type"
|
|
|
- :pagination="false">
|
|
|
- <div slot="pagePathSlot" slot-scope="text, record">
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- <template slot="centerSlot" slot-scope="text, record, index">
|
|
|
- <span style="margin-left: 20px;">{{ text }}</span>
|
|
|
- </template>
|
|
|
- <template slot="avgTimeOnPageSlot" slot-scope="text, record, index">
|
|
|
- <span style="margin-left: 30px;">{{ text }} s</span>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </a-row>
|
|
|
- </a-spin>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import {postAction, getAction, downFile, putAction} from '/@/api/manage/manage'
|
|
|
-import enquiryTrack from '@/views/adweb/enquiry/modules/enquiryTrack.vue'
|
|
|
-import enquiryTrackRecord from '@/views/adweb/enquiry/modules/enquiryTrackRecord.vue'
|
|
|
-import enquiryDetail from '@/views/adweb/enquiry/modules/enquiryDetail.vue'
|
|
|
-import XpRecycleBinModal from '@/views/adweb/system/modules/XpRecycleBinModal.vue'
|
|
|
-import blackList from '@/views/adweb/enquiry/modules/blackList.vue'
|
|
|
-import moment from 'moment'
|
|
|
-import dashChart from '@/views/adweb/data/chart/DashChartDemo.vue'
|
|
|
-import areaChart from '@/views/adweb/data/chart/areaChart.vue'
|
|
|
-import MapAdweb from '@/components/chart/mapAdweb.vue'
|
|
|
-import selectSite from '@/components/adweb/selectSite.vue'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'TrafficAnalysis',
|
|
|
- components: {
|
|
|
- enquiryTrack,
|
|
|
- enquiryTrackRecord,
|
|
|
- XpRecycleBinModal,
|
|
|
- enquiryDetail,
|
|
|
- blackList,
|
|
|
- areaChart,
|
|
|
- dashChart,
|
|
|
- MapAdweb,
|
|
|
- selectSite
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 通用
|
|
|
- ipagination: {
|
|
|
- current: 1,
|
|
|
- pageSize: 30,
|
|
|
- pageSizeOptions: ['15', '30', '45', '60'],
|
|
|
- showTotal: (total, range) => {
|
|
|
- return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
|
- },
|
|
|
- showQuickJumper: true,
|
|
|
- showSizeChanger: true,
|
|
|
- total: 0
|
|
|
- },
|
|
|
- disableMixinCreated: true,
|
|
|
- loading: true,
|
|
|
- // 筛选
|
|
|
- siteList: [],
|
|
|
- rangeDate: undefined,
|
|
|
- // uv、pv、询盘数
|
|
|
- flowIndexNums: {
|
|
|
- uv: 0,
|
|
|
- pv: 0,
|
|
|
- enquiry: 0
|
|
|
- },
|
|
|
- // 数据趋势的数据
|
|
|
- coreDataChart: {
|
|
|
- x: [],
|
|
|
- uv: [],
|
|
|
- pv: [],
|
|
|
- enquiry: []
|
|
|
- },
|
|
|
- statistics: {
|
|
|
- averageVisit: 0,
|
|
|
- averageVisitDuration: 0,
|
|
|
- averageVisitPage: 0,
|
|
|
- bounceRate: "0%",
|
|
|
- conversionRate: "0%"
|
|
|
- },
|
|
|
- // 访客数据地图分布
|
|
|
- chartheight: 400,
|
|
|
- countryMapData: [],
|
|
|
- // 来源媒介列表
|
|
|
- mediaListColumns: [
|
|
|
- {
|
|
|
- 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',
|
|
|
- }
|
|
|
- },
|
|
|
- ],
|
|
|
- mediaDatasource: [],
|
|
|
- // 最多访问TOP10列表
|
|
|
- mostAccessColumns: [
|
|
|
- {
|
|
|
- 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',
|
|
|
- // }
|
|
|
- // },
|
|
|
- ],
|
|
|
- mostAccessDatasource: [],
|
|
|
- // 访客地域分布列表
|
|
|
- chartDetailData: [],
|
|
|
- chartDetailDataCol: [
|
|
|
- {
|
|
|
- title: "国旗",
|
|
|
- align: "center",
|
|
|
- width: 30,
|
|
|
- scopedSlots: {customRender: 'flagSlot'}
|
|
|
- },
|
|
|
- {
|
|
|
- title: "国家",
|
|
|
- align: "left",
|
|
|
- dataIndex: 'countryName',
|
|
|
- customRender: function (text, record) {
|
|
|
- return text === null ? record.country : text;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: "数量",
|
|
|
- align: "right",
|
|
|
- dataIndex: 'num',
|
|
|
- scopedSlots: {customRender: 'numSlot'}
|
|
|
- },
|
|
|
- ],
|
|
|
- routerQuery: {},
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- '$route.query': {
|
|
|
- handler: function (val) {
|
|
|
- this.routerQuery = val
|
|
|
- },
|
|
|
- immediate: true // 初次变化立即查询
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- console.log(this.routerQuery);
|
|
|
- if (this.routerQuery.start) {
|
|
|
- let start = moment(this.routerQuery.start);
|
|
|
- let end;
|
|
|
- if (this.routerQuery.end) {
|
|
|
- end = moment(this.routerQuery.end);
|
|
|
- } else {
|
|
|
- end = moment().subtract(1, "days");
|
|
|
- }
|
|
|
- this.rangeDate = [start, end];
|
|
|
- this.queryParam.dateType = undefined;
|
|
|
- this.queryParam.start = start.format("YYYY-MM-DD");
|
|
|
- this.queryParam.end = end.format("YYYY-MM-DD");
|
|
|
- } else if (this.routerQuery.dateType) {
|
|
|
- switch(this.routerQuery.dateType){
|
|
|
- case "All":
|
|
|
- this.queryParam.dateType = '';
|
|
|
- this.queryParam.start = undefined;
|
|
|
- this.queryParam.end = undefined;
|
|
|
- break;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.queryParam.dateType = 'sevenDay';
|
|
|
- this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")];
|
|
|
- }
|
|
|
- this.getSiteList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // ========================================== 筛选 ==========================================
|
|
|
- //获取站点列表
|
|
|
- getSiteList() {
|
|
|
- let that = this
|
|
|
- getAction('/sys/api/getSiteListByUid').then(function (res) {
|
|
|
- if (res.code == 0) {
|
|
|
- if (res.data || res.data.length) {
|
|
|
- if (that.routerQuery.siteCode) {
|
|
|
- localStorage.setItem('siteCode', that.routerQuery.siteCode);
|
|
|
- }
|
|
|
- let defaultSiteCode = localStorage.getItem('siteCode');
|
|
|
- if (defaultSiteCode) {
|
|
|
- let isInSite = false
|
|
|
- for (let i in res.data) {
|
|
|
- if (defaultSiteCode === res.data[i].code) {
|
|
|
- isInSite = true;
|
|
|
- that.queryParam.siteId = res.data[i].id;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- if (!isInSite) {
|
|
|
- that.queryParam.siteId = res.data[0].id;
|
|
|
- localStorage.setItem('siteCode', res.data[0].code);
|
|
|
- }
|
|
|
- } else {
|
|
|
- that.queryParam.siteId = res.data[0].id;
|
|
|
- localStorage.setItem('siteCode', res.data[0].code);
|
|
|
- }
|
|
|
- that.siteList = res.data;
|
|
|
- that.reloadData()
|
|
|
- }
|
|
|
- } else {
|
|
|
- that.$message.error('获取站点失败！')
|
|
|
- }
|
|
|
- }).catch(function (err) {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- },
|
|
|
- // 搜索
|
|
|
- filterOption(inputValue, option) {
|
|
|
- return option.componentOptions.children[0].text.indexOf(inputValue) >= 0
|
|
|
- },
|
|
|
- //搜索条件部分的逻辑
|
|
|
- onChangeDatePciker(date, dateString) {
|
|
|
- if (dateString.length > 0) {
|
|
|
- this.rangeDate = date
|
|
|
- this.queryParam.start = dateString[0]
|
|
|
- this.queryParam.end = dateString[1]
|
|
|
- this.queryParam.dateType = undefined
|
|
|
- this.reloadData();
|
|
|
- }
|
|
|
- },
|
|
|
- //日期选择只能今天之前
|
|
|
- disabledDate(current) {
|
|
|
- return current && current > moment().subtract(0, "days");
|
|
|
- },
|
|
|
- //设置列表的时间查询条件
|
|
|
- setTime(time) {
|
|
|
- this.queryParam.dateType = time
|
|
|
- this.queryParam.start = ''
|
|
|
- this.queryParam.end = ''
|
|
|
- if (time == '') {
|
|
|
- this.rangeDate = undefined
|
|
|
- } else if (time == 'sevenDay') {
|
|
|
- this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")]
|
|
|
- } else if (time == 'thirtyDay') {
|
|
|
- this.rangeDate = [moment().subtract(30, "days"), moment().subtract(1, "days")]
|
|
|
- } else if (time == 'yesterday') {
|
|
|
- this.rangeDate = [moment().subtract(1, "days"), moment().subtract(1, "days")]
|
|
|
- } else if (time == 'today') {
|
|
|
- this.rangeDate = [moment(), moment()]
|
|
|
- }
|
|
|
- this.reloadData();
|
|
|
- },
|
|
|
-
|
|
|
- changeSite(value, e) {
|
|
|
- this.selectSiteInfo = e.data.attrs.info
|
|
|
- this.queryParam.siteId = this.selectSiteInfo.id;
|
|
|
- this.reloadData(this.queryParam.siteId)
|
|
|
- },
|
|
|
-
|
|
|
- //重新刷新页面数据
|
|
|
- reloadData(value) {
|
|
|
- this.loading = true;
|
|
|
- for (let i in this.siteList){
|
|
|
- if(value === this.siteList[i].id){
|
|
|
- localStorage.setItem("siteCode",this.siteList[i].code)
|
|
|
- }
|
|
|
- }
|
|
|
- this.getFlowIndexNumber();
|
|
|
- this.getCountryMapData();
|
|
|
- this.getMediaList();
|
|
|
- this.getMostAccessList();
|
|
|
- },
|
|
|
- // ========================================== 访客量、浏览量、询盘数量、折线图以及统计 ==========================================
|
|
|
- getFlowIndexNumber() {
|
|
|
- let that = this;
|
|
|
- getAction('/datacenter/flow/number', this.queryParam).then(function (res) {
|
|
|
- if (!res.result) {
|
|
|
- that.flowIndexNums = {
|
|
|
- uv: 0,
|
|
|
- pv: 0,
|
|
|
- enquiry: 0
|
|
|
- };
|
|
|
- that.coreDataChart = {
|
|
|
- x: [],
|
|
|
- uv: [],
|
|
|
- pv: [],
|
|
|
- enquiry: []
|
|
|
- };
|
|
|
- that.statistics = {
|
|
|
- averageVisit: 0,
|
|
|
- averageVisitDuration: 0,
|
|
|
- averageVisitPage: 0,
|
|
|
- bounceRate: "0%",
|
|
|
- conversionRate: "0%"
|
|
|
- };
|
|
|
- that.loading = false;
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- that.flowIndexNums = res.result.flowIndexNumber;
|
|
|
- let r = res.result.dailyTrends;
|
|
|
- let x = [], pv = [], uv = [], enquiry = [];
|
|
|
- if (r != null && r.length > 0) {
|
|
|
- for (let item of r) {
|
|
|
- x.push(item.date)
|
|
|
- pv.push(item.pvCount)
|
|
|
- uv.push(item.uvCount)
|
|
|
- enquiry.push(item.enquiryCount)
|
|
|
- }
|
|
|
- }
|
|
|
- that.coreDataChart.x = x
|
|
|
- that.coreDataChart.pv = pv
|
|
|
- that.coreDataChart.uv = uv
|
|
|
- that.coreDataChart.enquiry = enquiry
|
|
|
-
|
|
|
- that.statistics = res.result.statistics;
|
|
|
- that.loading = false;
|
|
|
- });
|
|
|
- },
|
|
|
- // ========================================== 访客数地域分布 ==========================================
|
|
|
- getCountryMapData() {
|
|
|
- let that = this;
|
|
|
- that.countryMapData = [];
|
|
|
- that.chartDetailData = [];
|
|
|
- getAction('/datacenter/region/map', this.queryParam).then(function (res) {
|
|
|
- if (res.code == 200) {
|
|
|
- that.countryMapData = res.result.accessMap;
|
|
|
- that.chartDetailData = res.result.accessList;
|
|
|
- }
|
|
|
- console.log("countryMapData", that.countryMapData);
|
|
|
- })
|
|
|
- },
|
|
|
- // ========================================== 来源媒介列表、最多访问top10列表 ==========================================
|
|
|
- getMediaList() {
|
|
|
- let that = this;
|
|
|
- getAction('/datacenter/sourcemedia/list', this.queryParam).then(function (res) {
|
|
|
- if (res.code == 200) {
|
|
|
- that.mediaDatasource = res.result;
|
|
|
- } else {
|
|
|
- that.mediaDatasource = [];
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getMostAccessList() {
|
|
|
- let that = this;
|
|
|
- getAction('/datacenter/mostaccess/list', this.queryParam).then(function (res) {
|
|
|
- if (res.code == 200) {
|
|
|
- that.mostAccessDatasource = res.result;
|
|
|
- } else {
|
|
|
- that.mostAccessDatasource = [];
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-<!-- 通用样式 -->
|
|
|
-<style scoped>
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
|
|
-<!-- 询盘页面的样式 -->
|
|
|
-<style lang="less" scoped>
|
|
|
-
|
|
|
-.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 {
|
|
|
- .choose-site {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- /deep/ .ant-select-selection {
|
|
|
- background: transparent;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .ant-select-selection__clear {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ i, /deep/ .ant-calendar-range-picker-separator {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .t1 {
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .ant-calendar-picker {
|
|
|
- margin-right: 20px;
|
|
|
-
|
|
|
- /deep/ .ant-input {
|
|
|
- background: transparent;
|
|
|
- color: #e2e2e2;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .ant-btn {
|
|
|
- background: transparent;
|
|
|
- color: #e2e2e2;
|
|
|
- margin-right: 10px;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #fff;
|
|
|
- border-color: #fff;
|
|
|
- color: @primary-color;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.r2 {
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 30px 20px;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.r3 {
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.r4 {
|
|
|
- margin-top: 20px;
|
|
|
-
|
|
|
- /deep/ .ant-table-tbody {
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .ant-table-tbody > tr > td {
|
|
|
- border-bottom: 1px solid #f7f7f7;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
|
|
-<!-- 首页的样式 -->
|
|
|
-<style scoped lang="less">
|
|
|
-p, span {
|
|
|
- color: #000;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.theme-color {
|
|
|
- color: @primary-color;
|
|
|
-}
|
|
|
-
|
|
|
-.title {
|
|
|
- font-size: 18px;
|
|
|
- color: #000;
|
|
|
-}
|
|
|
-
|
|
|
-//@import '../../dashboard/less/home2-7.less';
|
|
|
-//@import "../../../assets/less/flags.css";
|
|
|
-</style>
|
|
|
-<style lang="less">
|
|
|
-.pop-wrap {
|
|
|
- .ant-popover-inner-content {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .wrap {
|
|
|
- width: 400px;
|
|
|
- padding: 20px 20px;
|
|
|
- background: url("../../../assets/home2-7/pop-bg.svg") no-repeat;
|
|
|
- background-position: bottom right;
|
|
|
-
|
|
|
- p {
|
|
|
- line-height: 1.8;
|
|
|
-
|
|
|
- i {
|
|
|
- color: @primary-color;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .job {
|
|
|
- font-size: 15px;
|
|
|
- color: #9f9f9f;
|
|
|
- }
|
|
|
-
|
|
|
- .ant-col-8 {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
zq940222