问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 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,37 +57,33 @@
    'cameras',
    //'swiperOption'
  ],
  watch:{
    cameras:{
      handler(n,o){
        console.log('slidecanvas cameras',n)
  watch: {
    cameras: {
      handler(n, o) {
        console.log('slidecanvas cameras', n)
      },
      deep: true
    }
  },
  components: { PolygonCanvas },
  data () {
  data() {
    return {
      swiperOption: this.newOption(),
      //mySwiper: {}
    }
  },
  computed: {
    swiper () {
    swiper() {
      return this.$refs['cameraSwiper'].swiper
    }
  },
  mounted () {
  mounted() {
    //this.mySwiper = this.$refs.sceneSwiper.swiper;
    console.log(this.swiper)
    // 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) {
      let _this = this;
@@ -94,7 +91,7 @@
        _this.$emit('polygonDataUpdate')
      });
    },
    newOption () {
    newOption() {
      return {
        slidesPerView: 1,
        spaceBetween: 0,
@@ -107,15 +104,21 @@
      }
    },

    pre () {
      this.swiper.activeIndex--
    pre() {
      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++
    next() {
      this.swiper.activeIndex++;
      if (this.swiper.activeIndex == this.cameras.length) {
        this.swiper.activeIndex = 0;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    drawBaseImg (id) {
    drawBaseImg(id) {
      this.$refs[`polygonCanvas_${id}`][0].showModal();
    }
  }
@@ -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%;