问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 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自己或子元素时，自动初始化swiper

        observeParents:true,//修改swiper的父元素时，自动初始化swiper

        observer: true,//修改swiper自己或子元素时，自动初始化swiper

        observeParents: true,//修改swiper的父元素时，自动初始化swiper

      },

      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 {