代码更新

surprise

2024-04-01 2cbbc0e4c0357260f370c47365810608c19131c9

 src/components/Screen/ProjectTree.vue

@@ -1,46 +1,16 @@
<template>
  <div
    class="project_tree"
    :class="{ left_main_show: !leftMenuOpen }"
  >
  <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"
      :filter-node-method="filterNode"
    >
    <el-input style="width: 80%" placeholder="输入关键字进行查询" suffix-icon="el-icon-search" v-model="filterText" size="mini"
      :filter-node-method="filterNode">
    </el-input>
    <div class="tree-container">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        ref="tree"
        class="el-tree"
        @check="handleCheckChange"
        :filter-node-method="filterNode"
        @node-click="handleLeftclick"
      >
        <div
          style="display: flex"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
      <el-tree :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" class="el-tree"
        @check="handleCheckChange" :filter-node-method="filterNode" @node-click="handleLeftclick">
        <div style="display: flex" class="custom-tree-node" slot-scope="{ node, data }">
          <div style="">
            <i
              v-if="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>
            <i v-if="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="">
            <i
@@ -50,15 +20,10 @@
            ></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div> -->
          <div
            :style="
              data.children && data.children.length > 0
          <div :style="data.children && data.children.length > 0
                ? 'padding-left: 20px'
                : 'padding-left: 20px'
            "
            class="tree-label"
            :title="node.label || '-'"
          >
    " class="tree-label" :title="node.label || '-'">
            {{ node.label }}
          </div>
        </div>
@@ -110,7 +75,7 @@
    this.rightMenu = right_menu
    this.changeSelectli = this.rightList[0].id
    this.changeSelectStyle = this.rightMenu[0].id
    this.addImageLayer()

    this.$bus.$on("changeProjectLayer", (res) => {
      this.setShowCheckedLayer();
    })
@@ -119,6 +84,16 @@
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    obj(newVal, oldVal) {
      if (newVal) {
        this.addImageLayer()
      }
    }
  },
  computed: {
    obj() {
      return this.$store.state.showThematicFlag
    }
  },
  methods: {
    // 查询
@@ -566,6 +541,7 @@
  background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;

  background-size: 100% 100%;

  &__title {
    color: #fff;
    height: 30px;
@@ -575,17 +551,16 @@
    width: 140px;
    padding-top: 15px;
    color: #fff;
    background: linear-gradient(
      0deg,
    background: linear-gradient(0deg,
      rgba(81, 192, 243, 0.65) 0%,
      rgba(255, 255, 255, 0.65) 86%
    );
        rgba(255, 255, 255, 0.65) 86%);
    -webkit-background-clip: text;
    font-size: 17.5px;
    font-family: HYLingXinJ, HYLingXinJ-regular;
    font-weight: normal;
    letter-spacing: 1.05px;
  }

  .el-input {
    width: 80%;
    padding: 5px 0 5px 30px;
@@ -595,19 +570,23 @@
    margin: 10px;
    height: 85%;
    overflow-y: auto;

    /deep/ .tree-label {
      color: #eee !important;
    }

    /deep/ .el-tree {
      color: #eee !important;
    }
  }

  .changeBaseLayer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }

  .CenDiv {
    height: 40px;
    width: 60px;
@@ -627,6 +606,7 @@
    background-size: 100% 100%;
    border-radius: 5px;
  }

  .menuLayer {
    height: 40px;
    width: 60px;
@@ -636,6 +616,7 @@
    border-radius: 5px;
  }
}

/*  滚动条样式 */

::-webkit-scrollbar {
@@ -676,17 +657,21 @@
    .el-tree-node__content > label.el-checkbox {
      margin-right: -30px;
    }

    .el-tree-node__content > .el-tree-node__expand-icon {
      visibility: hidden;
    }

    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
      display: block;
      visibility: visible;
    }

    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
      display: none;
      // visibility: hidden;
    }

    .tree-label {
      font-size: 16px;
      color: #fff;