实景图固定区域高度调整

hanbaoshan

2020-12-24 c748495762da3fdaeffa3bfbfde6607cd4f45a42

 src/pages/panoramicView/components/LabelMark.vue

@@ -122,17 +122,22 @@
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :http-request="definedUpload"
              accept=".jpg"
              :on-change="onChange"
              :show-file-list="false"
            >
              <el-image
              <!-- <el-image
                class="preview"
                v-if="panoramaPath"
                :src="panoramaPath"
                fit="contain"
                @mousemove="showCurPos"
                @mouseout="isShowCurPos=false"
              ></el-image>
              ></el-image>-->
              <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
                <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
              </div>

              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
@@ -148,7 +153,7 @@
              <div>
                <label for>空间高:</label>
                <el-input v-model="spaceHeight" placeholder="请输入实际空间高" size="small"></el-input>
              </div> -->
              </div>-->
            </div>
            <div class="pos" v-show="isShowCurPos">
              当前位置:
@@ -199,6 +204,10 @@
      snapshot_url: '',
      panoramaPath: '',
      cameraData: [],
      fixedW: 960,
      fixedH: 700,
      imgW: 0,
      imgH: 0,
      traceX: 0,
      traceY: 0,
      isShowCurPos: false,
@@ -222,7 +231,7 @@
      })();
    };
  },
  

  watch: {
    'TreeDataPool.selectedNode': {
      handler (n, o) {
@@ -298,10 +307,19 @@
        this.findCameraMarks(this.curCameraData.cameraId);
      }
    },
    getPanorama(){
    getPanorama () {
      let _this = this;
      getPanoramaPic().then(res=>{
        _this.panoramaPath = res.data.panoramaPath
      getPanoramaPic().then(res => {
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
          _this.imgW = _this.fixedW;
          _this.imgH = _this.imgW*res.data.height/res.data.width;
        }else{
          _this.imgH = _this.fixedH;
          _this.imgW = res.data.width*_this.imgH/res.data.height;
        }
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
      })
    },
    showCurPos (e) {
@@ -311,25 +329,24 @@
      this.traceY = e.offsetY;
    },
    onChange (file, fileList) {
      fileList = [file]
      this.isShowCurPos = false;
      if (file.raw.type == "image/jpeg") {
        fileList = [file]
        this.isShowCurPos = false;
      }

    },
    definedUpload (params) {
      let _this = this;
      let _file = params.file;
      let param = new FormData();
      param.append('file', params.file)
      putPanoramaPic(param).then(res=>{
        _this.panoramaPath = res.data.panoramaPath+'?'+Math.random()
        console.log(_this.panoramaPath)
      putPanoramaPic(param).then(res => {
        debugger
        //_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        _this.getPanorama()
        _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
      })
      // let fileReader = new FileReader()
      // fileReader.onload = () => {
      //   _this.file = fileReader.result;
      // }
      // if (_file) {
      //   fileReader.readAsDataURL(_file)
      // }

    },

    bindListen (e) {
@@ -445,7 +462,7 @@
.label-mark {
  background: #d2dcea;
  height: calc(100vh - 61px);
  &>.el-tabs--border-card > .el-tabs__content {
  & > .el-tabs--border-card > .el-tabs__content {
    background: #d2dcea;
    padding: 0;
    height: calc(100vh - 100px);