Merge branch 'master' of github.com:gcpaas/DataRoom

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -1,16 +1,9 @@
 <template>
   <div
-    style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
+    style="width: 100%; height: 100%"
   >
-    <el-button
+    <el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button>
-      v-if="level=='province'&&config.customize.down"
-      class="button"
-      type="text"
-      @click="jumpTo(config)"
-    >
-      返回上一级
-    </el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -23,6 +16,7 @@ import * as echarts from 'echarts'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+
 export default {
   name: 'MapCharts',
   mixins: [paramsMixins, commonMixins, linkageMixins],
@@ -38,6 +32,8 @@ export default {
   },
   data() {
     return {
+      currentDeep: 0,
+      mapList: [],
       charts: null,
       hasData: false,
       level: '',
@@ -77,7 +73,8 @@ export default {
           // 改变样式
           // config = this.changeStyle(res)
           this.newChart(config)
-        }).catch(() => {})
+        }).catch(() => {
+        })
       } else {
         // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
         this.changeData(config).then((res) => {
@@ -89,7 +86,10 @@ export default {
     dataFormatting(config, data) {
       const dataList = []
       data?.data?.forEach(item => {
-        dataList.push({ name: item[config.customize.name], value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]] })
+        dataList.push({
+          name: item[config.customize.name],
+          value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]]
+        })
       })
       config.option = {
         ...config.option,
@@ -98,31 +98,35 @@ export default {
       return config
     },
     async jumpTo(config) {
-      this.level = 'country'
+      this.currentDeep--
-      const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      let map = this.mapList[this.currentDeep]
-      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      // 移除mapList中的最后一个元素
-      this.option.geo.map = '中华人民共和国'
+      this.mapList.pop()
-      this.changeData({ ...config, customize: { ...config.customize, level: 'country', scope: '中国' } })
+      let mapData = JSON.parse(map.geoJson)
-      echarts.registerMap('中华人民共和国', map)
+      this.option.geo.map = map.name;
-      this.charts.setOption(this.option, true)
+      this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
+      echarts.registerMap(map.name, mapData);
+      this.charts.setOption(this.option, true);
     },
     async newChart(config) {
+      let center1 = config.customize.center1 ? config.customize.center1 + '%' : '50%'
+      let center2 = config.customize.center2 ? config.customize.center2 + '%' : '50%'
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
       )
       this.option = {
         // 背景颜色
         backgroundColor: config.customize.backgroundColor,
-        graphic: [
+        graphic: [],
-        ],
         geo: {
           map: config.customize.scope,
-          zlevel: 10,
+          zlevel: 9,
           show: true,
-          layoutCenter: ['50%', '50%'],
+          // 地图中心点位置
+          layoutCenter: [center1, center2],
           roam: true,
-          layoutSize: '100%',
+          layoutSize: "100%",
-          zoom: 1,
+          zoom: config.customize.zoom || 1,
           label: {
             // 通常状态下的样式
             normal: {
@@ -225,7 +229,7 @@ export default {
                 brushType: 'stroke'
               },
               hoverAnimation: true,
-                zlevel: 1,
+              zlevel: 11,
               // 这里渲染标志里的内容以及样式
               label: {
                 show: true,
@@ -280,21 +284,55 @@ export default {
           }
         }
       }
-      const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
+      let hasMapId = !!config.customize.mapId
-      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      // 根据mapId获取地图数据
+      let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
+      // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
+      if (!hasMapId) {
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      }
+      const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
+      const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
+      if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
+        // 没有上传过geoJson
+        this.$message({
+          message: '请先上传地图数据',
+          type: 'warning'
+        })
+        return
+      }
+      this.mapList.push(mapResp.data)
       echarts.registerMap(config.customize.scope, map)
       this.charts.setOption(this.option)
+      // 点击下钻
       this.charts.on('click', async (params) => {
         if (params.name == '') return
-        if (config.customize.down === false || this.level === 'province') return
+        if (!config.customize.down) {
-        this.level = 'province'
+          this.$message({
-        const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
+            message: '该地图未开启下钻',
-        const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+            type: 'warning'
-        this.changeData({ ...config, customize: { ...config.customize, level: 'province', scope: params.name } })
+          })
-        this.option.geo.map = params.name
+          return
-        echarts.registerMap(params.name, map)
+        }
-        this.charts.setOption(this.option, true)
+        // 到达允许下钻的层数，则不再下钻
+        if (this.currentDeep >= config.customize.downLevel) return
+        const downMapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
+        const downMap = await this.$dataRoomAxios.get(decodeURI(downMapUrl), {}, false)
+        // 地图不可用
+        if (downMap.available !== 1) {
+          this.$message({
+            message: '未找到该地图配置',
+            type: 'warning'
           })
+          return
+        }
+        this.currentDeep++
+        this.mapList.push(downMap)
+        this.changeData({...config, customize: {...config.customize, scope: params.name}})
+        this.option.geo.map = params.name
+        echarts.registerMap(params.name, JSON.parse(downMap.geoJson));
+        this.charts.setOption(this.option, true);
+      });
     }
   }
 }
@@ -302,16 +340,20 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/echartStyle';
+
 .light-theme {
   background-color: #ffffff;
   color: #000000;
 }
+
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+
 .bs-design-wrap {
   position: relative;
   padding: 0 16px;
+
   .button {
     position: absolute;
     z-index: 999;