<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"
|
title="新建演示方案"
|
@click="setAddNewPlan">
|
<Plus />
|
</div>
|
</div>
|
<div class="layerContent">
|
<el-tree node-key="id"
|
:props="props"
|
:highlight-current="false"
|
:data="treeData"
|
show-checkbox
|
:expand-on-click-node="false"
|
@check-change="handleCheckChange"
|
ref="treeRef">
|
<template #default="{ node, data }">
|
<span class="custom-tree-node">
|
<span class="label">{{ node.label }}</span>
|
|
<span class="button"
|
v-if="data.sourceType == 'demoAnimation'">
|
<el-dropdown trigger="click">
|
<span class="el-dropdown-link">
|
<el-icon style="color: wheat"
|
class="el-icon--right">
|
<MoreFilled />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="playNode(data)">播放</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</span>
|
</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, nextTick, watch } from "vue";
|
import { ElTree } from "element-plus";
|
interface Tree {
|
id: number;
|
label: string;
|
children?: Tree[];
|
}
|
const treeRef = ref<InstanceType<typeof ElTree>>();
|
import { MoreFilled, Setting, Plus } from "@element-plus/icons-vue";
|
import palyTools from "@/assets/js/palyTools";
|
import configTool from "@/assets/js/configTool";
|
import layerManager from "@/assets/js/layerManage";
|
import axios from "axios";
|
import store from "@/store";
|
const treeData = ref([]);
|
const props = {
|
label: "name",
|
children: "children",
|
};
|
const handleCheckChange = (data, check, indeterminate) => {
|
if (data.children) return;
|
if (data._children) {
|
for (var i in data._children) {
|
var layer = data._children[i];
|
if (check) {
|
layerManager.setAddLayer(layer);
|
} else {
|
layerManager.setRemoveLayer(layer);
|
}
|
}
|
} else {
|
if (check) {
|
layerManager.setAddLayer(data);
|
} else {
|
layerManager.setRemoveLayer(data);
|
}
|
}
|
};
|
const playNode = (res) => {
|
palyTools.Init(res);
|
};
|
const setTreeDataStart = (res) => {
|
treeData.value = res.children;
|
var obj = configTool.getTreeDataCheck(res.children, []);
|
nextTick(() => {
|
treeRef.value!.setCheckedKeys(obj, false);
|
setLayerStart();
|
});
|
};
|
const setLayerStart = () => {
|
var obj = treeRef.value!.getCheckedNodes(false, false);
|
setAddLayer(obj);
|
};
|
const setAddLayer = (res) => {
|
for (var i in res) {
|
if (res[i]._children) {
|
setAddLayer(res[i]._children);
|
} else {
|
layerManager.setAddLayer(res[i]);
|
}
|
}
|
};
|
|
const setTreeStart = () => {
|
axios.get("/data/json/SmartEarth.json").then((res) => {
|
setTreeDataStart(res.data);
|
});
|
};
|
const setAnimation = (res) => {
|
var info = res.info;
|
for (var i in info) {
|
var obj = treeRef.value!.getNode(info[i]);
|
if (res.show) {
|
layerManager.setAddLayer(obj.data);
|
} else {
|
layerManager.setRemoveLayer(obj.data);
|
}
|
}
|
var valCheck = treeRef.value!.getCheckedKeys();
|
for (var i in info) {
|
if (res.show) {
|
valCheck.push(info[i]);
|
} else {
|
if (valCheck.indexOf(info[i]) > -1) {
|
valCheck.splice(valCheck.indexOf(info[i]), 1);
|
}
|
}
|
}
|
|
nextTick(() => {
|
treeRef.value!.setCheckedKeys(valCheck, false);
|
store.state.setAnimation = false;
|
});
|
};
|
onMounted(() => {
|
setTreeStart();
|
});
|
watch(
|
() => store.state.setAnimation,
|
(newVal, oldVal) => {
|
if (newVal) {
|
setAnimation(newVal);
|
}
|
},
|
{ immediate: true, deep: true }
|
);
|
</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);
|
z-index: 40;
|
position: absolute;
|
z-index: 40;
|
top: 2%;
|
left: 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 {
|
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;
|
}
|
|
.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;
|
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;
|
// }
|
|
.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>
|
