From 8a72453608f671d91a481315e4ad32b7b7b4a8ef Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 16 二月 2023 15:20:44 +0800
Subject: [PATCH] 工程树搜索
---
src/components/Screen/bottom.vue | 54 +++++++++++++++--
src/components/Screen/ProjectTree.vue | 67 ++++++++++++++++++++-
2 files changed, 108 insertions(+), 13 deletions(-)
diff --git a/src/components/Screen/ProjectTree.vue b/src/components/Screen/ProjectTree.vue
index d174aaa..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,6 +19,7 @@
ref="tree"
class="el-tree"
@check-change="handleCheckChange"
+ :filter-node-method="filterNode"
>
<div
style="display: flex"
@@ -46,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>
@@ -82,6 +92,7 @@
isActive: false,
isMenuLayer: true,
openEcharts: false,
+ filterText: '',
}
},
@@ -91,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() {
@@ -182,6 +198,10 @@
Viewer.imageryLayers._layers[3].show = true
}
},
+ filterNode(value, data) {
+ if (!value) return true
+ return data.label.indexOf(value) !== -1
+ },
},
}
</script>
@@ -192,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 {
@@ -209,7 +243,6 @@
.CenDiv {
height: 40px;
width: 60px;
-
margin-right: 7%;
border-radius: 5px;
bottom: 3%;
@@ -235,6 +268,30 @@
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">
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index be02463..d237236 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -20,6 +20,7 @@
v-for="item in projectInfoList"
:key="item.id"
:class="currProject == item.name ? 'active' : ''"
+ @click="handlePopoverClick(item)"
>
{{ item.name }}
</div>
@@ -92,6 +93,9 @@
}
this.YXState = !this.YXState
},
+ handlePopoverClick(params) {
+ this.currProject = params.name
+ },
},
}
</script>
@@ -140,7 +144,7 @@
.bottombtn {
height: 36px;
width: 147px;
- background: url(../../assets/img/Screen/centerbtn.png);
+ background: url(~@/assets/img/Screen/centerbtn.png);
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 1rem;
@@ -167,25 +171,59 @@
}
}
.popover {
- background-color: aqua;
-
+ display: flex;
+ justify-content: center;
+ width: 163px;
+ height: 239px;
+ background: url(~@/assets/img/Screen/centerTooltip.png);
+ background-size: 100% 100%;
+ border: none;
+ .popper__arrow {
+ display: none;
+ }
.popover-content {
&__header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ width: 130px;
+ height: 30px;
+ font-size: 18px;
+ color: #fff;
&::before,
&::after {
+ margin: 0 5px;
content: "";
display: inline-block;
- background-color: aqua;
+ background-color: #466c99;
border-radius: 50%;
- width: 10px;
- height: 10px;
+ width: 8px;
+ height: 8px;
}
}
&__list {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ height: 190px;
+
&__item {
- background-color: orange;
+ color: #fff;
+ width: 130px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ // background-color: orange;
+ cursor: pointer;
+ background: url(~@/assets/img/Screen/btnbg.png);
+ background-size: 100% 100%;
+
&.active {
- background-color: aqua;
+ // background-color: aqua;
+ background: url(~@/assets/img/Screen/btnc.png);
+ background-size: 100% 100%;
+
}
}
}
--
Gitblit v1.9.3