feat: coordinate convert

.env

@@ -53,8 +53,10 @@ VUE_APP_USER_PASSWORD = '1fc3fdb8d13bd4e2d1336f6dd377ee4f'
 VUE_APP_SALT = '42857cfddb33f3fddb27fff9773683f3'
 
 # gaode
-VUE_APP_GAODE_MAP_KEY = '9c499e7000d066c05de9af8556a890f7'
-VUE_APP_GAODE_MAP_JSCODE = 'e7b3c29a5112657edcc688a3c589bd15'
+# VUE_APP_GAODE_MAP_KEY = '9c499e7000d066c05de9af8556a890f7'
+# VUE_APP_GAODE_MAP_JSCODE = 'e7b3c29a5112657edcc688a3c589bd15'
+VUE_APP_GAODE_MAP_KEY = 'd450b58ff3a620e5eaf477e29c7ea94c'
+VUE_APP_GAODE_MAP_JSCODE = '92a333ddc89042aee3e3459162f0abe6'
 
 VUE_APP_AD_ORDER_QR = 'https://msr.inspur.com'
 

src/components/dialog/CoordinateDialog/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <confirm-dialog
+    ref="confirmDialg"
+    title="坐标拾取"
+    v-bind="$attrs"
+    @confirm="onConfirm"
+  >
+    <div class="c-grid-form u-align-self--center">
+      <span class="c-grid-form__label">来源</span>
+      <schema-select
+        v-model="info.type"
+        :schema="typeSelectSchema"
+      />
+      <span class="c-grid-form__label" />
+      <div class="c-grid-form__option">
+        <div class="l-flex--row c-sibling-item--v">
+          <span class="c-sibling-item c-grid-form__label u-required">经度</span>
+          <el-input
+            v-model.trim="info.longitude"
+            class="c-sibling-item u-width--xs"
+            placeholder="-180 ~ +180"
+            maxlength="13"
+          />
+          <span class="c-sibling-item far c-grid-form__label u-required">纬度</span>
+          <el-input
+            v-model.trim="info.latitude"
+            class="c-sibling-item far u-width--xs"
+            placeholder="-90 ~ +90"
+            maxlength="12"
+          />
+        </div>
+        <a
+          class="c-sibling-item--v nearer o-link"
+          href="https://lbs.amap.com/tools/picker"
+          target="_blank"
+        >
+          高德地图拾取器（需登录提升精度）
+        </a>
+        <a
+          class="c-sibling-item--v nearer o-link"
+          href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
+          target="_blank"
+        >
+          百度地图拾取器
+        </a>
+      </div>
+    </div>
+  </confirm-dialog>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+export default {
+  name: 'CoordinateDialog',
+  data () {
+    return {
+      info: {},
+      typeSelectSchema: {
+        options: [
+          { value: 'gd', label: '高德' },
+          { value: 'baidu', label: '百度' },
+          { value: 'gps', label: 'GPS' }
+        ]
+      }
+    }
+  },
+  methods: {
+    show (data) {
+      this.info = {
+        type: 'gd',
+        longitude: '',
+        latitude: '',
+        ...data
+      }
+      AMapLoader.load({
+        key: process.env.VUE_APP_GAODE_MAP_KEY,
+        version: '2.0',
+        plugins: ['']
+      }).then(AMap => {
+        this.$map = AMap
+      })
+      this.$refs.confirmDialg.show()
+    },
+    onConfirm (done) {
+      if (!this.info.longitude) {
+        this.$message({
+          type: 'warning',
+          message: '请填写经度'
+        })
+        return
+      }
+      if (!this.info.latitude) {
+        this.$message({
+          type: 'warning',
+          message: '请填写纬度'
+        })
+        return
+      }
+      if (this.info.type === 'gd') {
+        this.$emit('confirm', {
+          value: {
+            longitude: this.info.longitude,
+            latitude: this.info.latitude
+          },
+          done
+        })
+      } else {
+        if (!this.$map) {
+          this.$message({
+            type: 'warning',
+            message: '转换坐标失败，请关闭后重试'
+          })
+          return
+        }
+        this.$map.convertFrom([this.info.longitude, this.info.latitude], this.info.type, (status, result) => {
+          console.log('coordinate', result)
+          if (result.info === 'ok') {
+            this.$emit('confirm', {
+              value: {
+                longitude: result.locations[0].lng,
+                latitude: result.locations[0].lat
+              },
+              done
+            })
+          } else {
+            this.$message({
+              type: 'warning',
+              message: '转换坐标失败，请稍后重试'
+            })
+          }
+        })
+      }
+    }
+  }
+}
+</script>

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

@@ -97,7 +97,7 @@
     >
       <template #default>
         <device-map
-          class="l-flex__auto"
+          class="l-flex__fill"
           :device="device"
         />
       </template>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="map"
-    class="o-device-map u-relative"
+    class="u-relative"
   >
     <i
       v-if="center"
@@ -49,9 +49,6 @@ export default {
   mounted () {
     this.center && this.initMap()
   },
-  activated () {
-    this.map?.setFitView(null, true)
-  },
   beforeDestroy () {
     this.map?.destroy()
   },
@@ -80,10 +77,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.o-device-map {
-  min-height: 90px;
-}
-
 .o-place {
   display: inline-flex;
   justify-content: center;

src/views/external/box/components/Device.vue

@@ -59,31 +59,19 @@
           show-word-limit
         />
         <span class="c-grid-form__label">坐标</span>
-        <div class="c-grid-form__option">
-          <div class="l-flex--row c-sibling-item--v">
-            <span class="c-sibling-item c-grid-form__label">经度</span>
-            <el-input
-              v-model.trim="currObj.longitude"
-              class="c-sibling-item u-width--xs"
-              placeholder="-180 ~ +180"
-              maxlength="13"
-            />
-            <span class="c-sibling-item far c-grid-form__label">纬度</span>
-            <el-input
-              v-model.trim="currObj.latitude"
-              class="c-sibling-item far u-width--xs"
-              placeholder="-90 ~ +90"
-              maxlength="12"
-            />
-          </div>
-          <a
-            class="c-sibling-item--v nearer o-link"
-            href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
-            target="_blank"
+        <div class="l-flex--row c-grid-form__option">
+          <span class="c-sibling-item">{{ currObj.longitude }},{{ currObj.latitude }}</span>
+          <i
+            class="c-sibling-item el-icon-edit u-color--blue has-active"
+            @click="onEditCoordinate"
           />
         </div>
       </div>
     </confirm-dialog>
+    <coordinate-dialog
+      ref="coordinateDialog"
+      @confirm="onChangeCoordinate"
+    />
     <mesh-dialog ref="meshDialog" />
   </schema-table>
 </template>
@@ -253,6 +241,18 @@ export default {
       }
       this.$refs.editDialog.show()
     },
+    onEditCoordinate () {
+      const { longitude, latitude } = this.currObj
+      this.$refs.coordinateDialog.show({
+        longitude,
+        latitude
+      })
+    },
+    onChangeCoordinate ({ value: { longitude, latitude }, done }) {
+      this.currObj.longitude = longitude
+      this.currObj.latitude = latitude
+      done()
+    },
     onSave (done) {
       if (this.check(this.currObj)) {
         const { range, ...data } = this.currObj

src/views/external/index.vue

@@ -32,31 +32,19 @@
           show-word-limit
         />
         <span class="c-grid-form__label">坐标</span>
-        <div class="c-grid-form__option">
-          <div class="l-flex--row c-sibling-item--v">
-            <span class="c-sibling-item c-grid-form__label">经度</span>
-            <el-input
-              v-model.trim="mesh.longitude"
-              class="c-sibling-item u-width--xs"
-              placeholder="-180 ~ +180"
-              maxlength="13"
-            />
-            <span class="c-sibling-item far c-grid-form__label">纬度</span>
-            <el-input
-              v-model.trim="mesh.latitude"
-              class="c-sibling-item far u-width--xs"
-              placeholder="-90 ~ +90"
-              maxlength="12"
-            />
-          </div>
-          <a
-            class="c-sibling-item--v nearer o-link"
-            href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
-            target="_blank"
+        <div class="l-flex--row c-grid-form__option">
+          <span class="c-sibling-item">{{ mesh.longitude }},{{ mesh.latitude }}</span>
+          <i
+            class="c-sibling-item el-icon-edit u-color--blue has-active"
+            @click="onEditCoordinate"
           />
         </div>
       </div>
     </confirm-dialog>
+    <coordinate-dialog
+      ref="coordinateDialog"
+      @confirm="onChangeCoordinate"
+    />
   </wrapper>
 </template>
 
@@ -124,6 +112,18 @@ export default {
       this.mesh = { meshId, name, address, longitude, latitude }
       this.$refs.editDialog.show()
     },
+    onEditCoordinate () {
+      const { longitude, latitude } = this.mesh
+      this.$refs.coordinateDialog.show({
+        longitude,
+        latitude
+      })
+    },
+    onChangeCoordinate ({ value: { longitude, latitude }, done }) {
+      this.mesh.longitude = longitude
+      this.mesh.latitude = latitude
+      done()
+    },
     onConfirm (done) {
       const mesh = this.mesh
       if (!mesh.name) {

src/views/realm/device/index.vue

@@ -50,31 +50,19 @@
           show-word-limit
         />
         <span class="c-grid-form__label">坐标</span>
-        <div class="c-grid-form__option">
-          <div class="l-flex--row c-sibling-item--v">
-            <span class="c-sibling-item c-grid-form__label">经度</span>
-            <el-input
-              v-model.trim="info.longitude"
-              class="c-sibling-item u-width--xs"
-              placeholder="-180 ~ +180"
-              maxlength="13"
-            />
-            <span class="c-sibling-item far c-grid-form__label">纬度</span>
-            <el-input
-              v-model.trim="info.latitude"
-              class="c-sibling-item far u-width--xs"
-              placeholder="-90 ~ +90"
-              maxlength="12"
-            />
-          </div>
-          <a
-            class="c-sibling-item--v nearer o-link"
-            href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
-            target="_blank"
+        <div class="l-flex--row c-grid-form__option">
+          <span class="c-sibling-item">{{ info.longitude }},{{ info.latitude }}</span>
+          <i
+            class="c-sibling-item el-icon-edit u-color--blue has-active"
+            @click="onEditCoordinate"
           />
         </div>
       </div>
     </confirm-dialog>
+    <coordinate-dialog
+      ref="coordinateDialog"
+      @confirm="onChangeCoordinate"
+    />
   </wrapper>
 </template>
 
@@ -254,6 +242,18 @@ export default {
       this.info = { id, name, range: [openTime ?? '07:00', closeTime ?? '22:00'], address, longitude, latitude }
       this.$refs.editDialog.show()
     },
+    onEditCoordinate () {
+      const { longitude, latitude } = this.info
+      this.$refs.coordinateDialog.show({
+        longitude,
+        latitude
+      })
+    },
+    onChangeCoordinate ({ value: { longitude, latitude }, done }) {
+      this.info.longitude = longitude
+      this.info.latitude = latitude
+      done()
+    },
     onSave (done) {
       const { id, name, range, longitude, address, latitude } = this.info
       if (!name) {