月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-10-23 538d7313f98da3c304365f1c2b22c3e23d91db35
src/views/layer/doubleLayer.vue
@@ -1,14 +1,8 @@
<template>
  <div
    v-drag
    class="layerBox"
  >
  <div v-drag class="layerBox">
    <div class="layerTitle">
      <div class="tileLeft">
        <div
          @click="setCloseLayer"
          class="titleImg"
        >
        <div @click="setCloseLayer" class="titleImg">
          <ArrowLeft />
        </div>
        <div class="titleLable">图层管理</div>
@@ -21,19 +15,9 @@
      </div> -->
    </div>
    <div class="layerContent">
      <el-tree
        node-key="id"
        :props="props"
        :highlight-current="false"
        :current-node-key="selectedNodeId"
        :data="treeData"
        :expand-on-click-node="false"
        show-checkbox
        @check="handleCheckChange"
        ref="estreeRef"
        v-if="treeData.length"
        :default-checked-keys="DefaultId"
      >
      <el-tree node-key="id" :props="props" :highlight-current="false" :current-node-key="selectedNodeId" :data="treeData"
        :expand-on-click-node="false" show-checkbox @check="handleCheckChange" ref="estreeRef" v-if="treeData.length"
        :default-checked-keys="DefaultId">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span class="label">{{ node.label }}</span>
@@ -69,23 +53,10 @@
      </el-tree>
    </div>
  </div>
  <layer-set
    v-if="layerSetIsshow"
    @SETstate="SETstate"
    :layerTree="treeData"
    @addlayer="addlayer"
    @delLayer="delLayer"
  ></layer-set>
  <attribute-list
    v-if="layerAttributeIsshow"
    :layerData="layerObjData"
    @spatialClose="setSpatialClose"
  ></attribute-list>
  <layer-detail
    :layerData="layerObjData"
    v-if="layerDetailIsshow"
    @detailClose="detailClose"
  ></layer-detail>
  <layer-set v-if="layerSetIsshow" @SETstate="SETstate" :layerTree="treeData" @addlayer="addlayer"
    @delLayer="delLayer"></layer-set>
  <attribute-list v-if="layerAttributeIsshow" :layerData="layerObjData" @spatialClose="setSpatialClose"></attribute-list>
  <layer-detail :layerData="layerObjData" v-if="layerDetailIsshow" @detailClose="detailClose"></layer-detail>
</template>
<script lang="ts" setup>
@@ -150,7 +121,7 @@
  let son = estreeRef.value.getCheckedNodes().reverse();
  rightServer.delLayerAll();
  debugger
  var setGeoWms = [];
  var url = null;
  for (var i in son) {
@@ -294,16 +265,32 @@
    var setGeoWms = [];
    var url = null;
    var terrainId = null;
    for (var i in dt.result) {
      var layer = dt.result[i];
      if (layer.category == 2 && layer.type == 3) {
        if (layer.tab != "moon:geo_mappable_unit") {
          setGeoWms.push(layer.tab);
          url = layer.url;
      if (layer.isShow == 1 & layer.isLayer == 1) {
        if (layer.category == 2 && layer.type == 3) {
          if (layer.tab != "moon:geo_mappable_unit") {
            setGeoWms.push(layer.tab);
            url = layer.url;
          }
        } else {
          rightServer.addTreeData(layer);
        }
      } else {
        rightServer.addTreeData(layer);
      }
      // if (layer.isLayer == 1 && layer.isShow == 1) {
      //   if (layer.type == 1 && layer.data == 2) {
      //     if (!terrainId) {
      //       terrainId = res.id;
      //       std.push(layer.id);
      //       adLayer.push(layer);
      //     }
      //   } else {
      //     std.push(layer.id);
      //     adLayer.push(layer);
      //   }
      // }
    }
    if (setGeoWms.length > 0) {
      rightServer.addGeoServerMmsLayers(setGeoWms.reverse(), url);
@@ -347,11 +334,12 @@
  width: 359px;
  height: 680px;
  right: calc(50% - 370px);
  top: 105px;
  top: 83px;
  position: absolute;
  z-index: 30;
  background: rgba(7, 8, 14, 0.8);
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -363,6 +351,7 @@
    padding-left: 7px;
    padding-right: 20px;
    color: white;
    .tileLeft {
      height: 100%;
      display: flex;
@@ -375,6 +364,7 @@
        color: #ffffff;
      }
    }
    .titleImg {
      width: 20px;
      height: 100%;
@@ -382,31 +372,38 @@
      align-items: center;
      color: rgba(104, 156, 255, 1);
    }
    .set {
      cursor: pointer;
    }
  }
  .layerContent {
    height: 625px;
    padding: 0 8px;
    overflow: auto;
    overflow-y: auto;
  }
  .layerContent::-webkit-scrollbar {
    width: 8px;
  }
  .layerContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .layerContent::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }
  .el-tree {
    width: 100%;
    overflow-y: auto;
  }
  .layerContent .el-tree-node__content {
    overflow: hidden;
  }
@@ -433,6 +430,7 @@
    flex-shrink: 0;
  }
}
.dropdown_box {
  position: relative;
}
@@ -440,9 +438,11 @@
/deep/.el-select-dropdown__item {
  font-size: 12px !important;
}
.el-tree {
  background: transparent;
}
/deep/ .el-tree-node {
  background: #0d131d;
  color: #ffffff;
@@ -451,29 +451,33 @@
  margin-top: 3px;
  padding: 8px;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
/deep/ .el-tree-node:focus>.el-tree-node__content {
  background: transparent;
}
/deep/ .el-tree-node__content:hover {
  background: #0d131d;
}
/deep/ .el-tree-node__children {
  background: #1e2a3d;
  .el-tree-node {
    background: #1e2a3d;
    margin-top: 0;
    padding: 4px;
  }
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: rgba(104, 156, 255, 0.5) !important;
}
.highlight {
  background: rgba(104, 156, 255, 0.5) !important;
}
// .custom-tree-node {
//   flex: 1;
//   display: flex;
@@ -488,10 +492,12 @@
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  color: #fff;
  border: 0;
  /deep/ .el-dropdown-menu__item {
    color: #fff;
  }
}
/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: rgba(104, 156, 255, 0.5);
@@ -502,6 +508,7 @@
.el-popper.is-light {
  border: 1px solid rgba(7, 8, 14, 0.8) !important;
}
.el-scrollbar {
  border: 0 !important;
}