坡度分析下载修改

surprise

2023-11-29 36fbd1e5a40e319e6ac5f43d11c99ba4b66e93a3

 src/views/layer/layerManage.vue

@@ -12,53 +12,55 @@
      </div>
    </div>
    <div class="layerContent">
      <el-tree
        :props="props"
        :highlight-current="false"
        :current-node-key="selectedNodeId"
        :data="menuOption"
        :expand-on-click-node="false"
        show-checkbox
        @check="handleCheckChange"
        ref="estreeRef"
      >
      <el-tree node-key="id" :props="props" :highlight-current="false" :current-node-key="selectedNodeId" :data="treeData"
        :default-expanded-keys="defaultExpanded" :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>{{ node.label }}</span>
            <span class="label">{{ node.label }}</span>
            <!-- <span>
              <a @click="append(data)"> Append </a>
              <a style="margin-left: 8px" @click="remove(node, data)">
                Delete
              </a>
            </span> -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <MoreFilled />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="clickdropdown(1, data)"
                    >详细</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="clickdropdown(2, data)"
                    >属性</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            </span>-->
            <span class="button" v-if="!data.isTemporaryLayer">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
                    <MoreFilled />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-if="data.type != 6 && data.isLayer == 1"
                      @click.native="clickdropdown(1, data)">详细</el-dropdown-item>
                    <el-dropdown-item v-if="data.type == 6 && data.isLayer == 1">删除</el-dropdown-item>
                    <el-dropdown-item v-if="data.type == 3 && data.isLayer == 1"
                      @click.native="clickdropdown(2, data)">属性</el-dropdown-item>
                    <el-dropdown-item v-if="data.isLayer == 0"
                      @click.native="clickdropdown(3, data)">透明度</el-dropdown-item>
                    <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
                      @click.native="clickdTemporary(1, data)">编辑</el-dropdown-item>
                    <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
                      @click.native="clickdTemporary(2, data)">删除</el-dropdown-item>
                    <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
                      @click.native="clickdTemporary(3, data)">定位</el-dropdown-item>
                    <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" @click.native="clickdTemporary(4, data)">下载
                      [ Shp ]</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
  <layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
  <attribute-list
    v-show="layerAttributeIsshow"
    :layerData="layerObjData"
    @spatialClose="setSpatialClose"
  ></attribute-list>
  <layer-set v-if="layerSetIsshow" @SETstate="SETstate" :layerTree="treeData" @addlayer="addlayer" @delLayer="delLayer"
    @onSubmit="editLayer"></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>
@@ -69,92 +71,51 @@
  reactive,
  defineProps,
  defineEmits,
  nextTick,
  watch,
} from "vue";
import $ from "jquery";
import layerSet from "./layerSet";
import attributeList from "./attributeList";
import layerDetail from "./layerDetail";
import { useStore } from "vuex"; // 引入useStore 方法
import {
  perms_selectLayers,
  mark_selectByPageAndCount,
  mark_insert,
  mark_deletes,
  mark_update,
  comprehensive_downloadShp,
} from "@/api/api";
import server from "@/assets/js/Map/server";
import { ElMessage } from "element-plus";
import temporaryTool from "@/assets/js/Map/temporaryTools";
import json from "@/assets/js/colorValue";
import menuTool from "@/assets/js/Map/menuTool";
import { removeToken, getToken } from "@/utils/auth";
const store = useStore(); // 该方法用于返回store 实例
const stretchValue = ref("");

const emits = defineEmits(["setCloseLayer"]);
let estreeRef = ref();
const stretchOptions = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const setLayer = ref();
const transparence = ref(0);
let menuOption = reactive([
  {
    name: "测试",
    isShow: false,
    checkedAll: false,
    type: 1,
    children: [
      {
        layerState: false,
        name: "图层名称",
        layerUrl: "",
        type: 2,
      },
      {
        layerState: false,
        name: "图层菜单",
        layerUrl: "",
        type: 1,
        children: [
          {
            layerState: false,
            name: "图层名称11",
            layerUrl: "",
            type: 2,
          },
        ],
      },
    ],
  },
  {
    name: "测试1",
    isShow: false,
    checkedAll: true,
    layerState: false,
    type: 1,
  },
]);
var treeData = ref([]);
var layerListData = ref([]);
let menuOption = reactive([]);
const defaultExpanded = ref([]);
const layerSetIsshow = ref(false);
const layerAttributeIsshow = ref(false);
const layerDetailIsshow = ref(false);
const props = {
  label: "name",
  label: "cnName",
  children: "children",
};
const layerObjData = ref(null);
// 当前选中的节点 id
const selectedNodeId = ref(null as any); //做类型断言处理
const emits = defineEmits(["setCloseLayer"]);
const handlCheckAllChange = (res) => {};
const handlIsShow = (res: string) => {
  menuOption.forEach((e) => {
    if (e.name == res) {
      e.isShow = !e.isShow;
    }
  });
};

//默认选中id
const DefaultId = ref([]);
//图层设置弹框
const layerSetBox = () => {
  layerSetIsshow.value = !layerSetIsshow.value;
@@ -164,38 +125,590 @@
  layerSetIsshow.value = res;
};
const setCloseLayer = () => {
  store.state.setLayerManager = false;
  emits("setCloseLayer", false);
};
// 处理节点点击事件
function handleNodeClick(data: any) {
  console.log(data);
  if (data.id === selectedNodeId.value) {
    // 如果当前节点已经选中，则取消选中
    selectedNodeId.value = null;
    console.log(selectedNodeId.value, "取消选中");
  } else {
    // 否则选中当前节点
    selectedNodeId.value = data.id;
    // form.selectName = data.name;
    console.log(selectedNodeId.value, "当前选中的节点");
  }
}
const handleCheckChange = (data, checked) => {
  let son = estreeRef.value.getCheckedNodes();
  console.log(son); //选中的数据
const temporary = ref(new Date().getTime());
const clickdTemporary = async (res, data) => {
  if (res == 1) {
    let son = estreeRef.value.getCheckedKeys();
    if (son.indexOf(data.id) < 0) {
      return ElMessage(data.cnName + "图层没有勾选,无法进行编辑");
    }
    if (store.state.editTemporaryId) {
      var id = store.state.editTemporaryId;
      var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id);
      if (edit_id > -1) {
        sgworld.Creator.SimpleGraphic.SimpleGraphicObj.splice(edit_id, 1);
        store.state.editTemporaryId = null;
      }
    }
    store.state.editTemporaryId = data.id;
    sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id);
    sgworld.Creator.SimpleGraphic.edit(true, {
      editProp: false,
      tipText: {
        ActiveText: "点击激活编辑",
      },
      enableDelete: false,
    });
  } else if (res == 2) {
    var layerId = [];
    layerId.push(data.sid);
    const data1 = await mark_deletes({ ids: layerId.toString() });
    if (data1.code != 200) return;
    temporaryTool.removeTemporaryLayer(data);

    // estreeRef.value.setCheckedKeys(checkedKeys, true);
    // for (var i in keys) {
    //   checkedKeys.push(keys[i]);
    // }
    var keys = estreeRef.value.getCheckedKeys();
    var val = treeData.value[0].children;
    for (var i = 0; i < val.length; i++) {
      if (val[i].id == data.id) {
        val.splice(i, 1);
      }
    }

    var std = [];
    for (var i in keys) {
      var layer_res = estreeRef.value.getNode(keys[i]).data;
      if (layer_res.shpType && layer_res.shpType == 'temporaryLayer') {
        std.push(keys[i]);
      } else if (layer_res.isLayer == 1) {
        std.push(keys[i]);
      }
    }
    estreeRef.value.setCheckedKeys([], true);
    console.log(data.id);
    nextTick(() => {
      console.log(std);
      estreeRef.value.setCheckedKeys(std, true);
    });
  } else if (res == 3) {
    let son = estreeRef.value.getCheckedKeys();
    if (son.indexOf(data.id) < 0) {
      return ElMessage(data.cnName + "图层没有勾选,无法进行定位");
    }
    temporaryTool.locationTemporaryLayer(data);
  } else if (res == 4) {
    var name = null;
    if (res.type == 'label') {
        name = data.text;
      
    } else {
      name = data.cnName;
    }
    var obj = {
      bak: null,
      fillColor: data.material,
      id: data.sid,
      name: name,
      opacity: data.materialAlpha,
      type: data.type,
      wkt: temporaryTool.getWKT(data),
    }
    downLoadShp(obj)

  }
};
const downLoadShp = (res) => {

  $.ajax({
    url: config.proxy + "/comprehensive/downloadShp?token=" + getToken(),
    type: "POST",
    data: JSON.stringify([res]),
    dataType: "json", // html、json、jsonp、script、text
    contentType: "application/json", // "application/x-www-form-urlencoded"
    success: (rs) => {
      if (rs && rs.code == 200) {
        var a = document.createElement("a"); // 创建一个a标签元素
        a.style.display = "none"; // 设置元素不可见

        a.href =
          config.proxy +
          "/comprehensive/downloadFile?token=" +
          getToken() +
          "&guid=" +
          rs.result;

        document.body.appendChild(a); // 加入
        a.click(); // 触发点击,下载
        document.body.removeChild(a); // 释放
      }
    },
    error: function (e) { },
  });

}
//选择图层
const handleCheckChange = (data, checked) => {
  layerAttributeIsshow.value = false;
  layerDetailIsshow.value = false;
  // let isCheck = checked.checkedKeys.indexOf(data.id) > -1;

  let son = estreeRef.value.getCheckedNodes();
  store.commit("SET_CHECKLAYER", son);
  temporaryTool.removeTemporaryLayerAll();
  server.delLayerAll();
  var alphaGroup = [];
  var idGroup = [];
  for (var i in server.layerList) {
    const layerData = server.layerList[i];
    if (layerData.layerData && layerData.id != server.wmsLayerId) {
      alphaGroup.push(layerData.layerData.alpha);
      idGroup.push(layerData.layerData.id);
    }
  }
  server.delLayerAll();

  var setGeoWms = [];
  var geoUrl = null;
  var layerTreeDate = estreeRef.value.getCheckedNodes().reverse();
  for (var i in layerTreeDate) {
    var layerArr = layerTreeDate[i];
    if (layerArr.shpType && layerArr.shpType == "temporaryLayer") {
      temporaryTool.addTemporaryTool(layerArr);
    } else {
      if (layerArr.isLayer == 1) {
        if (layerArr.category == 2 && layerArr.type == 3) {
          if (layerArr.tab != "moon:geo_mappable_unit") {
            var id = layerArr.id;
            if (idGroup.indexOf(id) > -1) {
              var alpha = alphaGroup[idGroup.indexOf(id)];
              if (alpha == 1) {
                setGeoWms.push(layerArr.tab);
                geoUrl = layerArr.url;
              } else {
                server.setAddGeoWmsLayer(layerArr, alpha);
              }
            } else {
              setGeoWms.push(layerArr.tab);
              geoUrl = layerArr.url;
            }
          }
        } else {
          server.addTreeData(layerArr);
        }
      }
    }
  }
  if (setGeoWms.length > 0) {
    server.addGeoServerMmsLayers(setGeoWms, geoUrl);
  }

  menuTool.setImageLayerChange();
};
const setVisiable = (treeNode, checked) => {
  if (checked !== undefined) {
    treeNode.checked = checked;
  } else {
    treeNode.checked = !treeNode.checked;
  }

  if (treeNode.children) {
    treeNode.children.forEach((item) => {
      setVisiable(item, treeNode.checked);
    });
    return;
  }

  if (!treeNode.isAdd) {
    //   server.addTreeData(treeNode);
    return;
  }
};
const defaultLayer = (val) => {
  val.forEach((e) => {
    DefaultId.value.forEach((v) => {
      if (e.id == v) {
        setVisiable(e, true);
        // return;
      }
    });
  });
};
const clickdropdown = (res, e) => {
  if (res == 2) {
    layerAttributeIsshow.value = true;
  layerAttributeIsshow.value = false;
  layerDetailIsshow.value = false;
  nextTick(() => {
    layerObjData.value = e;
  }
  console.log(res, e);
    store.state.spatialTitle = e.cnName;
    if (res == 2) {
      layerAttributeIsshow.value = true;
      store.state.tab = e;
    } else if (res == 3) {
      let son = estreeRef.value.getCheckedKeys();
      var layerId = getCheckedLayerPID(e, son);
      if (layerId.length <= 0) {
        return ElMessage.error("请先勾选图层");
      }
      layerDetailIsshow.value = true;
      store.state.layerGroups = {
        id: e.id,
        layerIds: layerId,
      };
    } else {
      var val = estreeRef.value!.getCheckedKeys(false);
      if (val.indexOf(e.id) > -1) {
        layerDetailIsshow.value = true;
      } else {
        return ElMessage.error("请先勾选图层");
      }
    }
  });
};
const getCheckedLayerPID = (res, result) => {
  var temp = [];
  var ids = result;

  let forFn = (data) => {
    if (data.children) {
      data.children.forEach((item) => {
        if (item.children) {
          forFn(item);
        } else {
          if (ids.indexOf(item.id) > -1) {
            temp.push(item);
          }
        }
      });
    } else {
      if (ids.indexOf(data.id) > -1) {
        temp.push(data);
      }
    }
  };

  forFn(res);
  return temp;
};

const getCheckedLayerChildren = (res) => {
  var temp2 = [];
  let forFn = (data) => {
    if (data.children) {
      data.children.forEach((item) => {
        if (item.children) {
          forFn(item);
        } else {
          temp2.push(item);
        }
      });
    } else {
      temp2.push(data);
    }
  };
  forFn(res);
  return temp2;
};

const setSpatialClose = (res) => {
  layerAttributeIsshow.value = res;
};
const detailClose = (res) => {
  if (res.type == 0) {
    estreeRef.value.getNode(store.state.layerGroups.id).data.alpha = res.val;
  }
  layerDetailIsshow.value = res.flag;
};
//编辑图层树
const addlayer = (res) => {
  let node;
  layerListData.value.forEach((e) => {
    if (e.id == res.id) {
      node = estreeRef.value.getNode(e);
    }
  });

  var checKey = estreeRef.value.getCheckedKeys();
  let checkid = [];
  for (var i in checKey) {
    if (estreeRef.value.getNode(checKey[i]).data.isLayer == 1) {
      checkid.push(checKey[i])
    }
  }
  // 将变动之前的node备份
  estreeRef.value.setCheckedKeys([], true);
  let copyNode = { ...node };
  copyNode.previousSibling = { ...node.previousSibling };
  copyNode.nextSibling = { ...node.nextSibling };
  if (res.type === 1) {
    // 上移
    if (node.previousSibling) {
      // 删除原先的node
      estreeRef.value.remove(node.data);
      // 拿到copy的node
      // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
      // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)

      estreeRef.value.insertBefore(
        copyNode.data,
        copyNode.previousSibling.data
      );
      // window.sessionStorage.removeItem("menuNode");
    }
  } else {
    // 下移
    if (node.nextSibling) {
      estreeRef.value.remove(node.data);
      estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
    }
  }
  estreeRef.value.setCheckedKeys(checkid, true);
};
//删除图层树
const delLayer = (res) => {
  // menuOption = menuOption.filter((item) => {
  //   return item.id != res;
  // });
  // treeData = handleTree(menuOption, "id", "pid", "children");
};
const editLayer = () => {
  var layer = store.state.chekNowLayers;
  var std = [];
  for (var i in layer) {
    if (layer[i].isLayer == 1) {
      std.push(layer[i].id)
    }
  }
  estreeRef.value.setCheckedKeys([], true);
  nextTick(() => {
    estreeRef.value.setCheckedKeys(std, true);
  })

}
const setRestLayerData = () => {
  let son = estreeRef.value.getCheckedNodes().reverse();

  var setGeoWms = [];
  var geoUrl = null;
  for (var i in son) {
    var layerArr = son[i];
    console.log(layerArr.isLayer);
    layerArr.checked = true;
    if (layerArr.category == 2 && layerArr.type == 3) {
      if (layerArr.tab != "moon:geo_mappable_unit") {
        setGeoWms.push(layerArr.tab);
        geoUrl = layerArr.url;
        // server.addTreeData(layerArr);
      }
    } else {
      server.addTreeData(layerArr);
    }
  }
  if (setGeoWms.length > 0) {
    server.addGeoServerMmsLayers(setGeoWms, geoUrl);
  }
  store.commit("SET_CHECKLAYER", son);
};
const getLayer = async () => {
  store.state.restLayer = false;
  // server.delLayerAll();
  const dt = await perms_selectLayers();
  if (dt.code == 200) {
    var va_data = dt.result.filter((res) => {
      if (res.isLayer == 0) {
        res.alpha = 1;
      }
      return res;
    });
    treeData.value = setTreeData(va_data).sort(function (a, b) {
      return a.orderNum - b.orderNum;
    });
    const comperLayer = await mark_selectByPageAndCount({
      pageIndex: 1,
      pageSize: 100000,
      name: null,
    });
    var children = [];
    if (comperLayer.code == 200 && comperLayer.result) {
      for (var i in comperLayer.result) {
        var layer = comperLayer.result[i]
        if (layer.wkt && layer.wkt.indexOf("shpType") > -1 && layer.wkt.indexOf("shpType") > -1) {

          var slayer = JSON.parse(comperLayer.result[i].wkt);

          slayer.sid = comperLayer.result[i].id;
          children.push(slayer);

        }
      }
    }

    treeData.value.unshift({
      cnName: "自定义图层",
      level: 1,
      pid: 0,
      isLayer: 0,
      type: 6,
      id: temporary.value,
      isTemporaryLayer: true,
      children: children,
    });

    var std = [];
    var terrainId = null;
    var adLayer = [];
    dt.result.filter((res) => {
      if (res.isLayer == 1 && res.isShow == 1) {
        if (res.type == 1 && res.data == 2) {
          if (!terrainId) {
            terrainId = res.id;
            std.push(res.id);
            adLayer.push(res);
          }
        } else {
          std.push(res.id);
          adLayer.push(res);
        }
      }
    });
    DefaultId.value = std;

    //添加默认选中图层
    layerListData.value = dt.result;
    defaultLayer(dt.result);

    nextTick(() => {
      let son = estreeRef.value.getCheckedNodes();
      setRestLayerData();
      store.commit("SET_CHECKLAYER", son);
    });
  }
};

//构造树
function setTreeData(source) {
  let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
  return cloneData.filter((father) => {
    // 循环所有项
    let branchArr = cloneData.filter((child) => father.id == child.pid);
    if (branchArr.length > 0) {
      branchArr.sort(function (a, b) {
        return a.orderNum - b.orderNum;
      });
    }

    branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
    // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
    // 由此循环多次后，就能形成相应的树形数据结构
    return father.pid == 0; // 返回一级菜单
  });
}
const addTemporaryLayer = async (res) => {
  var obj = {
    name: res.cnName,
    wkt: JSON.stringify(res),
  };
  var checkedKeys = estreeRef.value.getCheckedKeys();
  const data = await mark_insert(obj);
  if (data.code != 200 || !data.result) return;
  store.state.temporaryLayer = null;
  res.sid = data.result;
  treeData.value[0].children.push(res);


  nextTick(() => {
    var std = [res.id];
    for (var i in checkedKeys) {
      var layer_res = estreeRef.value.getNode(checkedKeys[i]).data;
      if (layer_res.shpType && layer_res.shpType == 'temporaryLayer') {
        std.push(checkedKeys[i]);
      } else if (layer_res.isLayer == 1) {
        std.push(checkedKeys[i]);
      }
    }
    estreeRef.value.setCheckedKeys([], true);
    estreeRef.value.setCheckedKeys(std, true);
    temporaryTool.addTemporaryTool(res);
  });
};
const editTemporaryLayerName = (res) => {
  if (!store.state.editTemporaryId) return;
  var id = store.state.editTemporaryId;
  var val = treeData.value[0].children;

  for (var i = 0; i < val.length; i++) {
    if (val[i].id == id) {
      val[i].cnName = res;
      setEditLayerChange(val[i]);
    }
  }
  defaultExpanded.value = [treeData.value[0].id];
};
const editTemporaryBackById = (res) => {
  var obj = temporaryTool.getEntityObj(res);
  var val = treeData.value[0].children;
  var checkedKeys = estreeRef.value.getCheckedKeys();
  if (checkedKeys.indexOf(temporary.value) > -1) {
    checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1);
  }
  for (var i = 0; i < val.length; i++) {
    if (val[i].id == res) {
      obj.sid = val[i].sid;
      val[i] = obj;
      setEditLayerChange(obj);
    }
  }
  nextTick(() => {
    estreeRef.value.setCheckedKeys(checkedKeys, true);
  });
};
const setEditLayerChange = async (res) => {
  var obj = {
    id: res.sid,
    name: res.cnName,
    wkt: JSON.stringify(res),
  };
  const data = await mark_update(obj);
  if (data.code != 200) return;
};
watch(
  () => store.state.restLayer,
  (nVal, oVal) => {
    if (nVal) {

      setRestLayerData();
    }
  },
  { deep: true }
);
watch(
  () => store.state.temporaryLayer,
  (nVal, oVal) => {
    if (nVal) {

      addTemporaryLayer(nVal);
    }
  },
  { deep: true }
);
watch(
  () => store.state.editTemporarName,
  (nVal, oVal) => {
    if (nVal) {

      editTemporaryLayerName(nVal);
    }
  },
  { deep: true }
);
watch(
  () => store.state.editTemporaryback,
  (nVal, oVal) => {
    if (nVal) {

      editTemporaryBackById(nVal);
    }
  },
  { deep: true }
);

onMounted(() => {
  window.setLayer = getLayer;
});
</script>

<style lang="less" scoped>
@@ -204,6 +717,8 @@
  height: 680px;
  background: rgba(7, 8, 14, 0.8);
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  z-index: 40;

  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -215,6 +730,7 @@
    padding-left: 7px;
    padding-right: 20px;
    color: white;

    .tileLeft {
      height: 100%;
      display: flex;
@@ -227,6 +743,7 @@
        color: #ffffff;
      }
    }

    .titleImg {
      width: 20px;
      height: 100%;
@@ -234,57 +751,77 @@
      align-items: center;
      color: rgba(104, 156, 255, 1);
    }

    .set {
      cursor: pointer;
    }
  }

  .layerContent {
    height: 625px;
    padding: 0 8px;
    overflow: auto;
    overflow-y: auto;
  }

  .slider-demo-block {
    margin-top: 22px;
  .layerContent::-webkit-scrollbar {
    width: 8px;
  }
  .demonstration {
    font-size: 12px;
    font-weight: 300;
    color: #d6e4ff;
  }
  /deep/ .el-slider__runway {
    height: 2px;

    background: #73a1fa;
  .layerContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  /deep/ .el-slider__bar {
    height: 2px;

    background: #73a1fa;
  }
  /deep/ .el-slider__button {
    width: 17px;
    height: 18px;
    border: 0;
    background: url("../../assets/img/DBX.png") no-repeat center;
    background-size: 100% 100%;
  .layerContent::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }

  .selectBox {
    margin-top: 24px;
    .selectTile {
      padding-bottom: 6px;
    }
    .el-select {
      width: 100%;
    }
  .el-tree {
    width: 100%;
    overflow-y: auto;
  }

  .layerContent .el-tree-node__content {
    overflow: hidden;
  }

  .layerContent .custom-tree-node {
    overflow: hidden;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    padding-right: 8px;
  }

  .layerContent .custom-tree-node .label {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layerContent .custom-tree-node .button {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

.dropdown_box {
  position: relative;
}

/deep/.el-select-dropdown__item {
  font-size: 12px !important;
}

.el-tree {
  background: transparent;
}

/deep/ .el-tree-node {
  background: #0d131d;
  color: #ffffff;
@@ -293,35 +830,65 @@
  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;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;

// .custom-tree-node {
//   flex: 1;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   font-size: 16px;
//   padding-right: 8px;
// }

.el-dropdown-menu {
  background: rgba(7, 8, 14, 0.8);
  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);

  color: #fff;
}
</style>
<style>
.el-popper.is-light {
  border: 1px solid rgba(7, 8, 14, 0.8) !important;
}

.el-scrollbar {
  border: 0 !important;
}
</style>