事件定位

src/components/eventLocation.vue

@@ -0,0 +1,88 @@
+<template>
+	<div>
+    <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%">
+      <div style="position:absolute; right: 0;top:60px; width:40%;">
+        <el-steps :space="200" :active=zt finish-status="success">
+          <el-step title="待处理"></el-step>
+          <el-step title="处理中"></el-step>
+          <el-step title="支援"></el-step>
+          <el-step title="已办结"></el-step>
+          <el-step title="已归档"></el-step>
+        </el-steps>
+      </div>
+    </el-dialog>
+	</div>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+        eventLocationVisible:false
+			}
+	},
+    methods:{
+      showEventLocation(){
+        this.eventLocationVisible=true
+      }
+    }
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@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: 100000;
+		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;
+
+			i {
+				font-size: 1rem;
+				color: $inBlue;
+				text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
+				margin-right: 0.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;
+
+			i {
+				color: $inBlueHover;
+				text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
+			}
+		}
+
+	}
+</style>

src/components/vBottomMenu.vue

@@ -1,94 +1,105 @@
 <template>
-	<div class="bottom-menu-normal">
-		<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con">
-			<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" v-on:click="showDialog(fastMenu.click)">
+      <a><i class="iconfont" :class="fastMenu.icon"></i>{{fastMenu.name}}</a>
+    </div>
+  </div>
+  <!--事件弹层-->
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				fastMenu: [{
-						name: '事件定位',
-						icon: 'sj-icon-sjdw'
-					},
-					{
-						name: '图层切换',
-						icon: 'sj-icon-tcqh'
-					},
-					{
-						name: '测量工具',
-						icon: 'sj-icon-clgj'
-					},
-					{
-						name: '林班',
-						icon: 'sj-icon-lbzy'
-					},
-					{
-						name: '林场',
-						icon: 'sj-icon-lczy'
-					},
-				]
-			}
-	}
-	}
+  export default {
+    data() {
+      return {
+        eventLocationVisible: false,
+        fastMenu: [{
+          name: '事件定位',
+          icon: 'sj-icon-sjdw',
+          click: 'eventLocation'
+        },
+          {
+            name: '图层切换',
+            icon: 'sj-icon-tcqh',
+            click: ''
+          },
+          {
+            name: '测量工具',
+            icon: 'sj-icon-clgj',
+            click: ''
+          },
+          {
+            name: '林班',
+            icon: 'sj-icon-lbzy',
+            click: ''
+          },
+          {
+            name: '林场',
+            icon: 'sj-icon-lczy',
+            click: ''
+          }
+        ]
+      }
+    }, methods: {
+      showDialog(click) {
+        window.showDialog(click)
+      }
+    }
+  }
 </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: 100000;
-		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;
+  .bottom-menu-normal {
+    max-width: 90%;
+    padding: 0 3rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+    z-index: 100000;
+    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;
+      }
+    }
 
-		.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);
+      filter: brightness(2.3);
+      -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

@@ -433,6 +433,7 @@
         </el-tabs>
       </el-dialog>
 		</div>
+    <eventLocation ref="eventLocation"></eventLocation>
 	</div>
 </template>
 
@@ -449,6 +450,7 @@
   import supermapProcessed from '@/components/supermap' //超图
 	import vheader from '@/components/v-header.vue' //一体化共用头部
 	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+	import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
 
   /** ----------------------------------摄像头预览开始------------------------------------- */
   import {getDahuaVideoServer} from "@/api/dahua/dahua";
@@ -464,13 +466,15 @@
       supermapNotProcessed,
       supermapProcessed,
 			vheader,
-			vBottomMenu
+			vBottomMenu,
+      eventLocation
 		},
 		created() {
       /** ----------------------------------摄像头预览开始------------------------------------- */
       const DHWsInstance = DHWs.getInstance();
       this.ws = DHWsInstance;
       console.log(this.ws);
+      window.showDialog=this.showDialog
       /** ----------------------------------摄像头预览结束------------------------------------- */
 		},
 		mounted() {
@@ -648,6 +652,11 @@
 		},
 
 		methods: {
+      showDialog(click){
+        if(click=="eventLocation"){
+          this.$refs.eventLocation.showEventLocation()
+        }
+      },
 			//态势感知chart
 			cameraChat() {
 				// 基于准备好的dom，初始化echarts实例