From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期四, 04 二月 2021 18:22:54 +0800 Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域 --- src/pages/cameraAccess/components/scene/SlideScene.vue | 95 +++++++++++++++++++++++++++-------------------- 1 files changed, 54 insertions(+), 41 deletions(-) diff --git a/src/pages/cameraAccess/components/scene/SlideScene.vue b/src/pages/cameraAccess/components/scene/SlideScene.vue index 8494733..969aae5 100644 --- a/src/pages/cameraAccess/components/scene/SlideScene.vue +++ b/src/pages/cameraAccess/components/scene/SlideScene.vue @@ -1,41 +1,62 @@ <template> <div class="swiper-box"> - <swiper ref="sceneSwiper" v-if="sceneData.length>=1" :options="swiperOption" class="swiper-box-container"> - <!-- <span class="task-tip" v-show="Camera.rules.length == 0 ">鏆傛棤鍦烘櫙,璇峰紑濮嬪垱寤�</span> --> + <p class="task-tip" v-if="sceneData.length == 0 ">鏆傛棤鍦烘櫙锛岃寮�濮嬪垱寤�</p> + <swiper + ref="sceneSwiper" + v-if="sceneData.length>=1" + :options="swiperOption" + class="swiper-box-container" + > <swiper-slide v-for="item in sceneData" :key="item.id+'s'"> - <div class="wrap-box" > + <div class="wrap-box"> <div class="inner"> <div class="scenario-icon"> <div class="single" v-if="item.rules.length==1"> <div class="svg-wrap"> - <svg class="icon" aria-hidden="true" style="font-size:4rem;"> + <!-- <svg class="icon" aria-hidden="true" style="font-size:4rem;"> <use :xlink:href="`#${item.rules[0].icon}`" /> - </svg> - <!-- <img class="baseImg" :src="`data:image/png;base64,${item.rules[0].iconBlob}`" alt=""> --> + </svg>--> + <img + class="baseImg" + :src="item.rules[0].icon_blob && item.rules[0].icon_blob.indexOf(',')>0?item.rules[0].icon_blob:`data:image/png;base64,${item.rules[0].icon_blob}`" + alt + /> </div> </div> <div class="double" v-else-if="item.rules.length==2"> <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="index"> - <svg class="icon" aria-hidden="true" style="font-size:2rem;"> + <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;"> <use :xlink:href="`#${rule.icon}`" /> - </svg> - <!-- <img class="baseImg" :src="`data:image/png;base64,${rule.iconBlob}`" alt=""> --> + </svg>--> + <img + class="baseImg" + :src="item.rules[index].icon_blob &&item.rules[index].icon_blob.indexOf(',')>0?item.rules[index].icon_blob:`data:image/png;base64,${rule.icon_blob}`" + alt + /> </div> </div> <div class="third" v-else-if="item.rules.length==3"> <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'t'+index"> - <svg class="icon" aria-hidden="true" style="font-size:2rem;"> + <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;"> <use :xlink:href="`#${rule.icon}`" /> - </svg> - <!-- <img class="baseImg" :src="`data:image/png;base64,${rule.iconBlob}`" alt=""> --> + </svg>--> + <img + class="baseImg" + :src="item.rules[index].icon_blob &&item.rules[index].icon_blob.indexOf(',')>0?item.rules[index].icon_blob:`data:image/png;base64,${rule.icon_blob}`" + alt + /> </div> </div> <div class="four" v-else-if="item.rules.length==4"> <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'f'+index"> - <svg class="icon" aria-hidden="true" style="font-size:2rem;"> + <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;"> <use :xlink:href="`#${rule.icon}`" /> - </svg> - <!-- <img class="baseImg" :src="`data:image/png;base64,${rule.iconBlob}`" alt=""> --> + </svg>--> + <img + class="baseImg" + :src="item.rules[index].icon_blob && item.rules[index].icon_blob.indexOf(',')>0?item.rules[index].icon_blob:`data:image/png;base64,${rule.icon_blob}`" + alt + /> </div> </div> </div> @@ -58,12 +79,13 @@ </template> <script> +import {chunkArr} from '@/scripts/util'; export default { - props:[ + props: [ // 'swiperOption', 'sceneData' ], - + data() { return { // mockSceneData: [ @@ -99,37 +121,20 @@ nextEl: ".swiper-next-border", prevEl: ".swiper-pre-border" }, - observer:true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper - observeParents:true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper + observer: true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper + observeParents: true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }, mySwiper: {} } }, - mounted(){ + mounted() { // this.mySwiper = this.$refs.sceneSwiper.swiper; - + }, - methods:{ - //鎷嗗垎浜岀淮鏁扮粍 - chunk(arr,size = 1){ - if(arr.length == 0) return; - const tempContainer = []; - let innerArr = []; - arr.forEach(item => { - if(innerArr.length == 0){ - tempContainer.push(innerArr); - } - innerArr.push(item); - if(innerArr.length == size){ - innerArr = []; - } - }); - return tempContainer; - } - }, + computed: { slides() { - return this.chunk(this.mockSceneData,5); + return chunkArr(this.mockSceneData, 5); } } }; @@ -142,6 +147,12 @@ vertical-align: -0.15em; fill: currentColor; overflow: hidden; +} +.task-tip { + font-family: PingFangSC-Regular; + font-size: 12px; + color: #cccccc; + margin-top: 10%; } .wrap-box { width: 100%; @@ -217,11 +228,12 @@ padding-top: 47%; text-align: center; box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset; - svg { + img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 76%; } } } @@ -232,6 +244,7 @@ left: 50%; transform: translate(-50%, -50%); box-shadow: none; + width: 100%; } } .double { -- Gitblit v1.8.0