车辆列表更新,卸载echarts-gl

3 years ago · cd7cb942e9
parent 6a71a0c820
commit cd7cb942e9
6 changed files with 45 additions and 21 deletions
--- a/package.json
+++ b/package.json
@ -11,7 +11,6 @@
    "axios": "^1.2.2",
    "core-js": "^3.8.3",
    "echarts": "^5.4.1",
-    "echarts-gl": "^2.0.9",
    "element-ui": "^2.15.12",
    "highcharts": "^9.3.3",
    "js-cookie": "^3.0.1",
--- a/src/App.vue
+++ b/src/App.vue
@ -27,17 +27,21 @@

 .BMap_pop {
  margin-top: 0.5rem;
-  div{
+
+  div {
    border: 0 !important;
    background-color: transparent !important;
  }
-  div{
-    img{
+
+  div {
+    img {
      display: none;
    }
  }
-  .BMap_center{
+
+  .BMap_center {
    top: -0.2rem !important;
+    width:3.97rem !important;
    height: 2.2rem !important;
    background-image: url(@/assets/images/infowindow_bg.png) !important;
    background-color: transparent !important;
@ -45,6 +49,16 @@
    border: 0 !important;
    background-size: 100% 100% !important;
  }
+
+  img {
+    top: 0 !important;
+    width: 0.14rem !important;
+    height: 0.14rem !important;
+  }
+}
+
+.BMap_shadow {
+  display: none;
 }

 .BMap_bubble_pop {
--- a/src/api/data.js
+++ b/src/api/data.js
@ -1,7 +1,15 @@
 import request from '@/util/axios'

 //公参
-export const carList = [{ cardNo: '鲁LE990Z', deviceId: '41000001254', key: 'NDEwMDAwMDEyNTQ=' }, { cardNo: '鲁LD35633', deviceId: '41000001270', key: 'NDEwMDAwMDEyNzA=' }, ];
+export const carList = [
+    { cardNo: '鲁LT728K', deviceId: '41000001292', key: 'NDEwMDAwMDEyNTQ=' }, 
+    { cardNo: '鲁LR960V', deviceId: '41000001265', key: 'NDEwMDAwMDEyNTQ=' }, 
+    { cardNo: '鲁LB568X', deviceId: '41000001286', key: 'NDEwMDAwMDEyNTQ=' }, 
+    { cardNo: '鲁LX835N', deviceId: '41000001296', key: 'NDEwMDAwMDEyNTQ=' }, 
+    { cardNo: '鲁LF990N', deviceId: '41000001253', key: 'NDEwMDAwMDEyNTQ=' }, 
+    { cardNo: '鲁LD35633', deviceId: '41000001270', key: 'NDEwMDAwMDEyNTQ=' }, 
+    { cardNo: '鲁LE990Z', deviceId: '41000001254', key: 'NDEwMDAwMDEyNzA=' }, 
+];
 export const appKey = '69800851-4554-4EEC-8D12-E4211B952798';//轮子appkey
 export const key = '266843ed-5d4f-472c-beec-e5e50a114d47';//中瑞key

--- a/src/views/components/carMile.vue
+++ b/src/views/components/carMile.vue
@ -11,7 +11,7 @@
        <tr>
          <td>排名</td>
          <td>车牌号</td>
-          <td>昨日里程<br />(km/h)</td>
+          <td>昨日里程<br />(km)</td>
          <td>轨迹查询</td>
        </tr>
      </thead>
@ -110,6 +110,10 @@ export default {
          color: #fff;
          font-size: 0.14rem;
          padding: 0.08rem 0;
+          div{
+            color: #fff;
+            font-size: 0.14rem;
+          }
        }

        &:nth-child(1) {
--- a/src/views/components/pathMap.vue
+++ b/src/views/components/pathMap.vue
@ -29,15 +29,13 @@ export default {
  beforeCreate() {
    clearInterval(this.setInterval);
  },
+  created() {
+  },
  mounted() {
    this.initMap();
    window.addEventListener('resize', () => {
-      // if (this.setInterval) {
-      //   clearInterval(this.setInterval);
-      // }
-      // this.initMap();
      if (this.baiduMap) {
-        this.baiduMap.centerAndZoom(point, 11);
+        this.backMap();
      }
    });
  },
@ -56,7 +54,7 @@ export default {
        this.baiduMap = new BMap.Map('container');
        this.baiduMap.centerAndZoom(point, 11);
        this.baiduMap.enableScrollWheelZoom(true);
-        this.baiduMap.setMapStyle({style:'midnight'});
+        this.baiduMap.setMapStyle({ style: 'midnight' });
        // this.baiduMap.setMapStyleV2({
        //   styleJson: styleJson
        // })
@ -111,7 +109,9 @@ export default {
        this.queryLunz(item.deviceId, item.key, item.cardNo, index);
      })
      clearInterval(this.setInterval);
+      let timer = 0;
      this.setInterval = setInterval(() => {
+        console.log(timer++)
        // this.view.removeAllLayers();
        this.markList.map(mark => {
          this.baiduMap.removeOverlay(mark);
@ -161,12 +161,12 @@ export default {
          let sContent = `<div style="font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.25rem;">
                            <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;height:0.24rem;line-height:0.24rem;text-align:center;border-radius:0.12rem;font-size:0.16rem;">${this.locationStatus[res.Data.SbcStatus]}</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.2rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</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;height:0.3rem;line-height:0.3rem;border-radius: 0.15rem;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89 !important;font-size:0.18rem;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</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.18rem;font-weight:bold;padding:0.06rem 0;" id="btnPath_${deviceId}">行车轨迹</div></div>
                        </div>`;
          let infoWindow = new BMap.InfoWindow(sContent, { width: 367, height: 220 });
          // marker添加点击事件
@ -255,10 +255,10 @@ export default {
      }
      param = {
        "IMEI": deviceId,
-        "StartDateTime":dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
-        "EndDateTime":dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
-        "MaxValues":500,
-        "LocType":1
+        "StartDateTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
+        "EndDateTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
+        "MaxValues": 500,
+        "LocType": 1
      }
      lunzApi.getLocationsByImei2(this.appKey, param).then(res => {
        if (res.Data == null) {
--- a/src/views/dashboard/home.vue
+++ b/src/views/dashboard/home.vue
@ -234,7 +234,6 @@ HighchartsMore(Highcharts);
 HighchartsDrilldown(Highcharts);
 Highcharts3D(Highcharts);
 Highmaps(Highcharts);
-import "echarts-gl";
 import axios from "axios";
 import * as XLSX from "xlsx/xlsx.mjs";
 import Swiper from "swiper";