Merge pull request #2743 from dataease/pr@dev@feat_map_mapping

feat(视图-地图): 地图增加区域名称映射配置
2022-07-31 19:59:34 +08:00 · 2022-07-31 19:59:34 +08:00 · c1cbd88597
commit c1cbd88597
parent 39e4e02221 ff8409883c
8 changed files with 120 additions and 29 deletions
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/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
    },

--- a/frontend/src/lang/en.js
+++ b/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'
  }
+
 }
--- a/frontend/src/lang/tw.js
+++ b/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: '請先選擇地圖範圍'
  }
 }
--- a/frontend/src/lang/zh.js
+++ b/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: '请先选择地图范围'
  }
 }
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/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])
      }
    }
  }
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/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
    },
-
-    initMapChart(geoJson, chart) {
+    formatGeoJson(geoGson) {
+      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) {
--- a/frontend/src/views/chart/components/senior/MapMapping.vue
+++ b/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,8 +105,39 @@ 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 customAttr = JSON.parse(chart.customAttr)
-      const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
+      const innerCallBack = (json, cCode) => {
+        const features = json.features
+        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
-        this.mappingForm = {}
-        features.forEach(feature => {
-          this.mappingForm[feature.properties.name] = null
-        })
+        innerCallBack(json, cCode)
      } else {
-        this.$warning('请先选择地图范围')
+        geoJson(cCode).then(res => {
+          this.$store.dispatch('map/setGeo', {
+            key: cCode,
+            value: res
+          }).then(() => {
+            innerCallBack(res, cCode)
+          })
+        })
      }
    },
    changeMapping() {
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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>
-                <el-collapse v-model="attrActiveNames" class="style-collapse">
+                <span v-if="false" class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
+                <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
    },