fix(视图): 地图地名映射配置以解决世界地图无法下钻

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

@@ -88,6 +88,11 @@ export function baseMapOption(chart_option, chart, themeStyle) {
         y.name = chart.data.x[i]
         chart_option.series[0].data.push(y)
       }
+      if (chart.senior) {
+        const senior = JSON.parse(chart.senior)
+
+        senior && senior.mapMapping && (chart_option.series[0].nameMap = senior.mapMapping)
+      }
     }
   }
   componentStyle(chart_option, chart)

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

@@ -81,7 +81,6 @@ import {
   geoJson
 } from '@/api/map/map'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
-import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
   name: 'ChartComponent',

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

@@ -0,0 +1,207 @@
+<template>
+  <div style="width: 100%;display: block !important;">
+    <el-table
+      :data="currentDatas"
+      size="mini"
+      :span-method="mergeCellMethod"
+      style="width: 100%"
+      :row-style="{height:0+'px'}"
+    >
+      <el-table-column
+        label="图形"
+        prop="mapArea"
+        width="160"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="属性"
+        width="50"
+      >
+        <template slot-scope="scope">
+          <el-input
+            v-if="scope.row.isEdit"
+            :ref="scope.row.mapArea + scope.$index + '-widget'"
+            v-model="scope.row.attrArea"
+            size="mini"
+            @blur="finishEdit(scope.row)"
+            @keyup.enter.native="$event.target.blur()"
+          >
+
+            <i slot="suffix" class="el-icon-success el-input__icon map-mapping-ok" @click="finishEdit(scope.row)" />
+          </el-input>
+
+          <el-button v-else size="mini" plain @click="triggerEdit(scope)">
+            <span class="mapping-span">{{ scope.row.attrArea }}</span>
+            <i class="el-icon-edit el-icon--right" />
+          </el-button>
+
+        </template>
+      </el-table-column>
+      <el-table-column align="right">
+
+        <template slot="header">
+          <el-input
+            v-model="keyWord"
+            size="mini"
+            placeholder="输入关键字搜索"
+          />
+        </template>
+
+      </el-table-column>
+    </el-table>
+    <div class="mapping-pagination">
+      <el-pagination
+        small
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :total="total"
+        :current-page="currentPage"
+        @current-change="searchPager"
+        @prev-click="searchPager"
+        @next-click="searchPager"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'FunctionCfg',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      mappingForm: {},
+
+      keyWord: '',
+      dynamicAreaCode: '',
+      gridList: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      currentDatas: [],
+      usePage: true
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    },
+    'keyWord': {
+      handler: function() {
+        this.buildGridList()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    triggerEdit(scope) {
+      this.$set(scope.row, 'isEdit', true)
+      this.$nextTick(() => {
+        this.$refs[scope.row.mapArea + scope.$index + '-widget'] && this.$refs[scope.row.mapArea + scope.$index + '-widget'].focus()
+      })
+    },
+    finishEdit(row) {
+      row.isEdit = false
+      this.mappingForm[row.mapArea] = row.attrArea
+      this.changeMapping()
+    },
+
+    mergeCellMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        return [1, 2]
+      }
+      if (columnIndex === 2) {
+        return [0, 0]
+      }
+    },
+
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.senior) {
+        let senior = null
+        if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
+          senior = JSON.parse(JSON.stringify(chart.senior))
+        } else {
+          senior = JSON.parse(chart.senior)
+        }
+        if (senior.mapMapping) {
+          this.mappingForm = senior.mapMapping
+        } else {
+          this.initMapping()
+        }
+        this.buildGridList()
+      }
+    },
+    buildGridList() {
+      this.gridList = Object.keys(this.mappingForm).map(key => {
+        return {
+          mapArea: key,
+          attrArea: this.mappingForm[key] || key
+        }
+      })
+      const baseDatas = JSON.parse(JSON.stringify(this.gridList))
+      const tempDatas = baseDatas.filter(data => !this.keyWord || data.mapArea.toLowerCase().includes(this.keyWord.toLowerCase()) || (data.attrArea && data.attrArea.toLowerCase().includes(this.keyWord.toLowerCase())))
+      if (this.usePage) {
+        const start = (this.currentPage - 1) * this.pageSize
+        let end = this.currentPage * this.pageSize
+        if (end >= tempDatas.length) end = tempDatas.length
+        this.currentDatas = tempDatas.slice(start, end)
+      } else {
+        this.currentDatas = tempDatas
+      }
+      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
+      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
+        })
+      } else {
+        this.$warning('请先选择地图范围')
+      }
+    },
+    changeMapping() {
+      this.$emit('onMapMappingChange', this.mappingForm)
+    },
+    searchPager(pageNumber) {
+      this.currentPage = pageNumber
+      this.buildGridList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mapping-span {
+  display: inline-block;
+  width: 90px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left
+}
+
+.map-mapping-ok {
+  cursor: pointer;
+}
+.map-mapping-ok:hover {
+  color: #409eff;
+}
+
+</style>

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

@@ -703,7 +703,7 @@
         <el-tab-pane name="senior" :label="$t('chart.senior')" class="padding-tab" style="width: 350px;">
           <el-row class="view-panel">
             <div
-              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table'))"
+              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
               style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
               class="attr-style theme-border-class"
             >
@@ -761,6 +761,25 @@
                   </el-collapse-item>
                 </el-collapse>
               </el-row>
+
+              <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">
+
+                  <el-collapse-item title="地名映射">
+                    <map-mapping
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onMapMappingChange="onMapMappingChange"
+                    />
+
+                  </el-collapse-item>
+
+                </el-collapse>
+              </el-row>
+
             </div>
             <div v-else class="no-senior">
               {{ $t('chart.chart_no_senior') }}
@@ -1084,6 +1103,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
 import { mapState } from 'vuex'
 
 import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
+import MapMapping from '@/views/chart/components/senior/MapMapping'
 import AssistLine from '@/views/chart/components/senior/AssistLine'
 import Threshold from '@/views/chart/components/senior/Threshold'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
@@ -1129,7 +1149,8 @@ export default {
     ChartDragItem,
     DrillItem,
     DrillPath,
-    PluginCom
+    PluginCom,
+    MapMapping
   },
   props: {
     param: {
@@ -1952,6 +1973,10 @@ export default {
       this.view.senior.scrollCfg = val
       this.calcStyle()
     },
+    onMapMappingChange(val) {
+      this.view.senior.mapMapping = val
+      this.calcStyle()
+    },
 
     showDimensionEditFilter(item) {
       this.dimensionItem = JSON.parse(JSON.stringify(item))