Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution

src/App.vue

@@ -21,6 +21,24 @@
 .el-message__icon,.el-message__content{
 		font-size: 16px !important;
 }
+.BMap_bubble_pop{
+  color: #fff !important;
+  height:220px !important;
+  padding:0 !important;
+  background-image: url(@/assets/images/infowindow_bg.png) !important;
+  background-color: transparent !important;
+  background-repeat: no-repeat;
+  border: 0 !important;
+  img{
+    display: none !important;
+  }
+}
+.BMap_bubble_buttons{
+  div{
+    color:#fff !important;
+    font-size:0.4rem !important;
+  }
+}
 .BMap_cpyCtrl,.anchorBL{
   opacity: 0 !important;
 }

src/views/components/carMile.vue

@@ -2,10 +2,10 @@
   <div class="mile_warp">
     <table class="table_box">
       <colgroup>
-        <col width="20%"/>
+        <col width="20%" />
-        <col width="30%"/>
+        <col width="30%" />
-        <col width="25%"/>
+        <col width="25%" />
-        <col width="25%"/>
+        <col width="25%" />
       </colgroup>
       <thead>
         <tr>
@@ -16,20 +16,25 @@
         </tr>
       </thead>
     </table>
-    <div style="width:100%;height:4.5rem;overflow-y:auto;">
+    <div style="width:100%;height:1.5rem;overflow-y:auto;">
       <table class="table_box">
         <colgroup>
-          <col width="20%"/>
+          <col width="20%" />
-          <col width="30%"/>
+          <col width="30%" />
-          <col width="25%"/>
+          <col width="25%" />
-          <col width="25%"/>
+          <col width="25%" />
         </colgroup>
         <tbody>
           <tr v-for="(item, index) in carMile" :key="'car' + index">
-            <td>{{ index+ 1}}</td>
+            <td>
-            <td title="点击定位到该车辆位置" @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
+              <div>{{ index+ 1}}</div>
-            <td>{{ item.mile }}</td>
+            </td>
-            <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
+            <td title="点击定位到该车辆位置" @click="queryMap(item)">
+              <div style="cursor:pointer;">{{ item.cardNo }}</div>
+            </td>
+            <td><div>{{ item.mile }}</div></td>
+            <td><a class="btn_path" :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`"
+                target="_blank">查询</a></td>
           </tr>
         </tbody>
       </table>
@@ -52,12 +57,13 @@ export default {
   methods: {
     //定位
     queryMap(item) {
-      this.$emit('doMap',item);
+      this.$emit('doMap', item);
     },
     //昨日里程
     queryYesterdayMile() {
       lunzApi.getYesterdayMile(key).then(res => {
         let resData = res.Data;
+        if (resData && resData != undefined) {
           this.carList.map(item => {
             let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
             item.mile = idx > -1 ? res.Data[idx].Mile : 0;
@@ -66,6 +72,7 @@ export default {
           this.carMile.sort((a, b) => {
             return b.mile - a.mile;
           })
+        }
       })
     },
   },
@@ -80,17 +87,104 @@ export default {
 
   .table_box {
     width: 100%;
+    margin-top: 0.15rem;
+
+    thead {
+      font-style: italic;
+      height: 0.38rem;
+      background: url(~@/assets/img/tab_bg.png);
+      background-size: 100% 100%;
+
+      td {
+        color: #fff;
+        font-family: "FZSK";
+        font-size: 0.16rem;
+      }
+    }
+
+    tbody {
 
       tr {
         td {
-        font-size: 0.18rem;
           color: #fff;
+          font-size: 0.14rem;
           padding: 0.08rem 0;
         }
+
+        &:nth-child(1) {
+          td {
+            padding-top: 0;
+          }
+
+          background: url(~@/assets/img/tab1.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #fceece,
+                #e39054);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
           }
-    a{
+        }
-      color:#0e94ea;
+
+        &:nth-child(2) {
+          background: url(~@/assets/img/tab2.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #cefce7,
+                #16da85);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+
+        &:nth-child(3) {
+          background: url(~@/assets/img/tab3.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #cef6fc,
+                #1ca4f2);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+      }
+
+      .btn_path {
+        display: inline-block;
+        width: 0.6rem;
+        color: #ffffff;
+        font-size: 0.14rem;
+        font-style: italic;
+        line-height: 0.2rem;
+        text-align: center;
+        border-radius: 0.1rem 0.08rem 0.1rem 0.08rem;
         text-decoration: none;
+        background-color: #16da85;
+      }
     }
   }
 }

src/views/components/carWarn.vue

@@ -87,13 +87,32 @@ export default {
 
   .table_box {
     width: 100%;
+    margin-top: 0.15rem;
 
+    thead {
+      font-style: italic;
+      height: 0.38rem;
+      background: url(~@/assets/img/tab_bg.png);
+      background-size: 100% 100%;
+
+      td {
+        color: #fff;
+        font-family: "FZSK";
+        font-size: 0.16rem;
+      }
+    }
+
+    tbody {
       tr {
         td {
-        font-size: 0.18rem;
           color: #fff;
+          font-size: 0.14rem;
           padding: 0.08rem 0;
         }
+        &:nth-child(1) td{
+          padding-top:0;
+        }
+      }
     }
   }
 }

src/views/components/pathMap.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="map_warp">
+  <div id="container" style="width:100%;height:100%;"></div>
-    <div id="container" style="width:100%;height:100%"></div>
-  </div>
 </template>
 
 <script>
-import { lunzApi, appKey, key, carList } from "@/api/data";
+import { lunzApi, appKey, key, carList, styleJson } from "@/api/data";
 import { dateFormat } from "@/util/date";
 export default {
   data() {
@@ -21,6 +19,7 @@ export default {
       markList: [],//标注点记录
       polyline: null,//昨日轨迹
       viewData: [],//点聚合坐标集合
+      // endPointMarker:null,//轨迹终点标记
     }
   },
   beforeDestroy() {
@@ -43,14 +42,22 @@ export default {
     });
   },
   methods: {
+    //回到原中心点
+    backMap() {
+      var point = new BMapGL.Point(118.880278, 35.649947);
+      this.baiduMap.centerAndZoom(point, 11);
+    },
     initMap() {
       this.baiduMap = new BMapGL.Map('container');
       var point = new BMapGL.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
       this.baiduMap.enableScrollWheelZoom(true);
+      // this.baiduMap.setMapStyleV2({
+      //   styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
+      // });
       this.baiduMap.setMapStyleV2({
-        styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
+        styleJson
-      });
+      })
       // this.view = new mapvgl.View({
       //   map: this.baiduMap
       // });
@@ -70,6 +77,10 @@ export default {
           //   isPoiMask: true,
           //   isMapMask: true,
           //   showRegion: 'inside',
+          //   topFillColor: '#5679ea',
+          //   topFillOpacity: 0.5,
+          //   sideFillColor: '#5679ea',
+          //   sideFillOpacity: 0.9
           // });
           // this.baiduMap.addOverlay(mapmask);
           var border = new BMapGL.Polyline(ptArr, {
@@ -139,15 +150,17 @@ export default {
           //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
           // })
           this.markList.push(marker);
-          let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
+          let sContent = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;">
-                            <div>车牌号：${carNo}</div>
+                            <div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;">
-                            <div>设备位置：${res2.Data}</div>
+                              <div style="color: #ffffff;margin-right:15px;">${carNo}</div>
-                            <div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
+                              <div style="display:inline-block;color:${res.Data.SbcStatus==3?"#ffffff":"#062766"};background:${res.Data.SbcStatus==3?"#1dd58e":"#9ab3c6"};width:50px;height:24px;line-height:24px;text-align:center;border-radius:12px;font-size:16px;">${this.locationStatus[res.Data.SbcStatus]}</div>
-                            <div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
+                              <div style="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${res.Data.spd}km/h</div>  
-                            <div>时速：${res.Data.spd}km/h</div>
+                            </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 style="display:flex;margin-bottom:10px;"><div style="color: #ffffff;width:80px;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
+                            <div style="display:flex;"><div style="color: #ffffff;width:100px;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
+                            <div style="text-align:center;margin:15px 0 0;"> <div style="display: inline-block;width:88px;height:30px;line-height:30px;border-radius: 15px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:18px;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
                         </div>`;
-          let infoWindow = new BMapGL.InfoWindow(sContent);
+          let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220});
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
             document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@@ -248,8 +261,19 @@ export default {
           this.baiduMap.removeOverlay(this.polyline);
           this.polyline = null;
         }
-        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, })
+        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
         this.baiduMap.addOverlay(this.polyline);
+        //终点标注maker
+        if(this.endPointMarker){
+          this.baiduMap.removeOverlay(this.endPointMarker);
+          this.endPointMarker = null;
+        }
+        // var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
+        // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
+        //     icon: myIcon
+        // });
+        // console.log('最后一个坐标',point[point.length-1])
+        // this.baiduMap.addOverlay(this.endPointMarker);
         this.baiduMap.centerAndZoom(point[0], 15);
         this.baiduMap.closeInfoWindow();
         // this.polyline = new BMapGL.Polyline(point, {