From c9e0ab6e5150243d1e193a0f919a55f3c327710c Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 29 十二月 2020 10:52:34 +0800
Subject: [PATCH] 标注页面添加实景坐标回显,轨迹图添加人员筛选相关功能
---
src/pages/panoramicView/components/LabelMark.vue | 103 ++++++++++++++++++--
src/pages/panoramicView/index/App.vue | 2
src/pages/panoramicView/components/TracePlot.vue | 194 +++++++++++++++++++++++++++++++-------
3 files changed, 251 insertions(+), 48 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index eb95834..9b999f5 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -20,7 +20,7 @@
</div>
<div style="width:250px;">
<label for>绗旇Е:</label>
- <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
+ <el-slider v-model="dotSize" :min="1" :max="15"></el-slider>
</div>
<div>
<el-button
@@ -111,6 +111,38 @@
</div>
</div>
</div>
+ <div class="panorama-info">
+ <div
+ class="img-wrap"
+ v-if="panoramaPath"
+ :style="{width:fixedW+'px',height:fixedH+'px'}"
+ >
+ <img
+ v-if="panoramaPath"
+ :style="{width:imgW+'px',height:imgH+'px'}"
+ :src="panoramaPath"
+ @mousemove="showCurPos"
+ @mouseout="isShowCurPos=false"
+ />
+ <div
+ class="label"
+ @mouseover="labelOver(item)"
+ @mouseout="item.isShow=false"
+ v-for="item in curCameraData.panoramaCoords"
+ :key="item.id"
+ :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
+ >
+ <span class="text" v-show="item.isShow">
+ <b>{{item.x}},</b> <b>{{item.y}}</b>
+ </span>
+ </div>
+ </div>
+ <div class="pos" v-show="isShowCurPos">
+ 褰撳墠浣嶇疆:
+ <b>{{traceX}}</b>,
+ <b>{{traceY}}</b>
+ </div>
+ </div>
</div>
</div>
</el-tab-pane>
@@ -134,8 +166,18 @@
@mousemove="showCurPos"
@mouseout="isShowCurPos=false"
></el-image>-->
- <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
- <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
+ <div
+ class="img-wrap"
+ v-if="panoramaPath"
+ :style="{width:fixedW+'px',height:fixedH+'px'}"
+ >
+ <img
+ v-if="panoramaPath"
+ :style="{width:imgW+'px',height:imgH+'px'}"
+ :src="panoramaPath"
+ @mousemove="showCurPos"
+ @mouseout="isShowCurPos=false"
+ />
</div>
<div class="el-upload__text">
@@ -217,7 +259,8 @@
spaceHeight: '',
curCameraData: {
cameraId: '',
- coords: []
+ coords: [],
+ panoramaCoords: []
},
}
},
@@ -251,6 +294,15 @@
}
},
methods: {
+ labelOver (item) {
+ debugger
+ this.$nextTick(() => {
+ item.isShow = true;
+ })
+ },
+ labelout (item) {
+ item.isShow = false;
+ },
getAllCameraData () {
let _this = this;
getCamerasByServer().then(res => {
@@ -284,7 +336,11 @@
getCameraMarks({ cameraId: id }).then(res => {
if (res.success) {
this.curCameraData.cameraId = id;
- this.curCameraData.coords = res.data.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
+ this.curCameraData.coords = res.data.coords.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
+ this.curCameraData.panoramaCoords = res.data.panoramaCoords.map((item, index) => ({ id: 'p' + index, x: item.x, y: item.y }));
+ this.curCameraData.panoramaCoords.forEach(coord => {
+ this.$set(coord, 'isShow', false)
+ })
}
}).catch(e => {
console.log(e)
@@ -311,13 +367,13 @@
let _this = this;
getPanoramaPic().then(res => {
//鍒ゆ柇闀垮姣�
- let ratio = res.data.width/res.data.height;
- if(ratio > (_this.fixedW/_this.fixedH)){
+ let ratio = res.data.width / res.data.height;
+ if (ratio > (_this.fixedW / _this.fixedH)) {
_this.imgW = _this.fixedW;
- _this.imgH = _this.imgW*res.data.height/res.data.width;
- }else{
+ _this.imgH = _this.imgW * res.data.height / res.data.width;
+ } else {
_this.imgH = _this.fixedH;
- _this.imgW = res.data.width*_this.imgH/res.data.height;
+ _this.imgW = res.data.width * _this.imgH / res.data.height;
}
_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
})
@@ -466,15 +522,19 @@
background: #d2dcea;
padding: 0;
height: calc(100vh - 100px);
- overflow: auto;
+ //overflow: auto;
.mark-interface {
+ display: flex;
.left-tree {
position: relative;
- float: left;
+ //float: left;
height: calc(100vh - 20px);
+ overflow: auto;
background: #fff;
}
.tree-right {
+ flex: 1;
+ height: calc(100vh - 90px);
overflow: auto;
}
}
@@ -616,6 +676,25 @@
}
}
}
+ .panorama-info {
+ width: 1070px;
+ margin: 0 auto;
+ display: flex;
+ padding-bottom: 30px;
+ .img-wrap {
+ position: relative;
+ .label {
+ position: absolute;
+ border-radius: 50%;
+ .text {
+ color: aqua;
+ font-size: 14px;
+ position: absolute;
+ bottom: 15px;
+ }
+ }
+ }
+ }
.user-upload {
margin: auto;
padding: 50px;
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index ce263c7..a422c66 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -13,7 +13,24 @@
></el-date-picker>
<el-button @click="searchData" size="small" type="primary" class="btn-search">鏌� 璇�</el-button>
</div>
-
+ <div class="check-target" :style="{height:fixedH+'px'}">
+ <div class="controller">
+ <el-checkbox v-model="isHideAll" @change="hideAllChange">闅愯棌鍏ㄩ儴</el-checkbox>
+ <el-checkbox v-model="isInvert" @change="invertChange">鍙嶉��</el-checkbox>
+ </div>
+ <div class="target-list">
+ <div
+ class="list-item"
+ v-for="item in actObjs"
+ :key="item.id"
+ :class="{'deact':item.isHide}"
+ :style="{borderColor:item.isHide?'#ccc':item.color}"
+ @click="checkTarget(item)"
+ >
+ <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
+ </div>
+ </div>
+ </div>
<!-- <canvas
ref="trackArea"
:width="cW"
@@ -41,6 +58,7 @@
trackData: [],
activeObjHashMap: {},
actObj: {},
+ actObjs: [],
searchTime: [
this.$moment().format("YYYY-MM-DD 00:00:00"),
this.$moment().format("YYYY-MM-DD 23:59:59")
@@ -53,7 +71,10 @@
fixedW: 960,
fixedH: 700,
bgW: 0,
- bgH: 0
+ bgH: 0,
+ targetChecked: [],
+ isHideAll: false,
+ isInvert: false,
}
},
mounted () {
@@ -68,6 +89,30 @@
clearInterval(this.timer);
},
methods: {
+ hideAllChange(){
+ this.actObjs.forEach(target=>{
+ target.isHide = this.isHideAll;
+ });
+ this.drawTracePath();
+ },
+ invertChange(){
+ console.log(this.isInvert)
+ this.actObjs.forEach(target=>{
+ target.isHide = !target.isHide;
+ });
+ let showOne = this.actObjs.find(target=>!target.isHide);
+ if(!showOne){
+ this.isHideAll = true;
+ }else{
+ this.isHideAll = false;
+ }
+ this.drawTracePath();
+ },
+ checkTarget (item) {
+ item.isHide = !item.isHide;
+ this.isHideAll = item.isHide;
+ this.drawTracePath();
+ },
getPanorama () {
let _this = this;
getPanoramaPic().then(res => {
@@ -90,40 +135,65 @@
let canvas = this.$refs['trackArea'];
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.strokeStyle = 'yellow';
- ctx.fillStyle = 'aqua';
+ //ctx.strokeStyle = 'yellow';
+ //ctx.fillStyle = 'aqua';
//ctx.globalAlpha=0.5;
ctx.lineWidth = 3;
//ctx.lineJoin='round';
ctx.lineCap = 'round';
- for (var target in this.actObj) {
- ctx.beginPath();
- //ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
- ctx.fillStyle = this.actObj[target][0].color;
- ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI * 2);
- ctx.fill();
- for (var i = 1; i < this.actObj[target].length; i++) {
+ this.actObjs.forEach(target => {
+ if (!target.isHide) {
ctx.beginPath();
- ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI * 2);
- ctx.fill()
+ ctx.fillStyle = target.color;
+ ctx.arc(target.posInfo[0].globalCoordX, target.posInfo[0].globalCoordY, 3, 0, Math.PI * 2);
+ ctx.fill();
+ for (var i = 1; i < target.posInfo.length; i++) {
+ ctx.beginPath();
+ ctx.arc(target.posInfo[i].globalCoordX, target.posInfo[i].globalCoordY, 3, 0, Math.PI * 2);
+ ctx.fill();
+ }
}
- }
- for (var target in this.actObj) {
- ctx.beginPath();
- //ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 20 + 210)},${Math.floor(Math.random() * 55 + 200)})`;
- ctx.strokeStyle = this.actObj[target][0].color;
- ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
- for (var i = 1; i < this.actObj[target].length; i++) {
- ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
+
+ });
+ this.actObjs.forEach(target => {
+ if (!target.isHide) {
+ ctx.beginPath();
+ ctx.strokeStyle = target.color;
+ ctx.moveTo(target.posInfo[0].globalCoordX, target.posInfo[0].globalCoordY);
+ for (var i = 1; i < target.posInfo.length; i++) {
+ ctx.lineTo(target.posInfo[i].globalCoordX, target.posInfo[i].globalCoordY)
+ }
+ ctx.stroke();
}
- ctx.stroke();
- }
+ })
+ // for (var target in this.actObj) {
+ // ctx.beginPath();
+ // //ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
+ // ctx.fillStyle = this.actObj[target][0].color;
+ // ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI * 2);
+ // ctx.fill();
+ // for (var i = 1; i < this.actObj[target].length; i++) {
+ // ctx.beginPath();
+ // ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI * 2);
+ // ctx.fill()
+ // }
+ // }
+ // for (var target in this.actObj) {
+ // ctx.beginPath();
+ // //ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 20 + 210)},${Math.floor(Math.random() * 55 + 200)})`;
+ // ctx.strokeStyle = this.actObj[target][0].color;
+ // ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
+ // for (var i = 1; i < this.actObj[target].length; i++) {
+ // ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
+ // }
+ // ctx.stroke();
+ // }
},
searchData () {
let _this = this;
var param = {
page: 1,
- size: 500,
+ size: 5000,
searchTime: this.searchTime,
alarmlevel: [],
inputValue: '',
@@ -134,15 +204,18 @@
};
getSearchList(param).then(res => {
let filterArr = [];
- if(!res.data.datalist){
+ if (!res.data.datalist) {
_this.activeObjHashMap = {};
- _this.actObj = {}
+ _this.actObj = {};
+ _this.actObjs = [];
}
- for(var key in _this.activeObjHashMap){
- let innerKey = res.data.datalist&&res.data.datalist.find(obj => obj.activeObject.id == key);
- if(!innerKey){
+ for (var key in _this.activeObjHashMap) {
+ let innerKey = res.data.datalist && res.data.datalist.find(obj => obj.activeObject.id == key);
+ if (!innerKey) {
delete _this.activeObjHashMap[key];
delete _this.actObj[key];
+ let index = _this.actObjs.findIndex(one => one.id == innerKey);
+ _this.actObjs.splice(index, 1)
}
}
@@ -152,16 +225,24 @@
filterArr.push(obj)
}
});
- console.log(_this.actObj)
filterArr.forEach(item => {
item.activeObject.targetInfo.forEach(target => {
if (target.targetType == 'UniquelID') {
- let attribute = JSON.parse(target.attribute)
- if (_this.actObj[target.targetId]) {
- _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
+ let attribute = JSON.parse(target.attribute);
+ let someone = _this.actObjs.find(obj => obj.id == target.targetId);
+ if (someone) {
+ someone.posInfo.unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
} else {
- _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];
+ _this.actObjs.push({ id: target.targetId, picSmUrl: target.picSmUrl, posInfo: [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }] });
+ }
+
+ if (_this.actObj[target.targetId]) {
+ _this.actObj[target.targetId].unshift({ picSmUrl: target.picSmUrl, globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
+
+ } else {
+ _this.actObj[target.targetId] = [{ picSmUrl: target.picSmUrl, globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];
+
}
}
})
@@ -174,10 +255,22 @@
_this.actObj[target] = _this.actObj[target].filter(item =>
item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp
)
- if(_this.actObj[target].length == 0){
+ if (_this.actObj[target].length == 0) {
delete _this.actObj[target]
}
}
+
+ for (var i = 0; i < _this.actObjs.length; i++) {
+ _this.actObjs[i].posInfo = _this.actObjs[i].posInfo.filter(item => item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp)
+
+ if (!_this.actObjs[i].posInfo.length) {
+ _this.actObjs.splice(i, 1);
+ }
+ _this.actObjs[i].color = _this.colorArr[i % 10];
+ this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
+ }
+ console.log(new Date(), _this.actObjs);
+
var keyArr = Object.keys(_this.actObj);
for (var i = 0; i < keyArr.length; i++) {
_this.actObj[keyArr[i]].forEach(dot => {
@@ -204,6 +297,37 @@
margin-left: 20px;
}
}
+ .check-target {
+ padding: 30px;
+ box-sizing: border-box;
+ overflow: auto;
+ background: #f1f4f9;
+ float: left;
+ .target-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ width: 300px;
+
+ .list-item {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 10px;
+ border: 3px solid yellow;
+ border-radius: 50%;
+ img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ border-radius: 50%;
+ }
+ &.deact {
+ opacity: 0.5;
+ background: rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+ }
canvas {
//background: lightsteelblue;
background-repeat: no-repeat;
diff --git a/src/pages/panoramicView/index/App.vue b/src/pages/panoramicView/index/App.vue
index 4eb1654..d641446 100644
--- a/src/pages/panoramicView/index/App.vue
+++ b/src/pages/panoramicView/index/App.vue
@@ -69,7 +69,7 @@
margin-left: 10px;
font-size: 17px;
color: #fff;
- letter-spacing: 2px;
+ letter-spacing: 5px;
}
}
.el-menu--horizontal {
--
Gitblit v1.8.0