From 1e84774c0c0752c61e60592e7f7fc1c0d25a1dab Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 27 十月 2020 16:38:48 +0800
Subject: [PATCH] 首页加入算法
---
src/pages/labelMark/components/RightSide.vue | 149 ++++++++++++++++++++++++++-----------------------
1 files changed, 79 insertions(+), 70 deletions(-)
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
index 741a5c2..7e94302 100644
--- a/src/pages/labelMark/components/RightSide.vue
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -1,5 +1,65 @@
<template>
<div class="right-side">
+ <div class="figure">
+ <div class="action-bar">
+ <el-button
+ class="drawboard-trigger"
+ size="small"
+ @click="isEdit=!isEdit"
+ :icon="isEdit?'el-icon-lock':'el-icon-edit'"
+ >{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
+ </div>
+ <div class="drawboard">
+ <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
+ <div
+ class="label"
+ @click="editLabel(item)"
+ v-for="(item,index) in labels"
+ :key="index"
+ :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
+ ></div>
+ </div>
+ <img :src="`/httpImage/${snapshot_url}`" alt />
+ <div
+ class="popBox"
+ v-show="isShowPop"
+ :style="`top:${curLabel.y + 22}px;left:${curLabel.x}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>
+ </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>
+ </div>
+ <div class="detail-item">
+ <div class="left">
+ <label for>骞抽潰鍧愭爣Y:</label>
+ <span class="fix-width">{{curLabel.y}}</span>
+ <i>px</i>
+ </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>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="tool-bar">
<div>
<!-- <input type="color" ref="colorPicker" v-model="color"> -->
@@ -9,64 +69,6 @@
<div style="width:250px;">
<label for>绗旇Е:</label>
<el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
- </div>
- </div>
- <div class="action-bar">
- <el-button
- class="drawboard-trigger"
- size="small"
- @click="isEdit=!isEdit"
- :icon="isEdit?'el-icon-lock':'el-icon-edit'"
- >{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
- </div>
- <div class="drawboard">
- <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
- <div
- class="label"
- @click="editLabel(item)"
- v-for="(item,index) in labels"
- :key="index"
- :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
- ></div>
- </div>
- <img :src="`/httpImage/${snapshot_url}`" alt />
- <div
- class="popBox"
- v-show="isShowPop"
- :style="`top:${curLabel.y + 22}px;left:${curLabel.x}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>
- </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>
- </div>
- <div class="detail-item">
- <div class="left">
- <label for>骞抽潰鍧愭爣Y:</label>
- <span class="fix-width">{{curLabel.y}}</span>
- <i>px</i>
- </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>
- </div>
</div>
</div>
</div>
@@ -99,7 +101,7 @@
computed: {
},
- mounted() {
+ mounted () {
this.getAllCameraData();
setTimeout(() => {
let mockData = [{ id: 'a1', x: 15, y: 33, posX: 150, posY: 330 }, { id: 'b2', x: 56, y: 87, posX: 560, posY: 870 }];
@@ -108,13 +110,14 @@
},
watch: {
'TreeDataPool.selectedNode': {
- handler(n, o) {
+ handler (n, o) {
+ debugger
let curCamera = this.cameraData.find(item => item.id == n.id);
this.snapshot_url = curCamera.snapshot_url;
},
deep: true
},
- isEdit(n, o) {
+ isEdit (n, o) {
if (n) {
this.$refs['editBoard'].addEventListener('click', this.bindListen);
} else {
@@ -123,19 +126,20 @@
}
},
methods: {
- getAllCameraData() {
+ getAllCameraData () {
getCamerasByServer().then(res => {
if (res.success) {
+ debugger
this.cameraData = res.data;
}
}).catch(e => {
console.log(e)
})
},
- bindListen(e) {
+ bindListen (e) {
this.newLabel(e);
},
- newLabel(e) {
+ newLabel (e) {
console.log('鐐瑰嚮浜嗙敾鏉�')
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
@@ -152,19 +156,20 @@
this.isShowPop = true;
this.isNewLabel = true;
},
- editLabel(label) {
+ editLabel (label) {
+ debugger
if (!this.isEdit) return;
this.isShowPop = true;
this.curLabel = JSON.parse(JSON.stringify(label));
},
- cancle() {
+ cancle () {
this.isShowPop = false;
//濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
if (!this.curLabel.id) {
this.labels.pop();
}
},
- deleteLabel() {
+ deleteLabel () {
if (this.curLabel.id) {
//璇锋眰鍚庡彴鍒犻櫎
} else {
@@ -172,7 +177,7 @@
this.isShowPop = false;
}
},
- submitInfo() {
+ submitInfo () {
}
}
@@ -183,9 +188,13 @@
.right-side {
height: 100%;
background: #d2dcea;
+ .figure{
+ float: left;
+ }
.tool-bar {
- width: 100%;
- height: 60px;
+ float: right;
+ width: 40px;
+ height: 100%;
padding: 10px 20px;
box-sizing: border-box;
background: rgb(250, 250, 250);
--
Gitblit v1.8.0