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