工程树搜索

TreeWish

2023-02-16 8a72453608f671d91a481315e4ad32b7b7b4a8ef

工程树搜索

 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">

 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%;
        
        }
      }
    }