From be1f4296a09f907fd3218bc423d24b817a761229 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 16 二月 2023 16:33:21 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.20.39:8989/r/LFWEB_NEW

---
 src/components/Screen/ProjectTree.vue |   92 ++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/src/components/Screen/ProjectTree.vue b/src/components/Screen/ProjectTree.vue
index df592f5..c55483c 100644
--- a/src/components/Screen/ProjectTree.vue
+++ b/src/components/Screen/ProjectTree.vue
@@ -1,5 +1,14 @@
 <template>
   <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
+    <div class="project_tree__title">宸ョ▼椤圭洰</div>
+    <el-input
+      style="width: 80%"
+      placeholder="杈撳叆鍏抽敭瀛楄繘琛屾煡璇�"
+      suffix-icon="el-icon-search"
+      v-model="filterText"
+      size="mini"
+    >
+    </el-input>
     <div class="tree-container">
       <el-tree
         :data="treeData"
@@ -10,13 +19,14 @@
         ref="tree"
         class="el-tree"
         @check-change="handleCheckChange"
+        :filter-node-method="filterNode"
       >
         <div
           style="display: flex"
           class="custom-tree-node"
           slot-scope="{ node, data }"
         >
-          <div style="margin-left: 0px; padding-left: 15px">
+          <div style="">
             <i
               v-if="data.children && data.children.length > 0"
               style="color: yellow"
@@ -24,8 +34,20 @@
             ></i>
             <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
           </div>
-
+          <!-- <div style="">
+            <i
+              v-if="node.expanded && data.children && data.children.length > 0"
+              style="color: yellow"
+              class="el-icon-folder-opened"
+            ></i>
+            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
+          </div> -->
           <div
+            :style="
+              data.children && data.children.length > 0
+                ? 'padding-left: 20px'
+                : 'padding-left: 20px'
+            "
             class="tree-label"
             :title="node.label || '-'"
           >
@@ -34,14 +56,14 @@
         </div>
       </el-tree>
     </div>
-    <div class="changeBaseLayer">
+    <!-- <div class="changeBaseLayer">
       <div @click="changeMenulayer" class="CenDiv">
         <div
           id="cenBg"
           v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
         ></div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -70,6 +92,7 @@
       isActive: false,
       isMenuLayer: true,
       openEcharts: false,
+      filterText: '',
     }
   },
 
@@ -79,6 +102,11 @@
     this.changeSelectli = this.rightList[0].id
     this.changeSelectStyle = this.rightMenu[0].id
     this.addImageLayer()
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    },
   },
   methods: {
     async addImageLayer() {
@@ -170,6 +198,10 @@
         Viewer.imageryLayers._layers[3].show = true
       }
     },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
   },
 }
 </script>
@@ -180,12 +212,26 @@
   width: 300px;
   height: 100%;
   transition: width 2s;
-  background: url("~@/assets/img/themic/宸︽.png") no-repeat center;
+  background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;
+
   background-size: 100% 100%;
+  &__title {
+    color: #fff;
+    height: 30px;
+    font-size: 20px;
+    width: 130px;
+    text-align: center;
+    padding-top: 10px;
+    font-weight: bold;
+  }
+  .el-input {
+    width: 80%;
+    padding: 5px 0 5px 30px;
+  }
 
   .tree-container {
     margin: 10px;
-    height: 90%;
+    height: 85%;
     overflow-y: auto;
   }
   .changeBaseLayer {
@@ -197,7 +243,6 @@
   .CenDiv {
     height: 40px;
     width: 60px;
-
     margin-right: 7%;
     border-radius: 5px;
     bottom: 3%;
@@ -223,11 +268,43 @@
     border-radius: 5px;
   }
 }
+/*  婊氬姩鏉℃牱寮� */
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #409eff;
+}
+
+::-webkit-scrollbar-track {
+  background: #eee;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #409eff;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #409eff;
+}
+
+::-webkit-scrollbar-corner {
+  background: #409eff;
+}
 </style>
 
 <style lang="scss">
 .leftContainer {
   .project_tree {
+    .el-tree-node__content {
+      margin-left: 20px;
+    }
+
+    .el-tree .el-tree-node .is-leaf {
+      margin-left: -14px;
+    }
+
     .el-tree-node__content > label.el-checkbox {
       margin-right: -30px;
     }
@@ -243,7 +320,6 @@
       // visibility: hidden;
     }
     .tree-label {
-      padding-left: 10px;
       font-size: 16px;
       color: #fff;
     }

--
Gitblit v1.9.3