<template>
|
<div
|
class="project_tree"
|
:class="{ left_main_show: !leftMenuOpen }"
|
>
|
<div class="project_tree__title">工程项目</div>
|
<el-input
|
style="width: 80%"
|
placeholder="输入关键字进行查询"
|
suffix-icon="el-icon-search"
|
v-model="filterText"
|
size="mini"
|
>
|
</el-input>
|
<div class="tree-container">
|
<el-tree
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
default-expand-all
|
:props="defaultProps"
|
ref="tree"
|
class="el-tree"
|
@check-change="handleCheckChange"
|
:filter-node-method="filterNode"
|
>
|
<div
|
style="display: flex"
|
class="custom-tree-node"
|
slot-scope="{ node, data }"
|
>
|
<div style="">
|
<i
|
v-if="data.children && data.children.length > 0"
|
style="color: yellow"
|
class="el-icon-folder-opened"
|
></i>
|
<i
|
v-else
|
style="color: skyblue"
|
class="el-icon-folder-opened"
|
></i>
|
</div>
|
<!-- <div style="">
|
<i
|
v-if="node.expanded && data.children && data.children.length > 0"
|
style="color: yellow"
|
class="el-icon-folder-opened"
|
></i>
|
<i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
|
</div> -->
|
<div
|
:style="
|
data.children && data.children.length > 0
|
? 'padding-left: 20px'
|
: 'padding-left: 20px'
|
"
|
class="tree-label"
|
:title="node.label || '-'"
|
>
|
{{ node.label }}
|
</div>
|
</div>
|
</el-tree>
|
</div>
|
<!-- <div class="changeBaseLayer">
|
<div @click="changeMenulayer" class="CenDiv">
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { right_menu, right_list, image_layer } from "@/assets/js/index.js"
|
|
import { perms_selectLayers } from "@/api/api.js"
|
|
export default {
|
data() {
|
return {
|
treeData: [],
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
typeIndex: null,
|
leftMenuOpen: false,
|
rightMenuOpen: false,
|
changeSelectStyle: null,
|
changeSelectli: null,
|
rightMenu: [],
|
rightList: [],
|
treeData: [],
|
centerFlag: false,
|
isActive: false,
|
isMenuLayer: true,
|
openEcharts: false,
|
filterText: "",
|
}
|
},
|
|
mounted() {
|
this.rightList = right_list[0]
|
this.rightMenu = right_menu
|
this.changeSelectli = this.rightList[0].id
|
this.changeSelectStyle = this.rightMenu[0].id
|
this.addImageLayer()
|
this.$bus.$on("changeProjectLayer", (res) => {
|
this.setShowCheckedLayer();
|
})
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
},
|
},
|
methods: {
|
setShowCheckedLayer() {
|
var value = this.$refs.tree.getCheckedNodes();
|
var std = [];
|
for (var i in value) {
|
std.push(value[i].id)
|
}
|
if (std.indexOf(3) == -1) {
|
std.push(3);
|
this.$refs.tree.setCheckedKeys(std)
|
}
|
|
},
|
async addImageLayer() {
|
const data = await perms_selectLayers()
|
if (data.code != 200) {
|
return this.$message.error("图层列表查询失败")
|
}
|
var std = []
|
var layer_list = []
|
var layer_groups = []
|
for (var i in data.result) {
|
if (data.result[i].type == 1) {
|
layer_groups.push({
|
id: data.result[i].id,
|
label: data.result[i].cnName,
|
type: data.result[i].type,
|
isEdit: false,
|
children: [],
|
})
|
} else if (data.result[i].type == 2) {
|
if (data.result[i].url != null) {
|
var layer_entity = {
|
id: data.result[i].id,
|
pid: data.result[i].pid,
|
label: data.result[i].cnName,
|
resource: data.result[i].url,
|
type: data.result[i].type,
|
isEdit: false,
|
}
|
layer_list.push(layer_entity)
|
if (data.result[i].isShow == 1) {
|
std.push(data.result[i].id)
|
this.setAddImageLayer(layer_entity)
|
}
|
}
|
}
|
}
|
for (var i in layer_list) {
|
for (var j in layer_groups) {
|
if (layer_list[i].pid === layer_groups[j].id) {
|
layer_groups[j].children.push(layer_list[i])
|
}
|
}
|
}
|
this.treeData = layer_groups
|
|
this.$refs.tree.setCheckedKeys(std)
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
if (data.children != null) return
|
var std = []
|
for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
|
var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
|
if (val_id == data.label) {
|
std.push(data.label)
|
const img_layer = Viewer.imageryLayers._layers[i]
|
img_layer.show = checked
|
}
|
}
|
if (std.length == 0 && checked == true) {
|
this.setAddImageLayer(data)
|
}
|
},
|
setAddImageLayer(res) {
|
let layerWMS = new Cesium.WebMapServiceImageryProvider({
|
url: geoServerURl,
|
layers: res.resource,
|
parameters: {
|
transparent: true,
|
format: "image/png",
|
},
|
})
|
layerWMS.name = res.label
|
Viewer.imageryLayers.addImageryProvider(layerWMS)
|
},
|
changeMenulayer() {
|
this.isActive = !this.isActive
|
this.isMenuLayer = !this.isMenuLayer
|
this.setLayerVisible()
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
Viewer.imageryLayers._layers[1].show = true
|
Viewer.imageryLayers._layers[2].show = false
|
Viewer.imageryLayers._layers[3].show = false
|
} else {
|
Viewer.imageryLayers._layers[1].show = false
|
Viewer.imageryLayers._layers[2].show = true
|
Viewer.imageryLayers._layers[3].show = true
|
}
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.project_tree {
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
transition: width 2s;
|
background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;
|
|
background-size: 100% 100%;
|
&__title {
|
color: #fff;
|
height: 30px;
|
font-size: 20px;
|
width: 130px;
|
text-align: center;
|
width: 140px;
|
padding-top: 15px;
|
color: #fff;
|
background: linear-gradient(
|
0deg,
|
rgba(81, 192, 243, 0.65) 0%,
|
rgba(255, 255, 255, 0.65) 86%
|
);
|
-webkit-background-clip: text;
|
font-size: 17.5px;
|
font-family: HYLingXinJ, HYLingXinJ-regular;
|
font-weight: normal;
|
letter-spacing: 1.05px;
|
}
|
.el-input {
|
width: 80%;
|
padding: 5px 0 5px 30px;
|
}
|
|
.tree-container {
|
margin: 10px;
|
height: 85%;
|
overflow-y: auto;
|
}
|
.changeBaseLayer {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
overflow: hidden;
|
}
|
.CenDiv {
|
height: 40px;
|
width: 60px;
|
margin-right: 7%;
|
border-radius: 5px;
|
bottom: 3%;
|
}
|
|
// .CenDiv:hover {
|
|
// }
|
.active {
|
height: 40px;
|
width: 60px;
|
background: url("~@/assets/img/themic/默认的影像.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
.menuLayer {
|
height: 40px;
|
width: 60px;
|
background: url("~@/assets/img/themic/默认的底图.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
}
|
/* 滚动条样式 */
|
|
::-webkit-scrollbar {
|
width: 4px;
|
height: 4px;
|
background-color: #409eff;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #eee;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #409eff;
|
border-radius: 5px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #409eff;
|
}
|
|
::-webkit-scrollbar-corner {
|
background: #409eff;
|
}
|
</style>
|
|
<style lang="scss">
|
.leftContainer {
|
.project_tree {
|
.el-tree-node__content {
|
margin-left: 20px;
|
}
|
|
.el-tree .el-tree-node .is-leaf {
|
margin-left: -14px;
|
}
|
|
.el-tree-node__content > label.el-checkbox {
|
margin-right: -30px;
|
}
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
visibility: hidden;
|
}
|
.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
|
display: block;
|
visibility: visible;
|
}
|
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
|
display: none;
|
// visibility: hidden;
|
}
|
.tree-label {
|
font-size: 16px;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
