Skip to content

S
smart_gov_platform
Commit 6f7b19cb authored by xj's avatar xj
Browse files
Options

完成使用行为分析静态页面

parent e765ffb6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 17873 additions and 5272 deletions
portal-manager-ui/admin/package-lock.json
View file @ 6f7b19cb
This diff is collapsed.
portal-manager-ui/admin/package.json
View file @ 6f7b19cb
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"echarts": "^5.3.3", "echarts": "^5.3.3",
"element-ui": "^2.15.8", "element-ui": "^2.15.8",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"heatmap.js": "^2.0.5",
"highlight.js": "^11.5.1", "highlight.js": "^11.5.1",
"js-export-excel": "^1.1.4", "js-export-excel": "^1.1.4",
"lodash": "^4.17.21", "lodash": "^4.17.21",
......
portal-manager-ui/admin/src/utils/js/vue-heatmap.js 0 → 100644
View file @ 6f7b19cb
import Heatmap from 'heatmap.js';
// import 'heatmap.js/plugins/heatmap.canvas.js';
// import 'heatmap.js/plugins/heatmap-gradient.js';
// import 'heatmap.js/plugins/heatmap-data-urls.js';
// import 'heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js';
// import 'leaflet-heatmap/dist/leaflet-heatmap.css';
export default {
install(Vue, options) {
const heatmapContainer = document.createElement('div');
heatmapContainer.id = 'heatmap-container';
heatmapContainer.style.display = 'none';
document.body.appendChild(heatmapContainer);
const heatmapConfig = {
radius: options.radius || 30,
maxOpacity: options.maxOpacity || 0.8,
minOpacity: options.minOpacity || 0.2,
blur: options.blur || 0.85,
gradient: options.gradient || {
0.45: 'rgb(0,0,255)',
0.55: 'rgb(0,255,255)',
0.65: 'rgb(0,255,0)',
0.95: 'yellow',
1.0: 'rgb(255,0,0)',
},
};
const heatmapInstance = Heatmap.create({
container: heatmapContainer,
radius: heatmapConfig.radius,
maxOpacity: heatmapConfig.maxOpacity,
minOpacity: heatmapConfig.minOpacity,
blur: heatmapConfig.blur,
gradient: heatmapConfig.gradient,
height:1080,
width:1920
});
Vue.prototype.$heatmap = function(data) {
heatmapInstance.setData(data);
heatmapContainer.style.display = 'block';
setTimeout(() => {
heatmapContainer.style.display = 'none';
}, options.duration || 3000);
};
},
};
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/eventanalyse/eventanalyse.vue
View file @ 6f7b19cb
<template> <template>
<!-- 事件分析 --> <!-- 事件分析 -->
<div>事件分析</div> <div class="page">
</template> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<script> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
export default {}; <a-select-option value="jack">
</script> Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="main">
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }">
</a-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
align: "center",
},
{
title: "事件",
dataIndex: "title",
align: "center",
},
{
title: '事件ID',
dataIndex: 'address',
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'address1',
align: "center",
},
{
title: '事件平均使用时长（单次）',
dataIndex: 'address2',
align: "center",
}
],
data: []
}
}
};
</script>
<style lang="less" scoped> <style lang="less" scoped>
.page{
padding: 15px;
}
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/information/information.vue
View file @ 6f7b19cb
<template> <template>
<!-- 信息流分析 --> <!-- 信息流分析 -->
<div>信息流分析</div> <div class="page">
</template> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<script> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
export default {}; <a-select-option value="jack">
</script> Jack
</a-select-option>
<style lang="less" scoped> </a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择一级场景">
<a-select-option value="jack">
Jack
</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-option value="jack">
Jack
</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-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</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 v-model="queryform.value">
<a-checkbox value="1">访问人数</a-checkbox>
<a-checkbox value="2">打开次数</a-checkbox>
<a-checkbox value="3">访问页面数</a-checkbox>
</a-checkbox-group>
</div>
<div class="mb">
<span style="margin-right: 30px;">对比筛选</span>
<a-checkbox-group v-model="queryform.value">
<a-checkbox value="1">日对比</a-checkbox>
</a-checkbox-group>
</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="pagination">
</a-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
align: "center",
},
{
title: "时间",
dataIndex: "title",
align: "center",
},
{
title: '产品名称',
dataIndex: 'address',
align: "center",
},
{
title: '一级场景',
dataIndex: 'address1',
align: "center",
},
{
title: '二级场景',
dataIndex: 'address2',
align: "center",
},
{
title: '三级场景',
dataIndex: 'address3',
align: "center",
},{
title: '访问人数',
dataIndex: 'address5',
align: "center",
},{
title: '打开次数',
dataIndex: 'address4',
align: "center",
},{
title: '访问页面数',
dataIndex: 'address8',
align: "center",
}
],
data: [],
pagination: {
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
},
}
}
};
</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> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/module.vue
View file @ 6f7b19cb
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
> >
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
<router-view style="padding: 0 1rem" /> <router-view />
</div> </div>
</div> </div>
</template> </template>
...@@ -103,6 +103,9 @@ export default { ...@@ -103,6 +103,9 @@ export default {
margin-left: 0.7rem !important; margin-left: 0.7rem !important;
} }
} }
/deep/.ant-tabs-bar{
margin: 0;
}
} }
</style> </style>
portal-manager-ui/admin/src/views/dataActuary/behaviour/pageanalyse/pageAnalyse.vue
View file @ 6f7b19cb
<template> <template>
<!-- 页面分析 --> <!-- 页面分析 -->
<div>页面分析</div> <div class="page">
</template> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<script> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
export default {}; <a-select-option value="jack">
</script> Jack
</a-select-option>
<style lang="less" scoped> </a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</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">4058</div>
<div>页面累计访问次数</div>
</div>
<div>
<div class="num">4058</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">4.00页</div>
</div>
<div class="page-dv">
<div>次均访问深度</div>
<div class="page-num">4.00页</div>
</div>
</div>
<div class="chatrs-dv">
<div>页面访问次数TOP10</div>
<div id="pages"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.initLine()
this.initBar()
},
methods: {
initBar() {
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: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
axisTick: {
show: false
}
},
series: [{
name: '访问次数',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230],
barWidth:10
}
]
})
},
initLine() {
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: false
}
},
yAxis: {
type: 'value'
},
series: [{
name: '页面访问次数',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markLine: {
data: [{
type: 'average',
name: '均值'
}],
label: {
position: 'insideStartTop',
formatter: '{b}:{c}'
}
}
}]
})
}
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
/deep/.ant-form {
padding: 15px;
border-bottom: solid 1px #efefef;
}
.box {
height: calc(100% - 70px);
display: flex;
.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;
.num {
font-size: 24px;
margin-bottom: 10px;
}
}
#number {
height: 350px;
}
}
.right-dv {
flex: 1;
padding: 15px;
.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-num {
font-size: 24px;
margin-top: 20px;
}
}
}
.chatrs-dv {
padding: 20px;
background-color: #F6FBF7;
}
#pages {
height: 290px;
}
}
}
}
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/pathanalyse/pathAnalyse.vue
View file @ 6f7b19cb
<template> <template>
<!-- 路径分析 --> <!-- 路径分析 -->
<div>路劲分析</div> <div class="page">
</template> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<script> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
export default {}; <a-select-option value="jack">
</script> Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div id="path"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.init()
},
methods: {
init() {
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: [{
name: 'a'
},
{
name: 'b'
},
{
name: 'a1'
},
{
name: 'a2'
},
{
name: 'b1'
},
{
name: 'c'
}
],
links: [{
source: 'a',
target: 'a1',
value: 5,
lineStyle:{
color:'source'
}
},
{
source: 'a',
target: 'a2',
value: 3,
lineStyle:{
color:'source'
}
},
{
source: 'b',
target: 'b1',
value: 8,
lineStyle:{
color:'source'
}
},
{
source: 'a',
target: 'b1',
value: 3,
lineStyle:{
color:'source'
}
},
{
source: 'b1',
target: 'a1',
value: 1,
lineStyle:{
color:'source'
}
},
{
source: 'b1',
target: 'c',
value: 2,
lineStyle:{
color:'source'
}
}
]
}
})
}
}
};
</script>
<style lang="less" scoped> <style lang="less" scoped>
.page{
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
#path{
flex: 1;
width: 70%;
margin: 0 auto;
}
}
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/product/product.vue
View file @ 6f7b19cb
<template> <template>
<!-- 产品分析 --> <!-- 产品分析 -->
<div>产品热力图</div> <div class="page">
</template> <div class="img-dv">
<div id="queuing" @click="clickEvent"></div>
<script> </div>
export default {}; <div class="list-dv">
</script> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<style lang="less" scoped> <a-select v-model="queryform.value" style="width: 180px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 390px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="main">
<div class="total-dv">
<div>总点击次数</div>
<div>312321</div>
</div>
<div style="margin-bottom: 20px;">事件排名Top10</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }">
</a-table>
</div>
</div>
</div>
</template>
<script>
import Heatmap from 'heatmap.js';
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
align: "center",
},
{
title: "事件",
dataIndex: "title",
align: "center",
},
{
title: '点击次数',
dataIndex: 'address',
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'address1',
align: "center",
}
],
data: [],
heatmapInstance: null,
dataPoint: []
}
},
mounted() {
this.init('queuing')
},
methods: {
clickEvent(e) {
this.dataPoint.push({
x: e.layerX,
y: e.layerY,
value: 20
})
let data = {
max: 100,
min: 0,
data: this.dataPoint
};
this.heatmapInstance.setData(data);
},
init(el, dataPoint) {
let config = {
container: document.getElementById(el),
radius: 30,
maxOpacity: .8,
minOpacity: 0,
blur: .5
};
this.heatmapInstance = Heatmap.create(config);
}
}
};
</script>
<style lang="less" scoped>
.page {
width: 100%;
height: calc(100% - 50px);
display: flex;
.img-dv {
width: 60%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
#queuing {
width: 740px;
height: 370px;
background-image: url('https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_640.jpg');
background-size: 100% 100%;
}
}
.list-dv {
width: 40%;
min-height: 100%;
border-left: solid 1px #efefef;
box-sizing: border-box;
/deep/.ant-form {
padding: 15px;
border-bottom: solid 1px #efefef;
}
.main {
padding: 15px;
}
.total-dv {
display: flex;
justify-content: space-between;
padding: 20px 0;
}
}
}
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/usinghabit/usinghabit.vue
View file @ 6f7b19cb
<template> <template>
<!-- 使用习惯分析 --> <!-- 使用习惯分析 -->
<div>使用习惯</div> <div class="page">
</template> <a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<script> <a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
export default {}; <a-select-option value="jack">
</script> Jack
</a-select-option>
<style lang="less" scoped> </a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="charts-box">
<div id="canal"></div>
<div id="type"></div>
<div id="way"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.initCanal()
this.initType()
this.initWay()
},
methods: {
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() {
let chartDom = document.getElementById('type')
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'
}
],
}]
})
},
initCanal() {
let chartDom = document.getElementById('canal')
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: '终端取号'
},
{
value: 735,
name: '在线取号'
}
]
}]
})
}
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
.charts-box {
flex: 1;
display: flex;
justify-content: space-between;
padding: 50px 0;
#canal,#type,#way {
width: 30%;
height: 100%;
}
}
}
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/yarn.lock
View file @ 6f7b19cb
This diff is collapsed.
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