From d6bf6c38fe15510aac8e56569ca0450fb8656c89 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 30 七月 2020 18:55:09 +0800
Subject: [PATCH] 调整摄像机接入页面
---
src/pages/cameraAccess/components/scene/SlideScene.vue | 568 ++++++++++++++++++++++++++++----------------------------
1 files changed, 284 insertions(+), 284 deletions(-)
diff --git a/src/components/scene/SlideScene.vue b/src/pages/cameraAccess/components/scene/SlideScene.vue
similarity index 99%
rename from src/components/scene/SlideScene.vue
rename to src/pages/cameraAccess/components/scene/SlideScene.vue
index 45bf329..8caaf09 100644
--- a/src/components/scene/SlideScene.vue
+++ b/src/pages/cameraAccess/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鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- observeParents:true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- },
- 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鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ observeParents:true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ },
+ 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>
\ No newline at end of file
--
Gitblit v1.8.0