zhangzengfei
2020-10-27 e65c4102f0175d666746936381c3dee278358a72
src/pages/labelMark/components/RightSide.vue
@@ -12,37 +12,52 @@
      </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>
@@ -54,7 +69,6 @@
        </div>
      </div>
    </div>
  </div>
</template>
@@ -95,7 +109,6 @@
  watch:{
    'TreeDataPool.selectedNode':{
      handler(n,o){
        debugger
        let curCamera = this.cameraData.find(item => item.id==n.id);
        this.snapshot_url = curCamera.snapshot_url;
      },
@@ -113,7 +126,6 @@
    getAllCameraData(){
      getCamerasByServer().then(res=>{
        if(res.success){
          debugger
          this.cameraData = res.data;
        }
      }).catch(e=>{
@@ -141,7 +153,6 @@
      this.isNewLabel = true;
    },
    editLabel(label){
      debugger
      if(!this.isEdit) return;
      this.isShowPop = true;
      this.curLabel = JSON.parse(JSON.stringify(label));
@@ -206,7 +217,7 @@
    .drawboard-trigger{
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,.3);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }
  .drawboard {
@@ -241,7 +252,7 @@
      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;