From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/components/giantTree/index.vue | 148 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 146 insertions(+), 2 deletions(-)
diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue
index ab602d2..9351497 100644
--- a/src/components/giantTree/index.vue
+++ b/src/components/giantTree/index.vue
@@ -1,5 +1,28 @@
<template>
<div class="tree-menu" :style="`max-height:${height - 200}px;`">
+ <div class="devArea">
+ <swiper :options="swiperOption" v-if="showDevArea">
+ <swiper-slide
+ v-for="item in nodeList"
+ :key="item.devId"
+ :class="{ active: activeTabObj.devId === item.devId }"
+ >
+ <div class="tab" @click="chooseTab(item)">
+ {{ item.devName }}
+ </div>
+ </swiper-slide>
+ </swiper>
+ <div class="swiper-pre-border" v-if="showDevArea">
+ <div class="icon-btn" slot="button-prev">
+ <i class="iconfont"></i>
+ </div>
+ </div>
+ <div class="swiper-next-border" v-if="showDevArea">
+ <div class="icon-btn" slot="button-next">
+ <i class="iconfont"></i>
+ </div>
+ </div>
+ </div>
<z-tree
:nodes="node"
:show-checkbox="TreeDataPool.multiple"
@@ -18,7 +41,9 @@
@onExpand="itemExpand"
@onCollapse="itemCollapse"
@onShowPic="showCameraPic"
+ :search="search"
/>
+ <div class="empty" v-if="!node.length">鏆傛棤鎽勫儚鏈烘暟鎹�,璇锋坊鍔犳憚鍍忔満!</div>
<div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
<div
class="dialog-box"
@@ -86,6 +111,15 @@
return {};
},
},
+ search: {
+ type: Boolean,
+ default: false,
+ },
+ showDevArea: {
+ type: Boolean,
+ default: false,
+ },
+ nodeList: {},
},
data() {
return {
@@ -102,9 +136,27 @@
],
},
curNodeTid: "",
+
+ activeTabObj: {},
+ swiperOption: {
+ slidesPerView: 3,
+ 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
+ },
};
},
created() {
+ this.activeTabObj =
+ this.nodeList && this.nodeList.length > 0 ? this.nodeList[0] : "";
this.TreeDataPool.zTree = true;
this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
? Number(sessionStorage.activeIndexVideo)
@@ -115,6 +167,9 @@
if (newValue !== this.treeName) {
this.TreeDataPool.cleanTree(this.treeName);
}
+ },
+ showDevArea: function () {
+ this.$forceUpdate();
},
},
methods: {
@@ -147,6 +202,12 @@
this.ztreeObj.selectNode(node, false, true);
}
+ },
+ chooseTab(item) {
+ this.$emit("saveTree", this.activeTabObj);
+ setTimeout(() => {
+ this.activeTabObj = item;
+ }, 100);
},
findTidByIdFromArr(arr) {
@@ -287,7 +348,9 @@
this.showDialog = true;
},
itemClick(evt, treeId, treeNode) {
+ console.log("click");
this.TreeDataPool.selectedNode = treeNode;
+ this.TreeDataPool.activeNode = treeNode;
this.TreeDataPool.treeType = this.treeName;
// 澶氶��
@@ -313,9 +376,11 @@
// this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
// },
itemCheck(evt, treeId, treeNode) {
- this.TreeDataPool.selectedNode = treeNode;
+ if (treeNode) {
+ this.TreeDataPool.selectedNode = treeNode;
+ }
this.TreeDataPool.treeType = this.treeName;
- debugger;
+
// 澶氶��
// this.ztreeObj.checkNode(treeNode, true, false, false);
let checkedNodes = this.ztreeObj.getCheckedNodes(true);
@@ -326,6 +391,7 @@
// 淇濆瓨涓�浠芥暟鎹�
this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes();
+ this.$emit("itemChecked", treeNode);
},
//灞曞紑
itemExpand(e, id, node) {
@@ -346,6 +412,9 @@
};
</script>
<style lang="scss" scoped>
+.devArea {
+}
+
.dialog-box {
position: absolute;
width: 220px;
@@ -403,9 +472,13 @@
}
.tree-menu {
// max-width: 350px;
+ min-height: 92px;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 4px;
+}
+.empty {
+ line-height: 76px;
}
.tree-menu::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
@@ -430,4 +503,75 @@
.tree-menu:hover {
overflow-y: auto;
}
+
+.devArea {
+ position: relative;
+ margin: 20px;
+ background: #f0f5fa;
+ padding: 0 40px;
+
+ .swiper-slide {
+ display: flex;
+ align-items: center;
+ height: 46px;
+
+ &.active {
+ .tab {
+ color: #0064ff;
+ }
+ border-bottom: 2px solid #0064ff;
+ }
+
+ .tab {
+ margin: 0 12px 0 24px;
+ font-size: 14px;
+ color: #666;
+ cursor: pointer;
+ }
+
+ .iconfont {
+ font-size: 12px;
+ color: #dbdbdb;
+ }
+ }
+
+ .swiper-pre-border {
+ position: absolute;
+ padding-bottom: 13px;
+ padding-right: 18px;
+ top: 12px;
+ left: 10px;
+ cursor: pointer;
+
+ i {
+ font-size: 16px;
+ color: #999;
+ }
+ }
+
+ .swiper-next-border {
+ position: absolute;
+ top: 12px;
+ right: 10px;
+ padding-bottom: 13px;
+ padding-left: 18px;
+ cursor: pointer;
+
+ i {
+ font-size: 16px;
+ color: #999;
+ }
+ }
+
+ .swiper-button-disabled {
+ cursor: not-allowed;
+ i {
+ color: #dbdbdb;
+ }
+ }
+
+ .del {
+ cursor: pointer;
+ }
+}
</style>
--
Gitblit v1.8.0