| | |
| | | ], |
| | | watch: { |
| | | cameras: { |
| | | handler (n, o) { |
| | | 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') |
| | | }, |
| | | getCanvasData (data) { |
| | | getCanvasData(data) { |
| | | let _this = this; |
| | | savePolygon(data).then(rsp => { |
| | | _this.$emit('polygonDataUpdate') |
| | | }); |
| | | }, |
| | | newOption () { |
| | | newOption() { |
| | | return { |
| | | slidesPerView: 1, |
| | | spaceBetween: 0, |
| | |
| | | } |
| | | }, |
| | | |
| | | pre () { |
| | | pre() { |
| | | this.swiper.activeIndex--; |
| | | if (this.swiper.activeIndex == -1) { |
| | | this.swiper.activeIndex = this.cameras.length - 1; |
| | | } |
| | | this.swiper.slideTo(this.swiper.activeIndex); |
| | | }, |
| | | next () { |
| | | 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(); |
| | | } |
| | | } |
| | |
| | | b { |
| | | font-size: 14px; |
| | | } |
| | | .left-fixed{ |
| | | .left-fixed { |
| | | position: absolute; |
| | | left: 0; |
| | | top: -6px; |