From 68fe1629ea048cf3b806b700f9934f990aa4bfdf Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 17 九月 2020 16:52:45 +0800
Subject: [PATCH] 可视化摄像机树排序,取消图标隐藏
---
src/pages/heatCamera/index/App.vue | 263 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 168 insertions(+), 95 deletions(-)
diff --git a/src/pages/heatCamera/index/App.vue b/src/pages/heatCamera/index/App.vue
index 3b2465c..7155282 100644
--- a/src/pages/heatCamera/index/App.vue
+++ b/src/pages/heatCamera/index/App.vue
@@ -2,134 +2,207 @@
<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>
+ <div class="toolbar">
+ <el-radio-group v-model="dimension">
+ <el-radio-button :label="1">鐑姏鍥�</el-radio-button>
+ <el-radio-button :label="2">杞ㄨ抗鍥�</el-radio-button>
+ </el-radio-group>
+ <el-date-picker
+ @change="timeChange"
+ v-model="timeRange"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ type="datetimerange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ ></el-date-picker>
+ <el-button type="primary" @click="postCameraData">鏌ヨ</el-button>
+ </div>
</nav>
-
+
<div class="img-area" ref="heatMap">
- <!-- <el-image src="/timg.jpg" fit="contain" ref="img"></el-image> -->
+ <span class="dot" v-for="(item,index) in dots" :style="{top:item.y+'px',left: item.x+'px'}" :key="'d'+index"></span>
<el-image :src="`${publicPath}images/login-net.png`" fit="contain" ref="img"></el-image>
</div>
</div>
</div>
</template>
<script>
+Date.prototype.Format = function (fmt) {
+ var o = {
+ "M+": this.getMonth() + 1, //鏈堜唤
+ "d+": this.getDate(), //鏃�
+ "H+": this.getHours(), //灏忔椂
+ "m+": this.getMinutes(), //鍒�
+ "s+": this.getSeconds(), //绉�
+ "q+": Math.floor((this.getMonth() + 3) / 3), //瀛ｅ害
+ "S": this.getMilliseconds() //姣
+ };
+ if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+ for (var k in o)
+ if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+ return fmt;
+}
import Heatmap from 'heatmap.js';
-import {getHeatCameraData} from '@/api/heatCamera'
+import { getHeatCameraData } from '@/api/heatCamera'
export default {
- data(){
+ data () {
return {
publicPath: process.env.BASE_URL,
- timeRange: [new Date(2020, 8, 20, 8), new Date(2020, 9, 20, 8)],
+ dots: [],
+ dimension: 1,
+ timeRange: [new Date(2020, 7, 23, 8), new Date()],
params: {
- cameraIds: ["c6fd8f31-248f-49fc-93e0-dedac889197b","c41a2f34-bd2e-41af-9bc0-51e6dcd03523"],
- startTime: '',
- endTime: '',
- }
+ cameraIds: ["ba8c1624-55a7-4f20-9c54-01e56448aeb5"],
+ startDate: new Date(2020, 7, 23, 8).Format("yyyy-MM-dd HH:mm:ss"),
+ endDate: new Date().Format("yyyy-MM-dd HH:mm:ss"),
+ //thresholdTime: 100,
+ },
+ heatmapInstance: null,
}
},
- mounted(){
+ 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)
+ methods: {
+ timeChange(val) {
+ this.params.startDate = val[0];
+ this.params.endDate = val[1];
},
- mockAsync(){
- var config = {
+ setHeatmapData(sources) {
+ if (sources === null || sources.length < 1) {
+ return
+ }
+ var heatmapConfig = {
container: document.querySelector('.img-area'),
- radius: 10,
- maxOpacity: .75,
+ radius: 20,
+ maxOpacity: .55,
minOpacity: 0,
- blur: .75,
+ blur: .55,
gradient: {
- '.5': 'blue',
- '.8': 'red',
- '0.95': 'white',
- '0.6': 'yellow',
- '0.5': 'green'
+ '.8': 'yellow',
+ '0.95': 'rgba(251, 40, 40, 0.3)',
+ '0.6': 'rgba(42, 251, 199, 0.3)',
+ '0.5': 'rgba(2, 119, 251, 0.3)'
}
-
};
- var data = {
- max: 700,
+ var points = {
+ max: 300,
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)
+ if (this.heatmapInstance === null) {
+ this.heatmapInstance = Heatmap.create(heatmapConfig);
+ } else {
+ this.heatmapInstance.setData(points);
}
- //var heatmapInstance = h337.create(config);
- var heatmapInstance = Heatmap.create(config);
- heatmapInstance.setData(data);
+ sources.forEach(ele => {
+ points.data.push(this.formatPoint(ele))
+ if(this.dimension == 2){
+ this.dots.push(this.formatPoint(ele))
+ }
+ });
+
+ //鐑姏鍥�
+ if(this.dimension == 1){
+ this.heatmapInstance.setData(points);
+ }
},
- renderHeatMap(params){
- getHeatCameraData(params).then(res=>{
- debugger
- })
+ postCameraData() {
+ this.dots = [];
+ var xhr = new XMLHttpRequest();
+ xhr.open('post', '/data/api-v/es/getPersonData');
+ xhr.setRequestHeader('Content-Type', 'application/json');
+ xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjQ3NDUwMjU5MjMsInVzZXIiOiJ7XCJpZFwiOlwiZTZjY2QzNmQtNGYxNi00NmZjLTg4ZDUtMDczNjU4NjZkMjA1XCIsXCJwZXJtaXNzaW9uc1wiOltcInByb2R1Y3RNYW5nZTpwdWJsaXNoXCIsXCJjb2RlTWFuZ2U6dmlld1wiLFwiZGV2aWNlTWFuYWdlOmFkZFwiLFwiYWRtaW5NYW5hZ2VcIixcIm9yZGVyTWFuZ2VcIixcImRldmljZU1hbmFnZTp2aWV3XCIsXCJwcm9kdWN0TWFuZ2U6YWRkXCIsXCJhZG1pbk1hbmFnZTp2aWV3XCIsXCJjb2RlTWFuZ2U6YWRkXCIsXCJwcm9kdWN0TWFuZ2U6b2ZmU2FsZVwiLFwib3JkZXJNYW5nZTpjYW5jZWxcIixcInByb2R1Y3RDZW50ZXI6ZG93bmxvYWRcIixcInByb2R1Y3RDZW50ZXI6YnV5XCIsXCJwcm9kdWN0TWFuZ2U6dmlld1wiLFwiYXBpXCIsXCJob21lXCIsXCJvcmRlck1hbmdlOnBheVwiLFwiYWRtaW5NYW5hZ2U6YWRkXCIsXCJvcmRlck1hbmdlOmRvd25sb2FkXCIsXCJwcm9kdWN0Q2VudGVyXCIsXCJkZXZpY2VNYW5hZ2U6dW5iaW5kXCIsXCJvcmRlck1hbmdlOnZpZXdcIixcImFkbWluTWFuYWdlOmVkaXRcIixcImRldmljZU1hbmFnZVwiLFwidmlwTWFuYWdlOmFkZFwiLFwidmlwTWFuYWdlOnZpZXdcIixcInByb2R1Y3RDZW50ZXI6dmlld1wiLFwidmlwTWFuYWdlOmVkaXRcIixcInZpcE1hbmFnZVwiLFwicHJvZHVjdE1hbmdlOmVkaXRcIixcImNvZGVNYW5nZVwiLFwicHJvZHVjdE1hbmdlXCJdLFwidXNlcm5hbWVcIjpcImJhc2ljXCJ9In0.vwjAFkWuEyadRLvIOGK8LFE3MjpY3SQ7j6AlTXnQDG8');
+ xhr.send(JSON.stringify(this.params));
+ xhr.onload = function () {
+ if (xhr.readyState == 4) {
+ var response = JSON.parse(xhr.responseText)
+ if (response && response.success) {
+ console.log(response.data.result)
+ debugger
+ this.setHeatmapData(response.data.result)
+ }
+ }
+ this.mockAsync
+ }.bind(this)
},
+ formatPoint(data) {
+ var converters = {
+ "ba8c1624-55a7-4f20-9c54-01e56448aeb5": {
+ "scale": 1,
+ "offsetX": 0,
+ "offsetY": 0
+ }
+ }
+
+ var cv = converters[data.cameraId]
+
+ var topLeft = data.personRect.topLeft
+ var bottomRight = data.personRect.bottomRight
+
+ // 涓績鐐�
+ var dataPoint = {
+ x: ((topLeft.x + bottomRight.x) * cv.scale + cv.offsetX * 2) / 2,
+ y: ((topLeft.y + bottomRight.y) * cv.scale + cv.offsetX * 2) / 2,
+ // value: data.stayTime
+ value: 0
+ };
+
+ return dataPoint
+ }
}
}
</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;
- }
-
+.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: 680px;
+ 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;
+ margin: 0 8px;
+ }
+ .el-button {
+ vertical-align: middle;
+ margin-left: 4px;
+ }
+ }
+ .img-area {
+ margin: 30px auto;
+ width: 1280px;
+ position: relative;
+ font-size: 0;
+ .dot{
+ width: 10px;
+ height: 10px;
+ background-image: radial-gradient(circle,#04f3ff,#adf7f7,#31e4d3);
+ opacity: .5;
+ border-radius: 50%;
+ position: absolute;
+ z-index: 1000;
+ }
+ }
+ img {
+ display: block;
+ }
+}
</style>
--
Gitblit v1.8.0