feat: 在线地图key配置

core/backend/src/main/java/io/dataease/controller/sys/SystemParameterController.java

@@ -4,6 +4,7 @@ package io.dataease.controller.sys;
 import io.dataease.commons.constants.ParamConstants;
 import io.dataease.commons.utils.LogUtil;
 import io.dataease.controller.ResultHolder;
+import io.dataease.controller.sys.request.OnlineMapKeyRequest;
 import io.dataease.controller.sys.response.BasicInfo;
 import io.dataease.controller.sys.response.MailInfo;
 import io.dataease.dto.SystemParameterDTO;
@@ -170,4 +171,8 @@ public class SystemParameterController {
         return systemParameterService.onlineMapKey();
     }
 
+    @PostMapping("/saveMapKey")
+    public void saveOnlineKey(@RequestBody OnlineMapKeyRequest request) {
+        systemParameterService.saveMapKey(request.getKey());
+    }
 }

core/backend/src/main/java/io/dataease/controller/sys/request/OnlineMapKeyRequest.java

@@ -0,0 +1,10 @@
+package io.dataease.controller.sys.request;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class OnlineMapKeyRequest implements Serializable {
+    public String key;
+}

core/backend/src/main/java/io/dataease/service/system/SystemParameterService.java

@@ -57,8 +57,6 @@ public class SystemParameterService {
         return extSystemParameterMapper.email();
     }
 
-    @Value("${dataease.mapkey:}")
-    private String mapKey;
 
     public BasicInfo basicInfo() {
         List<SystemParameter> paramList = this.getParamList("basic");
@@ -414,7 +412,26 @@ public class SystemParameterService {
     }
 
     public String onlineMapKey() {
-        return mapKey;
+        return getValue("map.key");
+    }
+
+    public void saveMapKey(String key) {
+        String paramKey = "map.key";
+        SystemParameterExample example = new SystemParameterExample();
+        example.createCriteria().andParamKeyEqualTo(paramKey);
+        List<SystemParameter> systemParameters = systemParameterMapper.selectByExample(example);
+        if (CollectionUtils.isNotEmpty(systemParameters)) {
+            SystemParameter systemParameter = systemParameters.get(0);
+            systemParameter.setParamValue(key);
+            systemParameterMapper.updateByExample(systemParameter, example);
+            return;
+        }
+        SystemParameter record = new SystemParameter();
+        record.setParamKey(paramKey);
+        record.setParamValue(key);
+        record.setType("text");
+        record.setSort(1);
+        systemParameterMapper.insert(record);
     }
 
 }

core/frontend/src/api/map/map.js

@@ -42,3 +42,20 @@ export function removeMap(data) {
     data
   })
 }
+
+export function saveMapKey(data) {
+  return request({
+    url: '/system/saveMapKey',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function queryMapKey() {
+  return request({
+    url: '/system/onlineMapKey',
+    method: 'get',
+    loading: true
+  })
+}

core/frontend/src/lang/en.js

@@ -2936,5 +2936,10 @@ export default {
     confirm_title: 'Forced login will cause other clients to go offline',
     confirm: 'Whether to force login?',
     forced_offline: '`The current account is logged in on the client [${ip}],and you have been pushed off the line!`'
+  },
+  online_map: {
+    geometry: 'Geometry',
+    onlinemap: 'Online map',
+    empty_desc: 'No map key'
   }
 }

core/frontend/src/lang/tw.js

@@ -2929,5 +2929,10 @@ export default {
     confirm_title: '強行登錄會導致其他客戶端掉線',
     confirm: '是否強行登錄？',
     forced_offline: '`當前賬號在客戶端【${ip}】登錄，您已被擠下線！`'
+  },
+  online_map: {
+    geometry: '地理信息',
+    onlinemap: '在線地圖',
+    empty_desc: '暫無在線地圖key'
   }
 }

core/frontend/src/lang/zh.js

@@ -2929,5 +2929,10 @@ export default {
     confirm_title: '强行登录会导致其他客户端掉线',
     confirm: '是否强行登录？',
     forced_offline: '`当前账号在客户端【${ip}】登录，您已被挤下线！`'
+  },
+  online_map: {
+    geometry: '地理信息',
+    onlinemap: '在线地图',
+    empty_desc: '暂无在线地图key'
   }
 }

core/frontend/src/views/system/sysParam/MapSetting/Geometry.vue

@@ -0,0 +1,108 @@
+<template>
+  <de-container
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    class="de-earth"
+  >
+    <div class="de-map-tips">
+      <el-alert
+        :title="$t('map_setting.prohibit_prompts')"
+        type="warning"
+        description=""
+        :closable="false"
+        show-icon
+      />
+    </div>
+    <de-aside-container
+      type="mapset"
+      class="map-setting-aside"
+    >
+      <map-setting-left
+        ref="map_setting_tree"
+        :tree-data="treeData"
+        @emit-add="emitAdd"
+        @refresh-tree="refreshTree"
+        @show-node-info="loadForm"
+      />
+    </de-aside-container>
+
+    <de-main-container
+      class="map-setting-main"
+    >
+      <map-setting-right
+        ref="map_setting_form"
+        :tree-data="treeData"
+        :status="formStatus"
+        @refresh-tree="refreshTree"
+      />
+    </de-main-container>
+  </de-container>
+</template>
+
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import { areaMapping } from '@/api/map/map'
+import MapSettingLeft from './MapSettingLeft'
+import MapSettingRight from './MapSettingRight'
+export default {
+  name: 'MapSetting',
+  components: { DeMainContainer, DeContainer, DeAsideContainer, MapSettingLeft, MapSettingRight },
+  data() {
+    return {
+      formStatus: 'empty',
+      treeData: []
+    }
+  },
+  created() {
+    this.loadTreeData()
+  },
+  methods: {
+    emitAdd(form) {
+      this.setStatus(form.status)
+      this.$refs['map_setting_form']?.emitAdd(form)
+    },
+
+    loadForm(nodeInfo) {
+      this.setStatus(nodeInfo.status)
+      this.$refs['map_setting_form']?.loadForm(nodeInfo)
+    },
+
+    setStatus(status) {
+      this.formStatus = status
+    },
+    loadTreeData() {
+      !Object.keys(this.treeData).length && areaMapping().then(res => {
+        this.treeData = res.data
+      })
+    },
+    refreshTree(node) {
+      areaMapping().then(res => {
+        this.treeData = res.data
+        if (!node?.code) return
+        this.$refs['map_setting_tree']?.showNewNode(node.code)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.de-earth {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .de-map-tips {
+    position: absolute;
+    width: calc(100% - 310px);
+  }
+  .map-setting-aside {
+    top: 50px;
+    height: calc(100% - 50px) !important;
+  }
+  .map-setting-main {
+    margin-top: 50px;
+    height: calc(100% - 50px);
+  }
+}
+</style>

core/frontend/src/views/system/sysParam/MapSetting/OnlineMap.vue

@@ -0,0 +1,198 @@
+<template>
+  <el-container
+    v-loading="loading"
+    class="online-map-container"
+  >
+    <el-aside class="aside-form">
+      <div class="form-title">
+        <span>{{ $t('online_map.onlinemap') }}</span>
+      </div>
+
+      <div class="online-form-item">
+        <span class="form-label">Key</span>
+        <el-input
+          v-model="key"
+          size="small"
+        />
+      </div>
+      <el-button
+        type="primary"
+        :disabled="!key"
+        @click="saveHandler"
+      >{{ $t('commons.save') }}</el-button>
+    </el-aside>
+    <el-divider
+      direction="vertical"
+      class="online-divider"
+    />
+    <el-main class="main-content">
+      <div
+        v-show="mapLoaded"
+        v-if="!mapReloading"
+        :id="domId"
+        class="map-gaode-demo"
+      />
+      <el-empty
+        v-if="!mapLoaded"
+        :description="$t('online_map.empty_desc')"
+      />
+    </el-main>
+  </el-container>
+</template>
+<script>
+import { saveMapKey, queryMapKey } from '@/api/map/map'
+export default {
+  name: 'OnlineMap',
+  data() {
+    return {
+      key: '',
+      secret: '',
+      mapLoaded: false,
+      mapInstance: null,
+      domId: 'qwertyuiop',
+      mapReloading: false,
+      loading: false
+    }
+  },
+  mounted() {
+    this.initLoad()
+  },
+
+  methods: {
+    loadMap() {
+      if (!this.key) {
+        return
+      }
+      const mykey = this.key
+      const url = `https://webapi.amap.com/maps?v=2.0&key=${mykey}`
+
+      this.loadScript(url).then(res => {
+        if (this.mapInstance) {
+          this.mapInstance.destroy()
+          this.mapInstance = null
+          this.mapReloading = true
+          setTimeout(() => {
+            this.domId = this.domId + '-de-'
+            this.mapReloading = false
+            this.$nextTick(() => {
+              this.createMapInstance()
+            })
+          }, 1500)
+
+          return
+        }
+        this.createMapInstance()
+      }).catch(e => {
+        if (this.mapInstance) {
+          this.mapInstance.destroy()
+          this.mapInstance = null
+        }
+        console.error(e)
+      })
+    },
+    createMapInstance() {
+      this.mapInstance = new window.AMap.Map(this.domId, {
+        viewMode: '2D',
+        zoom: 11,
+        center: [116.397428, 39.90923]
+      })
+      this.mapLoaded = true
+    },
+    saveHandler() {
+      this.loading = true
+      saveMapKey({ key: this.key }).then(() => {
+        this.$message({
+          message: this.$t('commons.save_success'),
+          type: 'success',
+          showClose: true
+        })
+        this.initLoad()
+      }).catch(e => {
+        console.error(e)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    initLoad() {
+      console.log('map load ...')
+      queryMapKey().then(res => {
+        this.key = res.data
+        this.loadMap()
+      }).catch(e => {
+        console.error(e)
+      })
+    },
+    loadScript(url) {
+      return new Promise(function(resolve, reject) {
+        const scriptId = 'de-gaode-script-id'
+        let dom = document.getElementById(scriptId)
+        if (dom) {
+          dom.parentElement.removeChild(dom)
+          dom = null
+          window.AMap = null
+          // return resolve()
+        }
+        var script = document.createElement('script')
+
+        script.id = scriptId
+        script.onload = function() {
+          return resolve()
+        }
+        script.onerror = function() {
+          return reject(new Error('Load script from '.concat(url, ' failed')))
+        }
+        script.src = url
+        var head = document.head || document.getElementsByTagName('head')[0];
+        (document.body || head).appendChild(script)
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.online-map-container {
+    height: 100%;
+    .online-divider {
+      height: calc(100% - 139px);
+      position: absolute;
+      top: 112px;
+      margin: 0 0 0 330px;
+    }
+    .aside-form {
+        width: 320px !important;
+        padding: 0 10px;
+        height: 100%;
+        .form-title {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 24px;
+            color: #1F2329;
+            margin-bottom: 10px;
+        }
+        .online-form-item {
+            font-size: 14px;
+            .form-title {
+                font-weight: 400;
+                color: 1F2329;
+                line-height: 22px;
+            }
+            height: 62px;
+            margin-bottom: 10px;
+        }
+    }
+    .main-content {
+        width: 100%;
+        height: 100%;
+        margin-left: 13px;
+        .map-gaode-demo {
+            width: 100%;
+            height: 100%;
+            .de-map-iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+        }
+    }
+}
+</style>

core/frontend/src/views/system/sysParam/MapSetting/index.vue

@@ -1,109 +1,88 @@
 <template>
-  <de-container
+  <el-container class="map-setting-container">
-    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    <el-aside class="map-setting-left">
-    class="de-earth"
+      <div class="left-container">
-    style="height: calc(100vh - 200px);"
-  >
-    <div class="de-map-tips">
-      <el-alert
-        :title="$t('map_setting.prohibit_prompts')"
-        type="warning"
-        description=""
-        :closable="false"
-        show-icon
-      />
-    </div>
-    <de-aside-container
-      type="mapset"
-      class="map-setting-aside"
-    >
-      <map-setting-left
-        ref="map_setting_tree"
-        :tree-data="treeData"
-        @emit-add="emitAdd"
-        @refresh-tree="refreshTree"
-        @show-node-info="loadForm"
-      />
-    </de-aside-container>
 
-    <de-main-container
+        <div
-      class="map-setting-main"
+          v-for="(item, index) in leftOptions"
-    >
+          :key="item.id"
-      <map-setting-right
+          class="left-menu-item"
-        ref="map_setting_form"
+          :class="{'active': activeIndex === item.id}"
-        :tree-data="treeData"
+          @click="selectHandler(index)"
-        :status="formStatus"
+        >
-        @refresh-tree="refreshTree"
+          <span>{{ $t(item.name) }}</span>
-      />
+        </div>
-    </de-main-container>
+      </div>
-  </de-container>
+    </el-aside>
+    <el-main class="map-setting-right">
+      <div class="right-container">
+        <OnlineMap v-if="activeIndex" />
+        <geometry v-else />
+      </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-import DeMainContainer from '@/components/dataease/DeMainContainer'
+import Geometry from './Geometry'
-import DeContainer from '@/components/dataease/DeContainer'
+import OnlineMap from './OnlineMap'
-import DeAsideContainer from '@/components/dataease/DeAsideContainer'
-import { areaMapping } from '@/api/map/map'
-import MapSettingLeft from './MapSettingLeft'
-import MapSettingRight from './MapSettingRight'
 export default {
   name: 'MapSetting',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, MapSettingLeft, MapSettingRight },
+  components: { Geometry, OnlineMap },
   data() {
     return {
-      formStatus: 'empty',
+      leftOptions: [
-      treeData: []
+        { id: 0, name: 'online_map.geometry' },
+        { id: 1, name: 'online_map.onlinemap' }
+      ],
+      activeIndex: 0
     }
   },
-  created() {
-    this.loadTreeData()
-  },
   methods: {
-    emitAdd(form) {
+    selectHandler(index) {
-      this.setStatus(form.status)
+      this.activeIndex = index
-      this.$refs['map_setting_form']?.emitAdd(form)
-    },
-
-    loadForm(nodeInfo) {
-      this.setStatus(nodeInfo.status)
-      this.$refs['map_setting_form']?.loadForm(nodeInfo)
-    },
-
-    setStatus(status) {
-      this.formStatus = status
-    },
-    loadTreeData() {
-      !Object.keys(this.treeData).length && areaMapping().then(res => {
-        this.treeData = res.data
-      })
-    },
-    refreshTree(node) {
-      areaMapping().then(res => {
-        this.treeData = res.data
-        if (!node?.code) return
-        this.$refs['map_setting_tree']?.showNewNode(node.code)
-      })
     }
   }
 }
 </script>
-
 <style lang="scss" scoped>
-.de-earth {
+.map-setting-container {
-  padding: 24px;
   width: 100%;
-  overflow: auto;
+  height: 100%;
-  .de-map-tips {
+  padding-bottom: 0px !important;
-    position: absolute;
+  .map-setting-left {
-    width: calc(100% - 135px);
+    width: 200px !important;
+    height: calc(100% + 20px);
+    border-right: 1px solid #1f232926;
+    .left-container {
+      padding: 16px 16px 16px 16px;
+      width: 100%;
+      height: 100%;
+      .left-menu-item {
+        width: 168px;
+        height: 40px;
+        padding: 9px 8px;
+        line-height: 22px;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 400;
+        cursor: pointer;
+        &:hover {
+          background: #1f232926;
+        }
+      }
+      .active {
+        background: #3370FF1A;
+        color: #3370FF;
+        font-weight: 500;
+      }
+    }
   }
-  .map-setting-aside {
+  .map-setting-right {
-    top: 50px;
+    padding-bottom: 0 !important;
-    height: calc(100% - 40px) !important;
+    .right-container {
-  }
+      height: 100%;
-  .map-setting-main {
+    }
-    margin-top: 50px;
-    height: calc(100% - 50px);
   }
 }
 </style>