From 88d6488825e42e6b49abb20c2364671a62b3333d Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 06 十一月 2020 10:31:41 +0800
Subject: [PATCH] 摄像机标注获取/更新及相关校验
---
src/pages/labelMark/components/RightSide.vue | 234 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 174 insertions(+), 60 deletions(-)
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
index a0ef4a8..6b630d2 100644
--- a/src/pages/labelMark/components/RightSide.vue
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -23,11 +23,20 @@
</div>
<div>
<el-button
+ v-if="!isEdit"
class="drawboard-trigger"
size="small"
- @click="isEdit=!isEdit"
- :icon="isEdit?'el-icon-lock':'el-icon-edit'"
- >{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
+ @click="editCameraData"
+ icon="el-icon-edit"
+ >缂栬緫</el-button>
+
+ <el-button
+ v-if="isEdit"
+ class="drawboard-trigger save"
+ size="small"
+ @click="submitInfo"
+ icon="el-icon-lock"
+ >淇濆瓨</el-button>
</div>
</div>
</div>
@@ -36,48 +45,68 @@
<div
class="label"
@click="editLabel(item)"
- v-for="(item,index) in labels"
+ v-for="(item,index) in curCameraData.coords"
:key="index"
- :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
+ :style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
></div>
</div>
<img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
<div
class="popBox"
v-show="isShowPop"
- :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`"
+ :style="`top:${curLabel.y0 + 22}px;left:${curLabel.x0}px`"
>
<div class="title">鏍囨敞淇℃伅</div>
<div class="details">
- <div class="detail-item">
- <div class="left">
- <label for>骞抽潰鍧愭爣X:</label>
- <span class="fix-width">{{curLabel.x}}</span>
- <i>px</i>
+ <el-form :model="curLabel" :rules="rules" ref="labelForm">
+ <div class="detail-item">
+ <div class="left">
+ <el-form-item prop="X0">
+ <label for>骞抽潰鍧愭爣X:</label>
+ <span class="fix-width">{{curLabel.x0}}</span>
+ <i>px</i>
+ </el-form-item>
+ </div>
+ <span class="devide"></span>
+ <div class="right">
+ <el-form-item prop="x1">
+ <label for>瀹為檯鍧愭爣X:</label>
+ <el-input
+ type="text"
+ size="mini"
+ style="width:90px"
+ v-model.number="curLabel.x1"
+ ></el-input>
+ </el-form-item>
+ </div>
</div>
- <span class="devide"></span>
- <div class="right">
- <label for>瀹為檯鍧愭爣X:</label>
- <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
+ <div class="detail-item">
+ <div class="left">
+ <el-form-item prop="y0">
+ <label for>骞抽潰鍧愭爣Y:</label>
+ <span class="fix-width">{{curLabel.y0}}</span>
+ <i>px</i>
+ </el-form-item>
+ </div>
+ <span class="devide"></span>
+ <div class="right">
+ <el-form-item prop="y1">
+ <label for>瀹為檯鍧愭爣Y:</label>
+ <el-input
+ type="text"
+ size="mini"
+ style="width:90px"
+ v-model.number="curLabel.y1"
+ ></el-input>
+ </el-form-item>
+ </div>
</div>
- </div>
- <div class="detail-item">
- <div class="left">
- <label for>骞抽潰鍧愭爣Y:</label>
- <span class="fix-width">{{curLabel.y}}</span>
- <i>px</i>
+ <div class="btns">
+ <el-button size="mini" type="danger" @click="deleteLabel">鍒犻櫎</el-button>
+ <el-button size="mini" type="primary" @click="cancle">鍙栨秷</el-button>
+ <el-button size="mini" type="success" @click="sure">纭畾</el-button>
</div>
- <span class="devide"></span>
- <div class="right">
- <label for>瀹為檯鍧愭爣Y:</label>
- <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
- </div>
- </div>
- <div class="btns">
- <el-button size="mini" type="danger" @click="deleteLabel">鍒犻櫎</el-button>
- <el-button size="mini" type="primary" @click="cancle">鍙栨秷</el-button>
- <el-button size="mini" type="success" @click="submitInfo">纭畾</el-button>
- </div>
+ </el-form>
</div>
</div>
</div>
@@ -166,8 +195,10 @@
</template>
<script>
-import { getCamerasByServer } from '@/api/pollConfig'
+import { getCamerasByServer } from '@/api/pollConfig';
+import { getCameraMarks, updateCameraMarks } from '@/api/camera';
import TreeDataPool from "@/Pool/TreeData";
+import { isNonnegativeInteger } from '@/scripts/validate';
export default {
data () {
return {
@@ -177,12 +208,27 @@
isEdit: false,
isShowPop: false,
isNewLabel: false,
+ // curLabel: {
+ // id: '',
+ // posX: '',
+ // posY: '',
+ // x: '',
+ // y: ''
+ // },
curLabel: {
id: '',
- posX: '',
- posY: '',
- x: '',
- y: ''
+ x1: '',
+ y1: '',
+ x0: '',
+ y0: ''
+ },
+ rules: {
+ x1: [
+ { validator: isNonnegativeInteger, trigger: 'change' }
+ ],
+ y1: [
+ { validator: isNonnegativeInteger, trigger: 'change' }
+ ]
},
baseUrl: '',
snapshot_url: '',
@@ -194,7 +240,11 @@
actPage: '1',
loading: false,
spaceWidth: '',
- spaceHeight: ''
+ spaceHeight: '',
+ curCameraData: {
+ cameraId: '',
+ coords: []
+ }
}
},
computed: {
@@ -202,17 +252,19 @@
},
mounted () {
this.getAllCameraData();
+ //mock鍥炴樉鏍囨敞
setTimeout(() => {
- let mockData = [{ id: 'a1', x: 15, y: 33, posX: 150, posY: 330 }, { id: 'b2', x: 56, y: 87, posX: 560, posY: 870 }];
- this.labels = mockData;
+ let mockData = [{ id: 'a1', x0: 15, y0: 33, x1: 150, y1: 330 }, { id: 'b2', x0: 56, y0: 87, x1: 560, y1: 870 }];
+ //this.curCameraData.coords = mockData;
}, 1000);
},
watch: {
'TreeDataPool.selectedNode': {
handler (n, o) {
- debugger
let curCamera = this.cameraData.find(item => item.id == n.id);
+ //璁剧疆鎽勫儚鏈哄簳鍥�
this.snapshot_url = curCamera.snapshot_url;
+ this.findCameraMarks(n.id);
},
deep: true
},
@@ -225,6 +277,51 @@
}
},
methods: {
+ sure () {
+ let _this = this;
+ this.$refs['labelForm'].validate(valid => {
+ console.log(valid)
+ if (valid) {
+ _this.isShowPop = false;
+ debugger
+ if (_this.curLabel.id) {
+ let editedIndex = _this.curCameraData.coords.findIndex(one => one.id == _this.curLabel.id);
+ _this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
+ //editedOne = JSON.parse(JSON.stringify(_this.curLabel));
+ }
+ console.log(_this.curCameraData.coords)
+ this.$refs['labelForm'].clearValidate();
+ }
+ });
+ },
+ //鑾峰彇鎽勫儚鏈烘爣娉�
+ findCameraMarks (id) {
+ 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 }));
+ }
+ }).catch(e => {
+ console.log(e)
+ });
+ },
+ editCameraData () {
+ if (!this.TreeDataPool.selectedNode.id) {
+ this.$notify({
+ message: '璇峰厛閫夋嫨鎽勫儚鏈�',
+ type: 'warning'
+ });
+ return;
+ }
+ this.isEdit = !this.isEdit;
+ },
+ async submitInfo () {
+ this.isEdit = false;
+ let res = await updateCameraMarks(this.curCameraData);
+ if (res.success) {
+ this.findCameraMarks(this.curCameraData.cameraId);
+ }
+ },
chnageActPage () {
},
@@ -254,7 +351,6 @@
getAllCameraData () {
getCamerasByServer().then(res => {
if (res.success) {
- debugger
this.cameraData = res.data;
}
}).catch(e => {
@@ -269,42 +365,48 @@
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
+ //this.$refs['labelForm'].clearValidate();
+ this.$refs['labelForm'].resetFields();
let target = {
id: '',
- x: e.offsetX,
- y: e.offsetY,
- posX: '',
- posY: ''
+ x0: e.offsetX,
+ y0: e.offsetY,
+ x1: '',
+ y1: ''
};
- this.labels.push(target);
+ //this.labels.push(target);
+ this.curCameraData.coords.push(target);
this.curLabel = target;
this.isShowPop = true;
this.isNewLabel = true;
},
editLabel (label) {
- debugger
if (!this.isEdit) return;
this.isShowPop = true;
+ this.$refs['labelForm'].clearValidate();
this.curLabel = JSON.parse(JSON.stringify(label));
+ console.log(this.curLabel)
+ //this.curLabel = label;
},
cancle () {
this.isShowPop = false;
//濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
if (!this.curLabel.id) {
- this.labels.pop();
+ //this.labels.pop();
+ this.curCameraData.coords.pop();
}
},
deleteLabel () {
if (this.curLabel.id) {
- //璇锋眰鍚庡彴鍒犻櫎
- } else {
- this.labels.pop();
- this.isShowPop = false;
- }
- },
- submitInfo () {
+ let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id);
+ this.curCameraData.coords.splice(index, 1);
- }
+ } else {
+ //this.labels.pop();
+ this.curCameraData.coords.pop();
+ }
+ this.isShowPop = false;
+ },
}
}
</script>
@@ -407,11 +509,12 @@
font-weight: bold;
text-align: left;
font-size: 15px;
+ margin-bottom: 14px;
+ letter-spacing: 2px;
}
.details {
.detail-item {
display: flex;
- align-items: center;
margin: 5px 0;
label {
color: #a9a9a9;
@@ -434,11 +537,22 @@
width: 10px;
height: 1px;
background: #a9a9a9;
- margin: 0 3px;
+ margin: 14px 3px;
}
}
.btns {
margin-top: 10px;
+ }
+ .el-form-item {
+ margin-bottom: 12px;
+ }
+ .el-form-item__content {
+ font-size: 12px;
+ line-height: 30px;
+ }
+ .el-form-item__error {
+ left: 70px;
+ top: 94%;
}
}
}
@@ -468,7 +582,7 @@
margin-top: 10px;
text-align: left;
color: rgba(39, 68, 111, 0.67);
- b{
+ b {
font-style: italic;
}
//color: #4966b7
--
Gitblit v1.8.0