Commit 41324165 authored by 夏佳's avatar 夏佳

.

parent b0836c78
...@@ -18,4 +18,12 @@ export function getAccessAnalyse(params) { ...@@ -18,4 +18,12 @@ export function getAccessAnalyse(params) {
//路径分析 //路径分析
export function getWayAccessAnalyse(params) { export function getWayAccessAnalyse(params) {
return http.post(`${baseURL}/zwfw/act/analyse/wayAccessAnalyse`, params); return http.post(`${baseURL}/zwfw/act/analyse/wayAccessAnalyse`, params);
}
//使用习惯
export function getUsageCensus(params) {
return http.post(`${baseURL}/zwfw/act/analyse/usageCensus`, params);
}
//信息流分析
export function getInformationFlow(params) {
return http.post(`${baseURL}/zwfw/act/analyse/informationFlow`, params);
} }
\ No newline at end of file
...@@ -3,38 +3,39 @@ ...@@ -3,38 +3,39 @@
<div class="page"> <div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline"> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item> <a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品"> <a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack"> <a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
Jack {{item.title}}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" /> <a-date-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 200px" :allowClear="false"/>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.particleType" style="width: 200px" placeholder="选择时间粒度">
<a-select-option value="1">10分钟</a-select-option>
<a-select-option value="2">30分钟</a-select-option>
<a-select-option value="3">1小时</a-select-option>
</a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择一级场景"> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择一级场景">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择二级场景"> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择二级场景">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择三级场景"> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择三级场景">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button type="primary"> <a-button type="primary" @click="getData">
开始分析 开始分析
</a-button> </a-button>
</a-form-model-item> </a-form-model-item>
...@@ -42,33 +43,56 @@ ...@@ -42,33 +43,56 @@
<div class="table-box"> <div class="table-box">
<div class="mb"> <div class="mb">
<span style="margin-right: 30px;">指标筛选</span> <span style="margin-right: 30px;">指标筛选</span>
<a-checkbox-group v-model="queryform.value"> <a-checkbox-group @change="changeIndex" v-model="indexList">
<a-checkbox value="1">访问人数</a-checkbox> <a-checkbox value="accessCount">访问人数</a-checkbox>
<a-checkbox value="2">打开次数</a-checkbox> <a-checkbox value="accessCount1">打开次数</a-checkbox>
<a-checkbox value="3">访问页面数</a-checkbox> <a-checkbox value="pageDepth">访问页面数</a-checkbox>
</a-checkbox-group> </a-checkbox-group>
</div> </div>
<div class="mb"> <div class="mb">
<span style="margin-right: 30px;">对比筛选</span> <span style="margin-right: 30px;">对比筛选</span>
<a-checkbox-group v-model="queryform.value"> <a-checkbox @change="onChange">
<a-checkbox value="1">日对比</a-checkbox> 日对比
</a-checkbox-group> </a-checkbox>
</div> </div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="pagination"> <a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false">
<template slot="访问人数" slot-scope="text, record, index">
<div>{{record.accessCount}}</div>
<div v-show="queryform.isRatio == 1">日对比:{{(record.accessRatio * 100).toFixed(2)}}%</div>
</template>
<template slot="打开次数" slot-scope="text, record, index">
<div>{{record.accessCount}}</div>
<div v-show="queryform.isRatio == 1">日对比:{{(record.accessRatio * 100).toFixed(2)}}%</div>
</template>
<template slot="访问页面数" slot-scope="text, record, index">
<div>{{record.pageDepth}}</div>
<div v-show="queryform.isRatio == 1">日对比:{{(record.depthRatio * 100).toFixed(2)}}%</div>
</template>
</a-table> </a-table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {getInformationFlow} from '@/api/dataActuary.js'
import moment from 'moment';
export default { export default {
data() { data() {
return { return {
queryform: { queryform: {
value: null productId: 1,
}, dateTimeStart:moment().format('yyyy-MM-DD'),
dateTimeEnd:moment().format('yyyy-MM-DD'),
particleType:'1',
isRatio:0
},
time:moment().format('yyyy-MM-DD'),
product:[{
title:'排队机',
id:1
}],
indexList:['accessCount','accessCount1','pageDepth'],
labelCol: { labelCol: {
span: 1 span: 1
}, },
...@@ -78,45 +102,55 @@ ...@@ -78,45 +102,55 @@
columns: [{ columns: [{
title: "序号", title: "序号",
width: "70px", width: "70px",
dataIndex: 'index',
customRender: (text, record, index) => `${index+1}`, customRender: (text, record, index) => `${index+1}`,
align: "center", align: "center",
}, },
{ {
title: "时间", title: "时间",
dataIndex: "title", dataIndex: "dateStr",
align: "center", align: "center",
}, },
{ {
title: '产品名称', title: '产品名称',
dataIndex: 'address', dataIndex: 'productName',
align: "center", align: "center",
}, },
{ {
title: '一级场景', title: '一级场景',
dataIndex: 'address1', dataIndex: 'firstName',
align: "center", align: "center",
}, },
{ {
title: '二级场景', title: '二级场景',
dataIndex: 'address2', dataIndex: 'secondName',
align: "center", align: "center",
}, },
{ {
title: '三级场景', title: '三级场景',
dataIndex: 'address3', dataIndex: 'thirdName',
align: "center", align: "center",
},{ },{
title: '访问人数', title: '访问人数',
dataIndex: 'address5', dataIndex: 'accessCount',
align: "center", align: "center",
scopedSlots: {
customRender: "访问人数",
},
},{ },{
title: '打开次数', title: '打开次数',
dataIndex: 'address4', dataIndex: 'accessCount1',
align: "center", align: "center",
scopedSlots: {
customRender: "打开次数",
},
},{ },{
title: '访问页面数', title: '访问页面数',
dataIndex: 'address8', dataIndex: 'pageDepth',
align: "center", align: "center",
scopedSlots: {
customRender: "访问页面数",
},
} }
], ],
data: [], data: [],
...@@ -126,8 +160,31 @@ ...@@ -126,8 +160,31 @@
showSizeChanger: true, showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据 pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据 showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
}, },
filterColumns:[]
} }
},
mounted() {
this.filterColumns = this.columns
this.getData()
},
methods:{
onChange(e){
this.queryform.isRatio = e.target.checked ? 1 : 0
this.getData()
},
changeIndex(e) {
e = e.concat(['index','dateStr','productName','firstName','secondName','thirdName'])
let columns = JSON.parse(JSON.stringify(this.filterColumns))
this.columns = columns.filter(item=> e.some(items=> item.dataIndex == items))
},
getData() {
this.queryform.dateTimeStart = this.time ? this.time : null
this.queryform.dateTimeStart = this.time ? this.time : null
getInformationFlow(this.queryform).then(res=>{
this.data = res.data
})
},
} }
}; };
</script> </script>
......
<template> <template>
<!-- 使用习惯分析 --> <!-- 使用习惯分析 -->
<div class="page"> <div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline"> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item> <a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品"> <a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack"> <a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
Jack {{item.title}}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" /> <a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button type="primary"> <a-button type="primary" @click="getData">
开始分析 开始分析
</a-button> </a-button>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
<div class="charts-box"> <div class="charts-box">
<div id="canal"></div> <!-- <div id="canal"></div> -->
<div id="type"></div> <div id="type"></div>
<div id="way"></div> <!-- <div id="way"></div> -->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import moment from 'moment';
import {getUsageCensus} from '@/api/dataActuary.js'
export default { export default {
data() { data() {
return { return {
queryform: { queryform: {
value: null productId: 1,
}, dateTimeStart: moment().format('yyyy-MM-DD'),
dateTimeEnd: moment().format('yyyy-MM-DD'),
pageCode: '/'
},
time: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')],
product: [{
title: '排队机',
id: 1
}],
labelCol: { labelCol: {
span: 1 span: 1
}, },
...@@ -42,12 +52,18 @@ ...@@ -42,12 +52,18 @@
}, },
} }
}, },
mounted() { mounted() {
this.initCanal() this.getData()
this.initType()
this.initWay()
}, },
methods: { methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getUsageCensus(this.queryform).then(res=>{
let data = res.data.map(({businessName,propValue})=>({name:businessName,value:propValue * 100}))
this.initType(data)
})
},
initWay(){ initWay(){
let chartDom = document.getElementById('way') let chartDom = document.getElementById('way')
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
...@@ -104,7 +120,8 @@ ...@@ -104,7 +120,8 @@
}] }]
}) })
}, },
initType() { initType(data) {
console.log(data)
let chartDom = document.getElementById('type') let chartDom = document.getElementById('type')
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption({ myChart.setOption({
...@@ -123,7 +140,6 @@ ...@@ -123,7 +140,6 @@
}, },
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'],
series: [{ series: [{
name: 'Access From',
type: 'pie', type: 'pie',
radius: '65%', radius: '65%',
label: { label: {
...@@ -136,27 +152,7 @@ ...@@ -136,27 +152,7 @@
length: 1 length: 1
} }
}, },
data: [{ data: data
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}
],
}] }]
}) })
}, },
...@@ -221,7 +217,7 @@ ...@@ -221,7 +217,7 @@
.charts-box { .charts-box {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
padding: 50px 0; padding: 50px 0;
#canal,#type,#way { #canal,#type,#way {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment