Commit b69af704 authored by “yiyousong”'s avatar “yiyousong”
parents 7a631e96 42350a72
package com.mortals.xhx.module.app.model.vo; package com.mortals.xhx.module.app.model.vo;
import com.mortals.framework.model.BaseEntityLong; import com.mortals.framework.model.BaseEntityLong;
import com.mortals.xhx.module.app.model.AppDatasetQuery;
import com.mortals.xhx.module.app.model.AppInfoFieldEntity; import com.mortals.xhx.module.app.model.AppInfoFieldEntity;
import com.mortals.xhx.module.app.model.AppInfoFieldQuery;
import lombok.Data;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.List; import java.util.List;
/** /**
* 自助终端应用信息字段视图对象 * 自助终端应用信息字段视图对象
* *
* @author zxfei * @author zxfei
* @date 2022-11-28 * @date 2022-11-28
*/ */
@Data
public class AppInfoFieldVo extends BaseEntityLong { public class AppInfoFieldVo extends BaseEntityLong {
/** OR条件集合,列表项之间是OR,项内容之间是AND,如:(list[0].1 and list[0].2) or (list[1].3 and list[1].4) */
private List<AppInfoFieldQuery> orConditionList;
/** AND条件集合,列表项之间是AND,项内容之间是OR,如:(list[0].1 or list[0].2) and (list[1].3 or list[1].4) */
private List<AppInfoFieldQuery> andConditionList;
} }
\ No newline at end of file
package com.mortals.xhx.module.app.model.vo; package com.mortals.xhx.module.app.model.vo;
import com.mortals.framework.model.BaseEntityLong; import com.mortals.framework.model.BaseEntityLong;
import com.mortals.xhx.module.app.model.AppDatasetQuery;
import com.mortals.xhx.module.app.model.AppInfoTempleteFieldEntity; import com.mortals.xhx.module.app.model.AppInfoTempleteFieldEntity;
import com.mortals.xhx.module.app.model.AppInfoTempleteFieldQuery;
import lombok.Data;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.List; import java.util.List;
/** /**
...@@ -9,6 +13,12 @@ import java.util.List; ...@@ -9,6 +13,12 @@ import java.util.List;
* @author zxfei * @author zxfei
* @date 2022-11-28 * @date 2022-11-28
*/ */
@Data
public class AppInfoTempleteFieldVo extends BaseEntityLong { public class AppInfoTempleteFieldVo extends BaseEntityLong {
/** OR条件集合,列表项之间是OR,项内容之间是AND,如:(list[0].1 and list[0].2) or (list[1].3 and list[1].4) */
private List<AppInfoTempleteFieldQuery> orConditionList;
/** AND条件集合,列表项之间是AND,项内容之间是OR,如:(list[0].1 or list[0].2) and (list[1].3 or list[1].4) */
private List<AppInfoTempleteFieldQuery> andConditionList;
} }
\ No newline at end of file
<template> <template>
<!-- 页面分析 --> <!-- 页面分析 -->
<div class="page"> <div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline"> <a-form-model
<a-form-model-item> :model="queryform"
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品"> :label-col="labelCol"
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index"> :wrapper-col="wrapperCol"
{{item.title}} layout="inline"
</a-select-option> >
</a-select> <a-form-model-item>
</a-form-model-item> <a-select
<a-form-model-item> v-model="queryform.productId"
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/> style="width: 200px"
</a-form-model-item> placeholder="选择产品"
<a-form-model-item> >
<a-button type="primary" class="addclass" @click="getData"> <a-select-option
开始分析 :value="item.id"
</a-button> v-for="(item, index) in product"
</a-form-model-item> :key="index"
</a-form-model> >
<div class="box"> {{ item.title }}
<div class="left-dv"> </a-select-option>
<div>页面访问指标趋势</div> </a-select>
<div class="txt-dv"> </a-form-model-item>
<div> <a-form-model-item>
<div class="num">{{data ? data.accessSum : 0}}</div> <a-range-picker
<div>页面累计访问次数</div> valueFormat="yyyy-MM-DD"
</div> v-model="time"
<div> style="width: 300px"
<div class="num">{{data ? data.dayAccessAvg : 0}}</div> :allowClear="false"
<div>日均访问次数</div> />
</div> </a-form-model-item>
</div> <a-form-model-item>
<div id="number"></div> <a-button type="primary" class="addclass" @click="getData">
</div> 开始分析
<div class="right-dv"> </a-button>
<div class="page-box"> </a-form-model-item>
<div class="page-dv"> </a-form-model>
<div>人均访问深度</div> <div class="box">
<div class="page-num">{{data ? data.depthAvg : 0}}</div> <div class="left-dv">
</div> <div>页面访问指标趋势</div>
<div class="page-dv"> <div class="txt-dv">
<div>次均访问深度</div> <div>
<div class="page-num">{{data ? data.singleDepth : 0}}</div> <div class="num">{{ data ? data.accessSum : 0 }}</div>
</div> <div>页面累计访问次数</div>
</div> </div>
<div class="chatrs-dv"> <div>
<div>页面访问次数TOP10</div> <div class="num">{{ data ? data.dayAccessAvg : 0 }}</div>
<div id="pages"></div> <div>日均访问次数</div>
</div> </div>
</div> </div>
</div> <div id="number"></div>
</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> </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: { },
span: 1 ],
}, labelCol: {
wrapperCol: { span: 1,
span: 14 },
}, wrapperCol: {
data:null span: 14,
} },
}, data: null,
mounted() { };
this.getData() },
}, mounted() {
methods: { this.getData();
getData() { },
this.queryform.dateTimeStart = this.time ? this.time[0] : null methods: {
this.queryform.dateTimeStart = this.time ? this.time[1] : null getData() {
getAccessAnalyse(this.queryform).then(res=>{ this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.data = res.data this.queryform.dateTimeEnd = this.time ? this.time[1] : null;
let lineX = res.data.accessTrend.map(item=>item.accessDay) getAccessAnalyse(this.queryform).then((res) => {
let lineY = res.data.accessTrend.map(item=>item.accessCount) this.data = res.data;
let barX = res.data.pageAccessTop.map(item=>item.accessCount) let lineX = res.data.accessTrend.map((item) => item.accessDay);
let barY = res.data.pageAccessTop.map(item=>item.pageName) let lineY = res.data.accessTrend.map((item) => item.accessCount);
this.initLine(lineX,lineY) let barX = res.data.pageAccessTop.map((item) => item.accessCount);
this.initBar(barX,barY) 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); initBar(barX, barY) {
myChart.setOption({ let chartDom = document.getElementById("pages");
legend: { let myChart = echarts.init(chartDom);
bottom: 0, myChart.setOption({
itemWidth:10, legend: {
itemHeight:10 bottom: 0,
}, itemWidth: 10,
tooltip: { itemHeight: 10,
trigger: 'axis', },
axisPointer: { tooltip: {
type: 'shadow' trigger: "axis",
} axisPointer: {
}, type: "shadow",
color:['#29D090'], },
grid: { },
top:'3%', color: ["#29D090"],
left: '3%', grid: {
right: '3%', top: "3%",
bottom: '10%', left: "3%",
containLabel: true right: "3%",
}, bottom: "10%",
xAxis: { containLabel: true,
type: 'value', },
boundaryGap: [0, 0.01] xAxis: {
}, type: "value",
yAxis: { boundaryGap: [0, 0.01],
type: 'category', },
data: barY, yAxis: {
axisTick: { type: "category",
show: false data: barY,
} axisTick: {
}, show: false,
series: [{ },
name: '访问次数', },
type: 'bar', series: [
data: barX, {
barWidth:10 name: "访问次数",
} type: "bar",
] data: barX,
}) barWidth: 10,
}, },
initLine(lineX,lineY) { ],
let chartDom = document.getElementById('number') });
let myChart = echarts.init(chartDom); },
myChart.setOption({ initLine(lineX, lineY) {
legend: { let chartDom = document.getElementById("number");
bottom: 0 let myChart = echarts.init(chartDom);
}, myChart.setOption({
grid: { legend: {
left: '10%', bottom: 0,
rigth: 0, },
top: '5%', grid: {
bottom: '15%' left: "10%",
}, rigth: 0,
xAxis: { top: "5%",
type: 'category', bottom: "15%",
data: lineX, },
axisTick: { xAxis: {
show: false type: "category",
} data: lineX,
}, axisTick: {
yAxis: { show: false,
type: 'value' },
}, },
series: [{ yAxis: {
name: '页面访问次数', type: "value",
data: lineY, },
type: 'line', series: [
markLine: { {
data: [{ name: "页面访问次数",
type: 'average', data: lineY,
name: '均值' type: "line",
}], markLine: {
label: { data: [
position: 'insideStartTop', {
formatter: '{b}:{c}' type: "average",
} name: "均值",
} },
}] ],
}) label: {
} position: "insideStartTop",
} 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 {
padding: 15px; padding: 15px;
border-bottom: solid 1px #efefef; border-bottom: solid 1px #efefef;
} }
.box { .box {
height: calc(100% - 70px); height: calc(100% - 70px);
display: flex; display: flex;
.left-dv { .left-dv {
width: 55%; width: 55%;
min-height: 100%; min-height: 100%;
border-right: solid 1px #efefef; border-right: solid 1px #efefef;
padding: 15px; padding: 15px;
.txt-dv { .txt-dv {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 50px; margin: 50px;
text-align: center; text-align: center;
.num { .num {
font-size: 24px; font-size: 24px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
#number { #number {
height: 350px; height: 350px;
} }
} }
.right-dv { .right-dv {
flex: 1; flex: 1;
padding: 15px; padding: 15px;
.page-box { .page-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 20px 0; margin: 20px 0;
.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;
.page-num { .page-num {
font-size: 24px; font-size: 24px;
margin-top: 20px; margin-top: 20px;
} }
} }
} }
.chatrs-dv { .chatrs-dv {
padding: 20px; padding: 20px;
background-color: #F6FBF7; background-color: #f6fbf7;
} }
#pages { #pages {
height: 290px; height: 290px;
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
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