数据栈文件上传动态限制类型调试,标注切换摄像机获取底图

hanbaoshan

2020-10-27 da98d2a8a686cde09b20345e4a2b55a85410fde4

 src/pages/labelMark/components/RightSide.vue

@@ -18,7 +18,7 @@
      <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 />
      <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">
@@ -59,6 +59,7 @@
</template>

<script>
import { getCamerasByServer } from '@/api/pollConfig'
import TreeDataPool from "@/Pool/TreeData";
export default {
  data () {
@@ -76,19 +77,30 @@
        x:'',
        y:''
      },
      baseUrl: ''
      baseUrl: '',
      snapshot_url: '',
      cameraData:[],
    }
  },
  computed: {
    
  },
  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}];
      this.labels = mockData;
    },1000);
  },
  watch:{
    'TreeDataPool.selectedNode':{
      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){
      if(n){
        this.$refs['editBoard'].addEventListener('click',this.bindListen);
@@ -98,6 +110,16 @@
    }
  },
  methods: {
    getAllCameraData(){
      getCamerasByServer().then(res=>{
        if(res.success){
          debugger
          this.cameraData = res.data;
        }
      }).catch(e=>{
        console.log(e)
      })
    },
    bindListen(e){
      this.newLabel(e);
    },
@@ -231,7 +253,7 @@
          align-items: center;
          margin: 5px 0;
          label{
            color: #ccc;
            color: #a9a9a9;
            width:65px;
            display: inline-block;
          }
@@ -250,7 +272,7 @@
          .devide{
            width: 10px;
            height: 1px;
            background: #ccc;
            background: #a9a9a9;
            margin: 0 3px;
          }
        }