<template>
|
<div id="leftMain" :style="{ 'width': isShowDrawer ? '420px' : '55px' }">
|
<!-- 左侧业务按钮 START -->
|
<div class="leftCompass">
|
<div class="leftMenu">
|
<div class="Submenu" @click="openMenu('./config/layers_xian_fl.json','fl')">
|
<img src="../../../assets/img/描边 拷贝 5.png" alt="" >
|
<div class="titleMenu">数据目录</div>
|
</div>
|
<img src="../../../assets/img/------------.png" alt="" class="divider">
|
<div class="Submenu" @click="openMenu('./config/layers_xian_fj.json','fj')">
|
<img src="../../../assets/img/椭圆 1 拷贝 5.png" alt="" >
|
<div class="titleMenu">成果资源</div>
|
</div>
|
</div>
|
</div>
|
<!-- 中间切换按钮 START -->
|
<div class="switchBtn" :style="{ 'left': isShowDrawer ? '280px' : '28px' }">
|
<div class="switchBtnImg" v-show="!isShowDrawer"></div>
|
<div class="switchBtnclick" :style="{'margin-left': isShowDrawer ? '20px' : '15px' }"
|
@click="abc()"></div>
|
</div>
|
<!-- 中间切换按钮 END -->
|
<div class="content" :style="{ 'width': isShowDrawer ? '340px' : '55px' }">
|
<LayerPanel class="dataTree" ref="layercontrol"></LayerPanel>
|
</div>
|
<div class="Divider" style="top:0%;background: linear-gradient(to top, rgba(137,193,255,0.5) 0%, rgba(0,255,255,0.2) 100%);" v-show="isShowDrawer"></div>
|
<div class="Divider" style="top:50%;background: linear-gradient(to bottom, rgba(137,193,255,0.5) 0%, rgba(0,255,255,0.2) 100%);" v-show="isShowDrawer"></div>
|
</div>
|
</template>
|
<script>
|
import LayerPanel from "../../../components/developcenter/mainViewer/LayerPanel-bk.vue";
|
export default {
|
data() {
|
return {
|
isShowDrawer: false, // 定义关闭按钮
|
flFirst:true,
|
fjFirst:true,
|
type:""
|
}
|
},
|
components:{
|
LayerPanel
|
},
|
methods: {
|
openMenu(url,type){
|
if(this.isShowDrawer==false) this.isShowDrawer=true
|
if(type == "fl"){
|
if(!this.fjFirst && type != this.type) this.$refs.layercontrol.updataShow("fj")
|
this.$refs.layercontrol.show(url, null, "black",false,"fl");
|
this.flFirst = false
|
this.type = type
|
}else if(type == "fj"){
|
if(!this.flFirst && type != this.type) this.$refs.layercontrol.updataShow("fl")
|
this.$refs.layercontrol.show(url, null, "black",this.fjFirst,"fj")
|
this.fjFirst = false
|
this.type = type
|
}
|
},
|
abc(){
|
this.isShowDrawer = !this.isShowDrawer;
|
if(this.isShowDrawer == false){
|
this.$refs.layercontrol.hiddenSubContent()
|
}
|
}
|
},
|
mounted() {
|
// this.$refs.layercontrol.show(LAYER_CONFIG_PATH, null, "black")
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
#leftMain {
|
position: absolute;
|
left: 0px;
|
z-index: 999;
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
width:420px;
|
background-size: 420px 100%;
|
transition: 0.3s ease;
|
background-image: url("../../../assets/img/矩形 1 拷贝 3.png");
|
|
.leftCompass {
|
color: aliceblue;
|
width: 52px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
position: absolute;
|
left: 0px;
|
// background-image: url("../../../assets/img/矩形 5.png");
|
background-size: 52px 100%;
|
.leftMenu{
|
position: absolute;
|
top: 120px;
|
.divider{
|
padding-left:5px ;
|
width: 41px;
|
height: 1px;
|
margin-bottom:10px;
|
}
|
.Submenu{
|
cursor: pointer;
|
margin-bottom:20px;
|
img{
|
padding-left:7px;
|
width: 38px;
|
height:40px;
|
}
|
.titleMenu{
|
padding-left:2px;
|
width: 50px;
|
height: 11px;
|
font-size: 12px;
|
// font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #B6E0FD;
|
line-height: 25px;
|
|
}
|
}
|
}
|
}
|
|
.switchBtn {
|
width: 58px;
|
height: 100%;
|
position:absolute;
|
left:28px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
transition: 0.3s ease;
|
.switchBtnImg {
|
width: 58px;
|
height: 554px;
|
background: url("../../../assets/img/组 6807.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.switchBtnclick{
|
width: 40px;
|
height: 40px;
|
position: absolute;
|
margin-left:5px;
|
// background-color: #B6E0FD;
|
margin-top:-10px;
|
cursor: pointer;
|
}
|
}
|
|
.content {
|
color: aliceblue;
|
width: 340px;
|
height: 100%;
|
overflow: hidden;
|
transition: 0.3s ease;
|
background-size:340px 100%;
|
background-image: url("../../../assets/img/左.png");
|
.dataTree{
|
padding:0px 50px 0px 52px
|
}
|
}
|
|
.Divider{
|
width: 1px;
|
height: 50%;
|
position:absolute;
|
left:54px;
|
}
|
}
|
</style>
|
