Merge branch 'v1.13' of github.com:dataease/dataease into v1.13

2022-08-01 18:03:03 +08:00 · 2022-08-01 18:03:03 +08:00 · 90d22aee5e
commit 90d22aee5e
parent 8a080ddeb7 cc6c244666
13 changed files with 180 additions and 198 deletions
--- a/frontend/src/components/ElTreeSelect/index.vue
+++ b/frontend/src/components/ElTreeSelect/index.vue
@ -1,13 +1,6 @@
-<!--
- * @moduleName: 下拉树组件
- * @Author: dawdler
- * @Date: 2018-12-19 14:03:03
- * @LastModifiedBy: dawdler
- * @LastEditTime: 2020-12-26 14:51:20
- -->
+
 <template>
  <div class="el-tree-select" :class="selectClass">
-    <!-- 下拉文本 -->
    <el-select
      :id="'el-tree-select-' + guid"
      ref="select"
@ -19,7 +12,7 @@
      :disabled="disabled"
      popper-class="select-option"
      v-bind="selectParams"
-      :popper-append-to-body="false"
+      :popper-append-to-body="popperAppendToBody"
      :filterable="false"
      :multiple="selectParams.multiple"
      :title="labels"
@ -27,18 +20,16 @@
      @clear="_selectClearFun"
      @focus="_popoverShowFun"
    />
-    <!-- 弹出框 -->
-    <el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
-      <!-- 是否显示搜索框 -->
+    <el-popover ref="popover" v-model="visible" :append-to-body="popperAppendToBody" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
      <el-input v-if="treeParams.filterable" v-model="keywords" size="mini" class="input-with-select mb10">
        <el-button slot="append" icon="el-icon-search" @click="_searchFun" />
      </el-input>
-      <p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox :indeterminate="isIndeterminate" v-customStyle="customStyle" @change="selectAllChane" v-model="selectAll">{{ $t('dataset.check_all') }}</el-checkbox></p>
+      <p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
      <el-scrollbar tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
-        <!-- 树列表 -->
        <el-tree
          v-show="data.length > 0"
          ref="tree"
+          :popper-append-to-body="popperAppendToBody"
          v-bind="treeParams"
          :data="data"
          :node-key="propsValue"
@ -51,7 +42,6 @@
          @check="_treeCheckFun"
          @check-change="_treeCheckChange"
        />
-        <!-- 暂无数据 -->
        <div v-if="data.length === 0" class="no-data">暂无数据</div>
      </el-scrollbar>
    </el-popover>
@ -61,93 +51,66 @@
 <script>
 import { on, off } from './dom'
 import { each, guid } from './utils'
-// @group api
 export default {
  name: 'ElTreeSelect',
  components: {},
  props: {
-    // v-model,存储的是treeParams.data里面的id
    value: {
-      // `String` / `Array` / `Number`
      type: [String, Array, Number],
-      // `''`
      default() {
        return ''
      }
    },
-    // el-select样式
+    popperAppendToBody: {
+      type: Boolean,
+      default: false
+    },
    styles: {
      type: Object,
-      // {}
      default() {
        return {
          width: '100%'
        }
      }
    },
-    // 下拉框 挂类
    selectClass: {
      type: String,
      default() {
        return ''
      }
    },
-    // popover 挂类
    popoverClass: {
      type: String,
      default() {
        return ''
      }
    },
-    // 是否禁用文本框
    disabled: {
      type: Boolean,
-      // false
      default() {
        return false
      }
    },
-    // 弹出框位置
    placement: {
      type: String,
-      //  bottom
      default() {
        return 'bottom'
      }
    },
-    // 弹出框过渡动画
    transition: {
      type: String,
-      //  el-zoom-in-top
      default() {
        return 'el-zoom-in-top'
      }
    },
-    // 树渲染方法，具体参考el-tree Function(h, { node, data, store }) {}
    // eslint-disable-next-line vue/require-default-prop
    treeRenderFun: Function,
-    // 搜索过滤方法，具体参考el-tree Function(h, { value, data, node }) {}
    // eslint-disable-next-line vue/require-default-prop
    filterNodeMethod: Function,
-    /*
-        文本框参数，几乎支持el-select所有的API<br>
-        取消参数：<br>
-        设定下拉框的弹出框隐藏：<br>
-        `:popper-append-to-body="false"` <br>
-        搜索从弹出框里面执行： <br>
-        `filterable="false"`
-        */
+
    selectParams: {
      type: Object,
-      /*
-            Object默认参数：<br><br>
-            是否可以清空选项：<br>
-            `clearable: true,`<br><br>
-            是否禁用：<br>
-            `disabled: false,`<br><br>
-            搜索框placeholder文字：<br>
-            `placeholder: '请选择',`<br><br>
-            */
+
      default() {
        return {
          clearable: true,
@ -156,37 +119,10 @@ export default {
        }
      }
    },
-    /*
-        下拉树参数，几乎支持el-tree所有的API<br>
-         取消参数:<br>
-        `:show-checkbox="selectParams.multiple"`<br>
-        使用下拉框参数multiple判断是否对树进行多选<br>
-        取消对el-tree的人为传参show-checkbox<br>
-        `:node-key="propsValue"`     自动获取treeParams.props.value<br>
-        `:draggable="false"`         屏蔽拖动
-        */
+
    treeParams: {
      type: Object,
-      /*
-            Object默认参数：<br><br>
-            在有子级的情况下是否点击父级关闭弹出框,false 只能点击子级关闭弹出框：<br><br>
-            `clickParent: false`<br><br>
-            是否显示搜索框：<br><br>
-            `filterable: false`<br><br>
-            是否只是叶子节点：<br><br>
-            `leafOnly: false`<br><br>
-            是否包含半选节点：<br><br>
-            `includeHalfChecked: false`<br><br>
-            下拉树的数据：<br><br>
-            `data:[]`<br><br>
-            下拉树的props：<br><br>
-            `props: {`<br>
-                `children: 'children',`<br>
-                `label: 'name',`<br>
-                `value: 'flowId',`<br>
-                `disabled: 'disabled'`<br>
-            `}`
-            */
+
      default() {
        return {
          clickParent: false,
@ -216,16 +152,16 @@ export default {
      guid: guid(),
      propsValue: 'flowId',
      propsLabel: 'name',
-      propsCode: null, // 可能有空的情况
+      propsCode: null,
      propsDisabled: 'disabled',
      propsChildren: 'children',
      leafOnly: false,
      includeHalfChecked: false,
      data: [],
      keywords: '',
-      labels: '', // 存储名称，用于下拉框显示内容
-      ids: [], // 存储id
-      visible: false, // popover v-model
+      labels: '',
+      ids: [],
+      visible: false,
      width: 150,
      showParent: false,
      showNumber: false
@ -237,7 +173,7 @@ export default {
      return this.disabled ? _c + ' disabled ' : _c
    },
    isIndeterminate() {
-      if (!this.selectParams.multiple) return;
+      if (!this.selectParams.multiple) return
      return this.ids.length > 0 && this.ids.length !== this._checkSum().length
    }
  },
@ -268,7 +204,7 @@ export default {
    this._setMultipleFun()
    this.propsValue = props.value
    this.propsLabel = props.label
-    this.propsCode = props.code || null // 可能为空
+    this.propsCode = props.code || null
    this.propsDisabled = props.disabled
    this.propsChildren = props.children
    this.leafOnly = leafOnly
@ -295,23 +231,22 @@ export default {
  methods: {
    selectAllChane(val) {
      if (val) {
-        this.ids = this._checkSum();
-        this._emitFun();
+        this.ids = this._checkSum()
+        this._emitFun()
        return
-      } 
+      }
      this._selectClearFun()
    },
    _checkSum() {
-        let arr = [];
-        (this.data || []).forEach(ele => {
-          arr = [...this.allKidIds(ele), ...arr]
-        })
-        return arr
+      let arr = [];
+      (this.data || []).forEach(ele => {
+        arr = [...this.allKidIds(ele), ...arr]
+      })
+      return arr
    },
    _treeCheckChange() {
-      this.$emit("treeCheckChange")
+      this.$emit('treeCheckChange')
    },
-    // 根据类型判断单选，多选
    _setMultipleFun() {
      let multiple = false
      if (this.value instanceof Array) {
@ -319,23 +254,15 @@ export default {
      }
      this.$set(this.selectParams, 'multiple', multiple)
    },
-    // 输入文本框输入内容抛出
    _searchFun() {
-      /*
-            对外抛出搜索方法，自行判断是走后台查询，还是前端过滤<br>
-            前端过滤：this.$refs.treeSelect.$refs.tree.filter(value);<br>
-            后台查询：this.$refs.treeSelect.treeDataUpdateFun(data);
-            */
      this.$emit('searchFun', this.keywords)
    },
-    //  根据id筛选当前树名称，以及选中树列表
    _setSelectNodeFun(ids) {
      const el = this.$refs.tree
      if (!el) {
        throw new Error('找不到tree dom')
      }
      const { multiple } = this.selectParams
-      // 长度为0，清空选择
      if (ids.length === 0 || this.data.length === 0) {
        this.labels = multiple ? [] : ''
        if (multiple) {
@ -346,7 +273,6 @@ export default {
        return
      }
      if (multiple) {
-        // element-ui bug. 如果是父子节点全选 el.setCheckedKeys([非全量id]);之后el.getCheckedNodes()还是全量
        el.getCheckedNodes(this.leafOnly, this.includeHalfChecked).forEach(item => {
          el.setChecked(item, false)
        })
@ -356,7 +282,6 @@ export default {
        const nodes = el.getCheckedNodes(this.leafOnly, this.includeHalfChecked)
        if (!this.showParent) {
          if (this.propsCode) {
-          // 如果有code   labels=code(name)
            this.labels = nodes.map(item => (item[this.propsCode] ? item[this.propsLabel] + '(' + item[this.propsCode] + ')' : item[this.propsLabel])) || []
          } else {
            this.labels = nodes.map(item => item[this.propsLabel]) || []
@ -370,7 +295,6 @@ export default {
        if (node) {
          if (!this.showParent) {
            if (this.propsCode) {
-            // 如果有code   labels=code(name)
              this.labels = node[this.propsCode] ? node[this.propsLabel] + '(' + node[this.propsCode] + ')' : node[this.propsLabel]
            } else {
              this.labels = node[this.propsLabel]
@ -401,14 +325,11 @@ export default {
      const labels = linkedNodes.map(item => item.data[this.propsLabel]).reverse().join(':')
      return labels
    },
-    // 更新popover位置
    _updatePopoverLocationFun() {
-      // dom高度还没有更新，做一个延迟
      setTimeout(() => {
        this.$refs.popover.updatePopper()
      }, 50)
    },
-    // 获取MouseEvent.path 针对浏览器兼容性兼容ie11,edge,chrome,firefox,safari
    _getEventPath(evt) {
      const path = (evt.composedPath && evt.composedPath()) || evt.path
      const target = evt.target
@ -429,21 +350,18 @@ export default {
      }
      return [target].concat(getParents(target), window)
    },
-    // 树过滤
    _filterFun(value, data, node) {
      if (!value) return true
      return data[this.propsLabel].indexOf(value) !== -1
    },
-    // 树点击
    _treeNodeClickFun(data, node, vm) {
      const { multiple } = this.selectParams
-      if (multiple) return // 多选 不允许点击节点
+      if (multiple) return
      const { clickParent } = this.treeParams
      const checkStrictly = this.treeParams['check-strictly']
      const { propsValue, propsChildren, propsDisabled } = this
      const children = data[propsChildren] || []
      if (data[propsDisabled]) {
-        // 禁用
        return
      }
      if (node.checked) {
@ -456,14 +374,11 @@ export default {
        }
      } else {
        if (!multiple) {
-          // 多选，不关闭，单选，判断是否允许点击父级关闭弹出框
          if (!clickParent) {
-            // 如果不允许点击父级,自身为末级，允许点击之后关闭
            if (children.length === 0) {
              this.ids = [data[propsValue]]
              this.visible = false
            } else {
-              // 不允许父级，阻止继续派发
              return false
            }
          } else {
@ -472,12 +387,9 @@ export default {
          }
        } else {
          if (!clickParent && children.length === 0) {
-            // 如果不能点击父级
            this.ids.push(data[propsValue])
          } else if (clickParent) {
-            // 允许点击父级
            this.ids.push(data[propsValue])
-            // 如果父子关联，将子节点push进勾选项
            if (!checkStrictly && children.length) {
              children.forEach(item => {
                this.ids.push(item[propsValue])
@ -487,15 +399,9 @@ export default {
        }
      }
      this._emitFun()
-      /*
-            点击节点，对外抛出   `data, node, vm`<br>
-            `data:` 当前点击的节点数据<br>
-            `node:` 当前点击的node<br>
-            `vm:` 当前组件的vm
-            */
+
      this.$emit('node-click', data, node, vm)
    },
-    // 树勾选
    _treeCheckFun(data, node, vm) {
      this.ids = []
      const { propsValue } = this
@ -512,14 +418,9 @@ export default {
      checkedNodes.forEach(item => {
        this.ids.push(item[propsValue])
      })
-      /*
-        点击复选框，对外抛出   `data, node, vm`<br>
-        `data:` 当前点击的节点数据<br>
-        `node:` 当前点击的node<br>
-        `vm:` 当前组件的vm
-        */
+
      node.checkedKeys = checkedNodes.map(node => node.id)
-      this.selectAll = this._checkSum().length === this.ids.length;
+      this.selectAll = this._checkSum().length === this.ids.length
      this.$emit('check', data, node, vm)
      this._emitFun()
    },
@ -543,7 +444,6 @@ export default {
      }
      return ids
    },
-    // 下拉框移除tag时触发
    _selectRemoveTag(tag) {
      const { data, propsValue, propsLabel, propsChildren } = this
      const { multiple } = this.selectParams
@ -567,53 +467,40 @@ export default {
      this.$emit('removeTag', this.ids, tag)
      this._emitFun()
    },
-    // 下拉框清空数据
    _selectClearFun() {
      this.ids = []
      const { multiple } = this.selectParams
-      // 下拉框清空，对外抛出``this.$emit('input', multiple ? [] : '');`
      this.$emit('input', multiple ? [] : '')
-      // 下拉框清空，对外抛出``this.$emit('select-clear');`
      this.$emit('select-clear')
-      this.selectAll = false;
+      this.selectAll = false
      this._updatePopoverLocationFun()
    },
-    // 判断类型，抛出当前选中id
    _emitFun() {
      const { multiple } = this.selectParams
      this.$emit('input', multiple ? this.ids : this.ids.length > 0 ? this.ids[0] : '')
      this._updatePopoverLocationFun()
    },
-    // 更新宽度
    _updateH() {
      this.$nextTick(() => {
        this.width = this.$refs.select.$el.getBoundingClientRect().width
      })
    },
-    // 显示弹出框的时候容错，查看是否和el宽度一致
    _popoverShowFun(val) {
      this._updateH()
      this.$emit('onFoucs')
    },
-    // 判断是否隐藏弹出框
    _popoverHideFun(e) {
      const path = this._getEventPath(e)
      const isInside = path.some(list => {
-        // 鼠标在弹出框内部，阻止隐藏弹出框
        return list.className && typeof list.className === 'string' && list.className.indexOf('el-tree-select') !== -1
      })
      if (!isInside) {
        this.visible = false
      }
    },
-    /**
-         * @vuese
-         * 树列表更新数据
-         * @arg Array
-         */
+
    treeDataUpdateFun(data) {
      this.data = data
-      // 数据更新完成之后，判断是否回显内容
      if (data.length > 0) {
        setTimeout(() => {
          this._setSelectNodeFun(this.ids)
@ -621,11 +508,6 @@ export default {
      }
    },

-    /**
-         * @vuese
-         * 本地过滤方法
-         * @arg String
-         */
    filterFun(val) {
      this.$refs.tree.filter(val)
    },
--- a/frontend/src/components/ElVisualSelect/index.vue
+++ b/frontend/src/components/ElVisualSelect/index.vue
@ -12,8 +12,8 @@
    @change="visualChange"
    @visible-change="popChange"
  >
-    <p v-if="startIndex === 0 && $attrs.multiple" class="select-all"><el-checkbox :indeterminate="isIndeterminate" v-customStyle="customStyle" @change="selectAllChane" v-model="selectAll">{{ $t('dataset.check_all') }}</el-checkbox></p>
-    <el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id"  :class="setSelect(item.id)"/>
+    <p v-if="startIndex === 0 && $attrs.multiple" class="select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
+    <el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id" :class="setSelect(item.id)" />
  </el-select>
 </template>

@ -98,14 +98,14 @@ export default {
      })
    },
    keyWord(val, old) {
-      if(val === old) return
+      if (val === old) return
      const results = val ? this.list.filter(item => item.text.includes(val)) : null
      this.resetList(results)
      this.reCacularHeight()
      this.$nextTick(() => {
        this.callback()
      })
-    },
+    }
  },
  mounted() {
    this.resetList()
@ -116,13 +116,16 @@ export default {
  methods: {
    setSelect(id) {
      if (Array.isArray(this.selectValue)) {
-        return  this.selectValue.map( ele => ele.id ).includes(id) && 'selected'
+        return this.selectValue.map(ele => ele.id).includes(id) && 'selected'
      }
-      return this.selectValue === id && 'selected';
+      return this.selectValue === id && 'selected'
    },
    selectAllChane(val) {
-      this.visualChange(val ? [...this.list.map( ele => ele.id )] : [])
-      this.$emit('handleShowNumber');
+      const vals = val ? [...this.list.map(ele => ele.id)] : []
+      this.visualChange(vals)
+      this.selectValue = vals
+      this.$emit('change', vals)
+      this.$emit('handleShowNumber')
    },
    addScrollDiv(selectDom) {
      this.maxHeightDom = document.createElement('div')
@ -144,9 +147,9 @@ export default {
      this.options = this.newList.slice(0, this.maxLength)
    },
    customInputStyle() {
-      if (!this.$parent.$parent.handlerInputStyle) return;
+      if (!this.$parent.$parent.handlerInputStyle) return
      handlerInputStyle(this.$refs.visualSelect.$el.querySelector('.el-input__inner'), this.$parent.element.style)
-      handlerInputStyle(this.$refs.visualSelect.$el.querySelector('.el-select__input'), {wordColor: this.$parent.element.style.wordColor})
+      handlerInputStyle(this.$refs.visualSelect.$el.querySelector('.el-select__input'), { wordColor: this.$parent.element.style.wordColor })
    },
    init() {
      if (this.defaultFirst && this.list.length > 0) {
@ -193,8 +196,8 @@ export default {
      this.reCacularHeight()
    },
    visualChange(val) {
-      if(this.$attrs.multiple) {
-        this.selectAll = val.length === this.list.length;
+      if (this.$attrs.multiple) {
+        this.selectAll = val.length === this.list.length
      }
      this.$emit('visual-change', val)
    }
--- 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/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@ -100,6 +100,10 @@ export default {
          const newView = deepCopy(data)
          newView.id = uuid.v1()
          newView.propValue.viewId = res.data
+          if (newView.filters && newView.filters.length) {
+            newView.filters = []
+          }
+
          store.commit('addComponent', { component: newView })
        })
      } else if (data.type === 'de-tabs') {
@ -111,6 +115,9 @@ export default {
            const newViewId = uuid.v1()
            sourceAndTargetIds[item.content.propValue.viewId] = newViewId
            item.content.propValue.viewId = newViewId
+            if (item.content.filters && item.content.filters.length) {
+              item.content.filters = []
+            }
          }
        })
        chartBatchCopy({ 'sourceAndTargetIds': sourceAndTargetIds }, state.panel.panelInfo.id).then((rsp) => {
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@ -16,7 +16,7 @@
    :key-word="keyWord"
    popper-class="coustom-de-select"
    :list="datas"
-    :customStyle="customStyle"
+    :custom-style="customStyle"
    @change="changeValue"
    @focus="setOptionWidth"
    @blur="onBlur"
@ -108,7 +108,7 @@ export default {
      return this.$store.state.panel.panelInfo
    },
    customStyle() {
-      const { brColor, wordColor, innerBgColor } = this.element.style;
+      const { brColor, wordColor, innerBgColor } = this.element.style
      return { brColor, wordColor, innerBgColor }
    }
  },
@ -257,7 +257,7 @@ export default {
      }
    },
    visualChange(value) {
-      this.value = value;
+      this.value = value
      this.$nextTick(() => {
        if (!this.element.options.attrs.multiple) {
          return
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@ -10,7 +10,8 @@
    :tree-params="treeParams"
    :filter-node-method="_filterFun"
    :tree-render-fun="_renderFun"
-    :customStyle="customStyle"
+    :custom-style="customStyle"
+    :popper-append-to-body="inScreen"
    @searchFun="_searchFun"
    @node-click="changeNode"
    @removeTag="changeNodeIds"
@ -109,7 +110,7 @@ export default {
      return this.element.options.attrs.multiple
    },
    customStyle() {
-      const { brColor, wordColor, innerBgColor } = this.element.style;
+      const { brColor, wordColor, innerBgColor } = this.element.style
      return { brColor, wordColor, innerBgColor }
    }
  },
--- 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-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,
@ -88,6 +95,26 @@ export default {
      usePage: true
    }
  },
+  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
+    }
+
+  },
  watch: {
    'chart': {
      handler: function() {
@ -98,6 +125,15 @@ export default {
      handler: function() {
        this.buildGridList()
      }
+    },
+    'dynamicAreaCode': {
+      handler: function(val, old) {
+        if (val !== old) {
+          this.$nextTick(() => {
+            this.initData()
+          })
+        }
+      }
    }
  },
  mounted() {
@ -112,7 +148,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 +170,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 +179,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 +200,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
    },