From bdc01327df1bfd88e2024175532a657d2170c13f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 24 十二月 2020 10:23:34 +0800
Subject: [PATCH] 全景追踪更新
---
src/pages/panoramicView/components/LabelMark.vue | 24 ++++---
src/pages/panoramicView/index/App.vue | 7 +-
src/pages/panoramicView/components/RelateCamera.vue | 3
src/pages/panoramicView/components/TracePlot.vue | 90 +++++++++++++++++------------
4 files changed, 71 insertions(+), 53 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index aaca3cc..16766da 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -122,6 +122,7 @@
drag
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="definedUpload"
+ accept=".jpg"
:on-change="onChange"
:show-file-list="false"
>
@@ -148,7 +149,7 @@
<div>
<label for>绌洪棿楂�:</label>
<el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div> -->
+ </div>-->
</div>
<div class="pos" v-show="isShowCurPos">
褰撳墠浣嶇疆:
@@ -222,7 +223,7 @@
})();
};
},
-
+
watch: {
'TreeDataPool.selectedNode': {
handler (n, o) {
@@ -298,9 +299,9 @@
this.findCameraMarks(this.curCameraData.cameraId);
}
},
- getPanorama(){
+ getPanorama () {
let _this = this;
- getPanoramaPic().then(res=>{
+ getPanoramaPic().then(res => {
_this.panoramaPath = res.data.panoramaPath
})
},
@@ -311,17 +312,20 @@
this.traceY = e.offsetY;
},
onChange (file, fileList) {
- fileList = [file]
- this.isShowCurPos = false;
+ if (file.raw.type == "image/jpeg") {
+ fileList = [file]
+ this.isShowCurPos = false;
+ }
+
},
definedUpload (params) {
let _this = this;
let _file = params.file;
let param = new FormData();
param.append('file', params.file)
- putPanoramaPic(param).then(res=>{
- _this.panoramaPath = res.data.panoramaPath+'?'+Math.random()
- console.log(_this.panoramaPath)
+ putPanoramaPic(param).then(res => {
+ _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
+ _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
})
// let fileReader = new FileReader()
// fileReader.onload = () => {
@@ -445,7 +449,7 @@
.label-mark {
background: #d2dcea;
height: calc(100vh - 61px);
- &>.el-tabs--border-card > .el-tabs__content {
+ & > .el-tabs--border-card > .el-tabs__content {
background: #d2dcea;
padding: 0;
height: calc(100vh - 100px);
diff --git a/src/pages/panoramicView/components/RelateCamera.vue b/src/pages/panoramicView/components/RelateCamera.vue
index f196ec6..caf3ada 100644
--- a/src/pages/panoramicView/components/RelateCamera.vue
+++ b/src/pages/panoramicView/components/RelateCamera.vue
@@ -295,7 +295,8 @@
editGroup (group) {
this.groupModelVisible = true;
//this.$refs['groupForm'].resetFields();
- this.groupForm = group;
+ //this.groupForm = group;
+ this.groupForm = JSON.parse(JSON.stringify(group));
},
removeGroup (group) {
let _this = this;
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index f12095d..c8a7824 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -10,24 +10,16 @@
end-placeholder="缁撴潫鏃ユ湡"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00','23:59:59']"
-
></el-date-picker>
<el-button @click="searchData" size="small" type="primary" class="btn-search">鏌� 璇�</el-button>
</div>
- <!-- <p class="p-date" style="width:19%;vertical-align: top;">
- <el-date-picker
- size="mini"
- v-model="searchTime"
- @change="searchData"
- type="datetimerange"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- value-format="yyyy-MM-dd HH:mm:ss"
- :default-time="['00:00:00','23:59:59']"
- style="width:99%;min-width:200px"
- ></el-date-picker>
- </p> -->
- <canvas ref="trackArea" width="960" height="540" :style="{backgroundImage:`url(${panoramaPath})`}"></canvas>
+
+ <canvas
+ ref="trackArea"
+ :width="cW"
+ :height="cH"
+ :style="{backgroundImage:`url(${panoramaPath})`}"
+ ></canvas>
</div>
</template>
@@ -37,7 +29,9 @@
export default {
data () {
return {
- panoramaPath:'',
+ cW: 0,
+ cH: 0,
+ panoramaPath: '',
trackData: [],
activeObjHashMap: {},
actObj: {},
@@ -51,42 +45,63 @@
},
mounted () {
this.searchData();
- this.getPanoramaPic();
- this.timer = setInterval(()=>{
+ this.getPanorama();
+ this.timer = setInterval(() => {
this.searchData();
- },7000);
+ }, 7000);
},
- beforeDestroy(){
+ beforeDestroy () {
console.log('beforeDestroy')
clearInterval(this.timer);
},
methods: {
- getPanoramaPic () {
+ getPanorama () {
let _this = this;
- getPanoramaPic().then(res=>{
- _this.panoramaPath = res.data.panoramaPath
+ getPanoramaPic().then(res => {
+ let { panoramaPath, width, height } = res.data;
+ _this.panoramaPath = panoramaPath;
+ _this.cW = width;
+ _this.cH = height;
+
})
},
drawTracePath () {
- //let canvas = document.querySelector('#trackArea');
+ let colorArr = ['#F4DA40','#0092BC','#97D700','#D0006F','#D86018','#653279','#A45A2A','#004B87','#008C95','#AA0061'];
let canvas = this.$refs['trackArea'];
let ctx = canvas.getContext('2d');
- ctx.clearRect(0,0,canvas.width,canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'yellow';
ctx.fillStyle = 'aqua';
//ctx.globalAlpha=0.5;
- ctx.lineWidth = 2;
+ ctx.lineWidth = 3;
//ctx.lineJoin='round';
ctx.lineCap = 'round';
for (var target in this.actObj) {
+ debugger
ctx.beginPath();
- ctx.fillStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 35 + 200)},${Math.floor(Math.random() * 55 + 200)})`;
+ ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
+
+ //ctx.fillRect(this.actObj[target][0].globalCoordX+3, this.actObj[target][0].globalCoordY+3, 6, 6);
+ ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI*2);
+ ctx.fill();
+ //ctx.beginPath();
+ //ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
+ 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()
+ //ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
+
+ //ctx.fillRect(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 9, 9);
+ }
+ //ctx.stroke();
+ }
+ 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.fillRect(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 9, 9);
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.fillRect(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 9, 9);
}
ctx.stroke();
}
@@ -95,18 +110,18 @@
let _this = this;
var param = {
page: 1,
- size: 70,
+ size: 15,
searchTime: this.searchTime,
alarmlevel: [],
inputValue: '',
tabs: [],
tasks: [],
treeNodes: [],
- isAll: true
+ isAll: false
};
getSearchList(param).then(res => {
let filterArr = [];
- res.data.datalist&&res.data.datalist.forEach(obj => {
+ res.data.datalist && res.data.datalist.forEach(obj => {
if (_this.activeObjHashMap[obj.activeObject.id] !== 1) {
_this.activeObjHashMap[obj.activeObject.id] = 1
filterArr.push(obj)
@@ -117,14 +132,14 @@
if (target.targetType == 'UniquelID') {
let attribute = JSON.parse(target.attribute)
if (_this.actObj[target.targetId]) {
- _this.actObj[target.targetId].push({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
+ _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
} else {
_this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY }];
}
}
})
});
- console.log(_this.actObj)
+ console.log(new Date().getTime(),_this.actObj)
_this.drawTracePath()
})
}
@@ -134,20 +149,19 @@
<style lang="scss">
.trace-plot {
- .filter-bar{
+ .filter-bar {
width: 960px;
margin: 20px auto;
display: flex;
align-items: center;
flex-direction: end;
- .btn-search{
- margin-left:20px;
+ .btn-search {
+ margin-left: 20px;
}
}
canvas {
background: lightsteelblue;
background-repeat: no-repeat;
-
}
}
</style>
\ No newline at end of file
diff --git a/src/pages/panoramicView/index/App.vue b/src/pages/panoramicView/index/App.vue
index 90550f6..4eb1654 100644
--- a/src/pages/panoramicView/index/App.vue
+++ b/src/pages/panoramicView/index/App.vue
@@ -21,7 +21,7 @@
<label-mark></label-mark>
</template>
<template v-if="actMenuIndex=='2'">
- <trace-plot></trace-plot>
+ <trace-plot ref="tracePlot"></trace-plot>
</template>
<template v-if="actMenuIndex=='3'">
<relate-camera></relate-camera>
@@ -62,13 +62,12 @@
display: flex;
align-items: center;
.icon{
- width: 100px;
-
+ width: 50px;
}
.title{
text-decoration: none;
margin-left: 10px;
- font-size: 18px;
+ font-size: 17px;
color: #fff;
letter-spacing: 2px;
}
--
Gitblit v1.8.0