| | |
| | | </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> |
| | | <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 |
| | | 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="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> |
| | | <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> |
| | | <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> |
| | | <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> |
| | | <label for>实际坐标Y:</label> |
| | | <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | watch:{ |
| | | 'TreeDataPool.selectedNode':{ |
| | | handler(n,o){ |
| | | debugger |
| | | let curCamera = this.cameraData.find(item => item.id==n.id); |
| | | this.snapshot_url = curCamera.snapshot_url; |
| | | }, |
| | |
| | | getAllCameraData(){ |
| | | getCamerasByServer().then(res=>{ |
| | | if(res.success){ |
| | | debugger |
| | | this.cameraData = res.data; |
| | | } |
| | | }).catch(e=>{ |
| | |
| | | this.isNewLabel = true; |
| | | }, |
| | | editLabel(label){ |
| | | debugger |
| | | if(!this.isEdit) return; |
| | | this.isShowPop = true; |
| | | this.curLabel = JSON.parse(JSON.stringify(label)); |
| | |
| | | .drawboard-trigger{ |
| | | background: transparent; |
| | | color: #fff; |
| | | border-color: rgba(255,255,255,.3); |
| | | border-color: rgba(255, 255, 255, 0.3); |
| | | } |
| | | } |
| | | .drawboard { |
| | |
| | | padding: 14px; |
| | | border-radius: 3px; |
| | | color: #fff; |
| | | background: rgba(0,0,0,.7); |
| | | background: rgba(0, 0, 0, 0.7); |
| | | .title{ |
| | | font-weight: bold; |
| | | text-align: left; |