From 7f25d8d53572488b30a9bbe539617db923c2b3a9 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 23 Nov 2023 21:59:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=B4=E5=BA=A6/=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/lang/en.js                  |    3 +-
 core/frontend/src/lang/tw.js                  |    3 +-
 core/frontend/src/lang/zh.js                  |    3 +-
 .../chart/components/ChartComponentS2.vue     |    2 +-
 .../chart/components/table/TableNormal.vue    |    2 +-
 .../src/views/chart/view/ChartEdit.vue        |  198 ++-
 .../src/views/highcharts/3dpie/data.vue       | 1109 ++++++-------
 .../src/views/echarts/map/buddle/data.vue     | 1400 +++++++++--------
 .../src/views/antv/chartmix/data.vue          |  213 ++-
 .../src/views/antv/racebar/data.vue           |  181 ++-
 .../src/views/antv/sankey/data.vue            |  230 +--
 .../src/views/antv/symbolmap/data.vue         | 1204 +++++++-------
 12 files changed, 2486 insertions(+), 2062 deletions(-)

diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 617806473a..565d57928e 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1584,7 +1584,8 @@ export default {
     map_line_theta_offset: 'Radian',
     gauge_axis_label: 'Axis Label',
     word_size_range: 'Word Size Range',
-    word_spacing: 'Word Spacing'
+    word_spacing: 'Word Spacing',
+    axis_multi_select_tip: 'Hold down the Ctrl or Shift key and click to select more than one'
   },
   dataset: {
     scope_edit: 'Effective only when editing',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index d5deca71ac..bcb8ec3da1 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1576,7 +1576,8 @@ export default {
     map_line_theta_offset: '弧度',
     gauge_axis_label: '刻度標籤',
     word_size_range: '字號區間',
-    word_spacing: '文字間隔'
+    word_spacing: '文字間隔',
+    axis_multi_select_tip: '按住 Ctrl 鍵或者 Shift 鍵再點擊可多選'
   },
   dataset: {
     scope_edit: '僅編輯時生效',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index b4db1cadf6..418d25b9fa 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1576,7 +1576,8 @@ export default {
     map_line_theta_offset: '弧度',
     gauge_axis_label: '刻度标签',
     word_size_range: '字号区间',
-    word_spacing: '文字间隔'
+    word_spacing: '文字间隔',
+    axis_multi_select_tip: '按住 Ctrl 键或者 Shift 键再点击可多选'
   },
   dataset: {
     scope_edit: '仅编辑时生效',
diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue
index 36a328682b..907bbbec8d 100644
--- a/core/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -244,7 +244,7 @@ export default {
   beforeDestroy() {
     clearInterval(this.scrollTimer)
     window.removeEventListener('resize', this.onResize)
-    this.myChart.destroy()
+    this.myChart?.destroy?.()
     this.myChart = null
   },
   methods: {
diff --git a/core/frontend/src/views/chart/components/table/TableNormal.vue b/core/frontend/src/views/chart/components/table/TableNormal.vue
index c0518b44ec..5f4368e1f8 100644
--- a/core/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/core/frontend/src/views/chart/components/table/TableNormal.vue
@@ -326,7 +326,7 @@ export default {
         data = []
         this.resetPage()
       }
-      if (this.chart.data.detailFields?.length) {
+      if (this.chart.data?.detailFields?.length) {
         let result = []
         let groupRowIndex = 0
         data.forEach(item => {
diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index 3ea3839883..78b86db77c 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -148,23 +148,42 @@
                   direction="vertical"
                 >
                   <template #top>
-                    <div class="padding-lr field-height">
+                    <div
+                      class="padding-lr field-height"
+                      :style="dimensionDragStyle"
+                    >
                       <span>{{ $t('chart.dimension') }}</span>
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        placement="bottom"
+                      >
+                        <span slot="content">{{ $t('chart.axis_multi_select_tip') }}</span>
+                        <i
+                          class="el-icon-info"
+                          style="cursor: pointer;color: #606266;margin-left: 4px; font-size: 12px"
+                        />
+                      </el-tooltip>
                       <draggable
                         v-if="table && hasDataPermission('use',table.privileges)"
                         v-model="dimensionData"
-                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
                         animation="300"
-                        :move="onMove"
                         class="drag-list"
+                        drag-class="drag-class"
+                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
+                        :move="onMove"
                         @add="moveToDimension"
                       >
                         <transition-group>
                           <span
-                            v-for="item in dimensionData"
+                            v-for="(item, index) in dimensionData"
                             :key="item.id"
-                            class="item-dimension father"
                             :title="item.name"
+                            :class="{ 'selected-item': selectedDimension.findIndex(i => i.id === item.id) !== -1 }"
+                            class="item-dimension father group-dimension"
+                            @click.exact="singleSelect(index, dimensionData, selectedDimension, 'lastDimensionIndex')"
+                            @click.ctrl="multiSelect(index, dimensionData, selectedDimension, 'lastDimensionIndex')"
+                            @click.shift="rangeSelect(index, dimensionData, selectedDimension, 'lastDimensionIndex')"
                           >
                             <svg-icon
                               v-if="item.deType === 0"
@@ -221,24 +240,32 @@
                     </div>
                   </template>
                   <template #bottom>
-                    <div class="padding-lr field-height">
+                    <div
+                      class="padding-lr field-height"
+                      :style="quotaDragStyle"
+                    >
                       <span>{{ $t('chart.quota') }}</span>
                       <draggable
                         v-if="table && hasDataPermission('use',table.privileges)"
                         v-model="quotaData"
                         :options="{group:{name: 'drag',pull:'clone'},sort: true}"
-                        animation="300"
                         :move="onMove"
+                        animation="300"
+                        drag-class="drag-class"
                         class="drag-list"
                         @add="moveToQuota"
                       >
                         <transition-group>
                           <span
-                            v-for="item in quotaData"
+                            v-for="(item, index) in quotaData"
                             v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
                             :key="item.id"
-                            class="item-quota father"
                             :title="item.name"
+                            :class="{ 'selected-item': selectedQuota.findIndex(i => i.id === item.id) !== -1 }"
+                            class="item-quota father group-quota"
+                            @click.exact="singleSelect(index, quotaData, selectedQuota, 'lastQuotaIndex')"
+                            @click.ctrl="multiSelect(index, quotaData, selectedQuota, 'lastQuotaIndex')"
+                            @click.shift="rangeSelect(index, quotaData, selectedQuota, 'lastQuotaIndex')"
                           >
                             <svg-icon
                               v-if="item.deType === 0"
@@ -476,7 +503,7 @@
                   <plugin-com
                     v-if="view.isPlugin"
                     :component-name="view.type + '-data'"
-                    :obj="{view, param, chart, dimension, dimensionData, quota, quotaData}"
+                    :obj="obj"
                     :bus="bus"
                   />
                   <div v-else>
@@ -2030,10 +2057,27 @@ export default {
       fieldShow: false,
       tabActive: 'data',
       currentAreaCode: '',
-      showStackCustomSort: false
+      showStackCustomSort: false,
+      lastDimensionIndex: 0,
+      lastQuotaIndex: 0,
+      selectedDimension: [],
+      selectedQuota: []
     }
   },
   computed: {
+    obj() {
+      return {
+        view: this.view,
+        param: this.param,
+        chart: this.chart,
+        dimension: this.dimension,
+        dimensionData: this.dimensionData,
+        quota: this.quota,
+        quotaData: this.quotaData,
+        selectedDimension: this.selectedDimension,
+        selectedQuota: this.selectedQuota
+      }
+    },
     chartConfig() {
       const _this = this
       if (_this.chart && _this.chart.render) {
@@ -2110,6 +2154,26 @@ export default {
       const id = this.chart.id
       return { type, render, isPlugin, id }
     },
+    dimensionDragStyle() {
+      const style = {
+        '--dragDisplay': 'none'
+      }
+      if (this.selectedDimension.length > 1) {
+        style['--dragDisplay'] = 'inline-block'
+        style['--dragContent'] = `"+${this.selectedDimension.length}"`
+      }
+      return style
+    },
+    quotaDragStyle() {
+      const style = {
+        '--dragDisplay': 'none'
+      }
+      if (this.selectedQuota.length > 1) {
+        style['--dragDisplay'] = 'inline-block'
+        style['--dragContent'] = `"+${this.selectedQuota.length}"`
+      }
+      return style
+    },
     ...mapState([
       'curComponent',
       'panelViewEditInfo',
@@ -2765,13 +2829,11 @@ export default {
         this.view = {}
       }
     },
-
     // move回调方法
     onMove(e, originalEvent) {
       this.moveId = e.draggedContext.element.id
       return true
     },
-
     onCustomSort(item) {
       this.customSortField = this.view.xaxis[item.index]
       this.customSort()
@@ -3186,27 +3248,46 @@ export default {
       if (mode === 'ds') {
         list.splice(e.newDraggableIndex, 1)
       } else {
-        const that = this
-        const dup = list.filter(function(m) {
-          return m.id === that.moveId
-        })
-        if (dup && dup.length > 1) {
-          list.splice(e.newDraggableIndex, 1)
+        let newItems = [list[e.newDraggableIndex]]
+        if (e.item.classList.contains('selected-item')) {
+          const groupDie = e.item.classList.contains('group-dimension')
+          newItems = groupDie ? this.selectedDimension : this.selectedQuota
+        }
+        const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+        // 倒序删除
+        for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+          if (preIds.includes(list[i].id)) {
+            list.splice(i, 1)
+          }
         }
       }
     },
     dragRemoveChartField(list, e) {
-      const that = this
-      const dup = list.filter(function(m) {
-        return m.id === that.moveId
-      })
-      if (dup && dup.length > 0) {
-        if (dup[0].chartId) {
-          list.splice(e.newDraggableIndex, 1)
+      for (let i = list.length - 1; i >= 0; i--) {
+        if (list[i].chartId) {
+          list.splice(i, 1)
         }
       }
     },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      const multiAdd = sourceList.length > 1 && sourceList.findIndex(i => i.id === this.moveId) !== -1
+      if (multiAdd) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
     addXaxis(e) {
+      this.multiAdd(e, this.view.xaxis)
       this.dragMoveDuplicate(this.view.xaxis, e)
       if (this.view.type === 'scatter' && this.view.render === 'antv' && this.view.xaxis[0] && this.view.xaxis[0].groupType === 'q') {
         this.view.xaxis = [this.view.xaxis[0]]
@@ -3219,26 +3300,29 @@ export default {
       this.calcData(true)
     },
     addXaxisExt(e) {
+      this.multiAdd(e, this.view.xaxisExt)
+      this.dragMoveDuplicate(this.view.xaxisExt, e)
       if (this.view.type !== 'table-info') {
         this.dragCheckType(this.view.xaxisExt, 'd')
       }
-      this.dragMoveDuplicate(this.view.xaxisExt, e)
       if ((this.view.type === 'map' || this.view.type === 'word-cloud' || this.view.type === 'scatter') && this.view.xaxisExt.length > 1) {
         this.view.xaxisExt = [this.view.xaxisExt[0]]
       }
       this.calcData(true)
     },
     addYaxis(e) {
-      this.dragCheckType(this.view.yaxis, 'q')
+      this.multiAdd(e, this.view.yaxis)
       this.dragMoveDuplicate(this.view.yaxis, e)
+      this.dragCheckType(this.view.yaxis, 'q')
       if ((equalsAny(this.view.type, 'waterfall', 'word-cloud', 'bidirectional-bar') || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
         this.view.yaxis = [this.view.yaxis[0]]
       }
       this.calcData(true)
     },
     addYaxisExt(e) {
-      this.dragCheckType(this.view.yaxisExt, 'q')
+      this.multiAdd(e, this.view.yaxisExt)
       this.dragMoveDuplicate(this.view.yaxisExt, e)
+      this.dragCheckType(this.view.yaxisExt, 'q')
       if (equalsAny(this.view.type, 'map', 'bidirectional-bar') && this.view.yaxisExt.length > 1) {
         this.view.yaxisExt = [this.view.yaxisExt[0]]
       }
@@ -3253,6 +3337,8 @@ export default {
       this.calcData(true)
     },
     addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
       // 记录数等自动生成字段不做为过滤条件
       if (this.view.customFilter && this.view.customFilter.length > 0) {
         for (let i = 0; i < this.view.customFilter.length; i++) {
@@ -3262,7 +3348,6 @@ export default {
         }
       }
       this.view.customFilter[e.newDraggableIndex].filter = []
-      this.dragMoveDuplicate(this.view.customFilter, e)
       this.dragRemoveChartField(this.view.customFilter, e)
       this.calcData(true)
     },
@@ -3288,6 +3373,7 @@ export default {
       return resultNode
     },
     addStack(e) {
+      this.multiAdd(e, this.view.extStack)
       this.dragCheckType(this.view.extStack, 'd')
       if (this.view.extStack && this.view.extStack.length > 1) {
         this.view.extStack = [this.view.extStack[0]]
@@ -3302,7 +3388,6 @@ export default {
       this.calcData(true)
     },
     stackItemCustomSort(item) {
-      console.log(item, this.view.extStack[item.index])
       this.customSortField = this.view.extStack[item.index]
       this.stackCustomSort()
     },
@@ -3315,13 +3400,15 @@ export default {
       this.calcData(true)
     },
     addDrill(e) {
-      this.dragCheckType(this.view.drillFields, 'd')
+      this.multiAdd(e, this.view.drillFields)
       this.dragMoveDuplicate(this.view.drillFields, e)
+      this.dragCheckType(this.view.drillFields, 'd')
       this.dragRemoveChartField(this.view.drillFields, e)
       this.calcData(true)
     },
 
     addBubble(e) {
+      this.multiAdd(e, this.view.extBubble)
       this.dragCheckType(this.view.extBubble, 'q')
       if (this.view.extBubble && this.view.extBubble.length > 1) {
         this.view.extBubble = [this.view.extBubble[0]]
@@ -3666,6 +3753,35 @@ export default {
     clearData(data) {
       this.view[data] = []
       this.calcData(true)
+    },
+    singleSelect(index, itemList, targetList, lastIndexProp) {
+      targetList.splice(0)
+      targetList.push(itemList[index])
+      this[lastIndexProp] = index
+    },
+    multiSelect(index, itemList, targetList, lastIndexProp) {
+      const item = itemList[index]
+      const curIndex = targetList.findIndex(i => i.id === item.id)
+      if (curIndex === -1) {
+        targetList.push(item)
+      } else {
+        targetList.splice(curIndex, 1)
+      }
+      this[lastIndexProp] = index
+    },
+    rangeSelect(index, itemList, targetList, lastIndexProp) {
+      targetList.splice(0)
+      let start, end
+      if (index > this[lastIndexProp]) {
+        start = this[lastIndexProp]
+        end = index
+      } else {
+        start = index
+        end = this[lastIndexProp]
+      }
+      for (let i = start; i <= end; i++) {
+        targetList.push(itemList[i])
+      }
     }
   }
 }
@@ -4144,4 +4260,22 @@ span {
   margin-left: 4px;
   font-size: 12px !important;
 }
+.selected-item.item-dimension {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+}
+.selected-item.item-quota {
+  color: #67c23a;
+  background: #f0f9eb;
+  border-color: #b2d3a3;
+}
+
+.drag-class.selected-item::after {
+  color:inherit;
+  content: var(--dragContent);
+  display: var(--dragDisplay);
+  position: absolute;
+  right: 10px;
+}
 </style>
diff --git a/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue b/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue
index 593b84a29b..85b4001746 100644
--- a/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue
+++ b/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue
@@ -1,17 +1,15 @@
 <template>
   <div>
-
     <el-row class="padding-lr">
-            <span style="width: 80px;text-align: right;">
-                <span >{{ $t('plugin_view_3d_pie.label')}}</span>/<span >{{ $t('chart.dimension') }}</span>
-            </span>
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('plugin_view_3d_pie.label') }}</span>/<span>{{ $t('chart.dimension') }}</span>
+      </span>
       <draggable
         v-model="view.xaxis"
-
-        group="drag"
-        animation="300"
         :move="onMove"
+        animation="300"
         class="drag-block-style"
+        group="drag"
         @add="addXaxis"
         @update="calcData(true)"
       >
@@ -19,14 +17,14 @@
           <dimension-item
             v-for="(item,index) in view.xaxis"
             :key="item.id"
-            :param="param"
+            :dimension-data="dimensionData"
             :index="index"
             :item="item"
-            :dimension-data="dimensionData"
+            :param="param"
             :quota-data="quotaData"
+            @editItemFilter="showDimensionEditFilter"
             @onDimensionItemChange="dimensionItemChange"
             @onDimensionItemRemove="dimensionItemRemove"
-            @editItemFilter="showDimensionEditFilter"
             @onNameEdit="showRename"
           />
         </transition-group>
@@ -37,16 +35,15 @@
     </el-row>
 
     <el-row class="padding-lr" style="margin-top: 6px;">
-            <span style="width: 80px;text-align: right;">
-                <span >{{ $t('plugin_view_3d_pie.angle') }}</span>/<span>{{ $t('chart.quota') }}</span>
-            </span>
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('plugin_view_3d_pie.angle') }}</span>/<span>{{ $t('chart.quota') }}</span>
+      </span>
       <draggable
         v-model="view.yaxis"
-
-        group="drag"
-        animation="300"
         :move="onMove"
+        animation="300"
         class="drag-block-style"
+        group="drag"
         @add="addYaxis"
         @update="calcData(true)"
       >
@@ -54,17 +51,17 @@
           <quota-item
             v-for="(item,index) in view.yaxis"
             :key="item.id"
-            :param="param"
-            :index="index"
-            :item="item"
             :chart="chart"
             :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
             :quota-data="quotaData"
-            @onQuotaItemChange="quotaItemChange"
-            @onQuotaItemRemove="quotaItemRemove"
+            @editItemCompare="showQuotaEditCompare"
             @editItemFilter="showQuotaEditFilter"
             @onNameEdit="showRename"
-            @editItemCompare="showQuotaEditCompare"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
           />
         </transition-group>
       </draggable>
@@ -78,10 +75,10 @@
 
       <draggable
         v-model="view.customFilter"
-        group="drag"
-        animation="300"
         :move="onMove"
+        animation="300"
         class="theme-item-class"
+        group="drag"
         style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
         @add="addCustomFilter"
         @update="calcData(true)"
@@ -90,13 +87,13 @@
           <filter-item
             v-for="(item,index) in view.customFilter"
             :key="item.id"
-            :param="param"
+            :dimension-data="dimensionData"
             :index="index"
             :item="item"
-            :dimension-data="dimensionData"
+            :param="param"
             :quota-data="quotaData"
-            @onFilterItemRemove="filterItemRemove"
             @editItemFilter="showEditFilter"
+            @onFilterItemRemove="filterItemRemove"
           />
         </transition-group>
       </draggable>
@@ -106,21 +103,20 @@
     </el-row>
 
     <el-row
-      class="padding-lr"
-      style="margin-top: 6px;"
+        class="padding-lr"
+        style="margin-top: 6px;"
     >
-            <span style="width: 80px;text-align: right;">
-            <span>{{ $t('chart.drill') }}</span>
-            /
-            <span>{{ $t('chart.dimension') }}</span>
-            </span>
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('chart.drill') }}</span>
+        /
+        <span>{{ $t('chart.dimension') }}</span>
+      </span>
       <draggable
         v-model="view.drillFields"
-
-        group="drag"
-        animation="300"
         :move="onMove"
+        animation="300"
         class="drag-block-style"
+        group="drag"
         @add="addDrill"
         @update="calcData(true)"
       >
@@ -128,10 +124,10 @@
           <drill-item
             v-for="(item,index) in view.drillFields"
             :key="item.id"
-            :param="param"
+            :dimension-data="dimensionData"
             :index="index"
             :item="item"
-            :dimension-data="dimensionData"
+            :param="param"
             :quota-data="quotaData"
             @onDimensionItemChange="drillItemChange"
             @onDimensionItemRemove="drillItemRemove"
@@ -142,539 +138,556 @@
         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
       </div>
     </el-row>
-
-
-
   </div>
 </template>
 
 <script>
-  import DimensionItem from '@/components/views/DimensionItem'
-  import QuotaItem from '@/components/views/QuotaItem'
-  import FilterItem from '@/components/views/FilterItem'
-  import DrillItem from '@/components/views/DrillItem'
-  import messages from '@/de-base/lang/messages'
+import DimensionItem from '@/components/views/DimensionItem'
+import QuotaItem from '@/components/views/QuotaItem'
+import FilterItem from '@/components/views/FilterItem'
+import DrillItem from '@/components/views/DrillItem'
+import messages from '@/de-base/lang/messages'
 
-  export default {
-    props: {
+export default {
+  props: {
 
-      obj: {
-        type: Object,
-        default: () => {}
+    obj: {
+      type: Object,
+      default: () => {
       }
-    },
-    components: {DimensionItem, QuotaItem, FilterItem, DrillItem},
-    data() {
-      return {
-        widgets: [],
-        places: [],
-        moveId: -1,
-        showDrill: false
-      }
-    },
-    computed: {
-      param() {
-        return this.obj.param
-      },
-      view() {
-        return this.obj.view
-      },
-      chart() {
-        return this.obj.chart
-      },
-      dimensionData() {
-        return this.obj.dimensionData
-      },
-      quotaData() {
-        return this.obj.quotaData
-      }
-    },
-    created() {        
-      this.$emit('on-add-languages', messages)
-    },
-    methods: {
-      executeAxios (url, type, data, callBack) {
-        const param = {
-          url: url,
-          type: type,
-          data: data,
-          callBack: callBack
-        }
-        this.$emit('execute-axios', param)
-        if (process.env.NODE_ENV === 'development') {
-          execute(param).then(res => {
-            if (param.callBack) {
-              param.callBack(res)
-            }
-          }).catch(e => {
-            if (param.error) {
-              param.error(e)
-            }
-          })
-        }
-      },
-
-
-      onMove(e, originalEvent) {
-        this.moveId = e.draggedContext.element.id
-        return true
-      },
-      addXaxis(e) {
-
-        this.dragMoveDuplicate(this.view.xaxis, e)
-        if (this.view.xaxis.length > 1) {
-          this.view.xaxis = [this.view.xaxis[0]]
-        }
-        this.calcData(true)
-      },
-      addYaxis(e) {
-        this.dragCheckType(this.view.yaxis, 'q')
-        this.dragMoveDuplicate(this.view.yaxis, e)
-        if ( this.view.yaxis.length > 1) {
-          this.view.yaxis = [this.view.yaxis[0]]
-        }
-        this.calcData(true)
-      },
-      calcData(cache) {
-        this.$emit('plugin-call-back', {
-          eventName: 'calc-data',
-          eventParam: {cache}
-        })
-      },
-      dimensionItemChange(item) {
-        this.calcData(true)
-      },
-      dimensionItemRemove(item) {
-        if (item.removeType === 'dimension') {
-          this.view.xaxis.splice(item.index, 1)
-        } else if (item.removeType === 'dimensionExt') {
-          this.view.xaxisExt.splice(item.index, 1)
-        }
-        this.calcData(true)
-      },
-      showDimensionEditFilter(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-dimension-edit-filter',
-          eventParam: item
-        })
-      },
-      showRename(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-rename',
-          eventParam: item
-        })
-      },
-
-      quotaItemChange(item) {
-        this.calcData(true)
-      },
-      quotaItemRemove(item) {
-        if (item.removeType === 'quota') {
-          this.view.yaxis.splice(item.index, 1)
-        } else if (item.removeType === 'quotaExt') {
-          this.view.yaxisExt.splice(item.index, 1)
-        }
-        this.calcData(true)
-      },
-      showQuotaEditFilter(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-quota-edit-filter',
-          eventParam: item
-        })
-      },
-      showQuotaEditCompare(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-quota-edit-compare',
-          eventParam: item
-        })
-      },
-      dragCheckType(list, type) {
-        if (list && list.length > 0) {
-          for (let i = 0; i < list.length; i++) {
-            if (list[i].groupType !== type) {
-              list.splice(i, 1)
-            }
-          }
-        }
-      },
-      dragMoveDuplicate(list, e) {
-        const that = this
-        const dup = list.filter(function(m) {
-          return m.id === that.moveId
-        })
-        if (dup && dup.length > 1) {
-          list.splice(e.newDraggableIndex, 1)
-        }
-      },
-      addCustomFilter(e) {
-        // 记录数等自动生成字段不做为过滤条件
-        if (this.view.customFilter && this.view.customFilter.length > 0) {
-          for (let i = 0; i < this.view.customFilter.length; i++) {
-            if (this.view.customFilter[i].id === 'count') {
-              this.view.customFilter.splice(i, 1)
-            }
-          }
-        }
-        this.dragMoveDuplicate(this.view.customFilter, e)
-        this.calcData(true)
-      },
-      filterItemRemove(item) {
-        this.view.customFilter.splice(item.index, 1)
-        this.calcData(true)
-      },
-      showEditFilter(item) {
-        this.$emit('plugin-call-back', {
-          eventName: 'show-edit-filter',
-          eventParam: item
-        })
-      },
-      addDrill(e) {
-        this.dragCheckType(this.view.drillFields, 'd')
-        this.dragMoveDuplicate(this.view.drillFields, e)
-        this.calcData(true)
-      },
-      drillItemChange(item) {
-        this.calcData(true)
-      },
-      drillItemRemove(item) {
-        this.view.drillFields.splice(item.index, 1)
-        this.calcData(true)
-      },
-
-
-
-
     }
+  },
+  components: { DimensionItem, QuotaItem, FilterItem, DrillItem },
+  data() {
+    return {
+      widgets: [],
+      places: [],
+      moveId: -1,
+      showDrill: false
+    }
+  },
+  computed: {
+    param() {
+      return this.obj.param
+    },
+    view() {
+      return this.obj.view
+    },
+    chart() {
+      return this.obj.chart
+    },
+    dimensionData() {
+      return this.obj.dimensionData
+    },
+    quotaData() {
+      return this.obj.quotaData
+    },
+    selectedDimension() {
+      return this.obj.selectedDimension
+    },
+    selectedQuota() {
+      return this.obj.selectedQuota
+    }
+  },
+  created() {
+    this.$emit('on-add-languages', messages)
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      const param = {
+        url: url,
+        type: type,
+        data: data,
+        callBack: callBack
+      }
+      this.$emit('execute-axios', param)
+      if (process.env.NODE_ENV === 'development') {
+        execute(param).then(res => {
+          if (param.callBack) {
+            param.callBack(res)
+          }
+        }).catch(e => {
+          if (param.error) {
+            param.error(e)
+          }
+        })
+      }
+    },
+    onMove(e, originalEvent) {
+      this.moveId = e.draggedContext.element.id
+      return true
+    },
+    addXaxis(e) {
+      this.multiAdd(e, this.view.xaxis)
+      this.dragMoveDuplicate(this.view.xaxis, e)
+      if (this.view.xaxis.length > 1) {
+        this.view.xaxis = [this.view.xaxis[0]]
+      }
+      this.calcData(true)
+    },
+    addYaxis(e) {
+      this.multiAdd(e, this.view.yaxis)
+      this.dragMoveDuplicate(this.view.yaxis, e)
+      this.dragCheckType(this.view.yaxis, 'q')
+      if (this.view.yaxis.length > 1) {
+        this.view.yaxis = [this.view.yaxis[0]]
+      }
+      this.calcData(true)
+    },
+    calcData(cache) {
+      this.$emit('plugin-call-back', {
+        eventName: 'calc-data',
+        eventParam: { cache }
+      })
+    },
+    dimensionItemChange(item) {
+      this.calcData(true)
+    },
+    dimensionItemRemove(item) {
+      if (item.removeType === 'dimension') {
+        this.view.xaxis.splice(item.index, 1)
+      } else if (item.removeType === 'dimensionExt') {
+        this.view.xaxisExt.splice(item.index, 1)
+      }
+      this.calcData(true)
+    },
+    showDimensionEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-dimension-edit-filter',
+        eventParam: item
+      })
+    },
+    showRename(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-rename',
+        eventParam: item
+      })
+    },
 
+    quotaItemChange(item) {
+      this.calcData(true)
+    },
+    quotaItemRemove(item) {
+      if (item.removeType === 'quota') {
+        this.view.yaxis.splice(item.index, 1)
+      } else if (item.removeType === 'quotaExt') {
+        this.view.yaxisExt.splice(item.index, 1)
+      }
+      this.calcData(true)
+    },
+    showQuotaEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-quota-edit-filter',
+        eventParam: item
+      })
+    },
+    showQuotaEditCompare(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-quota-edit-compare',
+        eventParam: item
+      })
+    },
+    dragCheckType(list, type) {
+      if (list && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].groupType !== type) {
+            list.splice(i, 1)
+          }
+        }
+      }
+    },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      if (sourceList.length > 1) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
+    dragMoveDuplicate(list, e) {
+      let newItems = [list[e.newDraggableIndex]]
+      if (e.item.classList.contains('selected-item')) {
+        const groupDie = e.item.classList.contains('group-dimension')
+        newItems = groupDie ? this.selectedDimension : this.selectedQuota
+      }
+      const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+      // 倒序删除
+      for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+        if (preIds.includes(list[i].id)) {
+          list.splice(i, 1)
+        }
+      }
+    },
+    addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
+      // 记录数等自动生成字段不做为过滤条件
+      if (this.view.customFilter && this.view.customFilter.length > 0) {
+        for (let i = 0; i < this.view.customFilter.length; i++) {
+          if (this.view.customFilter[i].id === 'count') {
+            this.view.customFilter.splice(i, 1)
+          }
+        }
+      }
+      this.calcData(true)
+    },
+    filterItemRemove(item) {
+      this.view.customFilter.splice(item.index, 1)
+      this.calcData(true)
+    },
+    showEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-edit-filter',
+        eventParam: item
+      })
+    },
+    addDrill(e) {
+      this.multiAdd(e, this.view.drillFields)
+      this.dragMoveDuplicate(this.view.drillFields, e)
+      this.dragCheckType(this.view.drillFields, 'd')
+      this.calcData(true)
+    },
+    drillItemChange(item) {
+      this.calcData(true)
+    },
+    drillItemRemove(item) {
+      this.view.drillFields.splice(item.index, 1)
+      this.calcData(true)
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .padding-lr {
-    padding: 0 6px;
+.padding-lr {
+  padding: 0 6px;
+}
+
+.itxst {
+  margin: 10px;
+  text-align: left;
+}
+
+.col {
+  width: 40%;
+  flex: 1;
+  padding: 10px;
+  border: solid 1px #eee;
+  border-radius: 5px;
+  float: left;
+}
+
+.col + .col {
+  margin-left: 10px;
+}
+
+.view-panel {
+  display: flex;
+  height: calc(100% - 40px);
+  background-color: #f7f8fa;
+}
+
+.blackTheme .view-panel {
+  background-color: var(--MainBG);
+}
+
+.drag-list {
+  height: calc(100% - 26px);
+  overflow: auto;
+}
+
+.item-dimension {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 2px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+
+.item-quota {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-quota {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-quota + .item-quota {
+  margin-top: 2px;
+}
+
+.item-quota:hover {
+  color: #67c23a;
+  background: #f0f9eb;
+  border-color: #b2d3a3;
+  cursor: pointer;
+}
+
+.blackTheme .item-quota:hover {
+  background: var(--ContentBG);
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+
+span {
+  font-size: 12px;
+}
+
+.tab-header > > > .el-tabs__header {
+  border-top: solid 1px #eee;
+  border-right: solid 1px #eee;
+}
+
+.tab-header > > > .el-tabs__item {
+  font-size: 12px;
+  padding: 0 60px !important;
+}
+
+.blackTheme .tab-header > > > .el-tabs__item {
+  background-color: var(--MainBG);
+}
+
+.tab-header > > > .el-tabs__nav-scroll {
+  padding-left: 0 !important;
+}
+
+.tab-header > > > .el-tabs__header {
+  margin: 0 !important;
+}
+
+.tab-header > > > .el-tabs__content {
+  height: 100%;
+}
+
+.draggable-group {
+  display: block;
+  width: 100%;
+  height: calc(100% - 6px);
+}
+
+.chart-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.el-radio {
+  margin: 5px;
+}
+
+.el-radio > > > .el-radio__label {
+  padding-left: 0;
+}
+
+.attr-style {
+  height: calc(100vh - 56px - 60px - 40px - 40px);
+}
+
+.blackTheme .attr-style {
+  color: var(--TextPrimary);
+}
+
+.attr-selector {
+  width: 100%;
+  height: 100%;
+  margin: 6px 0;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  background-color: white
+}
+
+.blackTheme .attr-selector {
+
+  background-color: var(--MainBG)
+}
+
+.disabled-none-cursor {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.chart-class {
+  height: 100%;
+  padding: 10px;
+}
+
+.table-class {
+  height: calc(100% - 20px);
+}
+
+.dialog-css > > > .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css > > > .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css > > > .el-dialog__body {
+  padding: 10px 20px 20px;
+}
+
+.filter-btn-class {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-error-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ece7e7;
+}
+
+.blackTheme .chart-error-class {
+
+  background-color: var(--MainBG)
+}
+
+.field-height {
+  height: calc(50% - 20px);
+  border-top: 1px solid #E6E6E6;
+}
+
+.blackTheme .field-height {
+
+  border-top: 1px solid;
+  border-color: var(--TableBorderColor) !important;
+}
+
+.padding-tab {
+  padding: 0;
+  height: 100%;
+}
+
+.tree-select-span {
+  > > > div.vue-treeselect__control {
+    height: 32px !important;
+    font-weight: normal !important;
   }
+}
 
-  .itxst {
-    margin: 10px;
-    text-align: left;
-  }
+.drag-block-style {
+  padding: 2px 0 0 0;
+  width: 100%;
+  min-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  overflow-x: hidden;
+  display: flex;
+  align-items: center;
+  background-color: white;
+}
 
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
+.blackTheme .drag-block-style {
+  border: 1px solid;
+  border-color: var(--TableBorderColor);
+  background-color: var(--ContentBG);
+}
 
-  .col + .col {
-    margin-left: 10px;
-  }
+.drag-placeholder-style {
+  position: absolute;
+  top: calc(50% - 2px);
+  left: 0;
+  width: 100%;
+  color: #CCCCCC;
+}
 
-  .view-panel {
-    display: flex;
-    height: calc(100% - 40px);
-    background-color: #f7f8fa;
-  }
+.blackTheme .drag-placeholder-style {
+  color: var(--TextPrimary);
+}
 
-  .blackTheme .view-panel {
-    background-color: var(--MainBG);
-  }
+.drag-placeholder-style-span {
+  padding-left: 16px;
+}
 
-  .drag-list {
-    height: calc(100% - 26px);
-    overflow: auto;
-  }
+.blackTheme .theme-border-class {
+  color: var(--TextPrimary) !important;
+  background-color: var(--ContentBG);
+}
 
-  .item-dimension {
-    padding: 2px 10px;
-    margin: 2px 2px 0 2px;
-    border: solid 1px #eee;
-    text-align: left;
-    color: #606266;
-    /*background-color: rgba(35,46,64,.05);*/
-    background-color: white;
-    display: block;
-    word-break: break-all;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+.blackTheme .padding-lr {
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .blackTheme .item-dimension {
-    border: solid 1px;
-    border-color: var(--TableBorderColor);
-    color: var(--TextPrimary);
-    background-color: var(--MainBG);
-  }
+.blackTheme .theme-item-class {
+  background-color: var(--MainBG) !important;
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .item-dimension + .item-dimension {
-    margin-top: 2px;
-  }
+.icon-class {
+  color: #6c6c6c;
+}
 
-  .item-dimension:hover {
-    color: #1890ff;
-    background: #e8f4ff;
-    border-color: #a3d3ff;
-    cursor: pointer;
-  }
+.blackTheme .icon-class {
+  color: #cccccc;
+}
 
-  .blackTheme .item-dimension:hover {
-    color: var(--Main);
-    background: var(--ContentBG);
-    cursor: pointer;
-  }
+.result-count {
+  width: 80px;
+}
 
-  .item-quota {
-    padding: 2px 10px;
-    margin: 2px 2px 0 2px;
-    border: solid 1px #eee;
-    text-align: left;
-    color: #606266;
-    background-color: white;
-    display: block;
-    word-break: break-all;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .blackTheme .item-quota {
-    border: solid 1px;
-    border-color: var(--TableBorderColor);
-    color: var(--TextPrimary);
-    background-color: var(--MainBG);
-  }
-
-  .item-quota + .item-quota {
-    margin-top: 2px;
-  }
-
-  .item-quota:hover {
-    color: #67c23a;
-    background: #f0f9eb;
-    border-color: #b2d3a3;
-    cursor: pointer;
-  }
-
-  .blackTheme .item-quota:hover {
-    background: var(--ContentBG);
-  }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  span {
-    font-size: 12px;
-  }
-
-  .tab-header > > > .el-tabs__header {
-    border-top: solid 1px #eee;
-    border-right: solid 1px #eee;
-  }
-
-  .tab-header > > > .el-tabs__item {
-    font-size: 12px;
-    padding: 0 60px!important;
-  }
-
-  .blackTheme .tab-header > > > .el-tabs__item {
-    background-color: var(--MainBG);
-  }
-
-  .tab-header > > > .el-tabs__nav-scroll {
-    padding-left: 0 !important;
-  }
-
-  .tab-header > > > .el-tabs__header {
-    margin: 0 !important;
-  }
-
-  .tab-header > > > .el-tabs__content {
-    height: 100%;
-  }
-
-  .draggable-group {
-    display: block;
-    width: 100%;
-    height: calc(100% - 6px);
-  }
-
-  .chart-icon {
-    width: 20px;
-    height: 20px;
-  }
-
-  .el-radio {
-    margin: 5px;
-  }
-
-  .el-radio > > > .el-radio__label {
-    padding-left: 0;
-  }
-
-  .attr-style {
-    height: calc(100vh - 56px - 60px - 40px - 40px);
-  }
-
-  .blackTheme .attr-style {
-    color: var(--TextPrimary);
-  }
-
-  .attr-selector {
-    width: 100%;
-    height: 100%;
-    margin: 6px 0;
-    padding: 0 4px;
-    display: flex;
-    align-items: center;
-    background-color: white
-  }
-
-  .blackTheme .attr-selector {
-
-    background-color: var(--MainBG)
-  }
-
-  .disabled-none-cursor {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .chart-class {
-    height: 100%;
-    padding: 10px;
-  }
-
-  .table-class {
-    height: calc(100% - 20px);
-  }
-
-  .dialog-css > > > .el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css > > > .el-dialog__header {
-    padding: 20px 20px 0;
-  }
-
-  .dialog-css > > > .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
-
-  .filter-btn-class {
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .chart-error-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ece7e7;
-  }
-
-  .blackTheme .chart-error-class {
-
-    background-color: var(--MainBG)
-  }
-
-  .field-height {
-    height: calc(50% - 20px);
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .blackTheme .field-height {
-
-    border-top: 1px solid;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .padding-tab {
-    padding: 0;
-    height: 100%;
-  }
-
-  .tree-select-span {
-    > > > div.vue-treeselect__control {
-      height: 32px !important;
-      font-weight: normal !important;
-    }
-  }
-
-  .drag-block-style {
-    padding: 2px 0 0 0;
-    width: 100%;
-    min-height: 32px;
-    border-radius: 4px;
-    border: 1px solid #DCDFE6;
-    overflow-x: hidden;
-    display: flex;
-    align-items: center;
-    background-color: white;
-  }
-
-  .blackTheme .drag-block-style {
-    border: 1px solid;
-    border-color: var(--TableBorderColor);
-    background-color: var(--ContentBG);
-  }
-
-  .drag-placeholder-style {
-    position: absolute;
-    top: calc(50% - 2px);
-    left: 0;
-    width: 100%;
-    color: #CCCCCC;
-  }
-
-  .blackTheme .drag-placeholder-style {
-    color: var(--TextPrimary);
-  }
-
-  .drag-placeholder-style-span {
-    padding-left: 16px;
-  }
-
-  .blackTheme .theme-border-class {
-    color: var(--TextPrimary) !important;
-    background-color: var(--ContentBG);
-  }
-
-  .blackTheme .padding-lr {
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .blackTheme .theme-item-class {
-    background-color: var(--MainBG) !important;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .icon-class {
-    color: #6c6c6c;
-  }
-
-  .blackTheme .icon-class {
-    color: #cccccc;
-  }
-
-  .result-count {
-    width: 80px;
-  }
-
-  .radio-span > > > .el-radio__label {
-    margin-left: 4px;
-  }
+.radio-span > > > .el-radio__label {
+  margin-left: 4px;
+}
 </style>
diff --git a/extensions/dataease-extensions-view/view-bubblemap/view-bubblemap-frontend/src/views/echarts/map/buddle/data.vue b/extensions/dataease-extensions-view/view-bubblemap/view-bubblemap-frontend/src/views/echarts/map/buddle/data.vue
index b4e0834faa..1f7a036ee7 100644
--- a/extensions/dataease-extensions-view/view-bubblemap/view-bubblemap-frontend/src/views/echarts/map/buddle/data.vue
+++ b/extensions/dataease-extensions-view/view-bubblemap/view-bubblemap-frontend/src/views/echarts/map/buddle/data.vue
@@ -1,170 +1,163 @@
 <template>
-    <div>
-        <el-row class="padding-lr" v-if="places && places.length > 0">
-            <span style="width: 80px;text-align: right;">
-                <span>{{ $t('plugin_view_buddle_map.area_range') }}</span>
-            </span>
-            <span class="tree-select-span">
-                <treeselect
-                    ref="mapSelector"
-                    v-model="view.customAttr.areaCode"
-                    :options="places"
-                    :placeholder="$t('chart.select_map_range')"
-                    :normalizer="normalizer"
-                    :no-children-text="$t('commons.treeselect.no_children_text')"
-                    :no-options-text="$t('commons.treeselect.no_options_text')"
-                    :no-results-text="$t('commons.treeselect.no_results_text')"
-                    @input="calcData"
-                    @deselect="calcData"
-                />
-            </span>
-        </el-row>
-        
-        <el-row class="padding-lr">                  
-            <span style="width: 80px;text-align: right;">
-                <span >{{ $t('plugin_view_buddle_map.area')}}</span>/<span >{{ $t('chart.dimension') }}</span>                                            
-            </span>
-            <draggable
-                v-model="view.xaxis"
-                
-                group="drag"
-                animation="300"
-                :move="onMove"
-                class="drag-block-style"
-                @add="addXaxis"
-                @update="calcData(true)"
-            >
-            <transition-group class="draggable-group">
-                <dimension-item
-                    v-for="(item,index) in view.xaxis"
-                    :key="item.id"
-                    :param="param"
-                    :index="index"
-                    :item="item"
-                    :dimension-data="dimensionData"
-                    :quota-data="quotaData"
-                    @onDimensionItemChange="dimensionItemChange"
-                    @onDimensionItemRemove="dimensionItemRemove"
-                    @editItemFilter="showDimensionEditFilter"
-                    @onNameEdit="showRename"
-                />
-            </transition-group>
-            </draggable>
-            <div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
-                <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-            </div>
-        </el-row>
+  <div>
+    <el-row v-if="places && places.length > 0" class="padding-lr">
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('plugin_view_buddle_map.area_range') }}</span>
+      </span>
+      <span class="tree-select-span">
+        <treeselect
+          ref="mapSelector"
+          v-model="view.customAttr.areaCode"
+          :no-children-text="$t('commons.treeselect.no_children_text')"
+          :no-options-text="$t('commons.treeselect.no_options_text')"
+          :no-results-text="$t('commons.treeselect.no_results_text')"
+          :normalizer="normalizer"
+          :options="places"
+          :placeholder="$t('chart.select_map_range')"
+          @deselect="calcData"
+          @input="calcData"
+        />
+      </span>
+    </el-row>
 
-        <el-row class="padding-lr" style="margin-top: 6px;">
-            <span style="width: 80px;text-align: right;">                        
-                <span >{{ $t('plugin_view_buddle_map.buddle_size') }}</span>/<span>{{ $t('chart.quota') }}</span>                                                                        
-            </span>
-            <draggable
-                v-model="view.yaxis"
-                
-                group="drag"
-                animation="300"
-                :move="onMove"
-                class="drag-block-style"
-                @add="addYaxis"
-                @update="calcData(true)"
-            >
-                <transition-group class="draggable-group">
-                    <quota-item
-                        v-for="(item,index) in view.yaxis"
-                        :key="item.id"
-                        :param="param"
-                        :index="index"
-                        :item="item"
-                        :chart="chart"
-                        :dimension-data="dimensionData"
-                        :quota-data="quotaData"
-                        @onQuotaItemChange="quotaItemChange"
-                        @onQuotaItemRemove="quotaItemRemove"
-                        @editItemFilter="showQuotaEditFilter"
-                        @onNameEdit="showRename"
-                        @editItemCompare="showQuotaEditCompare"
-                    />
-                </transition-group>
-            </draggable>
-            <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
-                <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-            </div>
-        </el-row>
+    <el-row class="padding-lr">
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('plugin_view_buddle_map.area') }}</span>/<span>{{ $t('chart.dimension') }}</span>
+      </span>
+      <draggable
+        v-model="view.xaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addXaxis"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <dimension-item
+            v-for="(item,index) in view.xaxis"
+            :key="item.id"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @editItemFilter="showDimensionEditFilter"
+            @onDimensionItemChange="dimensionItemChange"
+            @onDimensionItemRemove="dimensionItemRemove"
+            @onNameEdit="showRename"
+          />
+        </transition-group>
+      </draggable>
+      <div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
 
-        <el-row class="padding-lr" style="margin-top: 6px;">
-            <span>{{ $t('chart.result_filter') }}</span>
-            
-            <draggable
-                v-model="view.customFilter"
-                group="drag"
-                animation="300"
-                :move="onMove"
-                class="theme-item-class"
-                style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                @add="addCustomFilter"
-                @update="calcData(true)"
-            >
-            <transition-group class="draggable-group">
-                <filter-item
-                    v-for="(item,index) in view.customFilter"
-                    :key="item.id"
-                    :param="param"
-                    :index="index"
-                    :item="item"
-                    :dimension-data="dimensionData"
-                    :quota-data="quotaData"
-                    @onFilterItemRemove="filterItemRemove"
-                    @editItemFilter="showEditFilter"
-                />
-            </transition-group>
-            </draggable>
-            <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
-            <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-            </div>
-        </el-row>
-        
-        <el-row
-            class="padding-lr"
-            style="margin-top: 6px;"
-        >
-            <span style="width: 80px;text-align: right;">
-            <span>{{ $t('chart.drill') }}</span>
-            /
-            <span>{{ $t('chart.dimension') }}</span>
-            </span>
-            <draggable
-                v-model="view.drillFields"
-                
-                group="drag"
-                animation="300"
-                :move="onMove"
-                class="drag-block-style"
-                @add="addDrill"
-                @update="calcData(true)"
-            >
-            <transition-group class="draggable-group">
-                <drill-item
-                    v-for="(item,index) in view.drillFields"
-                    :key="item.id"
-                    :param="param"
-                    :index="index"
-                    :item="item"
-                    :dimension-data="dimensionData"
-                    :quota-data="quotaData"
-                    @onDimensionItemChange="drillItemChange"
-                    @onDimensionItemRemove="drillItemRemove"
-                />
-            </transition-group>
-            </draggable>
-            <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
-            <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-            </div>
-        </el-row>
+    <el-row class="padding-lr" style="margin-top: 6px;">
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('plugin_view_buddle_map.buddle_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
+      </span>
+      <draggable
+        v-model="view.yaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addYaxis"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <quota-item
+            v-for="(item,index) in view.yaxis"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @editItemCompare="showQuotaEditCompare"
+            @editItemFilter="showQuotaEditFilter"
+            @onNameEdit="showRename"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
+          />
+        </transition-group>
+      </draggable>
+      <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
 
+    <el-row class="padding-lr" style="margin-top: 6px;">
+      <span>{{ $t('chart.result_filter') }}</span>
+      <draggable
+        v-model="view.customFilter"
+        :move="onMove"
+        animation="300"
+        class="theme-item-class"
+        group="drag"
+        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+        @add="addCustomFilter"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <filter-item
+            v-for="(item,index) in view.customFilter"
+            :key="item.id"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @editItemFilter="showEditFilter"
+            @onFilterItemRemove="filterItemRemove"
+          />
+        </transition-group>
+      </draggable>
+      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
 
-       
-    </div>
+    <el-row
+        class="padding-lr"
+        style="margin-top: 6px;"
+    >
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('chart.drill') }}</span>
+        /
+        <span>{{ $t('chart.dimension') }}</span>
+      </span>
+      <draggable
+        v-model="view.drillFields"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addDrill"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <drill-item
+            v-for="(item,index) in view.drillFields"
+            :key="item.id"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @onDimensionItemChange="drillItemChange"
+            @onDimensionItemRemove="drillItemRemove"
+          />
+        </transition-group>
+      </draggable>
+      <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
+  </div>
 </template>
 
 <script>
@@ -173,549 +166,580 @@ import QuotaItem from '@/components/views/QuotaItem'
 import FilterItem from '@/components/views/FilterItem'
 import DrillItem from '@/components/views/DrillItem'
 import messages from '@/de-base/lang/messages'
+
 export default {
-    props: {
-       
-        obj: {
-            type: Object,
-            default: () => {}
-        }
-    },
-    components: {DimensionItem, QuotaItem, FilterItem, DrillItem},
-    data() {
-        return {
-            widgets: [],
-            places: [],
-            moveId: -1,
-            showDrill: false
-        }
-    },
-    computed: {
-        param() {
-            return this.obj.param
-        },
-        view() {
-            return this.obj.view
-        },
-        chart() {
-            return this.obj.chart
-        },
-        dimensionData() {
-            return this.obj.dimensionData
-        },
-        quotaData() {
-            return this.obj.quotaData
-        }
-    },
-    created() {
-        this.$emit('on-add-languages', messages)
-        this.initAreaCode()
-        this.initAreas()
-    },
-    methods: {
-        executeAxios (url, type, data, callBack) {
-            const param = {
-                url: url,
-                type: type,
-                data: data,
-                callBack: callBack
-            }
-            this.$emit('execute-axios', param)
-            if (process.env.NODE_ENV === 'development') {
-                execute(param).then(res => {
-                if (param.callBack) {
-                    param.callBack(res)
-                }
-                }).catch(e => {
-                if (param.error) {
-                    param.error(e)
-                }
-                })
-            }
-        },
-        initAreas() {
-            Object.keys(this.places).length === 0 && this.executeAxios('/api/map/globalEntitys/0','get', {}, res => {
-                this.places = res.data
-            })
-        },
-        initAreaCode() {
-            if (this.view && this.view.customAttr && !this.view.customAttr.areaCode) {
-                this.view.customAttr.areaCode = "156100000"
-            }
-        },
-        normalizer(node) {
-            const resultNode = {
-                id: node.code,
-                label: node.name
-            }
-            if (node.children && node.children.length > 0) {
-                resultNode.children = node.children
-            }
+  props: {
 
-            if (resultNode.children && (!node.children || node.children.length === 0)) {
-                delete resultNode.children
-            }
-            return resultNode
-        },
-        onMove(e, originalEvent) {
-            this.moveId = e.draggedContext.element.id
-            return true
-        },
-        addXaxis(e) {
-            if (this.view.type !== 'table-info') {
-                this.dragCheckType(this.view.xaxis, 'd')
-            }
-            this.dragMoveDuplicate(this.view.xaxis, e)
-            if (this.view.xaxis.length > 1) {
-                this.view.xaxis = [this.view.xaxis[0]]
-            }
-            this.calcData(true)
-        },
-        addYaxis(e) {
-            this.dragCheckType(this.view.yaxis, 'q')
-            this.dragMoveDuplicate(this.view.yaxis, e)
-            if ( this.view.yaxis.length > 1) {
-                this.view.yaxis = [this.view.yaxis[0]]
-            }
-            this.calcData(true)
-        },
-        calcData(cache) {
-            this.$emit('plugin-call-back', {
-                eventName: 'calc-data',
-                eventParam: {cache}
-            })
-        },
-        dimensionItemChange(item) {
-            this.calcData(true)
-        },
-        dimensionItemRemove(item) {
-            if (item.removeType === 'dimension') {
-                this.view.xaxis.splice(item.index, 1)
-            } else if (item.removeType === 'dimensionExt') {
-                this.view.xaxisExt.splice(item.index, 1)
-            }
-            this.calcData(true)
-        },
-        showDimensionEditFilter(item) {
-            
-            this.$emit('plugin-call-back', {
-                eventName: 'show-dimension-edit-filter',
-                eventParam: item
-            })
-        },
-        showRename(item) {
-           
-            this.$emit('plugin-call-back', {
-                eventName: 'show-rename',
-                eventParam: item
-            })
-        },
-
-        quotaItemChange(item) {
-            this.calcData(true)
-        },
-        quotaItemRemove(item) {
-            if (item.removeType === 'quota') {
-                this.view.yaxis.splice(item.index, 1)
-            } else if (item.removeType === 'quotaExt') {
-                this.view.yaxisExt.splice(item.index, 1)
-            }
-            this.calcData(true)
-        },
-        showQuotaEditFilter(item) {
-            
-            this.$emit('plugin-call-back', {
-                eventName: 'show-quota-edit-filter',
-                eventParam: item
-            })
-        },
-        showQuotaEditCompare(item) {
-           
-            this.$emit('plugin-call-back', {
-                eventName: 'show-quota-edit-compare',
-                eventParam: item
-            })
-        },
-        dragCheckType(list, type) {
-            if (list && list.length > 0) {
-                for (let i = 0; i < list.length; i++) {
-                if (list[i].groupType !== type) {
-                    list.splice(i, 1)
-                }
-                }
-            }
-        },
-        dragMoveDuplicate(list, e) {
-            const that = this
-            const dup = list.filter(function(m) {
-                return m.id === that.moveId
-            })
-            if (dup && dup.length > 1) {
-                list.splice(e.newDraggableIndex, 1)
-            }
-        },
-        addCustomFilter(e) {
-            // 记录数等自动生成字段不做为过滤条件
-            if (this.view.customFilter && this.view.customFilter.length > 0) {
-                for (let i = 0; i < this.view.customFilter.length; i++) {
-                if (this.view.customFilter[i].id === 'count') {
-                    this.view.customFilter.splice(i, 1)
-                }
-                }
-            }
-            this.dragMoveDuplicate(this.view.customFilter, e)
-            this.calcData(true)
-        },
-        filterItemRemove(item) {
-            this.view.customFilter.splice(item.index, 1)
-            this.calcData(true)
-        },
-        showEditFilter(item) {
-            this.$emit('plugin-call-back', {
-                eventName: 'show-edit-filter',
-                eventParam: item
-            })
-        },
-        addDrill(e) {
-            this.dragCheckType(this.view.drillFields, 'd')
-            this.dragMoveDuplicate(this.view.drillFields, e)
-            this.calcData(true)
-        },
-        drillItemChange(item) {
-            this.calcData(true)
-        },
-        drillItemRemove(item) {
-            this.view.drillFields.splice(item.index, 1)
-            this.calcData(true)
-        }
-        
+    obj: {
+      type: Object,
+      default: () => {
+      }
     }
-    
+  },
+  components: { DimensionItem, QuotaItem, FilterItem, DrillItem },
+  data() {
+    return {
+      widgets: [],
+      places: [],
+      moveId: -1,
+      showDrill: false
+    }
+  },
+  computed: {
+    param() {
+      return this.obj.param
+    },
+    view() {
+      return this.obj.view
+    },
+    chart() {
+      return this.obj.chart
+    },
+    dimensionData() {
+      return this.obj.dimensionData
+    },
+    quotaData() {
+      return this.obj.quotaData
+    },
+    selectedDimension() {
+      return this.obj.selectedDimension
+    },
+    selectedQuota() {
+      return this.obj.selectedQuota
+    }
+  },
+  created() {
+    this.$emit('on-add-languages', messages)
+    this.initAreaCode()
+    this.initAreas()
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      const param = {
+        url: url,
+        type: type,
+        data: data,
+        callBack: callBack
+      }
+      this.$emit('execute-axios', param)
+      if (process.env.NODE_ENV === 'development') {
+        execute(param).then(res => {
+          if (param.callBack) {
+            param.callBack(res)
+          }
+        }).catch(e => {
+          if (param.error) {
+            param.error(e)
+          }
+        })
+      }
+    },
+    initAreas() {
+      Object.keys(this.places).length === 0 && this.executeAxios('/api/map/globalEntitys/0', 'get', {}, res => {
+        this.places = res.data
+      })
+    },
+    initAreaCode() {
+      if (this.view && this.view.customAttr && !this.view.customAttr.areaCode) {
+        this.view.customAttr.areaCode = '156100000'
+      }
+    },
+    normalizer(node) {
+      const resultNode = {
+        id: node.code,
+        label: node.name
+      }
+      if (node.children && node.children.length > 0) {
+        resultNode.children = node.children
+      }
+
+      if (resultNode.children && (!node.children || node.children.length === 0)) {
+        delete resultNode.children
+      }
+      return resultNode
+    },
+    onMove(e, originalEvent) {
+      this.moveId = e.draggedContext.element.id
+      return true
+    },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      if (sourceList.length > 1) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
+    addXaxis(e) {
+      this.multiAdd(e, this.view.xaxis)
+      this.dragMoveDuplicate(this.view.xaxis, e)
+      if (this.view.type !== 'table-info') {
+        this.dragCheckType(this.view.xaxis, 'd')
+      }
+      if (this.view.xaxis.length > 1) {
+        this.view.xaxis = [this.view.xaxis[0]]
+      }
+      this.calcData(true)
+    },
+    addYaxis(e) {
+      this.multiAdd(e, this.view.yaxis)
+      this.dragMoveDuplicate(this.view.yaxis, e)
+      this.dragCheckType(this.view.yaxis, 'q')
+      if (this.view.yaxis.length > 1) {
+        this.view.yaxis = [this.view.yaxis[0]]
+      }
+      this.calcData(true)
+    },
+    calcData(cache) {
+      this.$emit('plugin-call-back', {
+        eventName: 'calc-data',
+        eventParam: { cache }
+      })
+    },
+    dimensionItemChange(item) {
+      this.calcData(true)
+    },
+    dimensionItemRemove(item) {
+      if (item.removeType === 'dimension') {
+        this.view.xaxis.splice(item.index, 1)
+      } else if (item.removeType === 'dimensionExt') {
+        this.view.xaxisExt.splice(item.index, 1)
+      }
+      this.calcData(true)
+    },
+    showDimensionEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-dimension-edit-filter',
+        eventParam: item
+      })
+    },
+    showRename(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-rename',
+        eventParam: item
+      })
+    },
+
+    quotaItemChange(item) {
+      this.calcData(true)
+    },
+    quotaItemRemove(item) {
+      if (item.removeType === 'quota') {
+        this.view.yaxis.splice(item.index, 1)
+      } else if (item.removeType === 'quotaExt') {
+        this.view.yaxisExt.splice(item.index, 1)
+      }
+      this.calcData(true)
+    },
+    showQuotaEditFilter(item) {
+
+      this.$emit('plugin-call-back', {
+        eventName: 'show-quota-edit-filter',
+        eventParam: item
+      })
+    },
+    showQuotaEditCompare(item) {
+
+      this.$emit('plugin-call-back', {
+        eventName: 'show-quota-edit-compare',
+        eventParam: item
+      })
+    },
+    dragCheckType(list, type) {
+      if (list && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].groupType !== type) {
+            list.splice(i, 1)
+          }
+        }
+      }
+    },
+    dragMoveDuplicate(list, e) {
+      let newItems = [list[e.newDraggableIndex]]
+      if (e.item.classList.contains('selected-item')) {
+        const groupDie = e.item.classList.contains('group-dimension')
+        newItems = groupDie ? this.selectedDimension : this.selectedQuota
+      }
+      const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+      // 倒序删除
+      for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+        if (preIds.includes(list[i].id)) {
+          list.splice(i, 1)
+        }
+      }
+    },
+    addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
+      // 记录数等自动生成字段不做为过滤条件
+      if (this.view.customFilter && this.view.customFilter.length > 0) {
+        for (let i = 0; i < this.view.customFilter.length; i++) {
+          if (this.view.customFilter[i].id === 'count') {
+            this.view.customFilter.splice(i, 1)
+          }
+        }
+      }
+      this.calcData(true)
+    },
+    filterItemRemove(item) {
+      this.view.customFilter.splice(item.index, 1)
+      this.calcData(true)
+    },
+    showEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-edit-filter',
+        eventParam: item
+      })
+    },
+    addDrill(e) {
+      this.multiAdd(e, this.view.drillFields)
+      this.dragMoveDuplicate(this.view.drillFields, e)
+      this.dragCheckType(this.view.drillFields, 'd')
+      this.calcData(true)
+    },
+    drillItemChange(item) {
+      this.calcData(true)
+    },
+    drillItemRemove(item) {
+      this.view.drillFields.splice(item.index, 1)
+      this.calcData(true)
+    }
+
+  }
+
 }
 </script>
 
 <style lang="scss" scoped>
-  .padding-lr {
-    padding: 0 6px;
+.padding-lr {
+  padding: 0 6px;
+}
+
+.itxst {
+  margin: 10px;
+  text-align: left;
+}
+
+.col {
+  width: 40%;
+  flex: 1;
+  padding: 10px;
+  border: solid 1px #eee;
+  border-radius: 5px;
+  float: left;
+}
+
+.col + .col {
+  margin-left: 10px;
+}
+
+.view-panel {
+  display: flex;
+  height: calc(100% - 40px);
+  background-color: #f7f8fa;
+}
+
+.blackTheme .view-panel {
+  background-color: var(--MainBG);
+}
+
+.drag-list {
+  height: calc(100% - 26px);
+  overflow: auto;
+}
+
+.item-dimension {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 2px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+
+.item-quota {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-quota {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-quota + .item-quota {
+  margin-top: 2px;
+}
+
+.item-quota:hover {
+  color: #67c23a;
+  background: #f0f9eb;
+  border-color: #b2d3a3;
+  cursor: pointer;
+}
+
+.blackTheme .item-quota:hover {
+  background: var(--ContentBG);
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+
+span {
+  font-size: 12px;
+}
+
+.tab-header > > > .el-tabs__header {
+  border-top: solid 1px #eee;
+  border-right: solid 1px #eee;
+}
+
+.tab-header > > > .el-tabs__item {
+  font-size: 12px;
+  padding: 0 60px !important;
+}
+
+.blackTheme .tab-header > > > .el-tabs__item {
+  background-color: var(--MainBG);
+}
+
+.tab-header > > > .el-tabs__nav-scroll {
+  padding-left: 0 !important;
+}
+
+.tab-header > > > .el-tabs__header {
+  margin: 0 !important;
+}
+
+.tab-header > > > .el-tabs__content {
+  height: 100%;
+}
+
+.draggable-group {
+  display: block;
+  width: 100%;
+  height: calc(100% - 6px);
+}
+
+.chart-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.el-radio {
+  margin: 5px;
+}
+
+.el-radio > > > .el-radio__label {
+  padding-left: 0;
+}
+
+.attr-style {
+  height: calc(100vh - 56px - 60px - 40px - 40px);
+}
+
+.blackTheme .attr-style {
+  color: var(--TextPrimary);
+}
+
+.attr-selector {
+  width: 100%;
+  height: 100%;
+  margin: 6px 0;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  background-color: white
+}
+
+.blackTheme .attr-selector {
+
+  background-color: var(--MainBG)
+}
+
+.disabled-none-cursor {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.chart-class {
+  height: 100%;
+  padding: 10px;
+}
+
+.table-class {
+  height: calc(100% - 20px);
+}
+
+.dialog-css > > > .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css > > > .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css > > > .el-dialog__body {
+  padding: 10px 20px 20px;
+}
+
+.filter-btn-class {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-error-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ece7e7;
+}
+
+.blackTheme .chart-error-class {
+
+  background-color: var(--MainBG)
+}
+
+.field-height {
+  height: calc(50% - 20px);
+  border-top: 1px solid #E6E6E6;
+}
+
+.blackTheme .field-height {
+
+  border-top: 1px solid;
+  border-color: var(--TableBorderColor) !important;
+}
+
+.padding-tab {
+  padding: 0;
+  height: 100%;
+}
+
+.tree-select-span {
+  > > > div.vue-treeselect__control {
+    height: 32px !important;
+    font-weight: normal !important;
   }
+}
 
-  .itxst {
-    margin: 10px;
-    text-align: left;
-  }
+.drag-block-style {
+  padding: 2px 0 0 0;
+  width: 100%;
+  min-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  overflow-x: hidden;
+  display: flex;
+  align-items: center;
+  background-color: white;
+}
 
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
+.blackTheme .drag-block-style {
+  border: 1px solid;
+  border-color: var(--TableBorderColor);
+  background-color: var(--ContentBG);
+}
 
-  .col + .col {
-    margin-left: 10px;
-  }
+.drag-placeholder-style {
+  position: absolute;
+  top: calc(50% - 2px);
+  left: 0;
+  width: 100%;
+  color: #CCCCCC;
+}
 
-  .view-panel {
-    display: flex;
-    height: calc(100% - 40px);
-    background-color: #f7f8fa;
-  }
+.blackTheme .drag-placeholder-style {
+  color: var(--TextPrimary);
+}
 
-  .blackTheme .view-panel {
-    background-color: var(--MainBG);
-  }
+.drag-placeholder-style-span {
+  padding-left: 16px;
+}
 
-  .drag-list {
-    height: calc(100% - 26px);
-    overflow: auto;
-  }
+.blackTheme .theme-border-class {
+  color: var(--TextPrimary) !important;
+  background-color: var(--ContentBG);
+}
 
-  .item-dimension {
-    padding: 2px 10px;
-    margin: 2px 2px 0 2px;
-    border: solid 1px #eee;
-    text-align: left;
-    color: #606266;
-    /*background-color: rgba(35,46,64,.05);*/
-    background-color: white;
-    display: block;
-    word-break: break-all;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+.blackTheme .padding-lr {
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .blackTheme .item-dimension {
-    border: solid 1px;
-    border-color: var(--TableBorderColor);
-    color: var(--TextPrimary);
-    background-color: var(--MainBG);
-  }
+.blackTheme .theme-item-class {
+  background-color: var(--MainBG) !important;
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .item-dimension + .item-dimension {
-    margin-top: 2px;
-  }
+.icon-class {
+  color: #6c6c6c;
+}
 
-  .item-dimension:hover {
-    color: #1890ff;
-    background: #e8f4ff;
-    border-color: #a3d3ff;
-    cursor: pointer;
-  }
+.blackTheme .icon-class {
+  color: #cccccc;
+}
 
-  .blackTheme .item-dimension:hover {
-    color: var(--Main);
-    background: var(--ContentBG);
-    cursor: pointer;
-  }
+.result-count {
+  width: 80px;
+}
 
-  .item-quota {
-    padding: 2px 10px;
-    margin: 2px 2px 0 2px;
-    border: solid 1px #eee;
-    text-align: left;
-    color: #606266;
-    background-color: white;
-    display: block;
-    word-break: break-all;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .blackTheme .item-quota {
-    border: solid 1px;
-    border-color: var(--TableBorderColor);
-    color: var(--TextPrimary);
-    background-color: var(--MainBG);
-  }
-
-  .item-quota + .item-quota {
-    margin-top: 2px;
-  }
-
-  .item-quota:hover {
-    color: #67c23a;
-    background: #f0f9eb;
-    border-color: #b2d3a3;
-    cursor: pointer;
-  }
-
-  .blackTheme .item-quota:hover {
-    background: var(--ContentBG);
-  }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  span {
-    font-size: 12px;
-  }
-
-  .tab-header > > > .el-tabs__header {
-    border-top: solid 1px #eee;
-    border-right: solid 1px #eee;
-  }
-
-  .tab-header > > > .el-tabs__item {
-    font-size: 12px;
-    padding: 0 60px!important;
-  }
-
-  .blackTheme .tab-header > > > .el-tabs__item {
-    background-color: var(--MainBG);
-  }
-
-  .tab-header > > > .el-tabs__nav-scroll {
-    padding-left: 0 !important;
-  }
-
-  .tab-header > > > .el-tabs__header {
-    margin: 0 !important;
-  }
-
-  .tab-header > > > .el-tabs__content {
-    height: 100%;
-  }
-
-  .draggable-group {
-    display: block;
-    width: 100%;
-    height: calc(100% - 6px);
-  }
-
-  .chart-icon {
-    width: 20px;
-    height: 20px;
-  }
-
-  .el-radio {
-    margin: 5px;
-  }
-
-  .el-radio > > > .el-radio__label {
-    padding-left: 0;
-  }
-
-  .attr-style {
-    height: calc(100vh - 56px - 60px - 40px - 40px);
-  }
-
-  .blackTheme .attr-style {
-    color: var(--TextPrimary);
-  }
-
-  .attr-selector {
-    width: 100%;
-    height: 100%;
-    margin: 6px 0;
-    padding: 0 4px;
-    display: flex;
-    align-items: center;
-    background-color: white
-  }
-
-  .blackTheme .attr-selector {
-
-    background-color: var(--MainBG)
-  }
-
-  .disabled-none-cursor {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .chart-class {
-    height: 100%;
-    padding: 10px;
-  }
-
-  .table-class {
-    height: calc(100% - 20px);
-  }
-
-  .dialog-css > > > .el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css > > > .el-dialog__header {
-    padding: 20px 20px 0;
-  }
-
-  .dialog-css > > > .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
-
-  .filter-btn-class {
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .chart-error-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ece7e7;
-  }
-
-  .blackTheme .chart-error-class {
-
-    background-color: var(--MainBG)
-  }
-
-  .field-height {
-    height: calc(50% - 20px);
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .blackTheme .field-height {
-
-    border-top: 1px solid;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .padding-tab {
-    padding: 0;
-    height: 100%;
-  }
-
-  .tree-select-span {
-    > > > div.vue-treeselect__control {
-      height: 32px !important;
-      font-weight: normal !important;
-    }
-  }
-
-  .drag-block-style {
-    padding: 2px 0 0 0;
-    width: 100%;
-    min-height: 32px;
-    border-radius: 4px;
-    border: 1px solid #DCDFE6;
-    overflow-x: hidden;
-    display: flex;
-    align-items: center;
-    background-color: white;
-  }
-
-  .blackTheme .drag-block-style {
-    border: 1px solid;
-    border-color: var(--TableBorderColor);
-    background-color: var(--ContentBG);
-  }
-
-  .drag-placeholder-style {
-    position: absolute;
-    top: calc(50% - 2px);
-    left: 0;
-    width: 100%;
-    color: #CCCCCC;
-  }
-
-  .blackTheme .drag-placeholder-style {
-    color: var(--TextPrimary);
-  }
-
-  .drag-placeholder-style-span {
-    padding-left: 16px;
-  }
-
-  .blackTheme .theme-border-class {
-    color: var(--TextPrimary) !important;
-    background-color: var(--ContentBG);
-  }
-
-  .blackTheme .padding-lr {
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .blackTheme .theme-item-class {
-    background-color: var(--MainBG) !important;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .icon-class {
-    color: #6c6c6c;
-  }
-
-  .blackTheme .icon-class {
-    color: #cccccc;
-  }
-
-  .result-count {
-    width: 80px;
-  }
-
-  .radio-span > > > .el-radio__label {
-    margin-left: 4px;
-  }
-</style>
\ No newline at end of file
+.radio-span > > > .el-radio__label {
+  margin-left: 4px;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
index d9e8a37ebf..1b29819827 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
@@ -5,22 +5,31 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_chartmix.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
       </span>
-      <draggable v-model="view.xaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addXaxis" @update="calcData(true)">
+      <draggable
+        v-model="view.xaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addXaxis"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <dimension-item v-for="(item,index) in view.xaxis" :key="index"
-                          :param="param"
-                          :index="0"
-                          :item="item"
-                          :dimension-data="dimension"
-                          :quota-data="quotaData"
-                          :chart="chart"
-                          @onDimensionItemChange="dimensionItemChange"
-                          @onDimensionItemRemove="dimensionItemRemove"
-                          @editItemFilter="showDimensionEditFilter"
-                          @onNameEdit="showRename"
-                          dimension-name="dimension"
-                          :bus="bus"
+          <dimension-item
+            v-for="(item,index) in view.xaxis"
+            :key="index"
+            :bus="bus"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="0"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            dimension-name="dimension"
+            @editItemFilter="showDimensionEditFilter"
+            @onDimensionItemChange="dimensionItemChange"
+            @onDimensionItemRemove="dimensionItemRemove"
+            @onNameEdit="showRename"
           />
         </transition-group>
       </draggable>
@@ -33,17 +42,30 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
       </span>
-      <draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addYaxis" @update="calcData(true)">
+      <draggable
+        v-model="view.yaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addYaxis"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
-                      :chart="chart" :dimension-data="dimension" :quota-data="quota"
-                      @onQuotaItemChange="quotaItemChange"
-                      @onQuotaItemRemove="quotaItemRemove"
-                      @editItemFilter="showQuotaEditFilter"
-                      @valueFormatter="valueFormatter"
-                      @onNameEdit="showRename"
-                      @editItemCompare="showQuotaEditCompare"/>
+          <quota-item
+            v-for="(item,index) in view.yaxis"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item" :param="param" :quota-data="quota"
+            @editItemCompare="showQuotaEditCompare"
+            @editItemFilter="showQuotaEditFilter"
+            @onNameEdit="showRename"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
+            @valueFormatter="valueFormatter"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
@@ -55,18 +77,30 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
       </span>
-      <draggable v-model="view.yaxisExt" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addYaxisExt" @update="calcData(true)">
+      <draggable
+        v-model="view.yaxisExt"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addYaxisExt"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <quota-ext-item v-for="(item,index) in view.yaxisExt" :key="item.id" :param="param" :index="index"
-                          :item="item"
-                          :chart="chart" :dimension-data="dimension" :quota-data="quota"
-                          @onQuotaItemChange="quotaItemChange"
-                          @onQuotaItemRemove="quotaItemRemove"
-                          @editItemFilter="showQuotaEditFilter"
-                          @valueFormatter="valueFormatter"
-                          @onNameEdit="showRename"
-                          @editItemCompare="showQuotaEditCompare"/>
+          <quota-ext-item
+            v-for="(item,index) in view.yaxisExt"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item" :param="param" :quota-data="quota"
+            @editItemCompare="showQuotaEditCompare"
+            @editItemFilter="showQuotaEditFilter"
+            @onNameEdit="showRename"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
+            @valueFormatter="valueFormatter"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
@@ -79,14 +113,29 @@
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span>{{ $t('chart.result_filter') }}</span>
 
-      <draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
-                 style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                 @add="addCustomFilter" @update="calcData(true)">
+      <draggable
+        v-model="view.customFilter"
+        :move="onMove"
+        animation="300"
+        class="theme-item-class"
+        group="drag"
+        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+        @add="addCustomFilter"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
-                       :item="item" :dimension-data="dimension" :quota-data="quota" :bus="bus"
-                       @onFilterItemRemove="filterItemRemove"
-                       @editItemFilter="showEditFilter"/>
+          <filter-item
+            v-for="(item,index) in view.customFilter"
+            :key="item.id"
+            :bus="bus"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quota"
+            @editItemFilter="showEditFilter"
+            @onFilterItemRemove="filterItemRemove"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
@@ -115,7 +164,7 @@ export default {
       type: Object,
       required: false,
       default: null
-    },
+    }
   },
   components: {
     DimensionItem,
@@ -138,7 +187,7 @@ export default {
           value: 'line',
           label: '线'
         }
-      ],
+      ]
     }
   },
   computed: {
@@ -164,20 +213,26 @@ export default {
       return this.obj.quotaData
     },
     listenLists() {
-      if (!this.view) return [0, 0];
+      if (!this.view) return [0, 0]
       return [
         this.view.yaxis ? this.view.yaxis.length : 0,
         this.view.yaxisExt ? this.view.yaxisExt.length : 0
       ]
+    },
+    selectedDimension() {
+      return this.obj.selectedDimension
+    },
+    selectedQuota() {
+      return this.obj.selectedQuota
     }
   },
   created() {
     this.$emit('on-add-languages', messages)
   },
   watch: {
-    listenLists: function (val) {
+    listenLists: function(val) {
       if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) {
-        return;
+        return
       }
       if (this.view.yaxis.length > 1) {
         this.dragCheckType(this.view.yaxis, 'q')
@@ -188,7 +243,7 @@ export default {
         this.view.yaxisExt = [this.view.yaxisExt[0]]
       }
       this.calcData(true)
-    },
+    }
   },
   methods: {
     executeAxios(url, type, data, callBack) {
@@ -212,38 +267,31 @@ export default {
       }
     },
 
-
     onMove(e, originalEvent) {
       this.moveId = e.draggedContext.element.id
       return true
     },
 
     addXaxis(e) {
+      this.multiAdd(e, this.view.xaxis)
+      this.dragMoveDuplicate(this.view.xaxis, e)
       if (this.view.type !== 'table-info') {
         this.dragCheckType(this.view.xaxis, 'd')
       }
-      this.dragMoveDuplicate(this.view.xaxis, e)
-      /*if (this.view.xaxis.length > 1) {
-        this.view.xaxis = [this.view.xaxis[0]]
-      }*/
       this.calcData(true)
     },
     addYaxis(e) {
-      this.dragCheckType(this.view.yaxis, 'q')
+      this.multiAdd(e, this.view.yaxis)
       this.dragMoveDuplicate(this.view.yaxis, e)
-      /*if ( this.view.yaxis.length > 1) {
-        this.view.yaxis = [this.view.yaxis[0]]
-      }*/
+      this.dragCheckType(this.view.yaxis, 'q')
       if (this.view.yaxis.length <= 1) {
         this.calcData(true)
       }
     },
     addYaxisExt(e) {
-      this.dragCheckType(this.view.yaxisExt, 'q')
+      this.multiAdd(e, this.view.yaxisExt)
       this.dragMoveDuplicate(this.view.yaxisExt, e)
-      /*if (equalsAny(this.view.type, 'map', 'bidirectional-bar') && this.view.yaxisExt.length > 1) {
-        this.view.yaxisExt = [this.view.yaxisExt[0]]
-      }*/
+      this.dragCheckType(this.view.yaxisExt, 'q')
       if (this.view.yaxisExt.length <= 1) {
         this.calcData(true)
       }
@@ -261,7 +309,6 @@ export default {
     },
 
     showDimensionEditFilter(item) {
-
       this.$emit('plugin-call-back', {
         eventName: 'show-dimension-edit-filter',
         eventParam: item
@@ -279,14 +326,12 @@ export default {
       this.calcData(true)
     },
     showRename(item) {
-
       this.$emit('plugin-call-back', {
         eventName: 'show-rename',
         eventParam: item
       })
     },
     valueFormatter(item) {
-
       this.$emit('plugin-call-back', {
         eventName: 'show-edit-formatter',
         eventParam: item
@@ -305,14 +350,12 @@ export default {
       this.calcData(true)
     },
     showQuotaEditFilter(item) {
-
       this.$emit('plugin-call-back', {
         eventName: 'show-quota-edit-filter',
         eventParam: item
       })
     },
     showQuotaEditCompare(item) {
-
       this.$emit('plugin-call-back', {
         eventName: 'show-quota-edit-compare',
         eventParam: item
@@ -327,16 +370,39 @@ export default {
         }
       }
     },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      if (sourceList.length > 1) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
     dragMoveDuplicate(list, e) {
-      const that = this
-      const dup = list.filter(function (m) {
-        return m.id === that.moveId
-      })
-      if (dup && dup.length > 1) {
-        list.splice(e.newDraggableIndex, 1)
+      let newItems = [list[e.newDraggableIndex]]
+      if (e.item.classList.contains('selected-item')) {
+        const groupDie = e.item.classList.contains('group-dimension')
+        newItems = groupDie ? this.selectedDimension : this.selectedQuota
+      }
+      const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+      // 倒序删除
+      for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+        if (preIds.includes(list[i].id)) {
+          list.splice(i, 1)
+        }
       }
     },
     addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
       // 记录数等自动生成字段不做为过滤条件
       if (this.view.customFilter && this.view.customFilter.length > 0) {
         for (let i = 0; i < this.view.customFilter.length; i++) {
@@ -345,7 +411,6 @@ export default {
           }
         }
       }
-      this.dragMoveDuplicate(this.view.customFilter, e)
       this.calcData(true)
     },
     filterItemRemove(item) {
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue
index fcc287506f..5c2d04e8c2 100644
--- a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue
@@ -5,22 +5,31 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_racebar.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
       </span>
-      <draggable v-model="view.xaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addXaxis" @update="calcData(true)">
+      <draggable
+        v-model="view.xaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addXaxis"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <dimension-item v-for="(item,index) in view.xaxis" :key="index"
-                          :param="param"
-                          :index="0"
-                          :item="item"
-                          :dimension-data="dimension"
-                          :quota-data="quotaData"
-                          :chart="chart"
-                          @onDimensionItemChange="dimensionItemChange"
-                          @onDimensionItemRemove="dimensionItemRemove"
-                          @editItemFilter="showDimensionEditFilter"
-                          @onNameEdit="showRename"
-                          dimension-name="dimension"
-                          :bus="bus"
+          <dimension-item
+            v-for="(item,index) in view.xaxis"
+            :key="index"
+            :bus="bus"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="0"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            dimension-name="dimension"
+            @editItemFilter="showDimensionEditFilter"
+            @onDimensionItemChange="dimensionItemChange"
+            @onDimensionItemRemove="dimensionItemRemove"
+            @onNameEdit="showRename"
           />
         </transition-group>
       </draggable>
@@ -35,10 +44,10 @@
       </span>
       <draggable
         v-model="view.xaxisExt"
-        group="drag"
-        animation="300"
         :move="onMove"
+        animation="300"
         class="drag-block-style"
+        group="drag"
         @add="addXaxisExt"
         @update="calcData(true)"
       >
@@ -46,17 +55,17 @@
           <dimension-ext-item
             v-for="(item,index) in view.xaxisExt"
             :key="item.id"
-            :param="param"
+            :bus="bus"
+            :chart="chart"
+            :dimension-data="dimension"
             :index="index"
             :item="item"
-            :dimension-data="dimension"
+            :param="param"
             :quota-data="quotaData"
-            :chart="chart"
+            @editItemFilter="showDimensionEditFilter"
             @onDimensionItemChange="dimensionItemChange"
             @onDimensionItemRemove="dimensionItemRemove"
-            @editItemFilter="showDimensionEditFilter"
             @onNameEdit="showRename"
-            :bus="bus"
           />
         </transition-group>
       </draggable>
@@ -69,17 +78,32 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_racebar.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
       </span>
-      <draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addYaxis" @update="calcData(true)">
+      <draggable
+        v-model="view.yaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addYaxis"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
-                      :chart="chart" :dimension-data="dimension" :quota-data="quota"
-                      @onQuotaItemChange="quotaItemChange"
-                      @onQuotaItemRemove="quotaItemRemove"
-                      @editItemFilter="showQuotaEditFilter"
-                      @valueFormatter="valueFormatter"
-                      @onNameEdit="showRename"
-                      @editItemCompare="showQuotaEditCompare"/>
+          <quota-item
+            v-for="(item,index) in view.yaxis"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quota"
+            @editItemCompare="showQuotaEditCompare"
+            @editItemFilter="showQuotaEditFilter"
+            @onNameEdit="showRename"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
+            @valueFormatter="valueFormatter"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
@@ -92,14 +116,29 @@
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span>{{ $t('chart.result_filter') }}</span>
 
-      <draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
-                 style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                 @add="addCustomFilter" @update="calcData(true)">
+      <draggable
+        v-model="view.customFilter"
+        :move="onMove"
+        animation="300"
+        class="theme-item-class"
+        group="drag"
+        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+        @add="addCustomFilter"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
-                       :item="item" :dimension-data="dimension" :quota-data="quota" :bus="bus"
-                       @onFilterItemRemove="filterItemRemove"
-                       @editItemFilter="showEditFilter"/>
+          <filter-item
+            v-for="(item,index) in view.customFilter"
+            :key="item.id"
+            :bus="bus"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quota"
+            @editItemFilter="showEditFilter"
+            @onFilterItemRemove="filterItemRemove"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
@@ -128,7 +167,7 @@ export default {
       type: Object,
       required: false,
       default: null
-    },
+    }
   },
   components: {
     DimensionItem,
@@ -151,7 +190,7 @@ export default {
           value: 'line',
           label: '线'
         }
-      ],
+      ]
     }
   },
   computed: {
@@ -177,12 +216,18 @@ export default {
       return this.obj.quotaData
     },
     listenLists() {
-      if (!this.view) return [0, 0, 0];
+      if (!this.view) return [0, 0, 0]
       return [
         this.view.xaxis ? this.view.xaxis.length : 0,
         this.view.xaxisExt ? this.view.xaxisExt.length : 0,
         this.view.yaxis ? this.view.yaxis.length : 0
       ]
+    },
+    selectedDimension() {
+      return this.obj.selectedDimension
+    },
+    selectedQuota() {
+      return this.obj.selectedQuota
     }
   },
   created() {
@@ -191,9 +236,9 @@ export default {
   mounted() {
   },
   watch: {
-    listenLists: function (val) {
+    listenLists: function(val) {
       if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1 && this.listenLists[2] <= 1) {
-        return;
+        return
       }
       if (this.view.xaxis.length > 1) {
         this.dragCheckType(this.view.xaxis, 'd')
@@ -208,7 +253,7 @@ export default {
         this.view.yaxis = [this.view.yaxis[0]]
       }
       this.calcData(true)
-    },
+    }
 
   },
   methods: {
@@ -233,17 +278,17 @@ export default {
       }
     },
 
-
     onMove(e, originalEvent) {
       this.moveId = e.draggedContext.element.id
       return true
     },
 
     addXaxis(e) {
+      this.multiAdd(e, this.view.xaxis)
+      this.dragMoveDuplicate(this.view.xaxis, e)
       if (this.view.type !== 'table-info') {
         this.dragCheckType(this.view.xaxis, 'd')
       }
-      this.dragMoveDuplicate(this.view.xaxis, e)
       if (this.view.xaxis.length > 1) {
         //this.view.xaxis = [this.view.xaxis[0]]
       } else {
@@ -251,10 +296,11 @@ export default {
       }
     },
     addXaxisExt(e) {
+      this.multiAdd(e, this.view.xaxisExt)
+      this.dragMoveDuplicate(this.view.xaxisExt, e)
       if (this.view.type !== 'table-info') {
         this.dragCheckType(this.view.xaxisExt, 'd')
       }
-      this.dragMoveDuplicate(this.view.xaxisExt, e)
       if (this.view.xaxisExt.length > 1) {
         //this.view.xaxisExt = [this.view.xaxisExt[0]]
       } else {
@@ -262,8 +308,9 @@ export default {
       }
     },
     addYaxis(e) {
-      this.dragCheckType(this.view.yaxis, 'q')
+      this.multiAdd(e, this.view.yaxis)
       this.dragMoveDuplicate(this.view.yaxis, e)
+      this.dragCheckType(this.view.yaxis, 'q')
       if (this.view.yaxis.length > 1) {
         //this.view.yaxis = [this.view.yaxis[0]]
       } else {
@@ -350,16 +397,39 @@ export default {
         }
       }
     },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      if (sourceList.length > 1) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
     dragMoveDuplicate(list, e) {
-      const that = this
-      const dup = list.filter(function (m) {
-        return m.id === that.moveId
-      })
-      if (dup && dup.length > 1) {
-        list.splice(e.newDraggableIndex, 1)
+      let newItems = [list[e.newDraggableIndex]]
+      if (e.item.classList.contains('selected-item')) {
+        const groupDie = e.item.classList.contains('group-dimension')
+        newItems = groupDie ? this.selectedDimension : this.selectedQuota
+      }
+      const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+      // 倒序删除
+      for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+        if (preIds.includes(list[i].id)) {
+          list.splice(i, 1)
+        }
       }
     },
     addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
       // 记录数等自动生成字段不做为过滤条件
       if (this.view.customFilter && this.view.customFilter.length > 0) {
         for (let i = 0; i < this.view.customFilter.length; i++) {
@@ -368,7 +438,6 @@ export default {
           }
         }
       }
-      this.dragMoveDuplicate(this.view.customFilter, e)
       this.calcData(true)
     },
     filterItemRemove(item) {
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue
index a4ef5dcca1..a5690d6feb 100644
--- a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue
@@ -5,21 +5,30 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_sankey.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
       </span>
-      <draggable v-model="source" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addSource" @update="calcData(true)">
+      <draggable
+        v-model="source"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addSource"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <sankey-dimension-item v-for="(item,index) in source" :key="index"
-                                 :param="param"
-                                 :index="0"
-                                 :item="item"
-                                 :dimension-data="dimension"
-                                 :quota-data="quotaData"
-                                 :chart="chart"
-                                 @onDimensionItemRemove="locationItemRemove"
-                                 @onDimensionItemChange="dimensionItemChange"
-                                 @onNameEdit="showRename"
-                                 dimension-name="source"
-                                 :bus="bus"
+          <sankey-dimension-item
+            v-for="(item,index) in source"
+            :key="index"
+            :bus="bus"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="0"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            dimension-name="source"
+            @onDimensionItemChange="dimensionItemChange"
+            @onDimensionItemRemove="locationItemRemove"
+            @onNameEdit="showRename"
           />
         </transition-group>
       </draggable>
@@ -33,20 +42,29 @@
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_sankey.target') }}</span>/<span>{{ $t('chart.dimension') }}</span>
       </span>
-      <draggable v-model="target" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addTarget" @update="calcData(true)">
+      <draggable
+        v-model="target"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addTarget"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <sankey-dimension-item v-for="(item,index) in target" :key="index"
-                                 :param="param"
-                                 :index="1"
-                                 :item="item"
-                                 :dimension-data="dimension"
-                                 :quota-data="quotaData"
-                                 :chart="chart"
-                                 @onDimensionItemRemove="locationItemRemove"
-                                 @onNameEdit="showRename"
-                                 dimension-name="target"
-                                 :bus="bus"
+          <sankey-dimension-item
+            v-for="(item,index) in target"
+            :key="index"
+            :bus="bus"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="1"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            dimension-name="target"
+            @onDimensionItemRemove="locationItemRemove"
+            @onNameEdit="showRename"
           />
         </transition-group>
       </draggable>
@@ -59,22 +77,32 @@
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span style="width: 80px;text-align: right;">
         <span>{{ $t('plugin_view_sankey.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
-<!--        <el-tooltip class="item" effect="dark" placement="bottom">
-            <div slot="content">
-              {{ $t('plugin_view_sankey.mark_size_tip') }}
-            </div>
-            <i class="el-icon-info" style="cursor: pointer;color: #606266;"/>
-        </el-tooltip>-->
       </span>
-      <draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
-                 @add="addYaxis" @update="calcData(true)">
+      <draggable
+        v-model="view.yaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addYaxis"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <sankey-quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
-                      :chart="chart" :dimension-data="dimension" :quota-data="quota"
-                      @onQuotaItemChange="quotaItemChange"
-                      @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter"
-                      @onNameEdit="showRename"
-                      @editItemCompare="showQuotaEditCompare"/>
+          <sankey-quota-item
+            v-for="(item,index) in view.yaxis"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quota"
+            @editItemCompare="showQuotaEditCompare"
+            @editItemFilter="showQuotaEditFilter"
+            @onNameEdit="showRename"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
@@ -86,14 +114,28 @@
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span>{{ $t('chart.result_filter') }}</span>
 
-      <draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
-                 style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                 @add="addCustomFilter" @update="calcData(true)">
+      <draggable
+        v-model="view.customFilter"
+        :move="onMove"
+        animation="300"
+        class="theme-item-class"
+        group="drag"
+        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+        @add="addCustomFilter"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
-                       :item="item" :dimension-data="dimension" :quota-data="quota"
-                       @onFilterItemRemove="filterItemRemove"
-                       @editItemFilter="showEditFilter"/>
+          <filter-item
+            v-for="(item,index) in view.customFilter"
+            :key="item.id"
+            :dimension-data="dimension"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quota"
+            @editItemFilter="showEditFilter"
+            @onFilterItemRemove="filterItemRemove"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
@@ -121,7 +163,7 @@ export default {
       type: Object,
       required: false,
       default: null
-    },
+    }
   },
   components: {
     SankeyDimensionItem,
@@ -169,26 +211,12 @@ export default {
     quotaData() {
       return this.obj.quotaData
     },
-    /*source: {
-      // getter
-      get: function () {
-        return this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] ? [this.view.xaxis[0]] : [];
-      },
-      // setter
-      set: function (newValue) {
-        this.view.xaxis = [...newValue, ...this.target]
-      }
+    selectedDimension() {
+      return this.obj.selectedDimension
     },
-    target: {
-      // getter
-      get: function () {
-        return this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[1]] ? [this.view.xaxis[1]] : [];
-      },
-      // setter
-      set: function (newValue) {
-        this.view.xaxis = [...this.source, ...newValue]
-      }
-    }*/
+    selectedQuota() {
+      return this.obj.selectedQuota
+    }
   },
   created() {
     this.source = this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] || []
@@ -202,13 +230,13 @@ export default {
     target(val) {
       this.view.xaxis = [...this.source, ...this.target]
     },
-    'view.xaxis': function (val, oldVal) {
+    'view.xaxis': function(val, oldVal) {
       if (val) {
         if (val[0] && this.source[0]) {
-          this.source[0].name = val[0].name;
+          this.source[0].name = val[0].name
         }
         if (val[1] && this.target[0]) {
-          this.target[0].name = val[1].name;
+          this.target[0].name = val[1].name
         }
       }
     }
@@ -239,45 +267,33 @@ export default {
       this.calcData(true)
     },
 
-
     onMove(e, originalEvent) {
       this.moveId = e.draggedContext.element.id
       return true
     },
 
     addSource(e) {
-      this.dragCheckType(this.source, 'd')
+      this.multiAdd(e, this.source)
       this.dragMoveDuplicate(this.source, e)
+      this.dragCheckType(this.source, 'd')
       if (this.source.length > 1) {
         this.source = [this.source[0]]
       }
       this.calcData(true)
     },
     addTarget(e) {
-      this.dragCheckType(this.target, 'd')
+      this.multiAdd(e, this.target)
       this.dragMoveDuplicate(this.target, e)
+      this.dragCheckType(this.target, 'd')
       if (this.target.length > 1) {
         this.target = [this.target[0]]
       }
       this.calcData(true)
     },
-    /* addLabelItems(e) {
-      this.dragMoveDuplicate(this.labelItems, e)
-      if (this.labelItems.length > 1) {
-        this.labelItems = [this.labelItems[0]]
-      }
-      this.calcData(true)
-    },
-    addTooltipItems(e) {
-      this.dragMoveDuplicate(this.tooltipItems, e)
-      if (this.tooltipItems.length > 1) {
-        this.tooltipItems = [this.tooltipItems[0]]
-      }
-      this.calcData(true)
-    }, */
     addYaxis(e) {
-      this.dragCheckType(this.view.yaxis, 'q')
+      this.multiAdd(e, this.view.yaxis)
       this.dragMoveDuplicate(this.view.yaxis, e)
+      this.dragCheckType(this.view.yaxis, 'q')
       if (this.view.yaxis.length > 1) {
         this.view.yaxis = [this.view.yaxis[0]]
       }
@@ -353,16 +369,39 @@ export default {
         }
       }
     },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      if (sourceList.length > 1) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
     dragMoveDuplicate(list, e) {
-      const that = this
-      const dup = list.filter(function (m) {
-        return m.id === that.moveId
-      })
-      if (dup && dup.length > 1) {
-        list.splice(e.newDraggableIndex, 1)
+      let newItems = [list[e.newDraggableIndex]]
+      if (e.item.classList.contains('selected-item')) {
+        const groupDie = e.item.classList.contains('group-dimension')
+        newItems = groupDie ? this.selectedDimension : this.selectedQuota
+      }
+      const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+      // 倒序删除
+      for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+        if (preIds.includes(list[i].id)) {
+          list.splice(i, 1)
+        }
       }
     },
     addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
       // 记录数等自动生成字段不做为过滤条件
       if (this.view.customFilter && this.view.customFilter.length > 0) {
         for (let i = 0; i < this.view.customFilter.length; i++) {
@@ -371,7 +410,6 @@ export default {
           }
         }
       }
-      this.dragMoveDuplicate(this.view.customFilter, e)
       this.calcData(true)
     },
     filterItemRemove(item) {
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue
index 3b5e8a4620..395c85646a 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue
@@ -3,13 +3,29 @@
     <!-- 经度 -->
     <el-row class="padding-lr">
       <span style="width: 80px;text-align: right;">
-        <span>{{ $t('plugin_view_symbol_map.longitude')}}</span>/<span >{{ $t('chart.dimension') }}</span>
+        <span>{{ $t('plugin_view_symbol_map.longitude') }}</span>/<span>{{ $t('chart.dimension') }}</span>
       </span>
-      <draggable v-model="longitudes" group="drag" animation="300" :move="onMove" class="drag-block-style"
-        @add="addLongitudes" @update="calcData(true)">
+      <draggable
+        v-model="longitudes"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addLongitudes"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <location-x-item v-for="(item,index) in longitudes" :key="item.id" :param="param" :index="index" :item="item" :dimension-data="dimensionData" :quota-data="quotaData"
-            @onLocationXItemRemove="locationItemRemove" @onNameEdit="showRename" />
+          <location-x-item
+            v-for="(item,index) in longitudes"
+            :key="item.id"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @onLocationXItemRemove="locationItemRemove"
+            @onNameEdit="showRename"
+          />
         </transition-group>
       </draggable>
       <div v-if="!longitudes || longitudes.length === 0" class="drag-placeholder-style">
@@ -20,13 +36,30 @@
     <!-- 纬度 -->
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span style="width: 80px;text-align: right;">
-        <span>{{ $t('plugin_view_symbol_map.latitude') }}</span>/<span >{{ $t('chart.dimension') }}</span>
+        <span>{{ $t('plugin_view_symbol_map.latitude') }}</span>/<span>{{ $t('chart.dimension') }}</span>
       </span>
-      <draggable v-model="latitudes" group="drag" animation="300" :move="onMove" class="drag-block-style"
-        @add="addLatitudes" @update="calcData(true)">
+      <draggable
+        v-model="latitudes"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addLatitudes"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <location-y-item v-for="(item,index) in latitudes" :key="item.id" :param="param" :index="index" :item="item" :chart="chart" :dimension-data="dimensionData"
-            :quota-data="quotaData" @onLocationYItemRemove="locationItemRemove" @onNameEdit="showRename" />
+          <location-y-item
+            v-for="(item,index) in latitudes"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @onLocationYItemRemove="locationItemRemove"
+            @onNameEdit="showRename"
+          />
         </transition-group>
       </draggable>
       <div v-if="!latitudes || latitudes.length === 0" class="drag-placeholder-style">
@@ -42,16 +75,34 @@
             <div slot="content">
               {{ $t('plugin_view_symbol_map.mark_size_tip') }}
             </div>
-            <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
+            <i class="el-icon-info" style="cursor: pointer;color: #606266;"/>
         </el-tooltip>
       </span>
-      <draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
-        @add="addYaxis" @update="calcData(true)">
+      <draggable
+        v-model="view.yaxis"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style"
+        group="drag"
+        @add="addYaxis"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
-            :chart="chart" :dimension-data="dimensionData" :quota-data="quotaData" @onQuotaItemChange="quotaItemChange"
-            @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename"
-            @editItemCompare="showQuotaEditCompare" />
+          <quota-item
+            v-for="(item,index) in view.yaxis"
+            :key="item.id"
+            :chart="chart"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @editItemCompare="showQuotaEditCompare"
+            @editItemFilter="showQuotaEditFilter"
+            @onNameEdit="showRename"
+            @onQuotaItemChange="quotaItemChange"
+            @onQuotaItemRemove="quotaItemRemove"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
@@ -63,13 +114,28 @@
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span>{{ $t('chart.result_filter') }}</span>
 
-      <draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
+      <draggable
+        v-model="view.customFilter"
+        :move="onMove"
+        animation="300"
+        class="theme-item-class"
+        group="drag"
         style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-        @add="addCustomFilter" @update="calcData(true)">
+        @add="addCustomFilter"
+        @update="calcData(true)"
+      >
         <transition-group class="draggable-group">
-          <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
-            :item="item" :dimension-data="dimensionData" :quota-data="quotaData" @onFilterItemRemove="filterItemRemove"
-            @editItemFilter="showEditFilter" />
+          <filter-item
+            v-for="(item,index) in view.customFilter"
+            :key="item.id"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @editItemFilter="showEditFilter"
+            @onFilterItemRemove="filterItemRemove"
+          />
         </transition-group>
       </draggable>
       <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
@@ -81,568 +147,580 @@
 </template>
 
 <script>
-  import LocationXItem from '@/components/views/LocationXItem'
-  import LocationYItem from '@/components/views/LocationYItem'
-  import QuotaItem from '@/components/views/QuotaItem'
-  import FilterItem from '@/components/views/FilterItem'
-  import messages from '@/de-base/lang/messages'
+import LocationXItem from '@/components/views/LocationXItem'
+import LocationYItem from '@/components/views/LocationYItem'
+import QuotaItem from '@/components/views/QuotaItem'
+import FilterItem from '@/components/views/FilterItem'
+import messages from '@/de-base/lang/messages'
 
-  export default {
-    props: {
+export default {
+  props: {
 
-      obj: {
-        type: Object,
-        default: () => {}
-      }
-    },
-    components: {
-      LocationXItem,
-      LocationYItem,
-      QuotaItem,
-      FilterItem
-    },
-    data() {
-      return {
-        widgets: [],
-        places: [],
-        moveId: -1,
-        showDrill: false,
-        options: [{
-            value: 'point',
-            label: '点'
-          },
-          {
-            value: 'line',
-            label: '线'
-          }
-        ],
-        longitudes: [],
-        latitudes: []
-      }
-    },
-    computed: {
-      param() {
-        return this.obj.param
-      },
-      view() {
-        return this.obj.view
-      },
-      chart() {
-        return this.obj.chart
-      },
-      dimensionData() {
-        return this.obj.dimensionData
-      },
-      quotaData() {
-        return this.obj.quotaData
-      }
-    },
-    created() {
-      this.longitudes = this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] || []
-      this.latitudes = this.view.xaxis && this.view.xaxis.length > 1 && [this.view.xaxis[1]] || []
-      this.$emit('on-add-languages', messages)
-    },
-    watch: {
-      longitudes(val) {
-          this.view.xaxis = [...this.longitudes, ...this.latitudes]
-      },
-      latitudes(val) {
-          this.view.xaxis = [...this.longitudes, ...this.latitudes]
-      }
-    },
-    methods: {
-      executeAxios(url, type, data, callBack) {
-        const param = {
-          url: url,
-          type: type,
-          data: data,
-          callBack: callBack
-        }
-        this.$emit('execute-axios', param)
-        if (process.env.NODE_ENV === 'development') {
-          execute(param).then(res => {
-            if (param.callBack) {
-              param.callBack(res)
-            }
-          }).catch(e => {
-            if (param.error) {
-              param.error(e)
-            }
-          })
-        }
-      },
-
-
-      onMove(e, originalEvent) {
-        this.moveId = e.draggedContext.element.id
-        return true
-      },
-
-      addLongitudes(e) {
-        this.dragCheckType(this.longitudes, 'd')
-        this.dragMoveDuplicate(this.longitudes, e)
-        if (this.longitudes.length > 1) {
-          this.longitudes = [this.longitudes[0]]
-        }
-        this.calcData(true)
-      },
-      addLatitudes(e) {
-        this.dragCheckType(this.latitudes, 'd')
-        this.dragMoveDuplicate(this.latitudes, e)
-        if (this.latitudes.length > 1) {
-          this.latitudes = [this.latitudes[0]]
-        }
-        this.calcData(true)
-      },
-      /* addLabelItems(e) {
-        this.dragMoveDuplicate(this.labelItems, e)
-        if (this.labelItems.length > 1) {
-          this.labelItems = [this.labelItems[0]]
-        }
-        this.calcData(true)
-      },
-      addTooltipItems(e) {
-        this.dragMoveDuplicate(this.tooltipItems, e)
-        if (this.tooltipItems.length > 1) {
-          this.tooltipItems = [this.tooltipItems[0]]
-        }
-        this.calcData(true)
-      }, */
-      addYaxis(e) {
-        this.dragCheckType(this.view.yaxis, 'q')
-        this.dragMoveDuplicate(this.view.yaxis, e)
-        if (this.view.yaxis.length > 1) {
-          this.view.yaxis = [this.view.yaxis[0]]
-        }
-        this.calcData(true)
-      },
-      calcData(cache) {
-        this.view.xaxis = [...this.longitudes, ...this.latitudes]
-
-        this.$emit('plugin-call-back', {
-          eventName: 'calc-data',
-          eventParam: {
-            cache
-          }
-        })
-      },
-
-      locationItemRemove(item) {
-        if (item.removeType === 'locationX') {
-          this.longitudes.splice(item.index, 1)
-        } else if (item.removeType === 'locationY') {
-          this.latitudes.splice(item.index, 1)
-        }
-        this.calcData(true)
-      },
-      showDimensionEditFilter(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-dimension-edit-filter',
-          eventParam: item
-        })
-      },
-      showRename(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-rename',
-          eventParam: item
-        })
-      },
-
-      quotaItemChange(item) {
-        this.calcData(true)
-      },
-      quotaItemRemove(item) {
-        if (item.removeType === 'quota') {
-          this.view.yaxis.splice(item.index, 1)
-        } else if (item.removeType === 'quotaExt') {
-          this.view.yaxisExt.splice(item.index, 1)
-        }
-        this.calcData(true)
-      },
-      showQuotaEditFilter(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-quota-edit-filter',
-          eventParam: item
-        })
-      },
-      showQuotaEditCompare(item) {
-
-        this.$emit('plugin-call-back', {
-          eventName: 'show-quota-edit-compare',
-          eventParam: item
-        })
-      },
-      dragCheckType(list, type) {
-        if (list && list.length > 0) {
-          for (let i = 0; i < list.length; i++) {
-            if (list[i].groupType !== type) {
-              list.splice(i, 1)
-            }
-          }
-        }
-      },
-      dragMoveDuplicate(list, e) {
-        const that = this
-        const dup = list.filter(function (m) {
-          return m.id === that.moveId
-        })
-        if (dup && dup.length > 1) {
-          list.splice(e.newDraggableIndex, 1)
-        }
-      },
-      addCustomFilter(e) {
-        // 记录数等自动生成字段不做为过滤条件
-        if (this.view.customFilter && this.view.customFilter.length > 0) {
-          for (let i = 0; i < this.view.customFilter.length; i++) {
-            if (this.view.customFilter[i].id === 'count') {
-              this.view.customFilter.splice(i, 1)
-            }
-          }
-        }
-        this.dragMoveDuplicate(this.view.customFilter, e)
-        this.calcData(true)
-      },
-      filterItemRemove(item) {
-        this.view.customFilter.splice(item.index, 1)
-        this.calcData(true)
-      },
-      showEditFilter(item) {
-        this.$emit('plugin-call-back', {
-          eventName: 'show-edit-filter',
-          eventParam: item
-        })
+    obj: {
+      type: Object,
+      default: () => {
       }
     }
+  },
+  components: {
+    LocationXItem,
+    LocationYItem,
+    QuotaItem,
+    FilterItem
+  },
+  data() {
+    return {
+      widgets: [],
+      places: [],
+      moveId: -1,
+      showDrill: false,
+      options: [{
+        value: 'point',
+        label: '点'
+      },
+        {
+          value: 'line',
+          label: '线'
+        }
+      ],
+      longitudes: [],
+      latitudes: []
+    }
+  },
+  computed: {
+    param() {
+      return this.obj.param
+    },
+    view() {
+      return this.obj.view
+    },
+    chart() {
+      return this.obj.chart
+    },
+    dimensionData() {
+      return this.obj.dimensionData
+    },
+    quotaData() {
+      return this.obj.quotaData
+    },
+    selectedDimension() {
+      return this.obj.selectedDimension
+    },
+    selectedQuota() {
+      return this.obj.selectedQuota
+    }
+  },
+  created() {
+    this.longitudes = this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] || []
+    this.latitudes = this.view.xaxis && this.view.xaxis.length > 1 && [this.view.xaxis[1]] || []
+    this.$emit('on-add-languages', messages)
+  },
+  watch: {
+    longitudes(val) {
+      this.view.xaxis = [...this.longitudes, ...this.latitudes]
+    },
+    latitudes(val) {
+      this.view.xaxis = [...this.longitudes, ...this.latitudes]
+    }
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      const param = {
+        url: url,
+        type: type,
+        data: data,
+        callBack: callBack
+      }
+      this.$emit('execute-axios', param)
+      if (process.env.NODE_ENV === 'development') {
+        execute(param).then(res => {
+          if (param.callBack) {
+            param.callBack(res)
+          }
+        }).catch(e => {
+          if (param.error) {
+            param.error(e)
+          }
+        })
+      }
+    },
+
+    onMove(e, originalEvent) {
+      this.moveId = e.draggedContext.element.id
+      return true
+    },
+
+    addLongitudes(e) {
+      this.multiAdd(e, this.longitudes)
+      this.dragMoveDuplicate(this.longitudes, e)
+      this.dragCheckType(this.longitudes, 'd')
+      if (this.longitudes.length > 1) {
+        this.longitudes = [this.longitudes[0]]
+      }
+      this.calcData(true)
+    },
+    addLatitudes(e) {
+      this.multiAdd(e, this.latitudes)
+      this.dragMoveDuplicate(this.latitudes, e)
+      this.dragCheckType(this.latitudes, 'd')
+      if (this.latitudes.length > 1) {
+        this.latitudes = [this.latitudes[0]]
+      }
+      this.calcData(true)
+    },
+    addYaxis(e) {
+      this.multiAdd(e, this.view.yaxis)
+      this.dragMoveDuplicate(this.view.yaxis, e)
+      this.dragCheckType(this.view.yaxis, 'q')
+      if (this.view.yaxis.length > 1) {
+        this.view.yaxis = [this.view.yaxis[0]]
+      }
+      this.calcData(true)
+    },
+    calcData(cache) {
+      this.view.xaxis = [...this.longitudes, ...this.latitudes]
+      this.$emit('plugin-call-back', {
+        eventName: 'calc-data',
+        eventParam: {
+          cache
+        }
+      })
+    },
+
+    locationItemRemove(item) {
+      if (item.removeType === 'locationX') {
+        this.longitudes.splice(item.index, 1)
+      } else if (item.removeType === 'locationY') {
+        this.latitudes.splice(item.index, 1)
+      }
+      this.calcData(true)
+    },
+    showDimensionEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-dimension-edit-filter',
+        eventParam: item
+      })
+    },
+    showRename(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-rename',
+        eventParam: item
+      })
+    },
+
+    quotaItemChange(item) {
+      this.calcData(true)
+    },
+    quotaItemRemove(item) {
+      if (item.removeType === 'quota') {
+        this.view.yaxis.splice(item.index, 1)
+      } else if (item.removeType === 'quotaExt') {
+        this.view.yaxisExt.splice(item.index, 1)
+      }
+      this.calcData(true)
+    },
+    showQuotaEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-quota-edit-filter',
+        eventParam: item
+      })
+    },
+    showQuotaEditCompare(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-quota-edit-compare',
+        eventParam: item
+      })
+    },
+    dragCheckType(list, type) {
+      if (list && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].groupType !== type) {
+            list.splice(i, 1)
+          }
+        }
+      }
+    },
+    multiAdd(e, itemList) {
+      // 只处理原始字段拖拽
+      if (!e.item.classList.contains('selected-item')) {
+        return
+      }
+      const groupDie = e.item.classList.contains('group-dimension')
+      const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
+      if (sourceList.length > 1) {
+        const qdList = groupDie ? this.dimensionData : this.quotaData
+        const sourceIds = sourceList.map(i => i.id)
+        const sortedList = qdList.filter(i => sourceIds.includes(i.id))
+        itemList.splice(e.newIndex, 1, ...sortedList)
+      }
+    },
+    dragMoveDuplicate(list, e) {
+      let newItems = [list[e.newDraggableIndex]]
+      if (e.item.classList.contains('selected-item')) {
+        const groupDie = e.item.classList.contains('group-dimension')
+        newItems = groupDie ? this.selectedDimension : this.selectedQuota
+      }
+      const preIds = list
+          .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
+          .map(i => i.id)
+      // 倒序删除
+      for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
+        if (preIds.includes(list[i].id)) {
+          list.splice(i, 1)
+        }
+      }
+    },
+    addCustomFilter(e) {
+      this.multiAdd(e, this.view.customFilter)
+      this.dragMoveDuplicate(this.view.customFilter, e)
+      // 记录数等自动生成字段不做为过滤条件
+      if (this.view.customFilter && this.view.customFilter.length > 0) {
+        for (let i = 0; i < this.view.customFilter.length; i++) {
+          if (this.view.customFilter[i].id === 'count') {
+            this.view.customFilter.splice(i, 1)
+          }
+        }
+      }
+      this.calcData(true)
+    },
+    filterItemRemove(item) {
+      this.view.customFilter.splice(item.index, 1)
+      this.calcData(true)
+    },
+    showEditFilter(item) {
+      this.$emit('plugin-call-back', {
+        eventName: 'show-edit-filter',
+        eventParam: item
+      })
+    }
   }
+}
 
 </script>
 
 <style lang="scss" scoped>
-  .padding-lr {
-    padding: 0 6px;
+.padding-lr {
+  padding: 0 6px;
+}
+
+.itxst {
+  margin: 10px;
+  text-align: left;
+}
+
+.col {
+  width: 40%;
+  flex: 1;
+  padding: 10px;
+  border: solid 1px #eee;
+  border-radius: 5px;
+  float: left;
+}
+
+.col + .col {
+  margin-left: 10px;
+}
+
+.view-panel {
+  display: flex;
+  height: calc(100% - 40px);
+  background-color: #f7f8fa;
+}
+
+.blackTheme .view-panel {
+  background-color: var(--MainBG);
+}
+
+.drag-list {
+  height: calc(100% - 26px);
+  overflow: auto;
+}
+
+.item-dimension {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 2px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+
+.item-quota {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-quota {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-quota + .item-quota {
+  margin-top: 2px;
+}
+
+.item-quota:hover {
+  color: #67c23a;
+  background: #f0f9eb;
+  border-color: #b2d3a3;
+  cursor: pointer;
+}
+
+.blackTheme .item-quota:hover {
+  background: var(--ContentBG);
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+
+span {
+  font-size: 12px;
+}
+
+.tab-header > > > .el-tabs__header {
+  border-top: solid 1px #eee;
+  border-right: solid 1px #eee;
+}
+
+.tab-header > > > .el-tabs__item {
+  font-size: 12px;
+  padding: 0 60px !important;
+}
+
+.blackTheme .tab-header > > > .el-tabs__item {
+  background-color: var(--MainBG);
+}
+
+.tab-header > > > .el-tabs__nav-scroll {
+  padding-left: 0 !important;
+}
+
+.tab-header > > > .el-tabs__header {
+  margin: 0 !important;
+}
+
+.tab-header > > > .el-tabs__content {
+  height: 100%;
+}
+
+.draggable-group {
+  display: block;
+  width: 100%;
+  height: calc(100% - 6px);
+}
+
+.chart-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.el-radio {
+  margin: 5px;
+}
+
+.el-radio > > > .el-radio__label {
+  padding-left: 0;
+}
+
+.attr-style {
+  height: calc(100vh - 56px - 60px - 40px - 40px);
+}
+
+.blackTheme .attr-style {
+  color: var(--TextPrimary);
+}
+
+.attr-selector {
+  width: 100%;
+  height: 100%;
+  margin: 6px 0;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  background-color: white
+}
+
+.blackTheme .attr-selector {
+
+  background-color: var(--MainBG)
+}
+
+.disabled-none-cursor {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.chart-class {
+  height: 100%;
+  padding: 10px;
+}
+
+.table-class {
+  height: calc(100% - 20px);
+}
+
+.dialog-css > > > .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css > > > .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css > > > .el-dialog__body {
+  padding: 10px 20px 20px;
+}
+
+.filter-btn-class {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-error-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ece7e7;
+}
+
+.blackTheme .chart-error-class {
+
+  background-color: var(--MainBG)
+}
+
+.field-height {
+  height: calc(50% - 20px);
+  border-top: 1px solid #E6E6E6;
+}
+
+.blackTheme .field-height {
+
+  border-top: 1px solid;
+  border-color: var(--TableBorderColor) !important;
+}
+
+.padding-tab {
+  padding: 0;
+  height: 100%;
+}
+
+.tree-select-span {
+  > > > div.vue-treeselect__control {
+    height: 32px !important;
+    font-weight: normal !important;
   }
+}
 
-  .itxst {
-    margin: 10px;
-    text-align: left;
-  }
+.drag-block-style {
+  padding: 2px 0 0 0;
+  width: 100%;
+  min-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  overflow-x: hidden;
+  display: flex;
+  align-items: center;
+  background-color: white;
+}
 
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
+.blackTheme .drag-block-style {
+  border: 1px solid;
+  border-color: var(--TableBorderColor);
+  background-color: var(--ContentBG);
+}
 
-  .col+.col {
-    margin-left: 10px;
-  }
+.drag-placeholder-style {
+  position: absolute;
+  top: calc(50% - 2px);
+  left: 0;
+  width: 100%;
+  color: #CCCCCC;
+}
 
-  .view-panel {
-    display: flex;
-    height: calc(100% - 40px);
-    background-color: #f7f8fa;
-  }
+.blackTheme .drag-placeholder-style {
+  color: var(--TextPrimary);
+}
 
-  .blackTheme .view-panel {
-    background-color: var(--MainBG);
-  }
+.drag-placeholder-style-span {
+  padding-left: 16px;
+}
 
-  .drag-list {
-    height: calc(100% - 26px);
-    overflow: auto;
-  }
+.blackTheme .theme-border-class {
+  color: var(--TextPrimary) !important;
+  background-color: var(--ContentBG);
+}
 
-  .item-dimension {
-    padding: 2px 10px;
-    margin: 2px 2px 0 2px;
-    border: solid 1px #eee;
-    text-align: left;
-    color: #606266;
-    /*background-color: rgba(35,46,64,.05);*/
-    background-color: white;
-    display: block;
-    word-break: break-all;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+.blackTheme .padding-lr {
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .blackTheme .item-dimension {
-    border: solid 1px;
-    border-color: var(--TableBorderColor);
-    color: var(--TextPrimary);
-    background-color: var(--MainBG);
-  }
+.blackTheme .theme-item-class {
+  background-color: var(--MainBG) !important;
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .item-dimension+.item-dimension {
-    margin-top: 2px;
-  }
+.icon-class {
+  color: #6c6c6c;
+}
 
-  .item-dimension:hover {
-    color: #1890ff;
-    background: #e8f4ff;
-    border-color: #a3d3ff;
-    cursor: pointer;
-  }
+.blackTheme .icon-class {
+  color: #cccccc;
+}
 
-  .blackTheme .item-dimension:hover {
-    color: var(--Main);
-    background: var(--ContentBG);
-    cursor: pointer;
-  }
+.result-count {
+  width: 80px;
+}
 
-  .item-quota {
-    padding: 2px 10px;
-    margin: 2px 2px 0 2px;
-    border: solid 1px #eee;
-    text-align: left;
-    color: #606266;
-    background-color: white;
-    display: block;
-    word-break: break-all;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .blackTheme .item-quota {
-    border: solid 1px;
-    border-color: var(--TableBorderColor);
-    color: var(--TextPrimary);
-    background-color: var(--MainBG);
-  }
-
-  .item-quota+.item-quota {
-    margin-top: 2px;
-  }
-
-  .item-quota:hover {
-    color: #67c23a;
-    background: #f0f9eb;
-    border-color: #b2d3a3;
-    cursor: pointer;
-  }
-
-  .blackTheme .item-quota:hover {
-    background: var(--ContentBG);
-  }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  span {
-    font-size: 12px;
-  }
-
-  .tab-header>>>.el-tabs__header {
-    border-top: solid 1px #eee;
-    border-right: solid 1px #eee;
-  }
-
-  .tab-header>>>.el-tabs__item {
-    font-size: 12px;
-    padding: 0 60px !important;
-  }
-
-  .blackTheme .tab-header>>>.el-tabs__item {
-    background-color: var(--MainBG);
-  }
-
-  .tab-header>>>.el-tabs__nav-scroll {
-    padding-left: 0 !important;
-  }
-
-  .tab-header>>>.el-tabs__header {
-    margin: 0 !important;
-  }
-
-  .tab-header>>>.el-tabs__content {
-    height: 100%;
-  }
-
-  .draggable-group {
-    display: block;
-    width: 100%;
-    height: calc(100% - 6px);
-  }
-
-  .chart-icon {
-    width: 20px;
-    height: 20px;
-  }
-
-  .el-radio {
-    margin: 5px;
-  }
-
-  .el-radio>>>.el-radio__label {
-    padding-left: 0;
-  }
-
-  .attr-style {
-    height: calc(100vh - 56px - 60px - 40px - 40px);
-  }
-
-  .blackTheme .attr-style {
-    color: var(--TextPrimary);
-  }
-
-  .attr-selector {
-    width: 100%;
-    height: 100%;
-    margin: 6px 0;
-    padding: 0 4px;
-    display: flex;
-    align-items: center;
-    background-color: white
-  }
-
-  .blackTheme .attr-selector {
-
-    background-color: var(--MainBG)
-  }
-
-  .disabled-none-cursor {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .chart-class {
-    height: 100%;
-    padding: 10px;
-  }
-
-  .table-class {
-    height: calc(100% - 20px);
-  }
-
-  .dialog-css>>>.el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css>>>.el-dialog__header {
-    padding: 20px 20px 0;
-  }
-
-  .dialog-css>>>.el-dialog__body {
-    padding: 10px 20px 20px;
-  }
-
-  .filter-btn-class {
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .chart-error-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ece7e7;
-  }
-
-  .blackTheme .chart-error-class {
-
-    background-color: var(--MainBG)
-  }
-
-  .field-height {
-    height: calc(50% - 20px);
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .blackTheme .field-height {
-
-    border-top: 1px solid;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .padding-tab {
-    padding: 0;
-    height: 100%;
-  }
-
-  .tree-select-span {
-    >>>div.vue-treeselect__control {
-      height: 32px !important;
-      font-weight: normal !important;
-    }
-  }
-
-  .drag-block-style {
-    padding: 2px 0 0 0;
-    width: 100%;
-    min-height: 32px;
-    border-radius: 4px;
-    border: 1px solid #DCDFE6;
-    overflow-x: hidden;
-    display: flex;
-    align-items: center;
-    background-color: white;
-  }
-
-  .blackTheme .drag-block-style {
-    border: 1px solid;
-    border-color: var(--TableBorderColor);
-    background-color: var(--ContentBG);
-  }
-
-  .drag-placeholder-style {
-    position: absolute;
-    top: calc(50% - 2px);
-    left: 0;
-    width: 100%;
-    color: #CCCCCC;
-  }
-
-  .blackTheme .drag-placeholder-style {
-    color: var(--TextPrimary);
-  }
-
-  .drag-placeholder-style-span {
-    padding-left: 16px;
-  }
-
-  .blackTheme .theme-border-class {
-    color: var(--TextPrimary) !important;
-    background-color: var(--ContentBG);
-  }
-
-  .blackTheme .padding-lr {
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .blackTheme .theme-item-class {
-    background-color: var(--MainBG) !important;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .icon-class {
-    color: #6c6c6c;
-  }
-
-  .blackTheme .icon-class {
-    color: #cccccc;
-  }
-
-  .result-count {
-    width: 80px;
-  }
-
-  .radio-span>>>.el-radio__label {
-    margin-left: 4px;
-  }
+.radio-span > > > .el-radio__label {
+  margin-left: 4px;
+}
 
 </style>