From 681c802826e3ce47f428358cf6b4838712f54de1 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期五, 05 三月 2021 15:52:00 +0800 Subject: [PATCH] 全景追踪关联摄像机轮播组件标题部分样式更新;检索查询详情卡片摄像机名称限制展示宽度;事件推送人员等级选项调试 --- src/pages/panoramicView/components/SlideCanvas.vue | 49 ++++++++++++++++++++++++++++--------------------- 1 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/pages/panoramicView/components/SlideCanvas.vue b/src/pages/panoramicView/components/SlideCanvas.vue index 47b4182..f8367e9 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,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,10 +82,10 @@ 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') @@ -105,14 +106,14 @@ pre () { this.swiper.activeIndex--; - if(this.swiper.activeIndex == -1){ - this.swiper.activeIndex = this.cameras.length-1; + if (this.swiper.activeIndex == -1) { + this.swiper.activeIndex = this.cameras.length - 1; } this.swiper.slideTo(this.swiper.activeIndex); }, next () { this.swiper.activeIndex++; - if(this.swiper.activeIndex == this.cameras.length){ + if (this.swiper.activeIndex == this.cameras.length) { this.swiper.activeIndex = 0; } this.swiper.slideTo(this.swiper.activeIndex); @@ -172,6 +173,7 @@ background: #666; } .swiper-draw-box-title { + position: relative; display: flex; justify-content: center; align-items: center; @@ -179,6 +181,11 @@ b { font-size: 14px; } + .left-fixed{ + position: absolute; + left: 0; + top: -6px; + } } .wrap-box { width: 100%; -- Gitblit v1.8.0