标注页面添加实景坐标回显,轨迹图添加人员筛选相关功能

hanbaoshan

2020-12-29 c9e0ab6e5150243d1e193a0f919a55f3c327710c

 src/pages/panoramicView/components/LabelMark.vue

@@ -20,7 +20,7 @@
                </div>
                <div style="width:250px;">
                  <label for>笔触:</label>
                  <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
                  <el-slider v-model="dotSize" :min="1" :max="15"></el-slider>
                </div>
                <div>
                  <el-button
@@ -111,6 +111,38 @@
                </div>
              </div>
            </div>
            <div class="panorama-info">
              <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
                  class="label"
                  @mouseover="labelOver(item)"
                  @mouseout="item.isShow=false"
                  v-for="item in curCameraData.panoramaCoords"
                  :key="item.id"
                  :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                >
                  <span class="text" v-show="item.isShow">
                    <b>{{item.x}},</b>&nbsp;<b>{{item.y}}</b>
                  </span>
                </div>
              </div>
              <div class="pos" v-show="isShowCurPos">
                当前位置:
                <b>{{traceX}}</b>,
                <b>{{traceY}}</b>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
@@ -134,8 +166,18 @@
                @mousemove="showCurPos"
                @mouseout="isShowCurPos=false"
              ></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
                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">
@@ -217,7 +259,8 @@
      spaceHeight: '',
      curCameraData: {
        cameraId: '',
        coords: []
        coords: [],
        panoramaCoords: []
      },
    }
  },
@@ -251,6 +294,15 @@
    }
  },
  methods: {
    labelOver (item) {
      debugger
      this.$nextTick(() => {
        item.isShow = true;
      })
    },
    labelout (item) {
      item.isShow = false;
    },
    getAllCameraData () {
      let _this = this;
      getCamerasByServer().then(res => {
@@ -284,7 +336,11 @@
      getCameraMarks({ cameraId: id }).then(res => {
        if (res.success) {
          this.curCameraData.cameraId = id;
          this.curCameraData.coords = res.data.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
          this.curCameraData.coords = res.data.coords.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
          this.curCameraData.panoramaCoords = res.data.panoramaCoords.map((item, index) => ({ id: 'p' + index, x: item.x, y: item.y }));
          this.curCameraData.panoramaCoords.forEach(coord => {
            this.$set(coord, 'isShow', false)
          })
        }
      }).catch(e => {
        console.log(e)
@@ -311,13 +367,13 @@
      let _this = this;
      getPanoramaPic().then(res => {
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
        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.imgW * res.data.height / res.data.width;
        } else {
          _this.imgH = _this.fixedH;
          _this.imgW = res.data.width*_this.imgH/res.data.height;
          _this.imgW = res.data.width * _this.imgH / res.data.height;
        }
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
      })
@@ -466,15 +522,19 @@
    background: #d2dcea;
    padding: 0;
    height: calc(100vh - 100px);
    overflow: auto;
    //overflow: auto;
    .mark-interface {
      display: flex;
      .left-tree {
        position: relative;
        float: left;
        //float: left;
        height: calc(100vh - 20px);
        overflow: auto;
        background: #fff;
      }
      .tree-right {
        flex: 1;
        height: calc(100vh - 90px);
        overflow: auto;
      }
    }
@@ -616,6 +676,25 @@
      }
    }
  }
  .panorama-info {
    width: 1070px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 30px;
    .img-wrap {
      position: relative;
      .label {
        position: absolute;
        border-radius: 50%;
        .text {
          color: aqua;
          font-size: 14px;
          position: absolute;
          bottom: 15px;
        }
      }
    }
  }
  .user-upload {
    margin: auto;
    padding: 50px;