From cbc0cdf271210d6ec1ff04e591ddbf9e7c5b10f7 Mon Sep 17 00:00:00 2001
From: xuechunyuan <17853500702@163.com>
Date: Wed, 1 Feb 2023 09:18:24 +0800
Subject: [PATCH] =?UTF-8?q?infowindow=E5=BC=B9=E6=A1=86=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E8=87=AA=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |   4 +-
 src/views/components/pathMap.vue | 173 ++++++++++++++++++++++++++-----
 2 files changed, 151 insertions(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8aa9197..adac81e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,8 +33,8 @@
     background-color: transparent !important;
   }
   div:nth-child(9){
-    top: 0.1rem !important;
-    left: 0.1rem !important;
+    top:0.1rem !important;
+    left:0.1rem !important;
   }
 
   img {
diff --git a/src/views/components/pathMap.vue b/src/views/components/pathMap.vue
index 80f9401..66c38b8 100644
--- a/src/views/components/pathMap.vue
+++ b/src/views/components/pathMap.vue
@@ -1,9 +1,31 @@
 <template>
-  <div id="container" style="width:100%;height:100%;"></div>
+  <div style="position:relative;width:100%;height:100%;">
+    <div id="container" style="width:100%;height:100%;"></div>
+    <!-- 信息弹框 -->
+    <div v-if="infoShow" class="infoPop">
+      <div class="close_act" @click="infoShow = false" title="关闭">x</div>
+      <div class="base_info">
+        <div>{{ infoWindowObj.carNo }}</div>
+        <div :class="infoWindowObj.obj.SbcStatus == 3 ? 'car_status on' : 'car_status'">{{ locationStatus[infoWindowObj.obj.SbcStatus] }}</div>
+        <div class="car_speed">{{ infoWindowObj.obj.spd }}km/h</div>
+      </div>
+      <div class="flex_box">
+        <div>设备位置：</div>
+        <div style="width:2.5rem;text-align: left;">{{ infoWindowObj.position }}</div>
+      </div>
+      <div class="flex_box">
+        <div>最后定位时间：</div>
+        <div>{{ infoWindowObj.obj.GPSTimeStamp }}</div>
+      </div>
+      <div class="path_box">
+        <div class="path_btn">行程轨迹</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { lunzApi, appKey, key, carList, styleJson } from "@/api/data";
+import { lunzApi, appKey, key, carList } from "@/api/data";
 import { dateFormat } from "@/util/date";
 export default {
   data() {
@@ -20,6 +42,12 @@ export default {
       polyline: null,//昨日轨迹
       viewData: [],//点聚合坐标集合
       // endPointMarker:null,//轨迹终点标记
+      infoWindowObj: {
+        obj: {
+          SbcStatus: 2
+        }
+      },//
+      infoShow: false,
     }
   },
   beforeDestroy() {
@@ -44,6 +72,8 @@ export default {
     backMap() {
       var point = new BMap.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
+      // this.baiduMap.closeInfoWindow();
+      this.infoShow = false;
     },
     initMap() {
       var point = new BMap.Point(118.880278, 35.649947);
@@ -158,29 +188,37 @@ export default {
           //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
           // })
           this.markList.push(marker);
-          let sContent = `<div style="width:3.57rem;font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.1rem;">
-                            <div id="close_${deviceId}" style="display:inline-block;color:#fff;font-size:0.16rem;font-weight:bold;width:0.18rem;line-height:0.18rem;cursor:pointer;text-align:center;float:right;">x</div>
-                            <div style="display:flex;align-items:center;margin-bottom:0.15rem;font-style: italic;font-size:0.2rem;font-family: FZSK;">
-                              <div style="color: #ffffff;margin-right:0.1rem;">${carNo}</div>
-                              <div style="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e !important" : "#9ab3c6 !important"};width:0.65rem;text-align:center;border-radius:100px;font-size:0.16rem;padding:0.04rem 0;">${this.locationStatus[res.Data.SbcStatus]}</div>
-                              <div style="margin-left:0.35rem;color: #fff;font-style: italic;font-size:0.2rem;margin-right:0.15rem;">${res.Data.spd}km/h</div>  
-                            </div>
-                            <div style="display:flex;margin-bottom:0.1rem;max-width:3.5rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
-                            <div style="display:flex;"><div style="color: #ffffff;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
-                            <div style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <div style="display: inline-block;width:0.88rem;border-radius: 100px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89 !important;font-size:0.16rem;font-weight:bold;padding:0.04rem 0;" id="btnPath_${deviceId}">行车轨迹</div></div>
-                        </div>`;
-          let infoWindow = new BMap.InfoWindow(sContent, { width: 367, height: 220 });
-          // marker添加点击事件
-          infoWindow.addEventListener('open', () => {
-            document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
-              this.queryPath(deviceId)
-            })
-            document.getElementById('close_' + deviceId).addEventListener('click', () => {
-              this.baiduMap.closeInfoWindow();
-            })
-          });
+          res.Data.GPSTimeStamp = res.Data.GPSTimeStamp.replace("T", " ");
+          
+          // let sContent = `<div style="width:3.57rem;font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.1rem;">
+          //                   <div id="close_${deviceId}" style="display:inline-block;color:#fff;font-size:0.16rem;font-weight:bold;width:0.18rem;line-height:0.18rem;cursor:pointer;text-align:center;float:right;">x</div>
+          //                   <div style="display:flex;align-items:center;margin-bottom:0.15rem;font-style: italic;font-size:0.2rem;font-family: FZSK;">
+          //                     <div style="color: #ffffff;margin-right:0.1rem;">${carNo}</div>
+          //                     <div style="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e !important" : "#9ab3c6 !important"};width:0.65rem;text-align:center;border-radius:100px;font-size:0.16rem;padding:0.04rem 0;">${this.locationStatus[res.Data.SbcStatus]}</div>
+          //                     <div style="margin-left:0.35rem;color: #fff;font-style: italic;font-size:0.2rem;margin-right:0.15rem;">${res.Data.spd}km/h</div>  
+          //                   </div>
+          //                   <div style="display:flex;margin-bottom:0.1rem;max-width:3.5rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
+          //                   <div style="display:flex;"><div style="color: #ffffff;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
+          //                   <div style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <div style="display: inline-block;width:0.88rem;border-radius: 100px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89 !important;font-size:0.16rem;font-weight:bold;padding:0.04rem 0;" id="btnPath_${deviceId}">行车轨迹</div></div>
+          //               </div>`;
+          // let infoWindow = new BMap.InfoWindow(sContent, { width: 367, height: 220 });
+          // // marker添加点击事件
+          // infoWindow.addEventListener('open', () => {
+          //   document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
+          //     this.queryPath(deviceId)
+          //   })
+          //   document.getElementById('close_' + deviceId).addEventListener('click', () => {
+          //     this.baiduMap.closeInfoWindow();
+          //   })
+          // });
           marker.addEventListener('click', () => {
-            this.openInfo(infoWindow, pt);
+            this.infoWindowObj = {
+              carNo: carNo,
+              obj: res.Data,
+              position: res2.Data
+            }
+            this.infoShow = true;
+            // this.openInfo(infoWindow, pt);
           });
         })
 
@@ -279,4 +317,91 @@ export default {
   height: 100%;
   overflow: hidden;
 }
+
+.infoPop {
+  position: absolute;
+  width: 3.67rem;
+  height: 2.2rem;
+  color: #fff;
+  font-size: 0.14rem;
+  line-height: 0.2rem;
+  left: 50%;
+  top: 50%;
+  margin: -1.1rem 0 0 -1.835rem;
+  background: url(@/assets/images/infowindow_bg.png) no-repeat;
+  background-size: 100% 100%;
+
+  div {
+    color: #fff;
+  }
+
+  .close_act {
+    text-align: right;
+    padding: 0.2rem 0.2rem 0;
+    cursor: pointer;
+  }
+
+  .base_info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.15rem;
+    color: #fff;
+    font-style: italic;
+    font-size: 0.2rem;
+    font-family: FZSK;
+    padding: 0 0.2rem;
+
+    .car_status {
+      display: inline-block;
+      color: #062766;
+      background: #9ab3c6;
+      width: 0.65rem;
+      text-align: center;
+      border-radius: 100px;
+      font-size: 0.16rem;
+      padding: 0.04rem 0;
+      margin-left:0.15rem;
+
+      &.on {
+        color: #ffffff;
+        background: #1dd58e;
+      }
+    }
+
+    .car_speed {
+      margin-left: 0.35rem;
+      margin-right: 0.15rem;
+    }
+  }
+
+  .flex_box {
+    display: flex;
+    padding: 0 0.2rem;
+    margin-bottom:0.1rem;
+  }
+
+  .path_box {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0.15rem;
+
+    .path_btn {
+      display: inline-block;
+      width: 0.88rem;
+      border-radius: 100px;
+      text-align: center;
+      color: #1b2f57;
+      font-style: italic;
+      font-family: FZSK;
+      cursor: pointer;
+      background: #facd89;
+      font-size: 0.16rem;
+      font-weight: bold;
+      padding: 0.04rem 0;
+      margin: 0 auto;
+    }
+  }
+}
 </style>
\ No newline at end of file