Merge pull request #264 from dataease/dev

Dev

backend/src/main/java/io/dataease/dto/chart/ChartCustomFilterItemDTO.java

@@ -0,0 +1,18 @@
+package io.dataease.dto.chart;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.io.Serializable;
+
+/**
+ * @Author gin
+ * @Date 2021/7/20 11:34 上午
+ */
+@Getter
+@Setter
+public class ChartCustomFilterItemDTO implements Serializable {
+    private String fieldId;
+    private String term;
+    private String value;
+}

backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java

@@ -0,0 +1,18 @@
+package io.dataease.dto.chart;
+
+import io.dataease.base.domain.DatasetTableField;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * @Author gin
+ * @Date 2021/7/20 11:43 上午
+ */
+@Getter
+@Setter
+public class ChartFieldCustomFilterDTO implements Serializable {
+    private List<ChartCustomFilterItemDTO> filter;
+}

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -134,24 +134,31 @@ public class ChartViewService {
         }.getType());
         List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
-        List<ChartCustomFilterDTO> customFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartCustomFilterDTO>>() {
+        List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
         }.getType());
-        customFilter.forEach(ele -> ele.setField(dataSetTableFieldsService.get(ele.getFieldId())));
+        List<ChartCustomFilterDTO> customFilter = fieldCustomFilter.stream().map(ele -> {
+            ChartCustomFilterDTO dto = new ChartCustomFilterDTO();
+            ele.getFilter().forEach(f -> {
+                BeanUtils.copyBean(dto, f);
+                dto.setField(dataSetTableFieldsService.get(f.getFieldId()));
+            });
+            return dto;
+        }).collect(Collectors.toList());
 
-        if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+//        if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
-            xAxis = new ArrayList<>();
+//            xAxis = new ArrayList<>();
-            if (CollectionUtils.isEmpty(yAxis)) {
+//            if (CollectionUtils.isEmpty(yAxis)) {
-                ChartViewDTO dto = new ChartViewDTO();
+//                ChartViewDTO dto = new ChartViewDTO();
-                BeanUtils.copyBean(dto, view);
+//                BeanUtils.copyBean(dto, view);
-                return dto;
+//                return dto;
-            }
+//            }
-        } else {
+//        } else {
-            if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
+//            if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
-                ChartViewDTO dto = new ChartViewDTO();
+//                ChartViewDTO dto = new ChartViewDTO();
-                BeanUtils.copyBean(dto, view);
+//                BeanUtils.copyBean(dto, view);
-                return dto;
+//                return dto;
-            }
+//            }
-        }
+//        }
 
         // 过滤来自仪表板的条件
         List<ChartExtFilterRequest> extFilterList = new ArrayList<>();

frontend/src/lang/en.js

@@ -598,7 +598,7 @@ export default {
     chart_type: 'Chart Type',
     shape_attr: 'Attribute',
     module_style: 'Style',
-    result_filter: 'Results Filter',
+    result_filter: 'Filters',
     x_axis: 'Horizontal axis',
     y_axis: 'Longitudinal axis',
     chart: 'Chart',
@@ -806,7 +806,18 @@ export default {
     color_fast: 'Fast',
     color_spiritual: 'Spiritual',
     chart_data: 'Data',
-    chart_style: 'Style'
+    chart_style: 'Style',
+    drag_block_type_axis: 'Type Axis',
+    drag_block_value_axis: 'Value Axis',
+    drag_block_table_data_column: 'Data Column',
+    drag_block_pie_angel: 'Sector Angle',
+    drag_block_pie_label: 'Sector Label',
+    drag_block_gauge_angel: 'Pointer Angle',
+    drag_block_label_value: 'Value',
+    drag_block_funnel_width: 'Funnel Width',
+    drag_block_funnel_split: 'Funnel Split',
+    drag_block_radar_length: 'Branch Length',
+    drag_block_radar_label: 'Branch Label'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -598,7 +598,7 @@ export default {
     chart_type: '圖表類型',
     shape_attr: '圖形屬性',
     module_style: '組件樣式',
-    result_filter: '結果過濾器',
+    result_filter: '過濾器',
     x_axis: '橫軸',
     y_axis: '縱軸',
     chart: '視圖',
@@ -806,7 +806,18 @@ export default {
     chart_details: '视图明细',
     export_details: '导出明细',
     chart_data: '數據',
-    chart_style: '樣式'
+    chart_style: '樣式',
+    drag_block_type_axis: '類別軸',
+    drag_block_value_axis: '值軸',
+    drag_block_table_data_column: '數據列',
+    drag_block_pie_angel: '扇區角度',
+    drag_block_pie_label: '扇區標簽',
+    drag_block_gauge_angel: '指針角度',
+    drag_block_label_value: '值',
+    drag_block_funnel_width: '漏鬥層寬',
+    drag_block_funnel_split: '漏鬥分層',
+    drag_block_radar_length: '分支長度',
+    drag_block_radar_label: '分支標簽'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -598,7 +598,7 @@ export default {
     chart_type: '图表类型',
     shape_attr: '图形属性',
     module_style: '组件样式',
-    result_filter: '结果过滤器',
+    result_filter: '过滤器',
     x_axis: '横轴',
     y_axis: '纵轴',
     chart: '视图',
@@ -806,7 +806,18 @@ export default {
     chart_details: '视图明细',
     export_details: '导出明细',
     chart_data: '数据',
-    chart_style: '样式'
+    chart_style: '样式',
+    drag_block_type_axis: '类别轴',
+    drag_block_value_axis: '值轴',
+    drag_block_table_data_column: '数据列',
+    drag_block_pie_angel: '扇区角度',
+    drag_block_pie_label: '扇区标签',
+    drag_block_gauge_angel: '指针角度',
+    drag_block_label_value: '值',
+    drag_block_funnel_width: '漏斗层宽',
+    drag_block_funnel_split: '漏斗分层',
+    drag_block_radar_length: '分支长度',
+    drag_block_radar_label: '分支标签'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/components/drag-item/DimensionItem.vue

@@ -39,9 +39,9 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
+          <!--          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">-->
-            <span>{{ $t('chart.filter') }}...</span>
+          <!--            <span>{{ $t('chart.filter') }}...</span>-->
-          </el-dropdown-item>
+          <!--          </el-dropdown-item>-->
 
           <el-dropdown-item v-show="item.deType === 1" divided>
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">

frontend/src/views/chart/components/drag-item/FilterItem.vue

@@ -1,13 +1,29 @@
 <template>
-  <div>
+  <span>
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+      <span style="float: left">
+        <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+        <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+        <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+        <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+      </span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+    </el-tag>
+    <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
         <el-tag size="small" class="item-axis">
-          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+          <span style="float: left">
+            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+          </span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickItem('rename')">
+          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
-            <span>{{ $t('chart.show_name_set') }}</span>
+            <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
             <span>{{ $t('chart.delete') }}</span>
@@ -15,25 +31,17 @@
         </el-dropdown-menu>
       </span>
     </el-dropdown>
-
+  </span>
-    <el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
-      <el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
-        <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="itemForm.name" size="mini" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-  </div>
 </template>
 
 <script>
 export default {
   name: 'FilterItem',
   props: {
+    param: {
+      type: Object,
+      required: true
+    },
     item: {
       type: Object,
       required: true
@@ -45,15 +53,6 @@ export default {
   },
   data() {
     return {
-      renameItem: false,
-      itemForm: {
-        name: ''
-      },
-      itemFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
-        ]
-      }
     }
   },
   mounted() {
@@ -64,12 +63,12 @@ export default {
         return
       }
       switch (param.type) {
-        case 'rename':
-          this.showRename()
-          break
         case 'remove':
           this.removeItem()
           break
+        case 'filter':
+          this.editFilter()
+          break
         default:
           break
       }
@@ -79,23 +78,9 @@ export default {
         type: type
       }
     },
-    showRename() {
+    editFilter() {
-      this.itemForm.name = this.item.name
+      this.item.index = this.index
-      this.renameItem = true
+      this.$emit('editItemFilter', this.item)
-    },
-    closeRename() {
-      this.renameItem = false
-      this.resetRename()
-    },
-    saveRename(param) {
-      this.item.name = param.name
-      this.$emit('onFilterItemChange', this.item)
-      this.closeRename()
-    },
-    resetRename() {
-      this.itemForm = {
-        name: ''
-      }
     },
     removeItem() {
       this.item.index = this.index
@@ -112,10 +97,11 @@ export default {
     text-align: left;
     height: 24px;
     line-height: 22px;
-    display: inline-block;
+    display: flex;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;
+    width: 159px;
   }
 
   .item-axis:hover {
@@ -126,4 +112,24 @@ export default {
   span {
     font-size: 12px;
   }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>

frontend/src/views/chart/components/filter/DimensionFilterEditor.vue

@@ -64,26 +64,26 @@ export default {
           label: this.$t('chart.filter_not_like')
         }]
       },
-      {
+      // {
-        label: '',
+      //   label: '',
-        options: [{
+      //   options: [{
-          value: 'lt',
+      //     value: 'lt',
-          label: this.$t('chart.filter_lt')
+      //     label: this.$t('chart.filter_lt')
-        }, {
+      //   }, {
-          value: 'gt',
+      //     value: 'gt',
-          label: this.$t('chart.filter_gt')
+      //     label: this.$t('chart.filter_gt')
-        }]
+      //   }]
-      },
+      // },
-      {
+      // {
-        label: '',
+      //   label: '',
-        options: [{
+      //   options: [{
-          value: 'le',
+      //     value: 'le',
-          label: this.$t('chart.filter_le')
+      //     label: this.$t('chart.filter_le')
-        }, {
+      //   }, {
-          value: 'ge',
+      //     value: 'ge',
-          label: this.$t('chart.filter_ge')
+      //     label: this.$t('chart.filter_ge')
-        }]
+      //   }]
-      },
+      // },
       {
         label: '',
         options: [{

frontend/src/views/chart/components/filter/QuotaFilterEditor.vue

@@ -54,16 +54,16 @@ export default {
           label: this.$t('chart.filter_not_eq')
         }]
       },
-      {
+      // {
-        label: '',
+      //   label: '',
-        options: [{
+      //   options: [{
-          value: 'like',
+      //     value: 'like',
-          label: this.$t('chart.filter_like')
+      //     label: this.$t('chart.filter_like')
-        }, {
+      //   }, {
-          value: 'not like',
+      //     value: 'not like',
-          label: this.$t('chart.filter_not_like')
+      //     label: this.$t('chart.filter_not_like')
-        }]
+      //   }]
-      },
+      // },
       {
         label: '',
         options: [{

frontend/src/views/chart/components/filter/ResultFilterEditor.vue

@@ -2,26 +2,11 @@
   <el-col>
     <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
     <div style="max-height: 50vh;overflow-y: auto;">
-      <el-row v-for="(f,index) in chart.customFilter" :key="index" class="filter-item">
+      <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
-        <el-col :span="6">
+        <el-col :span="4">
-          <el-select v-model="f.fieldId" size="mini" filterable>
+          <span>{{ item.name }}</span>
-            <el-option
-              v-for="item in fields"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-              <span style="float: left">
-                <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-              </span>
-              <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
-            </el-option>
-          </el-select>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-select v-model="f.term" size="mini">
             <el-option-group
               v-for="(group,idx) in options"
@@ -49,7 +34,7 @@
 </template>
 
 <script>
-import { fieldList } from '../../../../api/dataset/dataset'
+// import { fieldList } from '../../../../api/dataset/dataset'
 
 export default {
   name: 'ResultFilterEditor',
@@ -57,78 +42,162 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    item: {
+      type: Object,
+      required: true
     }
   },
   data() {
     return {
-      options: [{
+      textOptions: [
-        label: '',
+        {
-        options: [{
+          label: '',
-          value: 'eq',
+          options: [{
-          label: this.$t('chart.filter_eq')
+            value: 'eq',
-        }, {
+            label: this.$t('chart.filter_eq')
-          value: 'not_eq',
+          }, {
-          label: this.$t('chart.filter_not_eq')
+            value: 'not_eq',
-        }]
+            label: this.$t('chart.filter_not_eq')
-      },
+          }]
-      {
+        },
-        label: '',
+        {
-        options: [{
+          label: '',
-          value: 'like',
+          options: [{
-          label: this.$t('chart.filter_like')
+            value: 'like',
-        }, {
+            label: this.$t('chart.filter_like')
-          value: 'not like',
+          }, {
-          label: this.$t('chart.filter_not_like')
+            value: 'not like',
-        }]
+            label: this.$t('chart.filter_not_like')
-      },
+          }]
-      {
+        },
-        label: '',
+        {
-        options: [{
+          label: '',
-          value: 'lt',
+          options: [{
-          label: this.$t('chart.filter_lt')
+            value: 'null',
-        }, {
+            label: this.$t('chart.filter_null')
-          value: 'gt',
+          }, {
-          label: this.$t('chart.filter_gt')
+            value: 'not_null',
-        }]
+            label: this.$t('chart.filter_not_null')
-      },
+          }]
-      {
+        }
-        label: '',
+      ],
-        options: [{
+      dateOptions: [
-          value: 'le',
+        {
-          label: this.$t('chart.filter_le')
+          label: '',
-        }, {
+          options: [{
-          value: 'ge',
+            value: 'eq',
-          label: this.$t('chart.filter_ge')
+            label: this.$t('chart.filter_eq')
-        }]
+          }, {
-      },
+            value: 'not_eq',
-      {
+            label: this.$t('chart.filter_not_eq')
-        label: '',
+          }]
-        options: [{
+        },
-          value: 'null',
+        {
-          label: this.$t('chart.filter_null')
+          label: '',
-        }, {
+          options: [{
-          value: 'not_null',
+            value: 'lt',
-          label: this.$t('chart.filter_not_null')
+            label: this.$t('chart.filter_lt')
-        }]
+          }, {
-      }],
+            value: 'gt',
-      fields: []
+            label: this.$t('chart.filter_gt')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'le',
+            label: this.$t('chart.filter_le')
+          }, {
+            value: 'ge',
+            label: this.$t('chart.filter_ge')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'null',
+            label: this.$t('chart.filter_null')
+          }, {
+            value: 'not_null',
+            label: this.$t('chart.filter_not_null')
+          }]
+        }
+      ],
+      valueOptions: [
+        {
+          label: '',
+          options: [{
+            value: 'eq',
+            label: this.$t('chart.filter_eq')
+          }, {
+            value: 'not_eq',
+            label: this.$t('chart.filter_not_eq')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'lt',
+            label: this.$t('chart.filter_lt')
+          }, {
+            value: 'gt',
+            label: this.$t('chart.filter_gt')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'le',
+            label: this.$t('chart.filter_le')
+          }, {
+            value: 'ge',
+            label: this.$t('chart.filter_ge')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'null',
+            label: this.$t('chart.filter_null')
+          }, {
+            value: 'not_null',
+            label: this.$t('chart.filter_not_null')
+          }]
+        }
+      ],
+      options: []
+    }
+  },
+  watch: {
+    'item': function() {
+      this.initOptions()
     }
   },
   mounted() {
-    fieldList(this.chart.tableId).then(response => {
+    this.initOptions()
-      this.fields = response.data
-    })
   },
   methods: {
+    initOptions() {
+      if (this.item) {
+        if (this.item.deType === 0 || this.item.deType === 5) {
+          this.options = JSON.parse(JSON.stringify(this.textOptions))
+        } else if (this.item.deType === 1) {
+          this.options = JSON.parse(JSON.stringify(this.dateOptions))
+        } else {
+          this.options = JSON.parse(JSON.stringify(this.valueOptions))
+        }
+      }
+    },
     addFilter() {
-      this.chart.customFilter.push({
+      this.item.filter.push({
-        fieldId: '',
+        fieldId: this.item.id,
         term: 'eq',
         value: ''
       })
     },
     removeFilter(index) {
-      this.chart.customFilter.splice(index, 1)
+      this.item.filter.splice(index, 1)
     }
   }
 }
@@ -157,8 +226,4 @@ export default {
     display: inline-block;
     width: 80px!important;
   }
-.el-select-dropdown__item{
-  padding: 0 20px;
-  font-size: 12px;
-}
 </style>

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

@@ -43,17 +43,16 @@
                 <el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
                 <el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
               </div>
-              <div style="border-bottom: 1px solid #E6E6E6;" class="padding-lr field-height">
+              <div class="padding-lr field-height">
                 <span>{{ $t('chart.dimension') }}</span>
                 <draggable
                   v-model="dimensionData"
-                  :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
+                  :options="{group:{name: 'drag',pull:'clone'},sort: true}"
                   animation="300"
                   :move="onMove"
                   class="drag-list"
                   :disabled="!hasDataPermission('manage',param.privileges)"
-                  @end="end1"
+                  @add="moveToDimension"
-                  @start="start1"
                 >
                   <transition-group>
                     <span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
@@ -70,13 +69,12 @@
                 <span>{{ $t('chart.quota') }}</span>
                 <draggable
                   v-model="quotaData"
-                  :options="{group:{name: 'quota',pull:'clone'},sort: true}"
+                  :options="{group:{name: 'drag',pull:'clone'},sort: true}"
                   animation="300"
                   :move="onMove"
                   class="drag-list"
                   :disabled="!hasDataPermission('manage',param.privileges)"
-                  @end="end1"
+                  @add="moveToQuota"
-                  @start="start1"
                 >
                   <transition-group>
                     <span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
@@ -213,44 +211,75 @@
                 </el-row>
               </div>
               <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
-                <el-row>
+                <el-row style="height: 100%;">
                   <el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
-                    <span style="width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
+                    <span style="width: 80px;text-align: right;">
+                      <span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                      <span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_type_axis') }}</span>
+                      <span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
+                      <span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
+                      <span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
+                      /
+                      <span>{{ $t('chart.dimension') }}</span>
+                    </span>
                     <draggable
                       v-model="view.xaxis"
                       :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="dimension"
+                      group="drag"
                       animation="300"
                       :move="onMove"
-                      style="padding:2px 0 0 0;width:100%;height: 100%;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      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;"
-                      @end="end2"
+                      @add="addXaxis"
                     >
                       <transition-group class="draggable-group">
                         <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
                       </transition-group>
                     </draggable>
                   </el-row>
-                  <el-row class="padding-lr">
+                  <el-row class="padding-lr" style="margin-top: 6px;">
-                    <span style="width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
+                    <span style="width: 80px;text-align: right;">
+                      <span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                      <span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_value_axis') }}</span>
+                      <span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
+                      <span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
+                      <span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
+                      <span v-else-if="chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
+                      <span v-else-if="chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
+                      /
+                      <span>{{ $t('chart.quota') }}</span>
+                    </span>
                     <draggable
                       v-model="view.yaxis"
                       :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="quota"
+                      group="drag"
                       animation="300"
                       :move="onMove"
-                      style="padding:2px 0 0 0;width:100%;height: 100%;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      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;"
-                      @end="end2"
+                      @add="addYaxis"
                     >
                       <transition-group class="draggable-group">
                         <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
                       </transition-group>
                     </draggable>
                   </el-row>
-                  <div class="padding-lr filter-class">
+                  <div class="padding-lr filter-class" style="margin-top: 6px;">
                     <span>{{ $t('chart.result_filter') }}</span>
-                    <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">
+                    <!--                    <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
-                      {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" />
+                    <!--                      {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
-                    </el-button>
+                    <!--                    </el-button>-->
+                    <draggable
+                      v-model="view.customFilter"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="drag"
+                      animation="300"
+                      :move="onMove"
+                      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"
+                    >
+                      <transition-group class="draggable-group">
+                        <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index" :item="item" @onFilterItemRemove="filterItemRemove" @editItemFilter="showEditFilter" />
+                      </transition-group>
+                    </draggable>
                   </div>
                 </el-row>
               </div>
@@ -360,7 +389,7 @@
       width="800px"
       class="dialog-css"
     >
-      <result-filter-editor :chart="chartForFilter" />
+      <result-filter-editor :chart="chartForFilter" :item="filterItem" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeResultFilter">{{ $t('chart.cancel') }}</el-button>
         <el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
@@ -404,6 +433,7 @@ import { ajaxGetData, post } from '@/api/chart/chart'
 import draggable from 'vuedraggable'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
+import FilterItem from '../components/drag-item/FilterItem'
 import ResultFilterEditor from '../components/filter/ResultFilterEditor'
 import ChartComponent from '../components/ChartComponent'
 import bus from '@/utils/bus'
@@ -441,7 +471,31 @@ import FieldEdit from '../../dataset/data/FieldEdit'
 
 export default {
   name: 'ChartEdit',
-  components: { FieldEdit, SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: {
+    FilterItem,
+    FieldEdit,
+    SplitSelector,
+    TableSelector,
+    ResultFilterEditor,
+    LabelNormal,
+    DimensionFilterEditor,
+    TableNormal,
+    DatasetChartDetail,
+    QuotaFilterEditor,
+    BackgroundColorSelector,
+    XAxisSelector,
+    YAxisSelector,
+    TooltipSelector,
+    LabelSelector,
+    LegendSelector,
+    TitleSelector,
+    SizeSelector,
+    ColorSelector,
+    ChartComponent,
+    QuotaItem,
+    DimensionItem,
+    draggable
+  },
   props: {
     param: {
       type: Object,
@@ -508,7 +562,8 @@ export default {
       changeTable: {},
       searchField: '',
       editDsField: false,
-      changeDsTitle: ''
+      changeDsTitle: '',
+      filterItem: {}
     }
   },
   computed: {
@@ -623,6 +678,11 @@ export default {
       if (view.type === 'line-stack' && trigger === 'chart') {
         view.customAttr.size.lineArea = true
       }
+      view.customFilter.forEach(function(ele) {
+        if (ele && !ele.filter) {
+          ele.filter = []
+        }
+      })
       view.xaxis = JSON.stringify(view.xaxis)
       view.yaxis = JSON.stringify(view.yaxis)
       view.customAttr = JSON.stringify(view.customAttr)
@@ -775,82 +835,77 @@ export default {
     },
 
     // 左边往右边拖动时的事件
-    start1(e) {
+    // start1(e) {
-      // console.log(e)
+    //   // console.log(e)
-      e.clone.className = 'item'
+    //   e.clone.className = 'item'
-      e.item.className = 'item'
+    //   e.item.className = 'item'
-    },
+    // },
-    end1(e) {
+    // end1(e) {
-      // console.log(e)
+    //   // console.log(e)
-      e.clone.className = 'item'
+    //   e.clone.className = 'item'
-      e.item.className = 'item'
+    //   e.item.className = 'item'
-      this.refuseMove(e)
+    //   this.refuseMove(e)
-      this.removeCheckedKey(e)
+    //   this.removeCheckedKey(e)
-      this.save(true)
+    //   this.save(true)
-    },
+    // },
     // 右边往左边拖动时的事件
-    start2(e) {
+    // start2(e) {
-      // console.log(e)
+    // console.log(e)
-    },
+    // },
-    end2(e) {
+    // end2(e) {
-      // console.log(e)
+    //   // console.log(e)
-      this.removeDuplicateKey(e)
+    //   this.removeDuplicateKey(e)
-      this.save(true)
+    //   this.save(true)
-    },
+    // },
-    removeCheckedKey(e) {
+    // removeCheckedKey(e) {
-      const that = this
+    //   const that = this
-      const xItems = this.view.xaxis.filter(function(m) {
+    //   const xItems = this.view.xaxis.filter(function(m) {
-        return m.id === that.moveId
+    //     return m.id === that.moveId
-      })
+    //   })
-      const yItems = this.view.yaxis.filter(function(m) {
+    //   const yItems = this.view.yaxis.filter(function(m) {
-        return m.id === that.moveId
+    //     return m.id === that.moveId
-      })
+    //   })
-      if (xItems && xItems.length > 1) {
+    //   if (xItems && xItems.length > 1) {
-        this.view.xaxis.splice(e.newDraggableIndex, 1)
+    //     this.view.xaxis.splice(e.newDraggableIndex, 1)
-      }
+    //   }
-      if (yItems && yItems.length > 1) {
+    //   if (yItems && yItems.length > 1) {
-        this.view.yaxis.splice(e.newDraggableIndex, 1)
+    //     this.view.yaxis.splice(e.newDraggableIndex, 1)
-      }
+    //   }
-    },
+    // },
-    refuseMove(e) {
+    // refuseMove(e) {
-      const that = this
+    //   const that = this
-      const xItems = this.dimension.filter(function(m) {
+    //   const xItems = this.dimension.filter(function(m) {
-        return m.id === that.moveId
+    //     return m.id === that.moveId
-      })
+    //   })
-      const yItems = this.quota.filter(function(m) {
+    //   const yItems = this.quota.filter(function(m) {
-        return m.id === that.moveId
+    //     return m.id === that.moveId
-      })
+    //   })
-      if (xItems && xItems.length > 1) {
+    //   if (xItems && xItems.length > 1) {
-        this.dimension.splice(e.newDraggableIndex, 1)
+    //     this.dimension.splice(e.newDraggableIndex, 1)
-      }
+    //   }
-      if (yItems && yItems.length > 1) {
+    //   if (yItems && yItems.length > 1) {
-        this.quota.splice(e.newDraggableIndex, 1)
+    //     this.quota.splice(e.newDraggableIndex, 1)
-      }
+    //   }
-    },
+    // },
-    removeDuplicateKey(e) {
+    // removeDuplicateKey(e) {
-      const that = this
+    //   const that = this
-      const xItems = this.dimension.filter(function(m) {
+    //   const xItems = this.dimension.filter(function(m) {
-        return m.id === that.moveId
+    //     return m.id === that.moveId
-      })
+    //   })
-      const yItems = this.quota.filter(function(m) {
+    //   const yItems = this.quota.filter(function(m) {
-        return m.id === that.moveId
+    //     return m.id === that.moveId
-      })
+    //   })
-      if (xItems && xItems.length > 1) {
+    //   if (xItems && xItems.length > 1) {
-        this.dimension.splice(e.newDraggableIndex, 1)
+    //     this.dimension.splice(e.newDraggableIndex, 1)
-      }
+    //   }
-      if (yItems && yItems.length > 1) {
+    //   if (yItems && yItems.length > 1) {
-        this.quota.splice(e.newDraggableIndex, 1)
+    //     this.quota.splice(e.newDraggableIndex, 1)
-      }
+    //   }
-    },
+    // },
     // move回调方法
     onMove(e, originalEvent) {
       // console.log(e)
       this.moveId = e.draggedContext.element.id
-      // //不允许停靠
-      // if (e.relatedContext.element.id == 1) return false;
-      // //不允许拖拽
-      // if (e.draggedContext.element.id == 4) return false;
-      // if (e.draggedContext.element.id == 11) return false;
       return true
     },
 
@@ -977,7 +1032,12 @@ export default {
       this.closeQuotaFilter()
     },
 
-    showResultFilter() {
+    filterItemRemove(item) {
+      this.view.customFilter.splice(item.index, 1)
+      this.save(true)
+    },
+    showEditFilter(item) {
+      this.filterItem = JSON.parse(JSON.stringify(item))
       this.chartForFilter = JSON.parse(JSON.stringify(this.view))
       this.resultFilterEdit = true
     },
@@ -985,16 +1045,8 @@ export default {
       this.resultFilterEdit = false
     },
     saveResultFilter() {
-      for (let i = 0; i < this.chartForFilter.customFilter.length; i++) {
+      for (let i = 0; i < this.filterItem.filter.length; i++) {
-        const f = this.chartForFilter.customFilter[i]
+        const f = this.filterItem.filter[i]
-        if (!f.fieldId || f.fieldId === '') {
-          this.$message({
-            message: this.$t('chart.filter_field_can_null'),
-            type: 'error',
-            showClose: true
-          })
-          return
-        }
         if (!f.term.includes('null') && (!f.value || f.value === '')) {
           this.$message({
             message: this.$t('chart.filter_value_can_null'),
@@ -1004,7 +1056,7 @@ export default {
           return
         }
       }
-      this.view.customFilter = this.chartForFilter.customFilter
+      this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter
       this.save(true)
       this.closeResultFilter()
     },
@@ -1044,7 +1096,9 @@ export default {
     },
     resetView() {
       this.dimension = []
+      this.dimensionData = []
       this.quota = []
+      this.quotaData = []
       this.view = {
         xAxis: [],
         yAxis: [],
@@ -1095,6 +1149,58 @@ export default {
     closeEditDsField() {
       this.editDsField = false
       this.initTableField()
+    },
+
+    // drag
+    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)
+      }
+    },
+    addXaxis(e) {
+      this.dragCheckType(this.view.xaxis, 'd')
+      this.dragMoveDuplicate(this.view.xaxis, e)
+      this.save(true)
+    },
+    addYaxis(e) {
+      this.dragCheckType(this.view.yaxis, 'q')
+      this.dragMoveDuplicate(this.view.yaxis, e)
+      this.save(true)
+    },
+    moveToDimension(e) {
+      this.dragCheckType(this.dimensionData, 'd')
+      this.dragMoveDuplicate(this.dimensionData, e)
+      this.save(true)
+    },
+    moveToQuota(e) {
+      this.dragCheckType(this.quotaData, 'q')
+      this.dragMoveDuplicate(this.quotaData, e)
+      this.save(true)
+    },
+    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.save(true)
     }
   }
 }
@@ -1233,7 +1339,7 @@ export default {
   }
 
   .attr-style{
-    height: calc(100vh - 56px - 25vh - 40px - 60px);
+    height: calc(100vh - 56px - 25vh - 40px - 40px);
   }
 
   .attr-selector{
@@ -1288,7 +1394,7 @@ export default {
   }
   .chart-error-class{
     text-align: center;
-    height: calc(100% - 84px);
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1296,6 +1402,7 @@ export default {
   }
   .field-height{
     height: calc(50% - 20px);
+    border-top: 1px solid #E6E6E6;
   }
   .padding-tab{
     padding: 0;