|
|
@@ -29,7 +29,7 @@
|
|
|
</div>
|
|
|
<div class="bottom-menu-normal">
|
|
|
<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
|
|
|
- @click.stop="showDialog(fastMenu.click)">
|
|
|
+ @click.stop="showDialog(fastMenu.click)" >
|
|
|
<a><i :class="fastMenu.icon"></i>{{fastMenu.name}}
|
|
|
<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
|
|
|
<el-button type="primary"
|
|
|
@@ -38,8 +38,29 @@
|
|
|
<el-button type="primary"
|
|
|
@click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo')"
|
|
|
class="nav-child-btn" plain>铁西</el-button>
|
|
|
- <!-- <el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"-->
|
|
|
- <!-- @click.stop="closeChild"></el-button>-->
|
|
|
+ <!-- <el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
|
|
|
+ @click.stop="closeChild"></el-button> -->
|
|
|
+ </div>
|
|
|
+ <div v-if="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
|
|
|
+ <div class="forestban">
|
|
|
+ <div class="forestban-con">
|
|
|
+ <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="forestban-right">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="searchFB">
|
|
|
+ </el-input>
|
|
|
+ <el-checkbox-group v-model="checkList" >
|
|
|
+ <el-checkbox label="复选框 A"></el-checkbox>
|
|
|
+ <el-checkbox label="复选框 B"></el-checkbox>
|
|
|
+ <el-checkbox label="复选框 C"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
|
|
|
+ @click.stop="closeBanChild"></el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a>
|
|
|
|
|
|
@@ -69,6 +90,7 @@
|
|
|
btmTipIndent:'',//图例收起弹出
|
|
|
eventLocationVisible: false,
|
|
|
showChild: false,
|
|
|
+ showBanChild: false,//林斑
|
|
|
fastMenu: [{
|
|
|
name: '事件定位',
|
|
|
icon: 'iconfont sj-icon-sjdw',
|
|
|
@@ -87,7 +109,7 @@
|
|
|
{
|
|
|
name: '林班',
|
|
|
icon: 'iconfont sj-icon-lbzy',
|
|
|
- click: ''
|
|
|
+ click: 'forestban'
|
|
|
},
|
|
|
|
|
|
{
|
|
|
@@ -100,10 +122,56 @@
|
|
|
icon: 'el-icon-s-grid',
|
|
|
click: 'TVWall'
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ data: [{
|
|
|
+ label: '一级 1',
|
|
|
+ children: [{
|
|
|
+ label: '二级 1-1',
|
|
|
+ children: [{
|
|
|
+ label: '三级 1-1-1'
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '一级 2',
|
|
|
+ children: [{
|
|
|
+ label: '二级 2-1',
|
|
|
+ children: [{
|
|
|
+ label: '三级 2-1-1'
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '二级 2-2',
|
|
|
+ children: [{
|
|
|
+ label: '三级 2-2-1'
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '一级 3',
|
|
|
+ children: [{
|
|
|
+ label: '二级 3-1',
|
|
|
+ children: [{
|
|
|
+ label: '三级 3-1-1'
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '二级 3-2',
|
|
|
+ children: [{
|
|
|
+ label: '三级 3-2-1'
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+ checkList:[],//默认选择
|
|
|
+ searchFB: '',
|
|
|
+ btmCurrent:''
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleNodeClick(data) {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
refresh(){
|
|
|
window.location.reload();
|
|
|
},
|
|
|
@@ -113,6 +181,14 @@
|
|
|
choseLayerSwitching(url) {
|
|
|
window.choseLayerSwitching(url);
|
|
|
},
|
|
|
+ forestban(url){
|
|
|
+ window.forestban(url);
|
|
|
+ console.log('林班')
|
|
|
+ },
|
|
|
+ closeBanChild(){
|
|
|
+ this.showBanChild = false
|
|
|
+ this.checkList = []
|
|
|
+ },
|
|
|
//图例收起弹出
|
|
|
btmIndent(){
|
|
|
if(this.btmTipIndent == ''){
|
|
|
@@ -246,8 +322,9 @@
|
|
|
}
|
|
|
|
|
|
.nav-child {
|
|
|
+ text-shadow: none !important;
|
|
|
position: absolute;
|
|
|
- top: -3.3rem;
|
|
|
+ bottom: 3rem;
|
|
|
border: 1px solid saddlebrown;
|
|
|
padding: .5rem;
|
|
|
-moz-border-radius-topleft: 0;
|
|
|
@@ -257,19 +334,48 @@
|
|
|
border: 1px $barBorder;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
+ color: $inBlue;
|
|
|
|
|
|
.nav-child-btn {
|
|
|
padding: .2rem;
|
|
|
}
|
|
|
+ .forestban{
|
|
|
+ display: flex;
|
|
|
+ .forestban-con{
|
|
|
+ width: 10rem;
|
|
|
+ height: 20rem;
|
|
|
+ overflow-y: scroll;
|
|
|
+ border: 1px solid rgba(51, 70, 127, 0.7);
|
|
|
+ }
|
|
|
+ .forestban-right{
|
|
|
+ width: 15rem;
|
|
|
+ height: 20rem;
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding: 0 1rem;
|
|
|
+ .el-checkbox-group{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ label{
|
|
|
+ padding: .4rem 0;
|
|
|
+ }
|
|
|
+ .el-checkbox{
|
|
|
+ color:$white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .btm-m-con:hover {
|
|
|
+ .btm-m-con:hover, .on {
|
|
|
text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
-webkit-transform: translateX(0.2rem);
|
|
|
transform: translateX(0.2rem);
|
|
|
transition: all 0.2s ease-in-out;
|
|
|
+ .nav-child{
|
|
|
+ text-shadow: none !important;
|
|
|
+ }
|
|
|
|
|
|
i {
|
|
|
color: $inBlueHover;
|
whao