Skip to content

S
smart_gov_platform
Commit 42350a72 authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

tui

parent d48cf76e
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 239 deletions
portal-manager-ui/admin/src/views/dataActuary/behaviour/pageanalyse/pageAnalyse.vue
View file @ 42350a72
<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" class="addclass" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="box">
<div class="left-dv">
<div>页面访问指标趋势</div>
<div class="txt-dv">
<div>
<div class="num">{{data ? data.accessSum : 0}}</div>
<div>页面累计访问次数</div>
</div>
<div>
<div class="num">{{data ? data.dayAccessAvg : 0}}</div>
<div>日均访问次数</div>
</div>
</div>
<div id="number"></div>
</div>
<div class="right-dv">
<div class="page-box">
<div class="page-dv">
<div>人均访问深度</div>
<div class="page-num">{{data ? data.depthAvg : 0}}页</div>
</div>
<div class="page-dv">
<div>次均访问深度</div>
<div class="page-num">{{data ? data.singleDepth : 0}}页</div>
</div>
</div>
<div class="chatrs-dv">
<div>页面访问次数TOP10</div>
<div id="pages"></div>
</div>
</div>
</div>
</div>
<!-- 页面分析 -->
<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" class="addclass" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="box">
<div class="left-dv">
<div>页面访问指标趋势</div>
<div class="txt-dv">
<div>
<div class="num">{{ data ? data.accessSum : 0 }}</div>
<div>页面累计访问次数</div>
</div>
<div>
<div class="num">{{ data ? data.dayAccessAvg : 0 }}</div>
<div>日均访问次数</div>
</div>
</div>
<div id="number"></div>
</div>
<div class="right-dv">
<div class="page-box">
<div class="page-dv">
<div>人均访问深度</div>
<div class="page-num">{{ data ? data.depthAvg : 0 }}页</div>
</div>
<div class="page-dv">
<div>次均访问深度</div>
<div class="page-num">{{ data ? data.singleDepth : 0 }}页</div>
</div>
</div>
<div class="chatrs-dv">
<div>页面访问次数TOP10</div>
<div id="pages"></div>
</div>
</div>
</div>
</div>
</template>
<script>
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
}],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
data:null
}
},
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)
})
},
initBar(barX,barY) {
let chartDom = document.getElementById('pages')
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
bottom: 0,
itemWidth:10,
itemHeight:10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
color:['#29D090'],
grid: {
top:'3%',
left: '3%',
right: '3%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: barY,
axisTick: {
show: false
}
},
series: [{
name: '访问次数',
type: 'bar',
data: barX,
barWidth:10
}
]
})
},
initLine(lineX,lineY) {
let chartDom = document.getElementById('number')
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
bottom: 0
},
grid: {
left: '10%',
rigth: 0,
top: '5%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: lineX,
axisTick: {
show: false
}
},
yAxis: {
type: 'value'
},
series: [{
name: '页面访问次数',
data: lineY,
type: 'line',
markLine: {
data: [{
type: 'average',
name: '均值'
}],
label: {
position: 'insideStartTop',
formatter: '{b}:{c}'
}
}
}]
})
}
}
};
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,
},
],
labelCol: {
span: 1,
},
wrapperCol: {
span: 14,
},
data: null,
};
},
mounted() {
this.getData();
},
methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeEnd = 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,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
color: ["#29D090"],
grid: {
top: "3%",
left: "3%",
right: "3%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
yAxis: {
type: "category",
data: barY,
axisTick: {
show: false,
},
},
series: [
{
name: "访问次数",
type: "bar",
data: barX,
barWidth: 10,
},
],
});
},
initLine(lineX, lineY) {
let chartDom = document.getElementById("number");
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
bottom: 0,
},
grid: {
left: "10%",
rigth: 0,
top: "5%",
bottom: "15%",
},
xAxis: {
type: "category",
data: lineX,
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
},
series: [
{
name: "页面访问次数",
data: lineY,
type: "line",
markLine: {
data: [
{
type: "average",
name: "均值",
},
],
label: {
position: "insideStartTop",
formatter: "{b}:{c}",
},
},
},
],
});
},
},
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
.page {
height: calc(100% - 50px);
/deep/.ant-form {
padding: 15px;
border-bottom: solid 1px #efefef;
}
/deep/.ant-form {
padding: 15px;
border-bottom: solid 1px #efefef;
}
.box {
height: calc(100% - 70px);
display: flex;
.box {
height: calc(100% - 70px);
display: flex;
.left-dv {
width: 55%;
min-height: 100%;
border-right: solid 1px #efefef;
padding: 15px;
.left-dv {
width: 55%;
min-height: 100%;
border-right: solid 1px #efefef;
padding: 15px;
.txt-dv {
display: flex;
justify-content: space-around;
margin: 50px;
text-align: center;
.txt-dv {
display: flex;
justify-content: space-around;
margin: 50px;
text-align: center;
.num {
font-size: 24px;
margin-bottom: 10px;
}
}
.num {
font-size: 24px;
margin-bottom: 10px;
}
}
#number {
height: 350px;
}
}
#number {
height: 350px;
}
}
.right-dv {
flex: 1;
padding: 15px;
.right-dv {
flex: 1;
padding: 15px;
.page-box {
display: flex;
justify-content: space-between;
margin: 20px 0;
.page-box {
display: flex;
justify-content: space-between;
margin: 20px 0;
.page-dv {
width: calc(50% - 15px);
height: 140px;
background-color: #F5FAFF;
padding: 30px;
box-sizing: border-box;
.page-dv {
width: calc(50% - 15px);
height: 140px;
background-color: #f5faff;
padding: 30px;
box-sizing: border-box;
.page-num {
font-size: 24px;
margin-top: 20px;
}
}
}
.page-num {
font-size: 24px;
margin-top: 20px;
}
}
}
.chatrs-dv {
padding: 20px;
background-color: #F6FBF7;
}
.chatrs-dv {
padding: 20px;
background-color: #f6fbf7;
}
#pages {
height: 290px;
}
}
}
}
</style>
\ No newline at end of file
#pages {
height: 290px;
}
}
}
}
</style>
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