Commit 4eb483c2 authored by ww-xxy's avatar ww-xxy

增加行为产品接口

parent 5a9e7eb7
......@@ -26,4 +26,8 @@ export function getUsageCensus(params) {
//信息流分析
export function getInformationFlow(params) {
return http.post(`${baseURL}/zwfw/act/analyse/informationFlow`, params);
}
//产品接口
export function productLlist(params) {
return http.post(`${baseURL}/zwfw/page/info/product/list`, params);
}
\ No newline at end of file
......@@ -49,7 +49,9 @@
<script>
import { getEventCensus } from "@/api/dataActuary.js";
import moment from "moment";
import product from "../mixins/product"
export default {
mixins:[product],
data() {
return {
queryform: {
......
<template>
<!-- 信息流分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<template>
<!-- 信息流分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
{{item.title}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-date-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 200px" :allowClear="false"/>
</a-select>
</a-form-model-item>
<a-form-model-item>
<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="选择时间粒度">
......@@ -18,42 +18,42 @@
<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-select v-model="queryform.value" style="width: 200px" placeholder="选择一级场景">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择二级场景">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择三级场景">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="table-box">
<div class="mb">
<span style="margin-right: 30px;">指标筛选</span>
<a-checkbox-group @change="changeIndex" v-model="indexList">
<a-checkbox value="accessCount">访问人数</a-checkbox>
<a-checkbox value="accessCount1">打开次数</a-checkbox>
<a-checkbox value="pageDepth">访问页面数</a-checkbox>
</a-checkbox-group>
</div>
<div class="mb">
<span style="margin-right: 30px;">对比筛选</span>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择一级场景">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择二级场景">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择三级场景">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="table-box">
<div class="mb">
<span style="margin-right: 30px;">指标筛选</span>
<a-checkbox-group @change="changeIndex" v-model="indexList">
<a-checkbox value="accessCount">访问人数</a-checkbox>
<a-checkbox value="accessCount1">打开次数</a-checkbox>
<a-checkbox value="pageDepth">访问页面数</a-checkbox>
</a-checkbox-group>
</div>
<div class="mb">
<span style="margin-right: 30px;">对比筛选</span>
<a-checkbox @change="onChange">
日对比
</a-checkbox>
</a-checkbox>
</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false">
<template slot="访问人数" slot-scope="text, record, index">
......@@ -68,18 +68,20 @@
<div>{{record.pageDepth}}</div>
<div v-show="queryform.isRatio == 1">日对比:{{(record.depthRatio * 100).toFixed(2)}}%</div>
</template>
</a-table>
</div>
</div>
</template>
</a-table>
</div>
</div>
</template>
<script>
import {getInformationFlow} from '@/api/dataActuary.js'
import moment from 'moment';
export default {
data() {
return {
import moment from 'moment';
import product from "../mixins/product"
export default {
mixins:[product],
data() {
return {
queryform: {
productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'),
......@@ -92,12 +94,12 @@
title:'排队机',
id:1
}],
indexList:['accessCount','accessCount1','pageDepth'],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
indexList:['accessCount','accessCount1','pageDepth'],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
......@@ -161,8 +163,8 @@
pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
},
filterColumns:[]
}
filterColumns:[]
}
},
mounted() {
this.filterColumns = this.columns
......@@ -185,25 +187,25 @@
this.data = res.data
})
},
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
.table-box {
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
.table-box {
padding: 0 15px;
.mb{
margin-bottom: 20px;
}
}
}
}
}
}
</style>
\ No newline at end of file
import { productLlist } from "@/api/dataActuary.js";
export default {
data() {
return {
ProductLlist:[]
}
},
created() {
this.getProductLlist()
},
methods: {
getProductLlist(){
productLlist({"size":-1}).then(res=>{
this.ProductLlist = res.data.data
let arr = []
try {
res.data.data.forEach(element => {
arr.push({title:element.productName,id:element.id})
});
this.product = arr
} catch (error) {}
})
},
},
}
\ No newline at end of file
......@@ -3,10 +3,10 @@
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
{{item.title}}
</a-select-option>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
{{item.title}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
......@@ -54,65 +54,67 @@
</template>
<script>
import * as echarts from 'echarts'
import {getAccessAnalyse} from '@/api/dataActuary.js'
import product from "../mixins/product"
import * as echarts from 'echarts'
import {getAccessAnalyse} from '@/api/dataActuary.js'
import moment from 'moment';
export default {
mixins:[product],
data() {
return {
queryform: {
productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'),
dateTimeEnd:moment().format('yyyy-MM-DD')
},
time:[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
product:[{
title:'排队机',
id:1
queryform: {
productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'),
dateTimeEnd:moment().format('yyyy-MM-DD')
},
time:[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
product:[{
title:'排队机',
id:1
}],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
},
data:null
}
},
mounted() {
mounted() {
this.getData()
},
methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getAccessAnalyse(this.queryform).then(res=>{
this.data = res.data
let lineX = res.data.accessTrend.map(item=>item.accessDay)
let lineY = res.data.accessTrend.map(item=>item.accessCount)
let barX = res.data.pageAccessTop.map(item=>item.accessCount)
let barY = res.data.pageAccessTop.map(item=>item.pageName)
this.initLine(lineX,lineY)
this.initBar(barX,barY)
})
methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getAccessAnalyse(this.queryform).then(res=>{
this.data = res.data
let lineX = res.data.accessTrend.map(item=>item.accessDay)
let lineY = res.data.accessTrend.map(item=>item.accessCount)
let barX = res.data.pageAccessTop.map(item=>item.accessCount)
let barY = res.data.pageAccessTop.map(item=>item.pageName)
this.initLine(lineX,lineY)
this.initBar(barX,barY)
})
},
initBar(barX,barY) {
let chartDom = document.getElementById('pages')
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
bottom: 0,
itemWidth:10,
itemHeight:10
myChart.setOption({
legend: {
bottom: 0,
itemWidth:10,
itemHeight:10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
},
color:['#29D090'],
grid: {
grid: {
top:'3%',
left: '3%',
right: '3%',
......@@ -125,15 +127,15 @@
},
yAxis: {
type: 'category',
data: barY,
axisTick: {
show: false
data: barY,
axisTick: {
show: false
}
},
series: [{
name: '访问次数',
type: 'bar',
data: barX,
data: barX,
barWidth:10
}
]
......
<template>
<!-- 路径分析 -->
<template>
<!-- 路径分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
......@@ -17,18 +17,20 @@
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div id="path"></div>
</div>
</template>
<script>
</a-form-model>
<div id="path"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import product from "../mixins/product"
import {getWayAccessAnalyse} from '@/api/dataActuary.js'
import moment from 'moment';
export default {
data() {
return {
import moment from 'moment';
export default {
mixins:[product],
data() {
return {
queryform: {
productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'),
......@@ -44,12 +46,12 @@
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.getData()
},
},
}
},
mounted() {
this.getData()
},
methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
......@@ -70,28 +72,28 @@
uniqueFunc(arr, uniId){
const res = new Map();
return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
},
init(data,links) {
let chartDom = document.getElementById('path')
let myChart = echarts.init(chartDom);
myChart.setOption({
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
init(data,links) {
let chartDom = document.getElementById('path')
let myChart = echarts.init(chartDom);
myChart.setOption({
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
color:['#FFCAC4','#6D86DE','#409AFE','#4DB3EA','#07CF8C'],
nodeWidth:10,
data: data,
links: links
}
})
}
}
};
</script>
nodeWidth:10,
data: data,
links: links
}
})
}
}
};
</script>
<style lang="less" scoped>
.page{
height: calc(100% - 50px);
......@@ -105,5 +107,5 @@
width: 70%;
margin: 0 auto;
}
}
}
</style>
\ No newline at end of file
......@@ -44,12 +44,14 @@
</template>
<script>
import product from "../mixins/product"
import Heatmap from 'heatmap.js';
import moment from 'moment';
import {
getProductHotCensus
} from '@/api/dataActuary.js'
export default {
mixins:[product],
data() {
return {
queryform: {
......
<template>
<!-- 使用习惯分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
{{item.title}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="getData">
开始分析
</a-button>
</a-form-model-item>
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
{{item.title}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="charts-box">
<!-- <div id="canal"></div> -->
......@@ -27,22 +27,24 @@
</template>
<script>
import * as echarts from 'echarts'
import moment from 'moment';
import * as echarts from 'echarts'
import moment from 'moment';
import {getUsageCensus} from '@/api/dataActuary.js'
import product from "../mixins/product"
export default {
mixins:[product],
data() {
return {
queryform: {
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
queryform: {
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: {
span: 1
......@@ -52,75 +54,75 @@
},
}
},
mounted() {
mounted() {
this.getData()
},
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(){
let chartDom = document.getElementById('way')
let myChart = echarts.init(chartDom);
myChart.setOption({
title: {
text: '取号方式分析',
left: 'center'
},
tooltip: {
trigger: 'item',
},
legend: {
bottom: 0,
left: 'center',
itemWidth: 10,
itemHeight: 10
},
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'],
series: [{
name: 'Access From',
type: 'pie',
radius: '65%',
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: {
normal: {
length: 1
}
},
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}
],
}]
})
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(){
let chartDom = document.getElementById('way')
let myChart = echarts.init(chartDom);
myChart.setOption({
title: {
text: '取号方式分析',
left: 'center'
},
tooltip: {
trigger: 'item',
},
legend: {
bottom: 0,
left: 'center',
itemWidth: 10,
itemHeight: 10
},
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'],
series: [{
name: 'Access From',
type: 'pie',
radius: '65%',
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: {
normal: {
length: 1
}
},
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}
],
}]
})
},
initType(data) {
initType(data) {
console.log(data)
let chartDom = document.getElementById('type')
let myChart = echarts.init(chartDom);
......
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