Commit 98358c45 authored by 廖旭伟's avatar 廖旭伟

Merge remote-tracking branch 'origin/master'

parents 8bcc6ca4 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
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
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<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.value" style="width: 200px" placeholder="选择产品"> <a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack"> <a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
Jack {{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="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-form-model-item> <a-form-model-item>
<a-button type="primary"> <a-button type="primary">
...@@ -18,27 +18,36 @@ ...@@ -18,27 +18,36 @@
</a-button> </a-button>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
<div class="main"> <div class="mt20">
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }"> <a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false">
</a-table> </a-table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {getEventCensus} from '@/api/dataActuary.js'
import moment from 'moment';
export default { export default {
data() { data() {
return { return {
queryform: { 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: { labelCol: {
span: 1 span: 1
}, },
wrapperCol: { wrapperCol: {
span: 14 span: 14
}, },
product:[{
title:'排队机',
id:1
}],
columns: [{ columns: [{
title: "序号", title: "序号",
width: "70px", width: "70px",
...@@ -47,27 +56,39 @@ ...@@ -47,27 +56,39 @@
}, },
{ {
title: "事件", title: "事件",
dataIndex: "title", dataIndex: "eventName",
align: "center", align: "center",
}, },
{ {
title: '事件ID', title: '事件ID',
dataIndex: 'address', dataIndex: 'eventCode',
align: "center", align: "center",
}, },
{ {
title: '事件数量(日均)', title: '事件数量(日均)',
dataIndex: 'address1', dataIndex: 'dayAvg',
align: "center", align: "center",
}, },
{ {
title: '事件平均使用时长(单次)', title: '事件平均使用时长(单次)',
dataIndex: 'address2', dataIndex: 'takeTimeAvg',
align: "center", 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> </script>
......
<template> <template>
<!-- 产品分析 --> <!-- 产品分析 -->
<div class="page"> <div class="page">
<div class="img-dv"> <div class="img-dv">
<div id="queuing" @click="clickEvent"></div> <img :src="BASE_URL + img" >
<div id="queuing"></div>
</div> </div>
<div class="list-dv"> <div class="list-dv">
<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.value" style="width: 180px" placeholder="选择产品"> <a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack"> <a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
Jack {{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="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-form-model-item> <a-form-model-item>
<a-select v-model="queryform.value" style="width: 390px" placeholder="选择产品"> <a-select v-model="queryform.pageCode" style="width: 200px">
<a-select-option value="jack"> <a-select-option :value="item.id" v-for="(item,index) in page" :key="index">
Jack {{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>
...@@ -35,7 +36,7 @@ ...@@ -35,7 +36,7 @@
<div>312321</div> <div>312321</div>
</div> </div>
<div style="margin-bottom: 20px;">事件排名Top10</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> </a-table>
</div> </div>
</div> </div>
...@@ -43,18 +44,32 @@ ...@@ -43,18 +44,32 @@
</template> </template>
<script> <script>
import Heatmap from 'heatmap.js'; import Heatmap from 'heatmap.js';
import moment from 'moment';
import {getProductHotCensus} from '@/api/dataActuary.js'
export default { export default {
data() { data() {
return { return {
queryform: { queryform: {
value: null productId: 1,
}, dateTimeStart:moment().format('yyyy-MM-DD'),
labelCol: { dateTimeEnd:moment().format('yyyy-MM-DD'),
span: 1 pageCode:'/'
}, },
wrapperCol: { time:[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
span: 14 product:[{
title:'排队机',
id:1
}],
page:[{
title:'首页',
id:'/'
}],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
}, },
columns: [{ columns: [{
title: "序号", title: "序号",
...@@ -64,41 +79,40 @@ ...@@ -64,41 +79,40 @@
}, },
{ {
title: "事件", title: "事件",
dataIndex: "title", dataIndex: "businessName",
align: "center", align: "center",
}, },
{ {
title: '点击次数', title: '点击次数',
dataIndex: 'address', dataIndex: 'value',
align: "center", align: "center",
}, },
{ {
title: '事件数量(日均)', title: '事件数量(日均)',
dataIndex: 'address1', dataIndex: 'proportion',
align: "center", align: "center",
} }
], ],
data: [], data: [],
heatmapInstance: null, heatmapInstance: null,
dataPoint: [] dataPoint: [],
img:'',
BASE_URL:process.env.VUE_APP_API_BASE_URL
} }
}, },
mounted() { mounted() {
this.init('queuing') this.getList()
}, },
methods: { methods: {
clickEvent(e) { getList() {
this.dataPoint.push({ this.queryform.dateTimeStart = this.time ? this.time[0] : null
x: e.layerX, this.queryform.dateTimeStart = this.time ? this.time[1] : null
y: e.layerY, getProductHotCensus(this.queryform).then(res=>{
value: 1 this.data = res.data.data
}) this.img = res.data.screenUrl
let data = { this.dataPoint = res.data.data.map(({x,y,value})=>({x,y,value}))
max: 10, this.init('queuing',this.dataPoint)
min: 0, })
data: this.dataPoint
};
this.heatmapInstance.setData(data);
}, },
init(el, dataPoint) { init(el, dataPoint) {
let config = { let config = {
...@@ -108,7 +122,13 @@ ...@@ -108,7 +122,13 @@
minOpacity: 0, minOpacity: 0,
blur: .5 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 @@ ...@@ -123,15 +143,20 @@
.img-dv { .img-dv {
width: 60%; width: 60%;
min-height: 100%; min-height: 100%;
display: flex; margin-top: 100px;
justify-content: center; padding: 0 100px;
align-items: center; position: relative;
img{
width: 100%;
background-size: 100% 100%;
}
#queuing { #queuing {
width: 740px; width: calc(100% - 200px);
height: 370px; height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_640.jpg'); position: absolute !important;
background-size: 100% 100%; top: 0;
left:100px;
z-index: 999;
} }
} }
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</div> </div>
<div class="table-box"> <div class="table-box">
<a-table :dataSource="tabledataSource" :columns="tablecolumns" :pagination="pagination" :scroll="{ y: 590 }" <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, selectedRowKeys: tableSelectedKeys,
onChange: onSelectChange, onChange: onSelectChange,
}"> }">
...@@ -134,7 +134,8 @@ ...@@ -134,7 +134,8 @@
import image from '@/components/image/thumbImage' import image from '@/components/image/thumbImage'
import { import {
export2Excel export2Excel
} from "@/utils/js/exportExcel"; } from "@/utils/js/exportExcel";
import moment from 'moment'
export default { export default {
data() { data() {
return { return {
...@@ -144,7 +145,7 @@ ...@@ -144,7 +145,7 @@
size: 10, size: 10,
source: '', source: '',
keyword: null, keyword: null,
time: null, time: [moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
reply:'' reply:''
}, },
deviceList: [{ deviceList: [{
...@@ -164,7 +165,10 @@ ...@@ -164,7 +165,10 @@
title: "序号", title: "序号",
width: "70px", width: "70px",
align: 'center', 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 @@ ...@@ -261,8 +265,14 @@
methods: { methods: {
getlist() { getlist() {
getImpossible(this.queryform).then(res => { 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) { onChange(e) {
this.queryform.reply = e.target.checked ? 0 : '' this.queryform.reply = e.target.checked ? 0 : ''
...@@ -371,6 +381,10 @@ ...@@ -371,6 +381,10 @@
/deep/td { /deep/td {
text-align: left; text-align: left;
}
/deep/.ant-descriptions-item-label{
color: #1890ff;
} }
.btn-dv { .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