feat(device): baidu map

.env

@@ -38,5 +38,8 @@ VUE_APP_MQTT_PASSWORD = 'inspur-frontend'
 # {protocol}://{gateway | host}{proxy}
 VUE_APP_CAMERA_PROXY = '/prod-api/websocket'
 
-# user
+# user default password
 VUE_APP_USER_PASSWORD = '111111'
+
+# baidu
+VUE_APP_BAIDU_MAP_AK = 'pXRq1aj9zuZlacGvU261cKgfyYroGWsf'

package.json

@@ -25,6 +25,7 @@
     "path-to-regexp": "^6.2.0",
     "spark-md5": "^3.0.2",
     "vue": "^2.6.11",
+    "vue-baidu-map": "^0.21.22",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"

src/views/device/detail/components/DeviceInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-info">
+  <div class="l-flex--col c-info">
     <div class="l-flex--row has-bottom-padding u-bold">
       <span class="c-sibling-item">设备信息</span>
       <span
@@ -55,6 +55,10 @@
         <div class="l-flex__fill c-info__value primary">{{ device.address }}</div>
       </div>
     </div>
+    <device-map
+      class="l-flex__auto o-baidu-map"
+      :device="device"
+    />
     <confirm-dialog
       ref="editDialog"
       title="编辑"
@@ -68,29 +72,31 @@
           maxlength="50"
           clearable
         />
-        <span class="c-grid-form__label required">经度：</span>
+        <span class="c-grid-form__label required">地址：</span>
+        <el-input
+          v-model.trim="info.address"
+          placeholder="最多100个字符"
+          maxlength="100"
+          clearable
+        />
+        <span class="c-grid-form__label">经度：</span>
         <div class="l-flex--row c-grid-form__option">
           <el-input
             v-model.trim="info.longitude"
             class="l-flex__fill c-sibling-item"
             placeholder="-180 ~ +180"
             maxlength="13"
+            clearable
           />
-          <span class="c-sibling-item far c-grid-form__label required">纬度：</span>
+          <span class="c-sibling-item far c-grid-form__label">纬度：</span>
           <el-input
             v-model.trim="info.latitude"
             class="l-flex__fill c-sibling-item"
             placeholder="-90 ~ +90"
             maxlength="12"
+            clearable
           />
         </div>
-        <span class="c-grid-form__label required">地址：</span>
-        <el-input
-          v-model.trim="info.address"
-          placeholder="最多100个字符"
-          maxlength="100"
-          clearable
-        />
       </div>
     </confirm-dialog>
   </div>
@@ -103,11 +109,13 @@ import {
   validLongitude,
   validLatitude
 } from '@/utils/validate'
+import DeviceMap from './DeviceMap'
 import ContentProtection from './external/ContentProtection'
 
 export default {
   name: 'DeviceInfo',
   components: {
+    DeviceMap,
     ContentProtection
   },
   props: {
@@ -147,26 +155,21 @@ export default {
         })
         return
       }
-      if (!validLongitude(this.info.longitude)) {
+      if (this.info.longitude && !validLongitude(this.info.longitude)) {
         this.$message({
           type: 'warning',
           message: '经度格式错误，-180 ~ +180'
         })
         return
       }
-      if (!validLatitude(this.info.latitude)) {
+      if (this.info.latitude && !validLatitude(this.info.latitude)) {
         this.$message({
           type: 'warning',
           message: '纬度格式错误，-90 ~ +90'
         })
         return
       }
-      if (
-        this.info.name === this.device.name
-        && this.info.longitude === this.device.longitude
-        && this.info.latitude === this.device.latitude
-        && this.info.address === this.device.address
-      ) {
+      if (Object.keys(this.info).every(key => this.info[key] === this.device[key])) {
         done()
         return
       }
@@ -181,3 +184,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.o-baidu-map {
+  min-height: 300px;
+  max-height: 600px;
+}
+</style>

src/views/device/detail/components/DeviceMap.vue

@@ -0,0 +1,61 @@
+<template>
+  <baidu-map
+    v-if="center"
+    :ak="ak"
+    :center="center"
+    :zoom="19"
+    :dragging="false"
+    :keyboard="false"
+  >
+    <bm-marker
+      :position="center"
+      @click="show = true"
+    >
+      <bm-info-window
+        :show="show"
+        @open="show = true"
+        @close="show = false"
+      >
+        {{ device.address }}
+      </bm-info-window>
+    </bm-marker>
+  </baidu-map>
+</template>
+
+<script>
+import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
+import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
+import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
+
+export default {
+  name: 'DeviceMap',
+  components: {
+    BaiduMap,
+    BmMarker,
+    BmInfoWindow
+  },
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      ak: process.env.VUE_APP_BAIDU_MAP_AK,
+      show: false
+    }
+  },
+  computed: {
+    center () {
+      const { longitude, latitude } = this.device
+      return longitude && latitude
+        ? {
+          lng: Number(longitude),
+          lat: Number(latitude)
+        }
+        : null
+    }
+  }
+}
+</script>

src/views/realm/device/Device.vue

@@ -39,29 +39,31 @@
           maxlength="17"
           clearable
         />
-        <span class="c-grid-form__label required">经度：</span>
+        <span class="c-grid-form__label required">地址：</span>
+        <el-input
+          v-model.trim="currObj.address"
+          placeholder="最多100个字符"
+          maxlength="100"
+          clearable
+        />
+        <span class="c-grid-form__label">经度：</span>
         <div class="l-flex--row c-grid-form__option">
           <el-input
             v-model.trim="currObj.longitude"
             class="l-flex__fill c-sibling-item"
             placeholder="-180 ~ +180"
             maxlength="13"
+            clearable
           />
-          <span class="c-sibling-item far c-grid-form__label required">纬度：</span>
+          <span class="c-sibling-item far c-grid-form__label">纬度：</span>
           <el-input
             v-model.trim="currObj.latitude"
             class="l-flex__fill c-sibling-item"
             placeholder="-90 ~ +90"
             maxlength="12"
+            clearable
           />
         </div>
-        <span class="c-grid-form__label required">地址：</span>
-        <el-input
-          v-model.trim="currObj.address"
-          placeholder="最多100个字符"
-          maxlength="100"
-          clearable
-        />
       </div>
     </confirm-dialog>
     <bind-device-dialog
@@ -278,14 +280,14 @@ export default {
         })
         return false
       }
-      if (!validLongitude(item.longitude)) {
+      if (item.longitude && !validLongitude(item.longitude)) {
         this.$message({
           type: 'warning',
           message: '经度格式错误，-180 ~ +180'
         })
         return false
       }
-      if (!validLatitude(item.latitude)) {
+      if (item.latitude && !validLatitude(item.latitude)) {
         this.$message({
           type: 'warning',
           message: '纬度格式错误，-90 ~ +90'

yarn.lock

@@ -2495,6 +2495,33 @@ bluebird@^3.1.1, bluebird@^3.5.0, bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+bmaplib.curveline@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz#826eb0bf1c59fad1b23142be66fc360cf009aea2"
+  integrity sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==
+
+bmaplib.heatmap@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz#30161262771fe78af35705ff92457725de5d9850"
+  integrity sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==
+
+bmaplib.lushu@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz#77c17dcf7148d30c46e8430c7ff86b20e418b8b8"
+  integrity sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w==
+
+bmaplib.markerclusterer@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz#442d71a6c40844ee47d01f6db2166b54530b5bd1"
+  integrity sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==
+  dependencies:
+    bmaplib.texticonoverlay "^1.0.2"
+
+bmaplib.texticonoverlay@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz#d78546ea0f036d9fe964983796315b6c112a05bf"
+  integrity sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
@@ -4376,7 +4403,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-entities@^1.1.1:
+entities@^1.1.1, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
@@ -6639,6 +6666,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^9.5.0:
   version "9.5.0"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-9.5.0.tgz#290ec605252af646d9b74d73a0fa118362b05a33"
@@ -6945,6 +6979,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^8.4.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6964,6 +7009,11 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -10163,6 +10213,11 @@ typescript@^4.4.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
   integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -10434,6 +10489,17 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-baidu-map@^0.21.22:
+  version "0.21.22"
+  resolved "https://registry.yarnpkg.com/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz#6b76a91ef34f18a782d732ab0f541a1a3aa069e0"
+  integrity sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==
+  dependencies:
+    bmaplib.curveline "^1.0.0"
+    bmaplib.heatmap "^1.0.4"
+    bmaplib.lushu "^1.0.7"
+    bmaplib.markerclusterer "^1.0.13"
+    markdown-it "^8.4.0"
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"