From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/panoramicView/components/LabelMark.vue | 117 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 66 insertions(+), 51 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index 9b999f5..2c78e56 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -117,24 +117,27 @@
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 class="img-area" :style="{width:imgW+'px',height:imgH+'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>
<div class="pos" v-show="isShowCurPos">
@@ -217,10 +220,9 @@
import LeftNav from "@/components/LeftNav";
export default {
components: { LeftNav },
- data () {
+ data() {
return {
screenHeight: 0,
- actPage: 1,
labels: [],
colorPick: '#79f2fb',
dotSize: 3,
@@ -264,7 +266,7 @@
},
}
},
- mounted () {
+ mounted() {
this.getAllCameraData();
this.getPanorama();
this.screenHeight = document.documentElement.clientHeight - 20;
@@ -277,7 +279,7 @@
watch: {
'TreeDataPool.selectedNode': {
- handler (n, o) {
+ handler(n, o) {
let curCamera = this.cameraData.find(item => item.id == n.id);
//璁剧疆鎽勫儚鏈哄簳鍥�
this.snapshot_url = curCamera.snapshot_url;
@@ -285,7 +287,7 @@
},
deep: true
},
- isEdit (n, o) {
+ isEdit(n, o) {
if (n) {
this.$refs['editBoard'].addEventListener('click', this.bindListen);
} else {
@@ -294,16 +296,16 @@
}
},
methods: {
- labelOver (item) {
- debugger
+ labelOver(item) {
+ // debugger
this.$nextTick(() => {
item.isShow = true;
})
},
- labelout (item) {
+ labelout(item) {
item.isShow = false;
},
- getAllCameraData () {
+ getAllCameraData() {
let _this = this;
getCamerasByServer().then(res => {
if (res.success) {
@@ -314,10 +316,9 @@
console.log(e)
})
},
- sure () {
+ sure() {
let _this = this;
this.$refs['labelForm'].validate(valid => {
- console.log(valid)
if (valid) {
_this.isShowPop = false;
//缂栬緫纭畾
@@ -326,13 +327,12 @@
_this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
}
- console.log(_this.curCameraData.coords)
this.$refs['labelForm'].clearValidate();
}
});
},
//鑾峰彇鎽勫儚鏈烘爣娉�
- findCameraMarks (id) {
+ findCameraMarks(id) {
getCameraMarks({ cameraId: id }).then(res => {
if (res.success) {
this.curCameraData.cameraId = id;
@@ -346,7 +346,7 @@
console.log(e)
});
},
- editCameraData () {
+ editCameraData() {
if (!this.TreeDataPool.selectedNode.id) {
this.$notify({
message: '璇峰厛閫夋嫨鎽勫儚鏈�',
@@ -356,14 +356,27 @@
}
this.isEdit = !this.isEdit;
},
- async submitInfo () {
+ async submitInfo() {
this.isEdit = false;
+
+ if (this.curCameraData.coords.length > 0 && this.curCameraData.coords.length < 4) {
+ this.$message({
+ type: "warning",
+ message: "淇濆瓨澶辫触! 鑷冲皯闇�瑕佹爣璁�4澶�!"
+ })
+ return
+ }
+
let res = await updateCameraMarks(this.curCameraData);
if (res.success) {
+ this.$message({
+ type: "success",
+ message: "淇濆瓨鎴愬姛"
+ })
this.findCameraMarks(this.curCameraData.cameraId);
}
},
- getPanorama () {
+ getPanorama() {
let _this = this;
getPanoramaPic().then(res => {
//鍒ゆ柇闀垮姣�
@@ -378,26 +391,25 @@
_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
})
},
- showCurPos (e) {
- console.log(e);
+ showCurPos(e) {
this.isShowCurPos = true;
this.traceX = e.offsetX;
this.traceY = e.offsetY;
},
- onChange (file, fileList) {
+ onChange(file, fileList) {
if (file.raw.type == "image/jpeg") {
fileList = [file]
this.isShowCurPos = false;
}
},
- definedUpload (params) {
+ definedUpload(params) {
let _this = this;
let _file = params.file;
let param = new FormData();
param.append('file', params.file)
putPanoramaPic(param).then(res => {
- debugger
+ // debugger
//_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
_this.getPanorama()
_this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
@@ -405,14 +417,12 @@
},
- bindListen (e) {
+ bindListen(e) {
this.newLabel(e);
},
- newLabel (e) {
- console.log('鐐瑰嚮浜嗙敾鏉�')
+ newLabel(e) {
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
this.$refs['labelForm'].resetFields();
let target = {
id: '',
@@ -428,14 +438,14 @@
this.isShowPop = true;
this.isNewLabel = true;
},
- editLabel (label) {
+ editLabel(label) {
if (!this.isEdit) return;
this.isShowPop = true;
this.$refs['labelForm'].clearValidate();
this.curLabel = JSON.parse(JSON.stringify(label));
},
- cancle () {
+ cancle() {
this.isShowPop = false;
//濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
if (this.curLabel.id.startsWith('n')) {
@@ -443,7 +453,7 @@
this.curCameraData.coords.pop();
}
},
- deleteLabel () {
+ deleteLabel() {
if (this.curLabel.id) {
let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id);
this.curCameraData.coords.splice(index, 1);
@@ -505,7 +515,7 @@
}
.resize-bar:hover ~ .resize-line::after,
.resize-bar:active ~ .resize-line::after {
- content: '';
+ content: "";
position: absolute;
width: 16px;
height: 16px;
@@ -573,7 +583,8 @@
}
.action-bar {
width: 960px;
- margin: auto;
+ // margin: auto;
+ margin-left: 100px;
margin-top: 30px;
//margin-bottom: 20px;
text-align: right;
@@ -584,7 +595,8 @@
}
}
.drawboard {
- margin: auto;
+ // margin: auto;
+ margin-left: 100px;
width: 960px;
height: 540px;
margin-bottom: 130px;
@@ -678,11 +690,14 @@
}
.panorama-info {
width: 1070px;
- margin: 0 auto;
+ // margin: 0 auto;
+ margin-left: 100px;
display: flex;
padding-bottom: 30px;
.img-wrap {
- position: relative;
+ .img-area {
+ position: relative;
+ }
.label {
position: absolute;
border-radius: 50%;
--
Gitblit v1.8.0