Skip to content

S
smart_gov_platform
Commit 3a5c9c56 authored by xj's avatar xj
Browse files
Options

完成事件分析，产品热力图接口对接

parent b13740b4
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 71 deletions
portal-manager-ui/admin/.env
View file @ 3a5c9c56
VUE_APP_API_BASE_URL=http://192.168.0.98:11072
VUE_APP_API_BASE_URL=http://192.168.0.98:11072
\ No newline at end of file
portal-manager-ui/admin/src/api/dataActuary.js 0 → 100644
View file @ 3a5c9c56
import http from "../request/http";
let baseURL = process.env.VUE_APP_API_BASE_URL;
let BASEURL = process.env.VUE_APP_API_PHP_URL;
/* 使用行为分析 */
//事件分析
export function getEventCensus(params) {
return http.post(`${baseURL}/zwfw/act/analyse/pageEventCensus`, params);
}
//产品热力图
export function getProductHotCensus(params) {
return http.post(`${baseURL}/zwfw/act/analyse/productHotCensus`, params);
}
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/eventanalyse/eventanalyse.vue
View file @ 3a5c9c56
......@@ -3,14 +3,14 @@
<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.value" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack">
Jack
<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="queryform.value" style="width: 300px" />
<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">
......@@ -18,27 +18,36 @@
</a-button>
</a-form-model-item>
</a-form-model>
<div class="main">
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }">
<div class="mt20">
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false">
</a-table>
</div>
</div>
</template>
<script>
<script>
import {getEventCensus} from '@/api/dataActuary.js'
import moment from 'moment';
export default {
data() {
return {
queryform: {
value: null
},
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')],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
},
product:[{
title:'排队机',
id:1
}],
columns: [{
title: "序号",
width: "70px",
......@@ -47,27 +56,39 @@
},
{
title: "事件",
dataIndex: "title",
dataIndex: "eventName",
align: "center",
},
{
title: '事件ID',
dataIndex: 'address',
dataIndex: 'eventCode',
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'address1',
dataIndex: 'dayAvg',
align: "center",
},
{
title: '事件平均使用时长（单次）',
dataIndex: 'address2',
dataIndex: 'takeTimeAvg',
align: "center",
}
],
data: []
data: [],
}
},
mounted() {
this.getList()
},
methods:{
getList() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getEventCensus(this.queryform).then(res=>{
this.data = res.data.data
})
}
}
};
</script>
......
portal-manager-ui/admin/src/views/dataActuary/behaviour/product/product.vue
View file @ 3a5c9c56
<template>
<!-- 产品分析 -->
<div class="page">
<div class="img-dv">
<div id="queuing" @click="clickEvent"></div>
<div class="img-dv">
<img :src="BASE_URL + img" >
<div id="queuing"></div>
</div>
<div class="list-dv">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 180px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</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>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/>
</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 v-model="queryform.pageCode" style="width: 200px">
<a-select-option :value="item.id" v-for="(item,index) in page" :key="index">
{{item.title}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
......@@ -35,7 +36,7 @@
<div>312321</div>
</div>
<div style="margin-bottom: 20px;">事件排名Top10</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }">
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false">
</a-table>
</div>
</div>
......@@ -43,18 +44,32 @@
</template>
<script>
import Heatmap from 'heatmap.js';
import Heatmap from 'heatmap.js';
import moment from 'moment';
import {getProductHotCensus} from '@/api/dataActuary.js'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
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
}],
page:[{
title:'首页',
id:'/'
}],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
......@@ -64,41 +79,40 @@
},
{
title: "事件",
dataIndex: "title",
dataIndex: "businessName",
align: "center",
},
{
title: '点击次数',
dataIndex: 'address',
dataIndex: 'value',
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'address1',
dataIndex: 'proportion',
align: "center",
}
],
data: [],
heatmapInstance: null,
dataPoint: []
dataPoint: [],
img:'',
BASE_URL:process.env.VUE_APP_API_BASE_URL
}
},
mounted() {
this.init('queuing')
mounted() {
this.getList()
},
methods: {
clickEvent(e) {
this.dataPoint.push({
x: e.layerX,
y: e.layerY,
value: 1
})
let data = {
max: 10,
min: 0,
data: this.dataPoint
};
this.heatmapInstance.setData(data);
methods: {
getList() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getProductHotCensus(this.queryform).then(res=>{
this.data = res.data.data
this.img = res.data.screenUrl
this.dataPoint = res.data.data.map(({x,y,value})=>({x,y,value}))
this.init('queuing',this.dataPoint)
})
},
init(el, dataPoint) {
let config = {
......@@ -108,7 +122,13 @@
minOpacity: 0,
blur: .5
};
this.heatmapInstance = Heatmap.create(config);
this.heatmapInstance = Heatmap.create(config);
let data = {
max: 10,
min: 0,
data: this.dataPoint
};
this.heatmapInstance.setData(data);
}
}
};
......@@ -123,15 +143,20 @@
.img-dv {
width: 60%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
padding: 0 100px;
position: relative;
img{
width: 100%;
background-size: 100% 100%;
}
#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%;
width: calc(100% - 200px);
height: 100%;
position: absolute !important;
top: 0;
left:100px;
z-index: 999;
}
}
......
portal-manager-ui/admin/src/views/dataAdmin/components/Impossible/index.vue
View file @ 3a5c9c56
......@@ -32,7 +32,7 @@
</div>
<div class="table-box">
<a-table :dataSource="tabledataSource" :columns="tablecolumns" :pagination="pagination" :scroll="{ y: 590 }"
:row-key="(record) => record.id" :row-selection="{
:row-key="(record) => record.id" @change="changeTablePage" :row-selection="{
selectedRowKeys: tableSelectedKeys,
onChange: onSelectChange,
}">
......@@ -134,7 +134,8 @@
import image from '@/components/image/thumbImage'
import {
export2Excel
} from "@/utils/js/exportExcel";
} from "@/utils/js/exportExcel";
import moment from 'moment'
export default {
data() {
return {
......@@ -144,7 +145,7 @@
size: 10,
source: '',
keyword: null,
time: null,
time: [moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
reply:''
},
deviceList: [{
......@@ -164,7 +165,10 @@
title: "序号",
width: "70px",
align: 'center',
customRender: (text, record, index) => `${index+1}`
customRender: (text, record, index) =>
(this.queryform.page - 1) * this.queryform.size +
index +
1,
},
{
......@@ -261,8 +265,14 @@
methods: {
getlist() {
getImpossible(this.queryform).then(res => {
this.tabledataSource = res.data.data
this.tabledataSource = res.data.data
this.pagination.total = res.data.total
})
},
changeTablePage(e) {
this.queryform.page = e.current
this.queryform.size = e.pageSize
this.getlist()
},
onChange(e) {
this.queryform.reply = e.target.checked ? 0 : ''
......@@ -371,6 +381,10 @@
/deep/td {
text-align: left;
}
/deep/.ant-descriptions-item-label{
color: #1890ff;
}
.btn-dv {
......
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