修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/cameraAccess/components/scene/SlideScene.vue

@@ -1,55 +1,108 @@
<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> -->

      <swiper-slide v-for="item in sceneData" :key="item.id+'s'">

        <div class="wrap-box" >

    <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="inner">

            <div class="scenario-icon">

              <div class="single" v-if="item.rules.length==1">

              <div class="single" v-if="item.rules.length == 1">

                <div class="svg-wrap">

                  <!-- <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].icon_blob}`" 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">

              <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;">

                    <use :xlink:href="`#${rule.icon}`" />

                  </svg> -->

                  <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" 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">

              <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;">

                    <use :xlink:href="`#${rule.icon}`" />

                  </svg> -->

                  <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" 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">

              <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;">

                    <use :xlink:href="`#${rule.icon}`" />

                  </svg> -->

                  <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" 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>

            <div class="scenario-name">{{item.scene_name}}</div>

            <div class="scenario-name">{{ item.scene_name }}</div>

          </div>

        </div>

      </swiper-slide>

    </swiper>

    <div class="swiper-pre-border" v-show="sceneData.length > 4 ">

    <div class="swiper-pre-border" v-show="sceneData.length > 4">

      <div class="icon-btn" slot="button-prev">

        <i class="iconfont iconzuo"></i>

      </div>

    </div>

    <div class="swiper-next-border" v-show="sceneData.length > 4 ">

    <div class="swiper-next-border" v-show="sceneData.length > 4">

      <div class="icon-btn" slot="button-next">

        <i class="iconfont iconyou1"></i>

      </div>

@@ -58,12 +111,13 @@
</template>



<script>

import { chunkArr } from "@/scripts/util";

export default {

  props:[

  props: [

    // 'swiperOption',

    'sceneData'

    "sceneData",

  ],

  


  data() {

    return {

      // mockSceneData: [

@@ -93,45 +147,27 @@
        spaceBetween: 0,

        pagination: {

          el: ".swiper-pagination",

          clickable: true

          clickable: true,

        },

        navigation: {

          nextEl: ".swiper-next-border",

          prevEl: ".swiper-pre-border"

          prevEl: ".swiper-pre-border",

        },

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

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

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

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

      },

      mySwiper: {}

    }

      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);

    },

  },

};

</script>



@@ -142,6 +178,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%;

@@ -222,7 +264,7 @@
            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 96%;

            width: 76%;

          }

        }

      }

@@ -233,7 +275,7 @@
          left: 50%;

          transform: translate(-50%, -50%);

          box-shadow: none;

          width: 100%

          width: 100%;

        }

      }

      .double {

@@ -291,6 +333,7 @@
      position: absolute;

      bottom: 10px;

      left: 0;

      word-break: break-all;

    }

  }

}