UI

src/components/vBottomMenu.vue

@@ -1,105 +1,139 @@
 <template>
-  <div class="bottom-menu-normal">
-    <div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con" v-on:click="showDialog(fastMenu.click)">
-      <a><i class="iconfont" :class="fastMenu.icon"></i>{{fastMenu.name}}</a>
-    </div>
-  </div>
-  <!--事件弹层-->
+	<div class="bottom-menu-normal">
+		<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
+			@click.stop="showDialog(fastMenu.click)">
+			<a><i class="iconfont" :class="fastMenu.icon"></i>{{fastMenu.name}}
+				<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
+					<el-button type="primary" @click.stop="test" class="nav-child-btn">图层1	</el-button>
+					<el-button type="primary" @click.stop="test" class="nav-child-btn">图层2</el-button>
+					<el-button type="primary" @click.stop="test" class="nav-child-btn">图层3</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>
+			</a>
+
+		</div>
+	</div>
+	<!--事件弹层-->
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        eventLocationVisible: false,
-        fastMenu: [{
-          name: '事件定位',
-          icon: 'sj-icon-sjdw',
-          click: 'eventLocation'
-        },
-          {
-            name: '图层切换',
-            icon: 'sj-icon-tcqh',
-            click: 'layerSwitching'
-          },
-          {
-            name: '测量工具',
-            icon: 'sj-icon-clgj',
-            click: 'editableLayers'
-          },
-          {
-            name: '林班',
-            icon: 'sj-icon-lbzy',
-            click: ''
-          },
-          {
-            name: '林场',
-            icon: 'sj-icon-lczy',
-            click: ''
-          }
-        ]
-      }
-    }, methods: {
-      showDialog(click) {
-        window.showDialog(click)
-      }
-    }
-  }
+	export default {
+		data() {
+			return {
+				eventLocationVisible: false,
+				showChild: false,
+				fastMenu: [{
+						name: '事件定位',
+						icon: 'sj-icon-sjdw',
+						click: 'eventLocation'
+					},
+					{
+						name: '图层切换',
+						icon: 'sj-icon-tcqh',
+						click: 'layerSwitching'
+					},
+					{
+						name: '测量工具',
+						icon: 'sj-icon-clgj',
+						click: 'editableLayers'
+					},
+					{
+						name: '林班',
+						icon: 'sj-icon-lbzy',
+						click: ''
+					},
+					{
+						name: '林场',
+						icon: 'sj-icon-lczy',
+						click: ''
+					}
+				]
+			}
+		},
+		methods: {
+			showDialog(click) {
+				window.showDialog(click)
+			},
+			test() {
+				console.log('123132132132132132132132123131')
+			},
+			closeChild() {
+				window.closeChild()
+			}
+		}
+	}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import '@/assets/styles/base.scss';
+	@import '@/assets/styles/base.scss';
+
+	.bottom-menu-normal {
+		max-width: 90%;
+		padding: 0 3rem;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 0;
+		z-index: 999;
+		border-radius: 5px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
+		background-size: cover;
 
-  .bottom-menu-normal {
-    max-width: 90%;
-    padding: 0 3rem;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 0;
-    z-index: 999;
-    border-radius: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
-    background-size: cover;
-    overflow: hidden;
+		.btm-m-con {
+			position: relative;
+			color: $inBlue;
+			font-size: .5rem;
+			padding: 1rem 1.5rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+			transition: all 0.2s ease-in-out;
+			cursor: pointer;
+			white-space: nowrap;
 
-    .btm-m-con {
-      position: relative;
-      color: $inBlue;
-      font-size: .5rem;
-      padding: 1rem 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      -webkit-transform: translateY(0);
-      transform: translateY(0);
-      transition: all 0.2s ease-in-out;
-      cursor: pointer;
-      white-space: nowrap;
+			i {
+				font-size: 1rem;
+				color: $inBlue;
+				text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
+				margin-right: 0.2rem;
+			}
 
-      i {
-        font-size: 1rem;
-        color: $inBlue;
-        text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
-        margin-right: 0.2rem;
-      }
-    }
+			.nav-child {
+				position: absolute;
+				top: -4.3rem;
+				border: 1px solid saddlebrown;
+				padding: 1.5rem 1.5rem 1.1rem 1.5rem;
+				-moz-border-radius-topleft: 0;
+				-moz-border-radius-bottomright: 0;
+				background-color: $barBgc;
+				box-shadow: $barShadow;
+				border: 1px $barBorder;
+				left: 50%;
+				transform: translateX(-50%);
+				.nav-child-btn{
+					padding: .2rem;
+				}
+				
+			}
+		}
 
-    .btm-m-con:hover {
-      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
-      filter: brightness(2.3);
-      -webkit-transform: translateX(0.2rem);
-      transform: translateX(0.2rem);
-      transition: all 0.2s ease-in-out;
+		.btm-m-con:hover {
+			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;
 
-      i {
-        color: $inBlueHover;
-        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
-      }
-    }
+			i {
+				color: $inBlueHover;
+				text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
+			}
+		}
 
-  }
+	}
 </style>

src/views/forest.vue

@@ -139,7 +139,7 @@
 					</div>
 				</div> -->
 			</div>
-			<vBottomMenu></vBottomMenu>
+			<vBottomMenu ref="bottomMenu"></vBottomMenu>
 			<el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
 				<div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
 						src="@/assets/images/mascot.png" /></div>
@@ -488,8 +488,10 @@
       console.log(this.ws);
       /** ----------------------------------摄像头预览结束------------------------------------- */
       window.showDialog=this.showDialog
+	  window.closeChild=this.closeChild
     },
 		mounted() {
+	  
       this.getBaseInfo()
       this.getTodayEvent()
 			this.personnelChart()
@@ -497,9 +499,12 @@
       /** ----------------------------------weosocket开始------------------------------------- */
       this.initWebSocket();
       /** ----------------------------------weosocket结束------------------------------------- */
+	  
 		},
+		/** ----------------------------------weosocket结束------------------------------------- */
 		data() {
 			return {
+		showChild:false,
         /** ----------------------------------weosocket开始------------------------------------- */
         websock : null,
         /** ----------------------------------weosocket结束------------------------------------- */
@@ -705,16 +710,30 @@
       showDialog(click){
         if(click=="eventLocation"){
           this.$refs.eventLocation.showEventLocation()
+					this.$refs.bottomMenu.showChild = false
         }else if(click=="editableLayers"){
           if(!this.$refs.supermap.isEditableLayers){
-            this.$refs.supermap.isEditableLayers=true
+            this.$refs.supermap.isEditableLayers=true,
+						this.$refs.bottomMenu.showChild = false
           }else{
-            this.$refs.supermap.isEditableLayers=false
+            this.$refs.supermap.isEditableLayers=false,
+						this.$refs.bottomMenu.showChild = false
           }
         }else if(click=="layerSwitching"){
           this.$refs.supermap.layerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo',true);
+		  this.$refs.bottomMenu.showChild = true
         }
       },
+	  //点击关闭选择图层
+	  closeChild(click){
+	  	 this.$refs.bottomMenu.showChild = false
+		 console.log(13213212321)
+	  },
+	  
+	  
+	  
+	  
+	  
 			//态势感知chart
 			cameraChat() {
 				// 基于准备好的dom，初始化echarts实例