From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/panoramicView/components/SlideCanvas.vue | 71 ++++++++++++++++++++---------------
1 files changed, 40 insertions(+), 31 deletions(-)
diff --git a/src/pages/panoramicView/components/SlideCanvas.vue b/src/pages/panoramicView/components/SlideCanvas.vue
index 14362f4..02bfbcb 100644
--- a/src/pages/panoramicView/components/SlideCanvas.vue
+++ b/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%;
--
Gitblit v1.8.0