From 2a9e0f190c384d4c95a188822d6bf1802697d10c Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期五, 19 一月 2024 10:19:32 +0800
Subject: [PATCH] 图层搜索
---
src/components/left/leftmenu.vue | 81 +++++++++++++++++++++++++++-------------
1 files changed, 54 insertions(+), 27 deletions(-)
diff --git a/src/components/left/leftmenu.vue b/src/components/left/leftmenu.vue
index 8931122..fa98f66 100644
--- a/src/components/left/leftmenu.vue
+++ b/src/components/left/leftmenu.vue
@@ -11,8 +11,14 @@
>脳</span
>
<img class="openLeftMenu" v-else src="@/assets/img/left/souselist4.png" />
-
<div class="layerTreeContainer" v-show="isShowLeftPanel">
+ <el-input
+ placeholder="鍥惧眰鍚嶇О"
+ v-model="filterText"
+ size="mini"
+ >
+ </el-input>
+
<div class="switchbox">
<el-radio-group v-model="radio" @change="getright">
<el-radio :label="1">缁勭粐鏈烘瀯</el-radio>
@@ -37,6 +43,7 @@
:render-content="renderContent"
:default-expanded-keys="defaultExpanded"
@check="check"
+ :filter-node-method="filterNode"
></el-tree>
</div>
</div>
@@ -445,6 +452,7 @@
name: "leftmenu",
data() {
return {
+ filterText: "",
isShowLeftPanel: false,
activeName: "first",
alldisabled: [],
@@ -464,18 +472,18 @@
//鑾峰彇token骞惰姹傚姞杞藉浘灞傛暟鎹�
this.SmartEarthToken = common.smartearthtoken;
this.$nextTick(() => {
- getmenu().then((response) => {
- // // 寰楀埌榛樿閫変腑鐨勬暟鎹殑id
- // this.parseJson(response.data); //鍦烘櫙閰嶇疆
- // this.treeData = response.data;
- // this.setDefaultCheck(response.data);
- // setTimeout(() => {
- // this.randomSelectLayer();
- // let selectedLayers = this.$refs.tree.getCheckedNodes();
- // // .filter((item) => item.sourceType == "cluster");
- // this.$store.commit("selectedLayer", selectedLayers);
- // }, 1000);
- });
+ // getmenu().then((response) => {
+ // // // 寰楀埌榛樿閫変腑鐨勬暟鎹殑id
+ // // this.parseJson(response.data); //鍦烘櫙閰嶇疆
+ // // this.treeData = response.data;
+ // // this.setDefaultCheck(response.data);
+ // // setTimeout(() => {
+ // // this.randomSelectLayer();
+ // // let selectedLayers = this.$refs.tree.getCheckedNodes();
+ // // // .filter((item) => item.sourceType == "cluster");
+ // // this.$store.commit("selectedLayer", selectedLayers);
+ // // }, 1000);
+ // });
this.getLayersData("./static/layers.json");
// axios.get("./static/layers.json").then(
// (response) => {
@@ -546,6 +554,10 @@
this.$refs.tree.setChecked("zhianjiankong", true, true);
this.setChecked("zhianjiankong", true);
});
+ Bus.$on("closeSPJK", () => {
+ this.$refs.tree.setChecked("zhianjiankong", false, false);
+ this.setChecked("zhianjiankong", false);
+ });
//鍏抽棴鑿滃崟寮圭獥
Bus.$on("closeMenuPop", (data) => {
if (data) {
@@ -598,6 +610,10 @@
console.log("鑾峰彇鍦烘櫙閰嶇疆澶辫触锛�");
}
);
+ },
+ filterNode(value, treeData) {
+ if (!value) return true;
+ return treeData.name.indexOf(value) !== -1;
},
setTreeDataChange(res) {
if (this.treeChangeFlag == res) return;
@@ -2678,8 +2694,7 @@
// },
initCluster(treeNode) {
- this.$set(treeNode, "disabled", true);//缁檛reeNode娣诲姞disabled灞炴��
-
+ // this.$set(treeNode, "disabled", true); //缁檛reeNode娣诲姞disabled灞炴��
let that = this;
let imgUrl;
new Cesium.GeoJsonDataSource.load(
@@ -2687,7 +2702,7 @@
"?version=1.3.0&request=GetFeature&format=json&typename=" +
treeNode.layer
).then((dataSource) => {
- that.$set(treeNode, "disabled", false);
+ // that.$set(treeNode, "disabled", false);
Viewer.dataSources.add(dataSource);
clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
// window.clusterItem = dataSource;
@@ -2731,7 +2746,6 @@
// // 鍋忕Щ閲�
// pixelOffset: new Cesium.Cartesian2(15, 0),
// };
-
});
// 娣诲姞鐩戝惉鍑芥暟
@@ -2970,6 +2984,11 @@
}
},
},
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val);
+ },
+ },
};
</script>
<style scoped>
@@ -3000,7 +3019,9 @@
transition: 1s;
z-index: 9999;
}
-
+.switchbox{
+ margin-top: 5px;
+}
.closeLeftMenu:hover {
cursor: pointer;
transform: rotateZ(90deg);
@@ -3034,6 +3055,9 @@
/* box-shadow: 0px 0px 5px 2px #a8a8a8; */
}
+.leftmenu:hover {
+ background-image: url("~@/assets/img/new/treeClose-y.png");
+}
.leftmenu {
background-image: url("~@/assets/img/new/treeClose.png");
background-size: 100% 100%;
@@ -3081,6 +3105,8 @@
.el-tree {
background: transparent;
color: white;
+ height: 93%;
+ overflow: auto;
}
.el-tree /deep/ .el-tree-node__content {
@@ -3096,23 +3122,25 @@
font-size: 14px;
}
-.layerTree::-webkit-scrollbar {
+::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
- width: 4px;
+ width: 5px;
/*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
- height: 4px;
+ height: 8px;
scrollbar-arrow-color: red;
}
-.layerTree::-webkit-scrollbar-thumb {
+/* 婊氬姩鏉� */
+::-webkit-scrollbar-thumb {
border-radius: 5px;
- -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
- box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
- background: rgba(255, 255, 255, 0.5);
+ -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
+ box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
+ background: rgba(218, 218, 218, 0.5);
scrollbar-arrow-color: red;
}
-.layerTree::-webkit-scrollbar-track {
+/* 婊氬姩妲� */
+::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
border-radius: 0;
@@ -3121,7 +3149,6 @@
.el-tree .TreeNodeClass {
width: 100%;
- background-color: #bfa;
flex: 1;
display: flex;
align-items: center;
--
Gitblit v1.9.3