Skip to content

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

tui

parent d48cf76e
Show 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> <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.productId" style="width: 200px" placeholder="选择产品"> <a-select
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index"> v-model="queryform.productId"
{{item.title}} 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-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="time" style="width: 300px" :allowClear="false"/> <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" class="addclass" @click="getData"> <a-button type="primary" class="addclass" @click="getData">
...@@ -23,11 +41,11 @@ ...@@ -23,11 +41,11 @@
<div>页面访问指标趋势</div> <div>页面访问指标趋势</div>
<div class="txt-dv"> <div class="txt-dv">
<div> <div>
<div class="num">{{data ? data.accessSum : 0}}</div> <div class="num">{{ data ? data.accessSum : 0 }}</div>
<div>页面累计访问次数</div> <div>页面累计访问次数</div>
</div> </div>
<div> <div>
<div class="num">{{data ? data.dayAccessAvg : 0}}</div> <div class="num">{{ data ? data.dayAccessAvg : 0 }}</div>
<div>日均访问次数</div> <div>日均访问次数</div>
</div> </div>
</div> </div>
...@@ -37,11 +55,11 @@ ...@@ -37,11 +55,11 @@
<div class="page-box"> <div class="page-box">
<div class="page-dv"> <div class="page-dv">
<div>人均访问深度</div> <div>人均访问深度</div>
<div class="page-num">{{data ? data.depthAvg : 0}}页</div> <div class="page-num">{{ data ? data.depthAvg : 0 }}页</div>
</div> </div>
<div class="page-dv"> <div class="page-dv">
<div>次均访问深度</div> <div>次均访问深度</div>
<div class="page-num">{{data ? data.singleDepth : 0}}页</div> <div class="page-num">{{ data ? data.singleDepth : 0 }}页</div>
</div> </div>
</div> </div>
<div class="chatrs-dv"> <div class="chatrs-dv">
...@@ -54,139 +72,146 @@ ...@@ -54,139 +72,146 @@
</template> </template>
<script> <script>
import product from "../mixins/product" import product from "../mixins/product";
import * as echarts from 'echarts' import * as echarts from "echarts";
import {getAccessAnalyse} from '@/api/dataActuary.js' import { getAccessAnalyse } from "@/api/dataActuary.js";
import moment from 'moment'; import moment from "moment";
export default { export default {
mixins:[product], mixins: [product],
data() { data() {
return { return {
queryform: { queryform: {
productId: 1, productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'), dateTimeStart: moment().format("yyyy-MM-DD"),
dateTimeEnd:moment().format('yyyy-MM-DD') dateTimeEnd: moment().format("yyyy-MM-DD"),
}, },
time:[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')], time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
product:[{ product: [
title:'排队机', {
id:1 title: "排队机",
}], id: 1,
},
],
labelCol: { labelCol: {
span: 1 span: 1,
}, },
wrapperCol: { wrapperCol: {
span: 14 span: 14,
}, },
data:null data: null,
} };
}, },
mounted() { mounted() {
this.getData() this.getData();
}, },
methods: { methods: {
getData() { getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeStart = this.time ? this.time[1] : null this.queryform.dateTimeEnd = this.time ? this.time[1] : null;
getAccessAnalyse(this.queryform).then(res=>{ getAccessAnalyse(this.queryform).then((res) => {
this.data = res.data this.data = res.data;
let lineX = res.data.accessTrend.map(item=>item.accessDay) let lineX = res.data.accessTrend.map((item) => item.accessDay);
let lineY = res.data.accessTrend.map(item=>item.accessCount) let lineY = res.data.accessTrend.map((item) => item.accessCount);
let barX = res.data.pageAccessTop.map(item=>item.accessCount) let barX = res.data.pageAccessTop.map((item) => item.accessCount);
let barY = res.data.pageAccessTop.map(item=>item.pageName) let barY = res.data.pageAccessTop.map((item) => item.pageName);
this.initLine(lineX,lineY) this.initLine(lineX, lineY);
this.initBar(barX,barY) this.initBar(barX, barY);
}) });
}, },
initBar(barX,barY) { initBar(barX, barY) {
let chartDom = document.getElementById('pages') let chartDom = document.getElementById("pages");
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption({ myChart.setOption({
legend: { legend: {
bottom: 0, bottom: 0,
itemWidth:10, itemWidth: 10,
itemHeight:10 itemHeight: 10,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow' type: "shadow",
} },
}, },
color:['#29D090'], color: ["#29D090"],
grid: { grid: {
top:'3%', top: "3%",
left: '3%', left: "3%",
right: '3%', right: "3%",
bottom: '10%', bottom: "10%",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'value', type: "value",
boundaryGap: [0, 0.01] boundaryGap: [0, 0.01],
}, },
yAxis: { yAxis: {
type: 'category', type: "category",
data: barY, data: barY,
axisTick: { axisTick: {
show: false show: false,
}
}, },
series: [{ },
name: '访问次数', series: [
type: 'bar', {
name: "访问次数",
type: "bar",
data: barX, data: barX,
barWidth:10 barWidth: 10,
} },
] ],
}) });
}, },
initLine(lineX,lineY) { initLine(lineX, lineY) {
let chartDom = document.getElementById('number') let chartDom = document.getElementById("number");
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption({ myChart.setOption({
legend: { legend: {
bottom: 0 bottom: 0,
}, },
grid: { grid: {
left: '10%', left: "10%",
rigth: 0, rigth: 0,
top: '5%', top: "5%",
bottom: '15%' bottom: "15%",
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: lineX, data: lineX,
axisTick: { axisTick: {
show: false show: false,
} },
}, },
yAxis: { yAxis: {
type: 'value' type: "value",
}, },
series: [{ series: [
name: '页面访问次数', {
name: "页面访问次数",
data: lineY, data: lineY,
type: 'line', type: "line",
markLine: { markLine: {
data: [{ data: [
type: 'average', {
name: '均值' type: "average",
}], name: "均值",
},
],
label: { label: {
position: 'insideStartTop', position: "insideStartTop",
formatter: '{b}:{c}' formatter: "{b}:{c}",
} },
} },
}] },
}) ],
} });
} },
}; },
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page { .page {
height: calc(100% - 50px); height: calc(100% - 50px);
/deep/.ant-form { /deep/.ant-form {
...@@ -233,7 +258,7 @@ ...@@ -233,7 +258,7 @@
.page-dv { .page-dv {
width: calc(50% - 15px); width: calc(50% - 15px);
height: 140px; height: 140px;
background-color: #F5FAFF; background-color: #f5faff;
padding: 30px; padding: 30px;
box-sizing: border-box; box-sizing: border-box;
...@@ -246,7 +271,7 @@ ...@@ -246,7 +271,7 @@
.chatrs-dv { .chatrs-dv {
padding: 20px; padding: 20px;
background-color: #F6FBF7; background-color: #f6fbf7;
} }
#pages { #pages {
...@@ -254,5 +279,5 @@ ...@@ -254,5 +279,5 @@
} }
} }
} }
} }
</style> </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