From 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 26 一月 2022 13:46:53 +0800
Subject: [PATCH] 集群管理搜索集群
---
src/pages/cameraAccess/components/scene/SlideScene.vue | 591 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 307 insertions(+), 284 deletions(-)
diff --git a/src/pages/cameraAccess/components/scene/SlideScene.vue b/src/pages/cameraAccess/components/scene/SlideScene.vue
index 8caaf09..969aae5 100644
--- a/src/pages/cameraAccess/components/scene/SlideScene.vue
+++ b/src/pages/cameraAccess/components/scene/SlideScene.vue
@@ -1,285 +1,308 @@
-<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">
+ <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="svg-wrap">
+ <!-- <svg class="icon" aria-hidden="true" style="font-size:4rem;">
+ <use :xlink:href="`#${item.rules[0].icon}`" />
+ </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;">
+ <use :xlink:href="`#${rule.icon}`" />
+ </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;">
+ <use :xlink:href="`#${rule.icon}`" />
+ </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;">
+ <use :xlink:href="`#${rule.icon}`" />
+ </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>
+ </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>
+import {chunkArr} from '@/scripts/util';
+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;
+
+ },
+
+ computed: {
+ slides() {
+ return chunkArr(this.mockSceneData, 5);
+ }
+ }
+};
+</script>
+
+<style lang="scss">
+.icon {
+ width: 1em;
+ height: 1em;
+ 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%;
+ 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;
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 76%;
+ }
+ }
+ }
+ .single {
+ margin: auto;
+ .svg-wrap {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: none;
+ width: 100%;
+ }
+ }
+ .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