From b94cd38d2d49a04f67e8357ce81397d8cc622aac Mon Sep 17 00:00:00 2001
From: Lvtf <L18864257234@163.com>
Date: Fri, 18 Aug 2023 18:44:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E4=BD=8D=E5=8F=98=E5=8A=A8=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/leaflet.scss                |   2 +-
 .../bigScreen/components/mapRightContent.vue  |  18 +--
 src/views/bigScreen/index.vue                 |   4 +-
 src/views/bigScreen/map/index.vue             | 122 +++++++++++-------
 4 files changed, 87 insertions(+), 59 deletions(-)

diff --git a/src/assets/styles/leaflet.scss b/src/assets/styles/leaflet.scss
index 289f18b..96adc15 100644
--- a/src/assets/styles/leaflet.scss
+++ b/src/assets/styles/leaflet.scss
@@ -171,7 +171,7 @@
 }
 // 执法车辆
 .car-popup {
-  width: 242px;
+  width: 262px;
   height: 138px;
   background-image: url("../images/popup/bg3.png");
   background-size: 100% 100%;
diff --git a/src/views/bigScreen/components/mapRightContent.vue b/src/views/bigScreen/components/mapRightContent.vue
index 312c4bb..9b5d154 100644
--- a/src/views/bigScreen/components/mapRightContent.vue
+++ b/src/views/bigScreen/components/mapRightContent.vue
@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 11:09:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-18 11:02:13
+ * @LastEditTime: 2023-08-18 18:42:16
 -->
 <template>
   <div class="right-box">
@@ -99,13 +99,15 @@ export default {
   methods:{
     getDomHeight(){
       this.$nextTick(()=>{
-        let dom = document.getElementsByClassName('right-box');
-        let height = dom[0].getBoundingClientRect();
-        let windowWidth = window.innerWidth;
-        let windowHeight = window.innerHeight;
-        let relativeHeight = (windowHeight - height.top) / 4 - 18;
-        this.relativeHeight.height = relativeHeight + 'px'
-        this.getHeight = Number(relativeHeight);
+        if(document.getElementsByClassName('right-box')) {
+          let dom = document.getElementsByClassName('right-box');
+          let height = dom[0].getBoundingClientRect();
+          let windowWidth = window.innerWidth;
+          let windowHeight = window.innerHeight;
+          let relativeHeight = (windowHeight - height.top) / 4 - 18;
+          this.relativeHeight.height = relativeHeight + 'px'
+          this.getHeight = Number(relativeHeight);
+        }
       })
     }
   },
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index 18b283c..533ee8f 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 14:40:02
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-18 16:25:54
+ * @LastEditTime: 2023-08-18 18:43:00
 -->
 <template>
   <div class="pc-container">
@@ -71,9 +71,7 @@ export default {
       
     },
     leftAnimationAction(){
-      console.log('点击了按钮')
       this.leftAnimation = !this.leftAnimation
-      console.log(this.leftAnimation)
     },
     rightAnimationAction(){
       this.rightAnimation = !this.rightAnimation
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index 229d45b..3c4fc91 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -280,7 +280,7 @@ export default {
         iconUrl: require('../../../assets/images/icon/icon5.png'),
         iconSize: [52, 81],
       })
-      point.features.map((item)=>{
+      point.features.map((item,index)=>{
         if(this.actionMap == 1) {
           if(item.properties.name == "执法人员"){
             let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1}).bindPopup(
@@ -288,7 +288,7 @@ export default {
               <div class="person-popup">
                 <div class="person-title">
                   <div class="title">人员信息</div>
-                  <div class="mask" @click="close()"></div>
+                  <div class="mask" id='monitoring${index}'></div>
                 </div>
                 <div class="person-main">
                   <div class="person-info">
@@ -297,7 +297,7 @@ export default {
                     <div class="position">执法1队队员</div>
                   </div>
                   <div class="btns">
-                    <div @click="getRoute()">行程轨迹</div>
+                    <div id='personClick${index}'>行程轨迹</div>
                     <div>附近队员</div>
                     <div>位置分享</div>
                     <div>任务派发</div>
@@ -310,7 +310,7 @@ export default {
               }
             ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            // this.markerClick(marker)
+            this.markerClick(marker,index)
           }
         } else if(this.actionMap == 2) {
           let marker
@@ -321,7 +321,7 @@ export default {
               <div class="event-popup">
                 <div class="event-title">
                   <div class="title">事件信息</div>
-                  <div class="mask" @click="close()"></div>
+                  <div class="mask" id='monitoring${index}'></div>
                 </div>
                 <div class="event-main">
                   <div class="event-info">
@@ -344,7 +344,7 @@ export default {
                     <div class="name">描述：</div>
                     <div class="position">XXXXXXXXXXXXXX</div>
                   </div>
-                  <div class="btn" @click="zhipai()">
+                  <div class="btn" id="zhipai${index}">
                     指派
                   </div>
                 </div>
@@ -355,14 +355,14 @@ export default {
               }
             ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            // this.markerClick(marker)
+            this.markerClick(marker,index)
           } else if(item.properties.name == "重点事件"){
             marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup(
               `
               <div class="event-popup">
                 <div class="event-title">
                   <div class="title">事件信息</div>
-                  <div class="mask" @click="close()"></div>
+                  <div class="mask" id='monitoring${index}'></div>
                 </div>
                 <div class="event-main">
                   <div class="event-info">
@@ -385,7 +385,7 @@ export default {
                     <div class="name">描述：</div>
                     <div class="position">XXXXXXXXXXXXXX</div>
                   </div>
-                  <div class="btn" @click="zhipai()">
+                  <div class="btn" id="zhipai${index}">
                     指派
                   </div>
                 </div>
@@ -396,7 +396,7 @@ export default {
               }
             ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            // this.markerClick(marker)
+            this.markerClick(marker,index)
           }
         } else if(this.actionMap == 3) {
           if(item.properties.name == "执法车辆"){
@@ -405,7 +405,7 @@ export default {
               <div class="car-popup">
                 <div class="car-title">
                   <div class="title">车辆信息</div>
-                  <div class="mask" @click="close()"></div>
+                  <div class="mask" id='monitoring${index}'></div>
                 </div>
                 <div class="car-main">
                   <div class="car-info">
@@ -413,7 +413,7 @@ export default {
                     <div class="name">执法一队1号车</div>
                     <div class="position">苏A568974</div>
                   </div>
-                  <div class="btn" @click="carinfo">行程轨迹</div>
+                  <div class="btn" id="carinfo${index}">行程轨迹</div>
                 </div>
               </div>
               `,
@@ -422,7 +422,7 @@ export default {
               }
             ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            // this.markerClick(marker)
+            this.markerClick(marker,index)
           }
         } else if(this.actionMap == 4) {
           if(item.properties.name == "监控视频"){
@@ -431,14 +431,14 @@ export default {
               <div class="monitoring-popup">
                 <div class="monitoring-title">
                   <div class="title">监控视频</div>
-                  <div class="mask" id='monitoring' onclick="close()"></div>
+                  <div class="mask" id='monitoring${index}'></div>
                 </div>
                 <div class="monitoring">
                   <div class="bg">
                     <img src="@/assets/images/popup/screenshot20230817.png" alt="">
                   </div>
                   <div class="btns">
-                    <div class="btn" @click="monitoringInfo()">上墙</div>
+                    <div class="btn" id="monitoringInfo${index}">上墙</div>
                     <div class="btn">转发</div>
                   </div>
                 </div>
@@ -449,31 +449,59 @@ export default {
               }
             ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker)
+            this.markerClick(marker,index)
           }
         }
         
       })
     },
-    markerClick(marker){
-      console.log(document.getElementById('monitoring'))
-      document.getElementById('monitoring').onclick=function(){
-        console.log('123123')
-      }
-      // marker.on('click', e => {
-      //   console.log(e);
-      //   this.mypoint = e.containerPoint;
-      //   if(this.actionMap == 1) {
-      //     // this.personPopup = true;
+    markerClick(marker,index){
+      
+      // document.getElementsByName('monitoring').addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
+			// 	console.log("点击");
+			// })
+      console.log(marker)
+      marker.on('click', e => {
+        console.log(e);
+        this.$nextTick(()=>{
+          document.querySelector('#monitoring' + index).addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
+            marker.closePopup();
+          })
+          if(this.actionMap == 1) {
+            document.querySelector('#personClick' + index).addEventListener("click",()=>{
+              this.$refs.personageTrack.open('person');
+            })
+          } else if(this.actionMap == 2) {
+            document.querySelector('#zhipai' + index).addEventListener("click",()=>{
+              this.$refs.crewAssign.open();
+            })
+            // document.querySelector('#zhipai2' + index).addEventListener("click",()=>{
+            //   this.$refs.crewAssign.open();
+            // })
+          } else if(this.actionMap == 3) {
+            document.querySelector('#carinfo' + index).addEventListener("click",()=>{
+              this.$refs.personageTrack.open('car');
+            })
+          } else if(this.actionMap == 4){
+            document.querySelector('#monitoringInfo' + index).addEventListener("click",()=>{
+              this.$refs.videoWall.open();
+            })
+          }
+          
+         
+        })
+        // this.mypoint = e.containerPoint;
+        // if(this.actionMap == 1) {
+        //   // this.personPopup = true;
 
-      //   } else if(this.actionMap == 2) {
-      //     // this.eventPopup = true;
-      //   } else if(this.actionMap == 3) {
-      //     // this.carPopup = true
-      //   } else if(this.actionMap == 4){
-      //     // this.monitoringPopup = true;
-      //   }
-      // })
+        // } else if(this.actionMap == 2) {
+        //   // this.eventPopup = true;
+        // } else if(this.actionMap == 3) {
+        //   // this.carPopup = true
+        // } else if(this.actionMap == 4){
+        //   // this.monitoringPopup = true;
+        // }
+      })
     },
     personClose(){
       this.personPopup = false;
@@ -487,18 +515,18 @@ export default {
     monitoringClose(){
       this.monitoringPopup = false;
     },
-    personzhipai(){
-      this.$refs.crewAssign.open();
-    },
-    presoninfo(){
-      this.$refs.personageTrack.open('person');
-    },
-    carinfo(){
-      this.$refs.personageTrack.open('car');
-    },
-    monitoringInfo(){
-      this.$refs.videoWall.open();
-    },
+    // personzhipai(){
+    //   this.$refs.crewAssign.open();
+    // },
+    // presoninfo(){
+    //   this.$refs.personageTrack.open('person');
+    // },
+    // carinfo(){
+    //   this.$refs.personageTrack.open('car');
+    // },
+    // monitoringInfo(){
+    //   this.$refs.videoWall.open();
+    // },
     addLayer2(){
       this.mapLayers.mapLayer2.clearLayers()
       let geojson = L.geoJSON(detachment1,{
@@ -631,7 +659,7 @@ export default {
     leftAnimation(){
       setTimeout(()=>{
         this.leftAnimationData = !this.leftAnimationData;
-      },1000)
+      },800)
       this.$emit('leftAnimationAction')
     },
     rightAnimation(){