事件定位

src/components/eventLocation.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%">
+    <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%"
+               @close="cancelEventLocationShow()">
       <div class="event-info">
         <div class="event-info-top">
           <el-form>
@@ -19,9 +20,11 @@
               <el-tab-pane label="事件" name="event">
                 <div class="forthis">
                   <div class="i-list-con overflow-y" style="height: 50vh;">
-                    <div class="d-l-con d-evnet-list-con" v-for="(item,index) in eventList" v-on:click="dropLocation(item.latitude,item.longitude)">
+                    <div class="d-l-con d-evnet-list-con" v-for="(item,index) in eventList"
+                         v-on:click="dropLocation(item.latitude,item.longitude)">
                       <!-- <img :src="" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img"> -->
-                      <img :src="item.picturePath" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img">
+                      <img :src="item.picturePath" v-if="item.picturePath!=null&&item.picturePath!=''"
+                           class="event-list-img">
                       <img src="@/assets/images/visual/img-sample.png" v-else class="event-list-img">
                       <div class="event-list-text">
                         <h3>{{item.eventTitle}}</h3>
@@ -33,7 +36,7 @@
               <el-tab-pane label="探头" name="monitor">
                 <div class="forthis">
                   <div class="i-list-con overflow-y" style="height: 50vh;">
-										<span v-for="(item,index) in cameraList"  v-on:click="dropLocation(item.latitude,item.longitude)">
+										<span v-for="(item,index) in cameraList" v-on:click="dropLocation(item.latitude,item.longitude)">
 											<div class="d-l-con" @click="">
 												<div class="d-l-l-text">
 													<i class="iconfont sj-icon-jkzx icon-sxt"></i>
@@ -48,7 +51,9 @@
           </div>
           <div class="e-location-right" style="height: 57.8vh;">
             <!-- 地图 -->
-            <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 57.8vh;" :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}" :codes="['9fa5']" :isSideBySide="false" @preview="preview"></eventLocationSupermap>
+            <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 57.8vh;"
+                                   :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}"
+                                   :codes="['9fa5']" :isSideBySide="false" @preview="preview"></eventLocationSupermap>
           </div>
         </div>
       </div>
@@ -64,36 +69,45 @@
 
   import eventLocationSupermap from '@/components/supermap' //超图
   /** ----------------------------------摄像头预览开始------------------------------------- */
-  import {getDahuaVideoServer} from "@/api/dahua/dahua";
+  import { getDahuaVideoServer } from '@/api/dahua/dahua'
   import DHWs from '@/dahua/lib/DHWs'
 
   /** ----------------------------------摄像头预览结束------------------------------------- */
   export default {
     components: {
-      eventLocationSupermap,
+      eventLocationSupermap
     },
     data() {
       return {
         eventLocationVisible: false,
         longitude: '',
         latitude: '',
-        activeName:'event',
+        activeName: 'event',
         eventList: [],
         markersList: [],
-        cameraList:[],
-        cameraMarkersList:[],
+        cameraList: [],
+        cameraMarkersList: []
       }
     },
     created() {
       /** ----------------------------------摄像头预览开始------------------------------------- */
-      const DHWsInstance = DHWs.getInstance();
-      this.ws = DHWsInstance;
-      console.log(this.ws);
+      const DHWsInstance = DHWs.getInstance()
+      this.ws = DHWsInstance
+      console.log(this.ws)
       /** ----------------------------------摄像头预览结束------------------------------------- */
     },
     methods: {
-      getNearEvent(){
-        this.activeName = 'event';
+      cancelEventLocationShow() {
+        this.longitude = ''
+        this.latitude = ''
+        this.activeName = 'event'
+        this.eventList = []
+        this.markersList = []
+        this.cameraList = []
+        this.cameraMarkersList = []
+      },
+      getNearEvent() {
+        this.activeName = 'event'
         let marker = [{
           lng: this.longitude,
           lat: this.latitude,
@@ -104,11 +118,11 @@
           keepBindPopup: false,
           isAggregation: false
         }]
-        let that=this;
-        getNearEvent(this.longitude,this.latitude).then(res => {
-          that.markersList = [];
-          that.eventList = [];
-          if(res.data!=null&&res.data.length>0){
+        let that = this
+        getNearEvent(this.longitude, this.latitude).then(res => {
+          that.markersList = []
+          that.eventList = []
+          if (res.data != null && res.data.length > 0) {
             for (let i = 0; i < res.data.length; i++) {
               let markersMap = {
                 lng: 124.59,
@@ -120,22 +134,22 @@
                 keepBindPopup: false,
                 isAggregation: false
               }
-              if(res.data.length>50){
+              if (res.data.length > 50) {
                 markersMap.isAggregation = true
               }
-              if(res.data[i].eventStatus=="event_event_status_1"||res.data[i].eventStatus=="event_event_status_2"||res.data[i].eventStatus=="event_event_status_6"){
-                markersMap.click = "showEventInfo_Processed"
-              }else if(res.data[i].eventStatus=="event_event_status_4"){
-                markersMap.click = "showEventInfo_notProcessed"
+              if (res.data[i].eventStatus == 'event_event_status_1' || res.data[i].eventStatus == 'event_event_status_2' || res.data[i].eventStatus == 'event_event_status_6') {
+                markersMap.click = 'showEventInfo_Processed'
+              } else if (res.data[i].eventStatus == 'event_event_status_4') {
+                markersMap.click = 'showEventInfo_notProcessed'
               }
               markersMap.parameter = res.data[i].id
               markersMap.lng = res.data[i].longitude
-              markersMap.lat =res.data[i].latitude
+              markersMap.lat = res.data[i].latitude
               markersMap.bindPopupHtml = '<div class="map-tip">' +
                 '<span>' +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' +res.data[i].longitude + ',' +res.data[i]
+                '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i]
                   .latitude + '</h4>' +
                 '                </div>' +
                 '                </div>' +
@@ -143,32 +157,32 @@
                 '<span>' +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                '                  <h4>事件名称：' +res.data[i].eventTitle + '</h4>' +
+                '                  <h4>事件名称：' + res.data[i].eventTitle + '</h4>' +
                 '                </div>' +
                 '                </div>' +
                 '                </span>' +
                 '<span>' +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                '                  <h4>事件时间：' +res.data[i].reportTime + '</h4>' +
+                '                  <h4>事件时间：' + res.data[i].reportTime + '</h4>' +
                 '                </div>' +
                 '                </div>' +
                 '                </span>' +
-                '</div>';
+                '</div>'
               that.markersList.push(markersMap)
             }
-            that.eventList=res.data;
+            that.eventList = res.data
             setTimeout(() => {
               that.$refs.eventLocationSupermap.clearM(true)
               that.$refs.eventLocationSupermap.clearM(false)
               that.$refs.eventLocationSupermap.setMarkers(that.markersList)
               that.$refs.eventLocationSupermap.setMarkers(marker)
-            },1000)
+            }, 1000)
           }
         })
       },
       handleClick(tab, event) {
-        let that=this
+        let that = this
         that.$refs.eventLocationSupermap.controlLevel(8)
         let marker = [{
           lng: this.longitude,
@@ -181,9 +195,9 @@
           isAggregation: false
         }]
         if (tab.name == 'monitor') {
-          that.cameraMarkersList=[];
-          that.cameraList =[];
-          getNearCamera(this.longitude,this.latitude).then(res => {
+          that.cameraMarkersList = []
+          that.cameraList = []
+          getNearCamera(this.longitude, this.latitude).then(res => {
             //根据设备类型查看列表
             that.cameraList = res.data
 
@@ -202,9 +216,9 @@
                 if (res.data.length > 50) {
                   markersMap.isAggregation = true
                 }
-                if(res.data[i].channelCode!=null){
+                if (res.data[i].channelCode != null) {
                   markersMap.parameter = res.data[i].channelCode.split(',')
-                }else{
+                } else {
                   markersMap.parameter = []
                 }
 
@@ -233,38 +247,38 @@
                 that.$refs.eventLocationSupermap.clearM(false)
                 that.$refs.eventLocationSupermap.setMarkers(this.cameraMarkersList)
                 that.$refs.eventLocationSupermap.setMarkers(marker)
-              },1000)
+              }, 1000)
             }
           })
-        }else{
+        } else {
           that.getNearEvent()
         }
       },
-      dropLocation(lat,lng) {
-        this.$refs.eventLocationSupermap.dropLocation(lat,lng)
+      dropLocation(lat, lng) {
+        this.$refs.eventLocationSupermap.dropLocation(lat, lng)
       },
       showEventLocation() {
         this.eventLocationVisible = true
       },
       /** ----------------------------------摄像头预览开始------------------------------------- */
-      alertLogin: function () {
-        this.$modal.msg("登录中....");
+      alertLogin: function() {
+        this.$modal.msg('登录中....')
       },
-      alertLoginSuccess: function () {
-        this.$modal.msgSuccess("登录成功！");
+      alertLoginSuccess: function() {
+        this.$modal.msgSuccess('登录成功！')
       },
-      alertLoginFailed: function () {
-        this.$modal.msgError("登陆失败！");
+      alertLoginFailed: function() {
+        this.$modal.msgError('登陆失败！')
       },
-      alertReinstall: function () {
-        this.$modal.msgWarning("请重新安装客户端");
+      alertReinstall: function() {
+        this.$modal.msgWarning('请重新安装客户端')
       },
       /** 预览按钮操作 */
       preview(channelCode) {
         getDahuaVideoServer().then(newResponse => {
           this.ws.detectConnectQt().then(res => {
             if (res) { // 连接客户端成功
-              this.alertLogin();
+              this.alertLogin()
               this.ws.login({
                 loginIp: newResponse.loginIp,
                 loginPort: newResponse.loginPort,
@@ -272,31 +286,31 @@
                 userPwd: newResponse.userPwd,
                 token: '',
                 https: 1
-              });
+              })
               this.ws.on('loginState', (res) => {
-                this.isLogin = res;
-                console.log('---res-----', res);
+                this.isLogin = res
+                console.log('---res-----', res)
                 if (res) {
                   this.alertLoginSuccess()
                   this.activePanel = 'key2'
-                  this.realTimeVideoDialog(channelCode);
+                  this.realTimeVideoDialog(channelCode)
                 } else {
-                  this.alertLoginFailed();
+                  this.alertLoginFailed()
                 }
-              });
+              })
             } else { // 连接客户端失败
-              this.alertReinstall();
+              this.alertReinstall()
             }
-          });
-        });
+          })
+        })
       },
       realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
         if (!this.isLogin) {
-          this.$Message.info('正在登陆客户端，请稍等......');
-          return false;
+          this.$Message.info('正在登陆客户端，请稍等......')
+          return false
         }
-        this.ws.openVideo(cameraParams);
-      },
+        this.ws.openVideo(cameraParams)
+      }
       /** ----------------------------------摄像头预览结束------------------------------------- */
     }
   }
@@ -304,7 +318,8 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   @import '@/assets/styles/base.scss';
-  .el-dialog:not(.is-fullscreen){
+
+  .el-dialog:not(.is-fullscreen) {
     margin-top: 5.5vh !important;
   }