From d8fcf4c20cd4638a3def6227a71ea2c81fbc0885 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 23 十月 2020 17:23:15 +0800
Subject: [PATCH] 标注静态交互
---
src/pages/labelMark/components/RightSide.vue | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 158 insertions(+), 14 deletions(-)
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
index 2839f63..9bf6d66 100644
--- a/src/pages/labelMark/components/RightSide.vue
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -4,7 +4,7 @@
<div>
<!-- <input type="color" ref="colorPicker" v-model="color"> -->
<label for>鎷捐壊鍣�:</label>
- <el-color-picker v-model="color" show-alpha size="mini"></el-color-picker>
+ <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
</div>
<div style="width:250px;">
<label for>绗旇Е:</label>
@@ -12,18 +12,49 @@
</div>
</div>
<div class="action-bar">
- <el-button type size="mini" @click="newLabel">鏍囨敞</el-button>
- <el-button type size="mini" @click="isEdit=!isEdit">{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
+ <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" v-show="isEdit" ref="editBoard">
- <div class="label" v-for="(item,index) in labels" :key="index" :style="{left:`${item.x}px`, top:`${item.y}px`}"></div>
+ <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="baseUrl" 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>
- <el-dialog>
-
- </el-dialog>
+
</div>
</template>
@@ -33,29 +64,83 @@
data () {
return {
labels: [],
- color: '#79f2fb',
+ colorPick: '#79f2fb',
dotSize: 3,
isEdit: false,
+ isShowPop: false,
isNewLabel: false,
+ curLabel: {
+ id:'',
+ posX:'',
+ posY:'',
+ x:'',
+ y:''
+ },
baseUrl: ''
}
},
computed: {
},
+ mounted(){
+ 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;
+ },1000);
+ },
watch:{
isEdit(n,o){
if(n){
- this.$refs['editBoard'].addEventListener('click',(e)=>{
- this.newLabel(e);
- })
+ this.$refs['editBoard'].addEventListener('click',this.bindListen);
+ }else{
+ this.$refs['editBoard'].removeEventListener('click',this.bindListen);
}
}
},
methods: {
+ bindListen(e){
+ this.newLabel(e);
+ },
newLabel(e){
- this.labels.push({x,y});
+ console.log('鐐瑰嚮浜嗙敾鏉�')
+ if(this.isShowPop) return;
+ //鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
+ console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
+ let target = {
+ id:'',
+ x:e.offsetX,
+ y:e.offsetY,
+ posX:'',
+ posY:''
+ };
+ this.labels.push(target);
+ this.curLabel = target;
+ this.isShowPop = true;
this.isNewLabel = true;
+ },
+ editLabel(label){
+ debugger
+ if(!this.isEdit) return;
+ this.isShowPop = true;
+ this.curLabel = JSON.parse(JSON.stringify(label));
+ },
+ cancle(){
+ this.isShowPop = false;
+ //濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
+ if(!this.curLabel.id){
+ this.labels.pop();
+ }
+ },
+ deleteLabel(){
+ if(this.curLabel.id){
+ //璇锋眰鍚庡彴鍒犻櫎
+ }else{
+ this.labels.pop();
+ this.isShowPop = false;
+ }
+ },
+ submitInfo(){
+
}
}
}
@@ -96,6 +181,11 @@
margin: auto;
margin-bottom: 20px;
text-align: right;
+ .drawboard-trigger{
+ background: transparent;
+ color: #fff;
+ border-color: rgba(255,255,255,.3);
+ }
}
.drawboard {
margin: auto;
@@ -106,15 +196,69 @@
box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
.mask{
position: absolute;
- background: rgba(20, 181, 255, 0.1);
+ background: transparent;
width: 100%;
height: 100%;
+ overflow: hidden;
+ &.edit-status-mask{
+ background: rgba(20, 181, 255, 0.1);
+ }
+ .label{
+ position: absolute;
+ z-index: 2;
+ border-radius: 50%;
+ }
}
img{
width: 960px;
height: 540px;
background:#f0ffca;
}
+ .popBox{
+ position: absolute;
+ padding: 14px;
+ border-radius: 3px;
+ color: #fff;
+ background: rgba(0,0,0,.7);
+ .title{
+ font-weight: bold;
+ text-align: left;
+ font-size: 15px;
+ }
+ .details{
+ .detail-item{
+ display: flex;
+ align-items: center;
+ margin: 5px 0;
+ label{
+ color: #ccc;
+ width:65px;
+ display: inline-block;
+ }
+ .left{
+ width: 110px;
+ text-align: left;
+ line-height: 28px;
+ .fix-width{
+ display: inline-block;
+ width: 23px;
+ }
+ }
+ .right{
+ width: 160px;
+ }
+ .devide{
+ width: 10px;
+ height: 1px;
+ background: #ccc;
+ margin: 0 3px;
+ }
+ }
+ .btns{
+ margin-top: 10px;
+ }
+ }
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0