From 947638b2b7256435c98dea50deffd5769221dc4f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 23 八月 2020 13:17:20 +0800
Subject: [PATCH] 添加热力图应用,桌面禁用鼠标右键
---
src/pages/heatCamera/index/main.ts | 12 +++
vue.config.js | 6 +
src/pages/desktop/index/components/ToolsEntry.vue | 5 +
src/pages/heatCamera/index/App.vue | 135 +++++++++++++++++++++++++++++++++
src/pages/desktop/index/components/DFrame.vue | 21 ----
package.json | 1
src/pages/desktop/index/App.vue | 2
src/pages/desktop/index/components/Tools.vue | 5 +
src/pages/desktop/index/mock/userData.json | 11 ++
src/api/heatCamera.ts | 7 +
10 files changed, 183 insertions(+), 22 deletions(-)
diff --git a/package.json b/package.json
index 05893c4..1c891e3 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"echarts": "^4.8.0",
"echarts-liquidfill": "^2.0.6",
"element-ui": "^2.13.2",
+ "heatmap.js": "^2.0.5",
"html2canvas": "^1.0.0-rc.5",
"less-loader": "^6.2.0",
"moment": "^2.27.0",
diff --git a/src/api/heatCamera.ts b/src/api/heatCamera.ts
new file mode 100644
index 0000000..e64ca0f
--- /dev/null
+++ b/src/api/heatCamera.ts
@@ -0,0 +1,7 @@
+import request from '@/scripts/httpRequest'
+export const getHeatCameraData = (data: any) =>
+ request({
+ url: '/data/api-v/es/getPersons',
+ method: 'post',
+ data
+ })
diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue
index 5a5251e..37a8aa5 100644
--- a/src/pages/desktop/index/App.vue
+++ b/src/pages/desktop/index/App.vue
@@ -1,5 +1,5 @@
<template>
- <div id="app">
+ <div id="app" @contextmenu.prevent="">
<tools></tools>
<desktop></desktop>
<tools-entry ref="dock_model"></tools-entry>
diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue
index 3c5fe82..4c9e00a 100644
--- a/src/pages/desktop/index/components/DFrame.vue
+++ b/src/pages/desktop/index/components/DFrame.vue
@@ -149,18 +149,9 @@
// });
// });
//return false;
- //this.refreshDock();
+
},
- refreshDock: function () {
- setTimeout(function () {
- const dockItems = document.getElementsByClassName('dock-item');
- const dockMask = document.getElementsByClassName('dock-mask')[0];
- for (let i = 0; i < dockItems.length; i++) {
- dockItems[i].width = 60;
- }
- //dockMask.style.width = dockItems.length * 60 + 40 + 'px';
- }, 10);
- }
+
},
directives: {
drag(el) {
@@ -300,17 +291,9 @@
color: #fbb450;
}
-/* .d-frame-title-operation:hover .d-frame-operation-minus::before {
- content: "\f056";
-} */
-
.d-frame-operation-full {
color: #00d800;
}
-
-/* .d-frame-title-operation:hover .d-frame-operation-full::before {
- content: "\f055";
-} */
.d-frame-title-content {
line-height: 30px;
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index e75d173..8bc66e7 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -255,8 +255,11 @@
vertical-align: top;
line-height: 56px;
padding: 0 15px;
+
}
-
+.tools-icon img{
+ -webkit-user-drag: none;
+}
.tools .tools-icon:not(.no-hover-style):hover,
.tools .tools-icon:not(.no-hover-style).clicked {
color: white;
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index 89d8f14..36a0fc3 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -171,6 +171,11 @@
.logo{
text-align: right;
padding-right: 50px;
+ user-select: none;
+ img{
+ user-select: none;
+ -webkit-user-drag: none;
+ }
}
}
}
diff --git a/src/pages/desktop/index/mock/userData.json b/src/pages/desktop/index/mock/userData.json
index 3b284b4..169d84e 100644
--- a/src/pages/desktop/index/mock/userData.json
+++ b/src/pages/desktop/index/mock/userData.json
@@ -134,6 +134,17 @@
"title": "绯荤粺缁存姢",
"width": 760,
"height": 534
+ },
+ {
+ "id": "19",
+ "name": "heatCamera",
+ "src": "../../images/app-mid/algorithm-manage.png",
+ "alt": "鐑姏鍥�",
+ "type": "2",
+ "url": "/view/heatCamera",
+ "title": "鐑姏鍥�",
+ "width": 1210,
+ "height": 534
}
]
}
diff --git a/src/pages/heatCamera/index/App.vue b/src/pages/heatCamera/index/App.vue
new file mode 100644
index 0000000..3b2465c
--- /dev/null
+++ b/src/pages/heatCamera/index/App.vue
@@ -0,0 +1,135 @@
+<template>
+ <div class="heatCamera">
+ <div class="camera">
+ <nav class="header-nav">
+
+ <div class="toolbar">
+ <el-date-picker @change="timeChange" v-model="timeRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡" size="small"></el-date-picker>
+ <el-button type="primary" size="small">鏌ヨ</el-button>
+ </div>
+ </nav>
+
+ <div class="img-area" ref="heatMap">
+ <!-- <el-image src="/timg.jpg" fit="contain" ref="img"></el-image> -->
+ <el-image :src="`${publicPath}images/login-net.png`" fit="contain" ref="img"></el-image>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import Heatmap from 'heatmap.js';
+import {getHeatCameraData} from '@/api/heatCamera'
+export default {
+ data(){
+ return {
+ publicPath: process.env.BASE_URL,
+ timeRange: [new Date(2020, 8, 20, 8), new Date(2020, 9, 20, 8)],
+ params: {
+ cameraIds: ["c6fd8f31-248f-49fc-93e0-dedac889197b","c41a2f34-bd2e-41af-9bc0-51e6dcd03523"],
+ startTime: '',
+ endTime: '',
+ }
+ }
+ },
+ mounted(){
+ console.log(Heatmap.create)
+ setTimeout(()=>{
+ this.mockAsync()
+ },2000);
+ },
+ methods:{
+ timeChange(val){
+ console.log(val);
+ this.params.startTime = val[0];
+ this.params.endTime = val[1];
+ this.renderHeatMap(this.params)
+ },
+ mockAsync(){
+ var config = {
+ container: document.querySelector('.img-area'),
+ radius: 10,
+ maxOpacity: .75,
+ minOpacity: 0,
+ blur: .75,
+ gradient: {
+ '.5': 'blue',
+ '.8': 'red',
+ '0.95': 'white',
+ '0.6': 'yellow',
+ '0.5': 'green'
+ }
+
+ };
+ var data = {
+ max: 700,
+ min: 0,
+ data: []
+ }
+ for (var i = 10; i < 700; i++) {
+ var dataPoint = {
+ x: Math.floor(Math.random() * i),
+ y: Math.floor(Math.random() * i),
+ value: Math.floor(Math.random() * i)
+ };
+ var dataCenter = {
+ x: i,
+ y: i,
+ value: 30 + i
+ }
+ data.data.push(dataPoint, dataCenter)
+ }
+ //var heatmapInstance = h337.create(config);
+ var heatmapInstance = Heatmap.create(config);
+ heatmapInstance.setData(data);
+ },
+ renderHeatMap(params){
+ getHeatCameraData(params).then(res=>{
+ debugger
+ })
+ },
+
+ }
+}
+</script>
+<style lang="scss">
+ .heatCamera{
+ width: 100%;
+ height: 100%;
+ background: #e9ebf2;
+ .header-nav{
+ height: 60px;
+ min-width: 1200px;
+ background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%);
+ }
+ .toolbar{
+ width: 500px;
+ height: 60px;
+ //background: rgba(0,0,0,.3);
+ position: absolute;
+ right: 60px;
+ top: 20px;
+ text-align: center;
+ line-height: 60px;
+ z-index: 10;
+ .el-date-editor{
+ vertical-align: middle;
+ border-radius: 4px 0 0 4px;
+ }
+ .el-button{
+ vertical-align: middle;
+ margin-left: 4px;
+ }
+ }
+ .img-area{
+ margin: 30px auto;
+ width: 1200px;
+ //position: relative;
+ font-size: 0;
+ }
+ img{
+ display: block;
+ }
+
+ }
+</style>
diff --git a/src/pages/heatCamera/index/main.ts b/src/pages/heatCamera/index/main.ts
new file mode 100644
index 0000000..93bc0d1
--- /dev/null
+++ b/src/pages/heatCamera/index/main.ts
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+//import HeatMap from 'heatmap.js-fixed';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+
+import App from './App.vue';
+Vue.use(ElementUI)
+new Vue({
+ el: '#app',
+ render: h => h(App)
+})
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 1d5f2b6..8381895 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -47,7 +47,11 @@
target: 'http://192.168.20.10:7003',
// ws: true,
changeOrigin: true,
- },
+ },
+ "/api-v": {
+ target: 'http://192.168.20.145:8000',
+ changeOrigin: true
+ },
"/api-f": {
//target: "http://bsic.asuscomm.com:7003", // 澶栫綉鏄犲皠鍦板潃
// target: "http://222.128.87.51:8000", // 鐩爣浠ｇ悊鎺ュ彛鍦板潃
--
Gitblit v1.8.0