添加apps.json代理,整理代码

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="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="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>

@@ -62,7 +76,7 @@
import { getCamerasByServer } from '@/api/pollConfig'
import TreeDataPool from "@/Pool/TreeData";
export default {
  data () {
  data() {
    return {
      labels: [],
      colorPick: '#79f2fb',
@@ -71,97 +85,94 @@
      isShowPop: false,
      isNewLabel: false,
      curLabel: {
        id:'',
        posX:'',
        posY:'',
        x:'',
        y:''
        id: '',
        posX: '',
        posY: '',
        x: '',
        y: ''
      },
      baseUrl: '',
      snapshot_url: '',
      cameraData:[],
      cameraData: [],
    }
  },
  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}];
    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);
    }, 1000);
  },
  watch:{
    'TreeDataPool.selectedNode':{
      handler(n,o){
        debugger
        let curCamera = this.cameraData.find(item => item.id==n.id);
  watch: {
    'TreeDataPool.selectedNode': {
      handler(n, o) {
        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);
      }else{
        this.$refs['editBoard'].removeEventListener('click',this.bindListen);
    isEdit(n, o) {
      if (n) {
        this.$refs['editBoard'].addEventListener('click', this.bindListen);
      } else {
        this.$refs['editBoard'].removeEventListener('click', this.bindListen);
      }
    }
  },
  methods: {
    getAllCameraData(){
      getCamerasByServer().then(res=>{
        if(res.success){
          debugger
    getAllCameraData() {
      getCamerasByServer().then(res => {
        if (res.success) {
          this.cameraData = res.data;
        }
      }).catch(e=>{
      }).catch(e => {
        console.log(e)
      })
    },
    bindListen(e){
    bindListen(e) {
      this.newLabel(e);
    },
    newLabel(e){
    newLabel(e) {
      console.log('点击了画板')
      if(this.isShowPop) return;
      if (this.isShowPop) return;
      //获取鼠标相对于画板的定位
      console.log('获取当前定位信息');
      let target = {
        id:'',
        x:e.offsetX,
        y:e.offsetY,
        posX:'',
        posY:''
        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;
    editLabel(label) {
      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){
      if (!this.curLabel.id) {
        this.labels.pop();
      }
    },
    deleteLabel(){
      if(this.curLabel.id){
    deleteLabel() {
      if (this.curLabel.id) {
        //请求后台删除
      }else{
      } else {
        this.labels.pop();
        this.isShowPop = false;
      }
    },
    submitInfo(){
    submitInfo() {

    }
  }
@@ -198,15 +209,15 @@
      }
    }
  }
  .action-bar{
  .action-bar {
    width: 960px;
    margin: auto;
    margin-bottom: 20px;
    text-align: right;
    .drawboard-trigger{
    .drawboard-trigger {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,.3);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }
  .drawboard {
@@ -216,68 +227,68 @@
    position: relative;
    background: #fff;
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
    .mask{
    .mask {
      position: absolute;
      background: transparent;
      width: 100%;
      height: 100%;
      overflow: hidden;
      &.edit-status-mask{
      &.edit-status-mask {
        background: rgba(20, 181, 255, 0.1);
      }
      .label{
      .label {
        position: absolute;
        z-index: 2;
        border-radius: 50%;
      }
    }
    img{
    img {
      width: 960px;
      height: 540px;
      background:#f0ffca;
      background: #f0ffca;
    }
    .popBox{
    .popBox {
      position: absolute;
      padding: 14px;
      border-radius: 3px;
      color: #fff;
      background: rgba(0,0,0,.7);
      .title{
      background: rgba(0, 0, 0, 0.7);
      .title {
        font-weight: bold;
        text-align: left;
        font-size: 15px;
      }
      .details{
        .detail-item{
      .details {
        .detail-item {
          display: flex;
          align-items: center;
          margin: 5px 0;
          label{
          label {
            color: #a9a9a9;
            width:65px;
            width: 65px;
            display: inline-block;
          }
          .left{
          .left {
            width: 110px;
            text-align: left;
            line-height: 28px;
            .fix-width{
            .fix-width {
              display: inline-block;
              width: 23px;
            }
          }
          .right{
          .right {
            width: 160px;
          }
          .devide{
          .devide {
            width: 10px;
            height: 1px;
            background: #a9a9a9;
            margin: 0 3px;
          }
        }
        .btns{
          margin-top: 10px;          
        .btns {
          margin-top: 10px;
        }
      }
    }