车辆定位

src/views/components/carMile.vue

@@ -27,7 +27,7 @@
         <tbody>
           <tr v-for="(item, index) in carMile" :key="'car' + index">
             <td>{{ index+ 1}}</td>
-            <td @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
+            <td title="点击定位到该车辆位置" @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
             <td>{{ item.mile }}</td>
             <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
           </tr>
@@ -52,7 +52,7 @@ export default {
   methods: {
     //定位
     queryMap(item) {
-      this.$emit('queryLunz')
+      this.$emit('doMap',item);
     },
     //昨日里程
     queryYesterdayMile() {

src/views/components/pathMap.vue

@@ -51,9 +51,9 @@ export default {
       this.baiduMap.setMapStyleV2({
         styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
       });
-      this.view = new mapvgl.View({
-        map: this.baiduMap
-      });
+      // this.view = new mapvgl.View({
+      //   map: this.baiduMap
+      // });
       var bdary = new BMapGL.Boundary();
       bdary.get("日照市莒县", rs => {
         var count = rs.boundaries.length;
@@ -84,11 +84,14 @@ export default {
       })
       this.baiduMap.addEventListener('tilesloaded', () => {
         this.carList.map((item, index) => {
+          this.markList.map(mark => {
+            this.baiduMap.removeOverlay(mark);
+          })
           this.markList = [];
           this.queryLunz(item.deviceId, item.key, item.cardNo, index);
         })
         this.setInterval = setInterval(() => {
-          this.view.removeAllLayers();
+          // this.view.removeAllLayers();
           this.markList.map(mark => {
             this.baiduMap.removeOverlay(mark);
           })
@@ -102,6 +105,15 @@ export default {
       })
 
     },
+    //单个设备定位聚焦放大
+    queryDingwei(deviceId) {
+      lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
+        let lng = res.Data.BaiduLng;
+        let lat = res.Data.BaiduLat;
+        let pt = new BMapGL.Point(lng, lat);
+        this.baiduMap.centerAndZoom(pt, 18);
+      })
+    },
     //查询定位
     queryLunz(deviceId, key, carNo, index) {
       // lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
@@ -133,13 +145,13 @@ export default {
                             <div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
                             <div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
                             <div>时速：${res.Data.spd}km/h</div>
-                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${key}">行车轨迹</div>
+                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${deviceId}">行车轨迹</div>
                         </div>`;
           let infoWindow = new BMapGL.InfoWindow(sContent);
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
-            document.getElementById('btnPath_' + key).addEventListener('click', () => {
-              this.queryPath(key)
+            document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
+              this.queryPath(deviceId)
             })
           });
           marker.addEventListener('click', () => {
@@ -221,6 +233,13 @@ export default {
         "MaxValue": 500
       }
       lunzApi.getLocationsByImei(this.key, param).then(res => {
+        if (res.Data == null) {
+          this.$message({
+            message: '未查询到今日行车轨迹',
+            type: 'warning'
+          });
+          return;
+        }
         let point = [];
         res.Data.map(item => {
           point.push(new BMapGL.Point(item.Lng, item.Lat));
@@ -231,6 +250,8 @@ export default {
         }
         this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, })
         this.baiduMap.addOverlay(this.polyline);
+        this.baiduMap.centerAndZoom(point[0], 15);
+        this.baiduMap.closeInfoWindow();
         // this.polyline = new BMapGL.Polyline(point, {
         //   strokeColor: '#F5533D',
         //   strokeWeight: 5,

src/views/dashboard/homepage.vue

@@ -43,8 +43,7 @@
                 <div class="table_con">
                   <div class="table_line" v-for="item1 in item.arr" :key="item1.no">
                     <div class="table_item" :class="item1.no <= 3 ? 'ac_no' : ''">
-                      {{ item1.no <= 3 ? "top" : "" }}
-                    </div>
+                      {{ item1.no <= 3 ? "top" : "" }} </div>
                         <div class="table_item">{{ item1.no }}</div>
                         <div class="table_item">{{ item1.name }}</div>
                         <div class="table_item">{{ item1.count }}</div>
@@ -109,7 +108,7 @@
           </div>
         </div>
         <div class="center_cen">
-        <PathMap></PathMap>
+          <PathMap ref="pathMap"></PathMap>
         </div>
         <div class="cen_bot">
           <div class="echarts">
@@ -146,7 +145,7 @@
           <div class="title_box">
             <div class="tit">车辆行驶里程</div>
           </div>
-        <CarMile></CarMile>
+          <CarMile @doMap="doMap"></CarMile>
         </div>
         <div class="right_bot">
           <div class="title_box">
@@ -286,6 +285,10 @@ export default {
     });
   },
   methods: {
+    //触发定位地图
+    doMap(item) {
+      this.$refs.pathMap.queryDingwei(item.deviceId);
+    },
     run() {
       this.mySwiper = new Swiper(".swiper1", {
         loop: true, // 循环模式选项
@@ -983,6 +986,7 @@ export default {
       padding: 0.1rem 0;
       font-weight: 500;
     }
+
     td {
       font-size: 0.18rem;
       color: #fff;
@@ -1043,6 +1047,7 @@ export default {
       height: 45%;
       margin: 0 auto;
       margin-top: 0.1rem;
+
       .title_box {
         width: 100%;
         height: 0.42rem;
@@ -1060,6 +1065,7 @@ export default {
           align-items: center;
           font-size: 0.2rem;
         }
+
         .right_tit {
           width: 65%;
           color: #fff;
@@ -1088,6 +1094,7 @@ export default {
               border-top-right-radius: 0.2rem;
               border-bottom-right-radius: 0.2rem;
             }
+
             &:first-child {
               border-top-left-radius: 0.2rem;
               border-bottom-left-radius: 0.2rem;
@@ -1099,6 +1106,7 @@ export default {
           }
         }
       }
+
       .cen_con {
         width: 100%;
         height: 89%;
@@ -1106,6 +1114,7 @@ export default {
         .swiper1 {
           width: 100%;
           height: 100%;
+
           .swiper-wrapper {
             width: 100%;
             height: 100%;
@@ -1140,6 +1149,7 @@ export default {
             align-items: center;
             color: #fff;
             font-size: 0.18rem;
+
             &:first-child {
               width: 5%;
             }
@@ -1159,12 +1169,14 @@ export default {
 
         table {
           width: 100%;
+
           tr {
             th {
               &:first-child {
                 width: 8%;
               }
             }
+
             .ac_no {
               width: 0.25rem;
               height: 0.2rem;
@@ -1204,6 +1216,7 @@ export default {
           padding-left: 0.4rem;
         }
       }
+
       .table_box {
         width: 100%;
         height: 88%;
@@ -1257,6 +1270,7 @@ export default {
           color: #fff;
         }
       }
+
       table {
         width: 100%;
 
@@ -1270,6 +1284,7 @@ export default {
               width: 40%;
             }
           }
+
           td {
             font-size: 0.18rem;
             color: #fff;
@@ -1279,6 +1294,7 @@ export default {
       }
     }
   }
+
   .center_box {
     width: 45%;
     height: 100%;
@@ -1297,6 +1313,7 @@ export default {
         font-size: 0.52rem;
       }
     }
+
     .cen_data {
       width: 100%;
       height: 15%;
@@ -1338,6 +1355,7 @@ export default {
             border-top-left-radius: 0.2rem;
             border-bottom-left-radius: 0.2rem;
           }
+
           .txt_right {
             border-top-right-radius: 0.2rem;
             border-bottom-right-radius: 0.2rem;
@@ -1347,6 +1365,7 @@ export default {
             background: #0e94ea;
           }
         }
+
         .right_time {
           width: 25%;
           height: 100%;
@@ -1385,6 +1404,7 @@ export default {
       height: 46%;
       background: red;
     }
+
     .cen_bot {
       width: 100%;
       height: 30%;
@@ -1394,10 +1414,12 @@ export default {
       .echarts {
         width: 50%;
         height: 100%;
+
         .map_box {
           width: 100%;
           height: 100%;
         }
+
         .trend_box {
           width: 100%;
           height: 100%;
@@ -1405,6 +1427,7 @@ export default {
       }
     }
   }
+
   .right_box {
     width: 30%;
     height: 100%;
@@ -1474,6 +1497,7 @@ export default {
               border-radius: 30%;
             }
           }
+
           .pie_txt {
             color: #fff;
             font-size: 0.18rem;
@@ -1487,6 +1511,7 @@ export default {
       height: 45%;
       // background: red;
       margin: 0 auto;
+
       .title_box {
         width: 100%;
         height: 0.42rem;
@@ -1510,6 +1535,7 @@ export default {
       height: 20%;
       // background: green;
       margin: 0 auto;
+
       .title_box {
         width: 100%;
         height: 0.42rem;

vue.config.js

@@ -21,7 +21,7 @@ module.exports = defineConfig({
         changeOrigin: true,
         ws: true,
         pathRewrite: {
-          '^/gatewayapi': ''
+          '/gatewayapi': ''
         }
       },
       '/weather': {