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

portal-manager-ui/admin/src/api/dataActuary.js

+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

@@ -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,8 +18,8 @@
 				</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>
@@ -27,18 +27,27 @@
 </template>
 
 <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,26 +56,38 @@
 					},
 					{
 						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
+				})
 			}
 		}
 	};

portal-manager-ui/admin/src/views/dataActuary/behaviour/product/product.vue

@@ -2,24 +2,25 @@
 	<!-- 产品分析 -->
 	<div class="page">
 		<div class="img-dv">
-			<div id="queuing" @click="clickEvent"></div>
+			<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 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 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>
@@ -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>
@@ -44,12 +45,26 @@
 
 <script>
 	import Heatmap from 'heatmap.js';
+	import moment from 'moment';
+	import {getProductHotCensus} from '@/api/dataActuary.js'
 	export default {
 		data() {
 			return {
 				queryform: {
-					value: null
+					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
 				},
@@ -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')
+			this.getList()
 		},
 		methods: {
-			clickEvent(e) {
-				this.dataPoint.push({
-					x: e.layerX,
-					y: e.layerY,
-					value: 1
+			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)
 				})
-				let data = {
-					max: 10,
-					min: 0,
-					data: this.dataPoint
-				};
-				this.heatmapInstance.setData(data);
 			},
 			init(el, dataPoint) {
 				let config = {
@@ -109,6 +123,12 @@
 					blur: .5
 				};
 				this.heatmapInstance = Heatmap.create(config);
+				let data = {
+					max: 10,
+					min: 0,
+					data: this.dataPoint
+				};
+				this.heatmapInstance.setData(data);
 			}
 		}
 	};
@@ -123,16 +143,21 @@
 		.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');
+			margin-top: 100px;
+			padding: 0 100px;
+			position: relative;
+			img{
+				width: 100%;
 				background-size: 100% 100%;
 			}
+			#queuing {
+				width: calc(100% - 200px);
+				height: 100%;
+				position: absolute !important;
+				top: 0;
+				left:100px;
+				z-index: 999;
+			}
 		}
 
 		.list-dv {

portal-manager-ui/admin/src/views/dataAdmin/components/Impossible/index.vue

@@ -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,
 			  }">
@@ -135,6 +135,7 @@
 	import {
 		export2Excel
 	} 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,
 					},
 
 					{
@@ -262,8 +266,14 @@
 			getlist() {
 				getImpossible(this.queryform).then(res => {
 					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 : ''
 			},
@@ -373,6 +383,10 @@
 		text-align: left;
 	}
 	
+	/deep/.ant-descriptions-item-label{
+		color: #1890ff;
+	}
+
 	.btn-dv {
 		background-color: #fff;
 		padding: 15px;