首页加入算法

hanbaoshan

2020-10-27 1e84774c0c0752c61e60592e7f7fc1c0d25a1dab

 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);