<template>
|
<div class="layerBox">
|
<div
|
class="leftmenustyle"
|
@click="showLeftMenu"
|
:class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }"
|
>
|
<span
|
class="closeLeftMenu"
|
v-if="isShowLeftPanel"
|
@click.stop="hideLeftMenu"
|
>×</span
|
>
|
|
<img
|
class="openLeftMenu"
|
v-else
|
src="../assets/img/menu/souselist4.png"
|
/>
|
<div class="layerTreeContainer" v-show="isShowLeftPanel">
|
<div class="switchbox">
|
<span>图层管理</span>
|
</div>
|
<hr />
|
<div class="layerTree">
|
<el-tree
|
:data="treeData"
|
node-key="id"
|
ref="tree"
|
style="min-width: 160px"
|
show-checkbox
|
:props="defaultProps"
|
:default-checked-keys="arr"
|
@check="check"
|
></el-tree>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, nextTick } from "vue";
|
import layerManage from "../assets/js/layerManage";
|
const isShowLeftPanel = ref(false);
|
const arr = ref([]);
|
|
const defaultProps = {
|
children: "children",
|
label: "name",
|
};
|
const tree = ref(null);
|
const treeData = ref([]);
|
const showLeftMenu = () => {
|
if (!isShowLeftPanel.value) {
|
isShowLeftPanel.value = true;
|
}
|
};
|
const hideLeftMenu = () => {
|
isShowLeftPanel.value = false;
|
};
|
const parseJson = (res) => {
|
for (var i in res) {
|
var obj = res[i];
|
if (obj.children == undefined || obj.children.length == 0) {
|
if (obj.checked) {
|
arr.value.push(obj.id);
|
}
|
} else {
|
parseJson(obj.children);
|
}
|
}
|
};
|
const setLayerManagerStart = () => {
|
var val = layerManager;
|
treeData.value = [val];
|
parseJson(treeData.value);
|
nextTick(() => {
|
let selectedLayers = tree.value.getCheckedNodes();
|
for (var i in selectedLayers) {
|
layerManage.addLayer(selectedLayers[i]);
|
}
|
});
|
};
|
const getTreeNodeChildren = (res, obj) => {
|
for (var i in res) {
|
if (res[i].children) {
|
getTreeNodeChildren(res[i].children, obj);
|
} else {
|
obj.push(res[i].id);
|
}
|
}
|
return obj;
|
};
|
const check = (treeNode, data) => {
|
let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
|
var listId;
|
if (treeNode.children) {
|
listId = getTreeNodeChildren(treeNode.children, []);
|
} else {
|
listId = [treeNode.id];
|
}
|
for (var i in listId) {
|
let selectedLayers = tree.value.getNode(listId[i]);
|
if (isCheck) {
|
layerManage.addLayer(selectedLayers.data);
|
} else {
|
layerManage.removeLayer(selectedLayers.data);
|
}
|
}
|
// let filist = selectedLayers.filter((p) => {
|
// return !p.children;
|
// });
|
// console.log(filist);
|
};
|
onMounted(() => {
|
setLayerManagerStart();
|
});
|
</script>
|
|
<style scoped lang="less">
|
.layerBox {
|
position: absolute;
|
left: 20px;
|
top: 135px;
|
z-index: 40;
|
.leftmenu:hover {
|
background-image: url("../assets/img/menu/treeClose-y.png");
|
}
|
.leftmenustyle {
|
height: 661px;
|
background-size: 100% 100%;
|
transition: all 0.15s linear;
|
overflow: hidden;
|
}
|
.leftmenu {
|
background-image: url("../assets/img/menu/treeClose.png");
|
background-size: 100% 100%;
|
width: 50px;
|
height: 50px;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
.openLeftMenu {
|
position: absolute;
|
height: 30px;
|
width: 30px;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.leftmenu_active {
|
background-image: url("../assets/img/menu/listbg.png");
|
background-size: 100% 100%;
|
width: 310px;
|
height: 600px;
|
border-radius: 5px 5px 5px 5px;
|
}
|
.closeLeftMenu {
|
color: #fff;
|
height: 42px;
|
width: 42px;
|
line-height: 37px;
|
font-size: 30px;
|
position: absolute;
|
text-align: center;
|
right: 0px;
|
top: 0px;
|
cursor: pointer;
|
transition: 1s;
|
z-index: 9999;
|
}
|
|
.closeLeftMenu:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
.layerTreeContainer {
|
position: absolute;
|
top: 35px;
|
left: 20px;
|
color: white;
|
width: 270px;
|
height: 550px;
|
overflow: hidden;
|
/* margin: 20px 0; */
|
}
|
.layerTree {
|
color: white;
|
height: 540px;
|
/* max-height: 355px; */
|
margin-bottom: 2px;
|
overflow-y: auto;
|
overflow-x: auto;
|
}
|
/* yhadd */
|
.el-tree {
|
background: transparent;
|
color: white;
|
height: 93%;
|
overflow: auto;
|
}
|
|
.el-tree /deep/ .el-tree-node__content {
|
background-color: transparent !important;
|
}
|
|
.el-tree /deep/ .el-tree-node__content:hover {
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
}
|
|
.el-tree /deep/ .is-current > .el-tree-node__content {
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
font-size: 14px;
|
}
|
|
::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
.el-tree .TreeNodeClass {
|
width: 100%;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
padding-right: 8px;
|
justify-content: space-between !important;
|
}
|
}
|
</style>
|
