调整摄像机接入页面

zhangzengfei

2020-07-30 d6bf6c38fe15510aac8e56569ca0450fb8656c89

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

File was renamed from src/components/scene/SlideScene.vue
@@ -1,285 +1,285 @@
<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" >

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

                    <use :xlink:href="`#${item.rules[0].icon}`" />

                  </svg>

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

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

                  </svg>

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

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

                  </svg>

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

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

                  </svg>

                </div>

              </div>

            </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="icon-btn" slot="button-prev">

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

      </div>

    </div>

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

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

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

      </div>

    </div>

  </div>

</template>



<script>

export default {

  props:[

    // 'swiperOption',

    'sceneData'

  ],

  
  data() {

    return {

      // mockSceneData: [

      //   { scenename: "name1", id:1, icon: ["iconrenlianjiance", "icongetijingzhi"] },

      //   { scenename: "name2", id:2, icon: ["iconchouyan-copy"] },

      //   {

      //     scenename: "name3",

      //     id:3,

      //     icon: [

      //       "iconrenshukouzhao",

      //       "iconchouyan-copy",

      //       "iconrenlianjiance",

      //       "icongetijingzhi"

      //     ]

      //   },

      //   {

      //     scenename: "name4",

      //     id:4,

      //     icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]

      //   },

      //   { scenename: "name5", id:5, icon: ["icongetijingzhi"] },

      //   { scenename: "name6", id:6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },

      //   { scenename: "name7", id:7, icon: ["iconrenlianjiance"] }

      // ],

      swiperOption: {

        slidesPerView: 4,

        spaceBetween: 0,

        pagination: {

          el: ".swiper-pagination",

          clickable: true

        },

        navigation: {

          nextEl: ".swiper-next-border",

          prevEl: ".swiper-pre-border"

        },

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

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

      },

      mySwiper: {}

    }

  },

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

    }

  }

};

</script>



<style lang="scss">



.wrap-box {

  width: 100%;

  display: inline-block;

  .inner {

    width: 90%;

    box-sizing: border-box;

    position: relative;

    font-size: 14px;

    padding: 7px 0 48px;

    transition: all 1s;

    background: #ffffff;

    border: 1px solid #e2e2e2;

    box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

    border-radius: 4px;

    margin: auto;

    &:hover {

      .mask {

        display: block;

      }

    }

    .mask {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: rgba(0, 0, 0, 0.65);

      backdrop-filter: blur(1px) brightness(100%);

      text-align: center;

      z-index: 1;

      border-radius: 3px;

      display: none;

      .tool {

        position: absolute;

        top: 49%;

        left: 50%;

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

        i {

          font-size: 50px;

        }

        i:nth-of-type(1) {

          margin-right: 30px;

        }

        i:nth-of-type(2) {

          color: red;

        }

      }

    }

    .scenario-icon {

      display: flex;

      width: 85%;

      height: 85%;

      margin: auto;

      justify-content: center;

      align-content: center;

      align-items: center;

      .single,

      .double,

      .third,

      .four {

        width: 80%;

        padding-top: 80%;

        position: relative;

        margin: auto;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        .svg-wrap {

          width: 47%;

          position: absolute;

          height: 0;

          padding-top: 47%;

          text-align: center;

          box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;

          svg {

            position: absolute;

            top: 50%;

            left: 50%;

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

          }

        }

      }

      .single {

        margin: auto;

        .svg-wrap {

          top: 50%;

          left: 50%;

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

          box-shadow: none;

        }

      }

      .double {

        .svg-wrap:nth-of-type(1) {

          top: 50%;

          transform: translateY(-50%);

          left: 0;

        }

        .svg-wrap:nth-of-type(2) {

          top: 50%;

          transform: translateY(-50%);

          right: 0;

        }

      }

      .third {

        .svg-wrap:nth-of-type(1) {

          top: 0;

          left: 0;

        }

        .svg-wrap:nth-of-type(2) {

          top: 0;

          right: 0;

        }

        .svg-wrap:nth-of-type(3) {

          top: 50%;

          left: 50%;

          transform: translateX(-50%);

        }

      }

      .four {

        .svg-wrap:nth-of-type(1) {

          top: 0;

          left: 0;

        }

        .svg-wrap:nth-of-type(2) {

          top: 0;

          right: 0;

        }

        .svg-wrap:nth-of-type(3) {

          top: 50%;

          left: 0;

        }

        .svg-wrap:nth-of-type(4) {

          top: 50%;

          right: 0;

        }

      }

    }

    .scenario-name {

      width: 100%;

      height: 30px;

      box-sizing: border-box;

      padding: 0 4px;

      text-align: center;

      position: absolute;

      bottom: 10px;

      left: 0;

    }

  }

}

<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" >
          <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;">
                    <use :xlink:href="`#${item.rules[0].icon}`" />
                  </svg>
                </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;">
                    <use :xlink:href="`#${rule.icon}`" />
                  </svg>
                </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;">
                    <use :xlink:href="`#${rule.icon}`" />
                  </svg>
                </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;">
                    <use :xlink:href="`#${rule.icon}`" />
                  </svg>
                </div>
              </div>
            </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="icon-btn" slot="button-prev">
        <i class="iconfont iconzuo"></i>
      </div>
    </div>
    <div class="swiper-next-border" v-show="sceneData.length > 4 ">
      <div class="icon-btn" slot="button-next">
        <i class="iconfont iconyou1"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:[
    // 'swiperOption',
    'sceneData'
  ],
  
  data() {
    return {
      // mockSceneData: [
      //   { scenename: "name1", id:1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
      //   { scenename: "name2", id:2, icon: ["iconchouyan-copy"] },
      //   {
      //     scenename: "name3",
      //     id:3,
      //     icon: [
      //       "iconrenshukouzhao",
      //       "iconchouyan-copy",
      //       "iconrenlianjiance",
      //       "icongetijingzhi"
      //     ]
      //   },
      //   {
      //     scenename: "name4",
      //     id:4,
      //     icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]
      //   },
      //   { scenename: "name5", id:5, icon: ["icongetijingzhi"] },
      //   { scenename: "name6", id:6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },
      //   { scenename: "name7", id:7, icon: ["iconrenlianjiance"] }
      // ],
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 0,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-next-border",
          prevEl: ".swiper-pre-border"
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      },
      mySwiper: {}
    }
  },
  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);
    }
  }
};
</script>

<style lang="scss">

.wrap-box {
  width: 100%;
  display: inline-block;
  .inner {
    width: 90%;
    box-sizing: border-box;
    position: relative;
    font-size: 14px;
    padding: 7px 0 48px;
    transition: all 1s;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    margin: auto;
    &:hover {
      .mask {
        display: block;
      }
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(1px) brightness(100%);
      text-align: center;
      z-index: 1;
      border-radius: 3px;
      display: none;
      .tool {
        position: absolute;
        top: 49%;
        left: 50%;
        transform: translate(-50%, -50%);
        i {
          font-size: 50px;
        }
        i:nth-of-type(1) {
          margin-right: 30px;
        }
        i:nth-of-type(2) {
          color: red;
        }
      }
    }
    .scenario-icon {
      display: flex;
      width: 85%;
      height: 85%;
      margin: auto;
      justify-content: center;
      align-content: center;
      align-items: center;
      .single,
      .double,
      .third,
      .four {
        width: 80%;
        padding-top: 80%;
        position: relative;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .svg-wrap {
          width: 47%;
          position: absolute;
          height: 0;
          padding-top: 47%;
          text-align: center;
          box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
          svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      .single {
        margin: auto;
        .svg-wrap {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          box-shadow: none;
        }
      }
      .double {
        .svg-wrap:nth-of-type(1) {
          top: 50%;
          transform: translateY(-50%);
          left: 0;
        }
        .svg-wrap:nth-of-type(2) {
          top: 50%;
          transform: translateY(-50%);
          right: 0;
        }
      }
      .third {
        .svg-wrap:nth-of-type(1) {
          top: 0;
          left: 0;
        }
        .svg-wrap:nth-of-type(2) {
          top: 0;
          right: 0;
        }
        .svg-wrap:nth-of-type(3) {
          top: 50%;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .four {
        .svg-wrap:nth-of-type(1) {
          top: 0;
          left: 0;
        }
        .svg-wrap:nth-of-type(2) {
          top: 0;
          right: 0;
        }
        .svg-wrap:nth-of-type(3) {
          top: 50%;
          left: 0;
        }
        .svg-wrap:nth-of-type(4) {
          top: 50%;
          right: 0;
        }
      }
    }
    .scenario-name {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 4px;
      text-align: center;
      position: absolute;
      bottom: 10px;
      left: 0;
    }
  }
}
</style>