<template>
|
<div v-drag class="layerBox">
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div @click="setCloseLayer" class="titleImg">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">图层管理</div>
|
</div>
|
<div class="titleImg set" @click="layerSetBox">
|
<Setting />
|
</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-change="handleCheckChange"
|
>
|
<template #default="{ node, data }">
|
<span class="custom-tree-node">
|
<span>{{ 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)"
|
>详细</el-dropdown-item
|
>
|
<el-dropdown-item @click.native="clickdropdown(2)"
|
>属性</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
<layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
|
<attribute-list></attribute-list>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import layerSet from "./layerSet";
|
import attributeList from "./attributeList";
|
const stretchValue = ref("");
|
|
const stretchOptions = [
|
{
|
value: "Option1",
|
label: "Option1",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
},
|
{
|
value: "Option3",
|
label: "Option3",
|
},
|
{
|
value: "Option4",
|
label: "Option4",
|
},
|
{
|
value: "Option5",
|
label: "Option5",
|
},
|
];
|
const transparence = ref(0);
|
let menuOption = reactive([
|
{
|
name: "测试",
|
isShow: false,
|
checkedAll: false,
|
children: [
|
{
|
layerState: false,
|
name: "图层名称",
|
layerUrl: "",
|
},
|
],
|
},
|
{
|
name: "测试1",
|
isShow: false,
|
checkedAll: true,
|
layerState: false,
|
},
|
]);
|
const layerSetIsshow = ref(false);
|
const props = {
|
label: "name",
|
children: "children",
|
};
|
// 当前选中的节点 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;
|
}
|
});
|
};
|
//图层设置弹框
|
const layerSetBox = () => {
|
layerSetIsshow.value = !layerSetIsshow.value;
|
};
|
//关闭状态
|
const SETstate = (res) => {
|
layerSetIsshow.value = res;
|
};
|
const setCloseLayer = () => {
|
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: Tree,
|
checked: boolean,
|
indeterminate: boolean
|
) => {
|
console.log(data, checked, indeterminate);
|
};
|
const clickdropdown = (res) => {
|
console.log(res);
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.layerBox {
|
width: 359px;
|
height: 680px;
|
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;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: rgba(104, 156, 255, 1);
|
}
|
.set {
|
cursor: pointer;
|
}
|
}
|
.layerContent {
|
padding: 0 8px;
|
}
|
|
.slider-demo-block {
|
margin-top: 22px;
|
}
|
.demonstration {
|
font-size: 12px;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
/deep/ .el-slider__runway {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/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%;
|
border-radius: 0;
|
}
|
|
.selectBox {
|
margin-top: 24px;
|
.selectTile {
|
padding-bottom: 6px;
|
}
|
.el-select {
|
width: 100%;
|
}
|
}
|
}
|
/deep/.el-select-dropdown__item {
|
font-size: 12px !important;
|
}
|
.el-tree {
|
background: transparent;
|
}
|
/deep/ .el-tree-node {
|
background: #0d131d;
|
color: #ffffff;
|
font-size: 20px;
|
font-weight: 300;
|
margin-top: 3px;
|
padding: 8px;
|
}
|
/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 {
|
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;
|
}
|
</style>
|
