fix(map): fix the problem that Baidu map on the home page is not disp…

…layed
dgiot · Apr 27, 2022 · 371d4b2 · 371d4b2
1 parent 9c62fc3
commit 371d4b2
Show file tree

Hide file tree

Showing 4 changed files with 251 additions and 286 deletions.
diff --git a/src/config/secret.config.js b/src/config/secret.config.js
@@ -11,7 +11,7 @@ module.exports = {
     //  百度相关
     baidu: {
       // 百度地图 Ak https://lbsyun.baidu.com/apiconsole/key#/home
-      map: 't9A84QM5lt6a3SMumuQOQtvM2spIQQ2A',
+      map: 'WpeAb6pL4tsX2ZVd56GHbO9Ut6c4HZhG',
       // 百度统计 https://tongji.baidu.com/web/homepage/index
       statistics: '',
     },

diff --git a/src/views/DeviceCloud/manage/js/editdevices.js b/src/views/DeviceCloud/manage/js/editdevices.js
@@ -949,7 +949,7 @@ export default {
       this.router = this.$dgiotBus.router(location.href + this.$route.fullPath)
       this.topicKey = this.$dgiotBus.topicKey(this.router, this.subtopic) // dgiot-mqtt topicKey 唯一标识
       // if (this.$route.query.deviceid) {
-      this.deviceid = deviceid
+      this.deviceid = query.deviceid
       this.subRealtimedata()
       this.initChart()
       window.addEventListener('resize', this.resizeTheChart)

diff --git a/src/views/DeviceCloud/manage/platform_overview.vue b/src/views/DeviceCloud/manage/platform_overview.vue
@@ -296,7 +296,7 @@
                   :center="center"
                   class="baidu_map"
                   :scroll-wheel-zoom="true"
-                  style="height: 600px"
+                  :style="{ height: mapHeight, width: mapWidth }"
                   :zoom="sizeZoom"
                 >
                   <bm-control>
@@ -688,6 +688,8 @@
       }
 
       return {
+        mapHeight: '800px',
+        mapWidth: '800px',
         polyline: {
           editing: false,
           paths: [],
@@ -698,9 +700,9 @@
           longitude: '120.260545',
           zoom: 15,
         },
-        mapType: window.name == 'dgiot_iframe' ? 'tencent' : 'baidu',
+        mapType: 'baidu',
         isShow: true,
-        ak: secret.baidu.map ?? 't9A84QM5lt6a3SMumuQOQtvM2spIQQ2A',
+        ak: secret.baidu.map ?? 'WpeAb6pL4tsX2ZVd56GHbO9Ut6c4HZhG',
         // ak: 'oW2UEhdth2tRbEE4FUpF9E5YVDCIPYih',
         // center:{ lng: 120.187273, lat: 30.334877 },
         center: { lng: 120.260545, lat: 31.551162 },
@@ -822,9 +824,23 @@
         _role: 'acl/role',
         _mimg: 'dashboard/_mimg',
         mqttInfo: 'mqttDB/mqttInfo',
+        treeFlag: 'settings/treeFlag',
       }),
     },
     watch: {
+      treeFlag: {
+        handler: function (newVal) {
+          if (newVal) {
+            this.mapHeight = window.innerHeight * 0.8 + 'px'
+            this.mapWidth = window.innerWidth * 0.77 + 'px'
+          } else {
+            this.mapHeight = window.innerHeight * 0.8 + 'px'
+            this.mapWidth = window.innerWidth * 0.98 + 'px'
+          }
+        },
+        deep: true,
+        limit: true,
+      },
       topicKey: {
         handler: function (newVal) {
           this.$dgiotBus.$off(newVal)
@@ -848,6 +864,7 @@
     },
     created() {},
     mounted() {
+      this.initMapHeight()
       setTimeout(() => {
         queryParams.forEach((e) => {
           let key = e.vuekey
@@ -863,6 +880,12 @@
       this.queryForm.account =
         this.language == 'zh' ? '全部产品' : 'All Products'
       this.initDgiotMqtt()
+      window.onresize = () => {
+        return (() => {
+          this.mapHeight = window.innerHeight * 0.8 + 'px'
+          this.mapWidth = window.innerWidth * 0.98 + 'px'
+        })()
+      }
     },
     activated() {
       // dgiotlog.log('keep-alive生效')
@@ -872,6 +895,10 @@
       this.resizeTheChart()
     },
     methods: {
+      initMapHeight() {
+        this.mapHeight = window.innerHeight * 0.8 + 'px'
+        this.mapWidth = window.innerWidth * 0.98 + 'px'
+      },
       /**
        *
        * @param BMap
@@ -1467,7 +1494,9 @@
       }
 
       .baidu_map {
-        height: calc(78vh - 20px);
+        height: calc(98vh - 20px);
+        width: 100%;
+        display: block;
       }
 
       margin: 8px;