全景跟踪限制至少标记4个点

zhangzengfei

2021-05-13 32719a325eb17289e11be401b3ed642f82912f52

 src/pages/panoramicView/components/SlideCanvas.vue

@@ -9,15 +9,17 @@
    >
      <swiper-slide v-for="camera in cameras" :key="camera.id+'c'">
        <div class="swiper-draw-box-title">
          <div class="left-fixed">
            <b style="margin-left:14px;">绘制区域</b>
            <span
              class="el-dropdown-link"
              @click="drawBaseImg(camera.id)"
              style="position: relative;top: 5px; cursor:pointer"
            >
              <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
            </span>
          </div>
          <b>{{camera.name}}</b>
          <b style="margin-left:14px;">绘制区域</b>
          <span
            class="el-dropdown-link"
            @click="drawBaseImg(camera.id)"
            style="position: relative;top: 5px; cursor:pointer"
          >
            <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
          </span>
        </div>
        <polygon-canvas
          class="polygon-canvas"
@@ -32,17 +34,16 @@
        ></polygon-canvas>
      </swiper-slide>
    </swiper>
    <div class="swiper-pre-border" slot="button-prev" @click="pre" >
      <div class="icon-btn" >
    <div class="swiper-pre-border" slot="button-prev" @click="pre">
      <div class="icon-btn">
        <i class="iconfont iconzuo"></i>
      </div>
    </div>
    <div class="swiper-next-border" slot="button-next" @click="next">
      <div class="icon-btn" >
      <div class="icon-btn">
        <i class="iconfont iconyou1"></i>
      </div>
    </div>

  </div>
</template>

@@ -56,10 +57,10 @@
    'cameras',
    //'swiperOption'
  ],
  watch:{
    cameras:{
      handler(n,o){
        console.log('slidecanvas cameras',n)
  watch: {
    cameras: {
      handler (n, o) {
        console.log('slidecanvas cameras', n)
      },
      deep: true
    }
@@ -81,14 +82,10 @@
    console.log(this.swiper)
  },
  methods: {
    refresh(url,cameraId) {
    refresh (url, cameraId) {
      this.$emit('polygonDataUpdate')

      //let camera = this.cameras.find(one => one.id == cameraId);
      //camera.canvasData.snapshot_url = url;

    },
    getCanvasData(data) {
    getCanvasData (data) {
      let _this = this;
      savePolygon(data).then(rsp => {
        _this.$emit('polygonDataUpdate')
@@ -108,11 +105,17 @@
    },

    pre () {
      this.swiper.activeIndex--
      this.swiper.activeIndex--;
      if (this.swiper.activeIndex == -1) {
        this.swiper.activeIndex = this.cameras.length - 1;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    next () {
      this.swiper.activeIndex++
      this.swiper.activeIndex++;
      if (this.swiper.activeIndex == this.cameras.length) {
        this.swiper.activeIndex = 0;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    drawBaseImg (id) {
@@ -170,6 +173,7 @@
  background: #666;
}
.swiper-draw-box-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
@@ -177,6 +181,11 @@
  b {
    font-size: 14px;
  }
  .left-fixed{
    position: absolute;
    left: 0;
    top: -6px;
  }
}
.wrap-box {
  width: 100%;