104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<template>
|
|
<div class="maplayertree">
|
|
<div class="layer-type" v-for="(item,index) in menu_tree" :key="index" v-show="item.nodetype == 1" :style="{'border-left':'2px solid '+item.color}">
|
|
<div class="typeinfo" @click="showChild(item)" >
|
|
<div style="float:left;"><img :src="item.icon ? item.icon : '/images/map/layer-type-7.png'" alt=""></div>
|
|
<div style="float:left;margin-left:15px;">
|
|
<p style="font-weight:bold;line-height:32px;">{{item.name}}</p>
|
|
<p :style="{'color':item.color}">{{item.children.length}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="layers-container" v-show="item.children&&item.children.length>0 && item.children[0].layertype">
|
|
<p v-for="(it,idx) in item.children" :key="idx" :style="{'color':it.show ? '#ff0000':'#00FFB3'}">
|
|
<img src="/images/map/box.png" width="20px" style="position:relative;top:4px;" alt="">
|
|
<span @click="$emit('addLayer',it);it.show = !it.show">{{it.name}}</span>
|
|
<span class="edit-btn" @click="$emit('editLayer',it)"><i class="el-icon-edit"></i></span>
|
|
</p>
|
|
</div>
|
|
<MapLayerTree @addLayer="addLayer" @editLayer="editLayer" v-show="item.show" :menu_tree="item.children" :level="level+1"></MapLayerTree>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:"MapLayerTree",
|
|
props:["menu_tree","level"],
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
showChild(item){
|
|
item.show = !item.show
|
|
},
|
|
addLayer(item){
|
|
|
|
// if(item.show == false){
|
|
// item.show = true;
|
|
// }else if(item.show == true){
|
|
// item.show = false;
|
|
// }
|
|
|
|
this.$emit("addLayer",item);
|
|
|
|
// item.show = !item.show;
|
|
},
|
|
editLayer(item){
|
|
this.$emit("editLayer",item);
|
|
item.isEdit = !item.isEdit;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.maplayertree{
|
|
width:100%;
|
|
}
|
|
.layer-type{
|
|
width:100%;
|
|
min-height:50px;
|
|
margin-left:24px;
|
|
padding-left:12px;
|
|
line-height:10px;
|
|
}
|
|
.typeinfo:hover{
|
|
cursor:pointer;
|
|
}
|
|
.typeinfo{
|
|
color:#efefef;
|
|
font-size:15px;
|
|
min-height:50px;
|
|
position: relative;
|
|
left:-40px;
|
|
top:-2px;
|
|
}
|
|
.typeinfo::after{
|
|
content:"";
|
|
clear:both;
|
|
display: block;
|
|
overflow: hidden;
|
|
height:0;
|
|
}
|
|
.typeinfo img{
|
|
width:50px;
|
|
height:50px;
|
|
margin:0px;
|
|
}
|
|
|
|
.layers-container{
|
|
width:100%;
|
|
line-height:32px;
|
|
color:#00FFB3;
|
|
}
|
|
|
|
.layers-container p{
|
|
cursor:pointer;
|
|
}
|
|
.edit-btn{
|
|
margin-left:6px;
|
|
font-weight:bold;
|
|
color:#ccc;
|
|
}
|
|
</style> |