feat(视图-地图): 地图增加区域名称映射配置

frontend/src/components/canvas/custom-component/UserView.vue

@@ -759,6 +759,7 @@ export default {
 
     setDetailMapCode(code) {
       this.element.DetailAreaCode = code
+      bus.$emit('set-dynamic-area-code', code)
       return true
     },
 

frontend/src/lang/en.js

@@ -2282,5 +2282,12 @@ export default {
     fileplaceholder: 'Please upload the JSON format coordinate file',
     delete_confirm: 'And child nodes will be deleted. Confirm to execute ?',
     cur_node: 'Current node'
+  },
+  map_mapping: {
+    map: 'Map',
+    attr: 'Attribute',
+    empty: 'Empty',
+    please_select_map: 'Please select a range of map'
   }
+
 }

frontend/src/lang/tw.js

@@ -2291,5 +2291,11 @@ export default {
     fileplaceholder: '請上傳json格式坐標文件',
     delete_confirm: '及子節點都會被刪除，確認執行？',
     cur_node: '當前節點'
+  },
+  map_mapping: {
+    map: '圖形',
+    attr: '屬性',
+    empty: '無數據',
+    please_select_map: '請先選擇地圖範圍'
   }
 }

frontend/src/lang/zh.js

@@ -2303,5 +2303,11 @@ export default {
     fileplaceholder: '请上传json格式坐标文件',
     delete_confirm: '及子节点都会被删除，确认执行？',
     cur_node: '当前节点'
+  },
+  map_mapping: {
+    map: '图形',
+    attr: '属性',
+    empty: '无数据',
+    please_select_map: '请先选择地图范围'
   }
 }

frontend/src/views/chart/chart/map/map.js

@@ -2,7 +2,7 @@
 import { componentStyle, reverseColor } from '../common/common'
 import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
-export function baseMapOption(chart_option, chart, themeStyle) {
+export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
   // 处理shape attr
   let customAttr = {}
   if (chart.customAttr) {
@@ -91,7 +91,7 @@ export function baseMapOption(chart_option, chart, themeStyle) {
       if (chart.senior) {
         const senior = JSON.parse(chart.senior)
 
-        senior && senior.mapMapping && (chart_option.series[0].nameMap = senior.mapMapping)
+        senior && senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.series[0].nameMap = senior.mapMapping[curAreaCode])
       }
     }
   }

frontend/src/views/chart/components/ChartComponent.vue

@@ -257,7 +257,7 @@ export default {
         const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
         if (this.$store.getters.geoMap[cCode]) {
           const json = this.$store.getters.geoMap[cCode]
-          this.initMapChart(json, chart)
+          this.initMapChart(json, chart, cCode)
           return
         }
 
@@ -266,7 +266,7 @@ export default {
             key: cCode,
             value: res
           }).then(() => {
-            this.initMapChart(res, chart)
+            this.initMapChart(res, chart, cCode)
           })
         })
         return
@@ -277,15 +277,22 @@ export default {
     registerDynamicMap(areaCode) {
       this.dynamicAreaCode = areaCode
     },
-
+    formatGeoJson(geoGson) {
-    initMapChart(geoJson, chart) {
+      geoGson.features.forEach(feature => {
+        Object.keys(feature.properties).forEach(property => {
+          feature.properties[property.toLocaleLowerCase()] = feature.properties[property]
+        })
+      })
+    },
+    initMapChart(geoJson, chart, curAreaCode) {
+      this.formatGeoJson(geoJson)
       this.$echarts.registerMap('MAP', geoJson)
       const base_json = JSON.parse(JSON.stringify(BASE_MAP))
       let themeStyle = null
       if (this.themeStyle) {
         themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
       }
-      const chart_option = baseMapOption(base_json, chart, themeStyle)
+      const chart_option = baseMapOption(base_json, chart, themeStyle, curAreaCode)
       this.myEcharts(chart_option)
       const opt = this.myChart.getOption()
       if (opt && opt.series) {

frontend/src/views/chart/components/senior/MapMapping.vue

@@ -8,13 +8,13 @@
       :row-style="{height:0+'px'}"
     >
       <el-table-column
-        label="图形"
+        :label="$t('map_mapping.map')"
         prop="mapArea"
         width="160"
         show-overflow-tooltip
       />
       <el-table-column
-        label="属性"
+        :label="$t('map_mapping.attr')"
         width="50"
       >
         <template slot-scope="scope">
@@ -39,7 +39,7 @@
       </el-table-column>
       <el-table-column align="right">
 
-        <template slot="header">
+        <template slot="header" slot-scope="scope">
           <el-input
             v-model="keyWord"
             size="mini"
@@ -48,6 +48,8 @@
         </template>
 
       </el-table-column>
+
+      <el-empty slot="empty" :description="!!currentAreaCode ? $t('map_mapping.empty'): $t('map_mapping.please_select_map')"></el-empty>
     </el-table>
     <div class="mapping-pagination">
       <el-pagination
@@ -65,13 +67,19 @@
 </template>
 
 <script>
-
+import {
+  geoJson
+} from '@/api/map/map'
 export default {
   name: 'FunctionCfg',
   props: {
     chart: {
       type: Object,
       required: true
+    },
+    dynamicAreaCode: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -79,7 +87,6 @@ export default {
       mappingForm: {},
 
       keyWord: '',
-      dynamicAreaCode: '',
       gridList: [],
       currentPage: 1,
       pageSize: 10,
@@ -98,7 +105,38 @@ export default {
       handler: function() {
         this.buildGridList()
       }
+    },
+    'dynamicAreaCode': {
+      handler: function(val, old) {
+        if(val !== old) {
+          this.$nextTick(() => {
+            this.initData()
+          })
+          
         }
+      }
+    }
+  },
+  computed: {
+    chartId() {
+      return this.chart.id
+    },
+    currentAreaCode() {
+      
+      if(this.dynamicAreaCode) {
+        return this.dynamicAreaCode
+      }
+      const customAttr = this.chart.customAttr
+      if(!customAttr) return ''
+      let attr = null
+      if((typeof customAttr) === 'string' ) {
+        attr = JSON.parse(customAttr)
+      } else {
+        attr = JSON.parse(JSON.stringify(customAttr))
+      }
+      return attr.areaCode
+    }
+    
   },
   mounted() {
     this.initData()
@@ -112,7 +150,7 @@ export default {
     },
     finishEdit(row) {
       row.isEdit = false
-      this.mappingForm[row.mapArea] = row.attrArea
+      this.mappingForm[this.currentAreaCode][row.mapArea] = row.attrArea
       this.changeMapping()
     },
 
@@ -134,7 +172,7 @@ export default {
         } else {
           senior = JSON.parse(chart.senior)
         }
-        if (senior.mapMapping) {
+        if (senior.mapMapping && senior.mapMapping[this.currentAreaCode]) {
           this.mappingForm = senior.mapMapping
         } else {
           this.initMapping()
@@ -143,10 +181,12 @@ export default {
       }
     },
     buildGridList() {
-      this.gridList = Object.keys(this.mappingForm).map(key => {
+      this.currentDatas = []
+      if(!this.currentAreaCode || !this.mappingForm[this.currentAreaCode])return
+      this.gridList = Object.keys(this.mappingForm[this.currentAreaCode]).map(key => {
         return {
           mapArea: key,
-          attrArea: this.mappingForm[key] || key
+          attrArea: this.mappingForm[this.currentAreaCode][key] || key
         }
       })
       const baseDatas = JSON.parse(JSON.stringify(this.gridList))
@@ -162,18 +202,32 @@ export default {
       this.total = tempDatas.length
     },
     initMapping() {
-      const chart = JSON.parse(JSON.stringify(this.chart))
+      const innerCallBack = (json, cCode) => {
-      const customAttr = JSON.parse(chart.customAttr)
+        const features = json.features
-      const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
+        if(!this.mappingForm) {
+          this.mappingForm = {}
+        }
+        if(!this.mappingForm[cCode]) {
+          this.mappingForm[cCode] = {}
+        }
+        
+        features.forEach(feature => {
+          this.mappingForm[cCode][feature.properties.name || feature.properties.NAME] = null
+        })
+      }
+      const cCode = this.currentAreaCode
       if (this.$store.getters.geoMap[cCode]) {
         const json = this.$store.getters.geoMap[cCode]
-        const features = json.features
+        innerCallBack(json, cCode)
-        this.mappingForm = {}
-        features.forEach(feature => {
-          this.mappingForm[feature.properties.name] = null
-        })
       } else {
-        this.$warning('请先选择地图范围')
+        geoJson(cCode).then(res => {
+          this.$store.dispatch('map/setGeo', {
+            key: cCode,
+            value: res
+          }).then(() => {
+            innerCallBack(res, cCode)
+          })
+        })
       }
     },
     changeMapping() {

frontend/src/views/chart/view/ChartEdit.vue

@@ -764,14 +764,15 @@
 
               <el-row v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')">
 
-                <span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
+                <span v-if="false" class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
-                <el-collapse v-model="attrActiveNames" class="style-collapse">
+                <el-collapse v-model="mapActiveNames" class="style-collapse">
 
-                  <el-collapse-item title="地名映射">
+                  <el-collapse-item title="地名映射" name="map-mapping">
                     <map-mapping
                       :param="param"
                       class="attr-selector"
                       :chart="chart"
+                      :dynamic-area-code="currentAreaCode"
                       @onMapMappingChange="onMapMappingChange"
                     />
 
@@ -1247,6 +1248,7 @@ export default {
       filterItem: {},
       places: [],
       attrActiveNames: [],
+      mapActiveNames: ['map-mapping'],
       styleActiveNames: [],
       drillClickDimensionList: [],
       drillFilters: [],
@@ -1269,7 +1271,8 @@ export default {
       currEditField: {},
       editChartCalcField: false,
       fieldShow: false,
-      tabActive: 'data'
+      tabActive: 'data',
+      currentAreaCode: ''
 
     }
   },
@@ -1370,11 +1373,15 @@ export default {
     bus.$off('calc-data', this.calcData)
     bus.$off('plugins-calc-style', this.calcStyle)
     bus.$off('plugin-chart-click', this.chartClick)
+    bus.$off('set-dynamic-area-code', this.setDynamicAreaCode)
   },
   activated() {
   },
 
   methods: {
+    setDynamicAreaCode(code) {
+      this.currentAreaCode = code
+    },
     loadPluginType() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
       const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
@@ -1410,6 +1417,8 @@ export default {
       bus.$on('calc-data', this.calcData)
       bus.$on('plugins-calc-style', this.calcStyle)
       bus.$on('plugin-chart-click', this.chartClick)
+      bus.$on('set-dynamic-area-code', this.setDynamicAreaCode)
+      
     },
     initTableData(id, optType) {
       if (id != null) {
@@ -2470,6 +2479,7 @@ export default {
     },
 
     setDetailMapCode(code) {
+      this.currentAreaCode = code
       this.curComponent.DetailAreaCode = code
       return true
     },