diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index b47cb117ca..300e8c53c3 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -629,7 +629,7 @@ export default {
     elementMouseDown(e) {
       // private 设置当前组件数据及状态
       this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-number-range') {
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range') {
         e.preventDefault()
       }
       // 阻止冒泡事件
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 88216e9e1a..b789d127d8 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -104,7 +104,7 @@ export default {
     elementMouseDown(e) {
       // private 设置当前组件数据及状态
       this.$store.commit('setClickComponentStatus', true)
-      if (this.config.component !== 'v-text' && this.config.component !== 'rect-shape' && this.config.component !== 'de-input-search' && this.config.component !== 'de-number-range') {
+      if (this.config.component !== 'v-text' && this.config.component !== 'rect-shape' && this.config.component !== 'de-input-search' && this.config.component !== 'de-select-grid' && this.config.component !== 'de-number-range') {
         e.preventDefault()
       }
       // 阻止冒泡事件
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index b0475bd00d..b4c0e74bbf 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -226,7 +226,7 @@ export default {
 
     handleMouseDownOnShape(e) {
       this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-number-range') {
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range') {
         e.preventDefault()
       }
 
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index c50648ee74..ccf8d14349 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -4,14 +4,13 @@
     <div class="de-select-grid-search">
       <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
     </div>
-    <div>
+    <div class="list">
       <el-tree
         v-if="options!== null && options.attrs!==null"
         ref="deSelectGrid"
-        :data="options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas"
+        :data="(options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas).filter(node => node.text.includes(keyWord))"
         :props="defaultProp"
         :indent="0"
-        :filter-node-method="filterNode"
         class="de-filter-tree"
         default-expand-all
       >
@@ -71,7 +70,7 @@ export default {
         label: 'text',
         children: 'children'
       },
-      keyWord: null,
+      keyWord: '',
       allNode: {
         id: (-2 << 16) + '',
         text: this.$t('commons.all'),
@@ -107,10 +106,11 @@ export default {
         sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
         !this.inDraw && (this.options.value = null)
       }
-    },
-    keyWord(val) {
-      this.$refs.deSelectGrid.filter(val)
     }
+    // keyWord(val) {
+    //   console.log(val)
+    //   this.$refs.deSelectGrid.filter(val)
+    // }
   },
   created() {
     this.options = this.element.options
@@ -206,10 +206,10 @@ export default {
       this.options.value = null
       this.changeRadioBox()
     },
-    filterNode(value, data) {
-      if (!value) return true
-      return data[this.defaultProp.label].indexOf(value) !== -1
-    },
+    // filterNode(value, data) {
+    //   if (!value) return true
+    //   return data[this.defaultProp.label].indexOf(value) !== -1
+    // },
     styleChange() {
       this.$store.state.styleChangeTimes++
     }
@@ -246,4 +246,13 @@ export default {
     border-radius: 0px;
   }
 }
+.de-select-grid-class {
+  .list {
+    overflow-y: auto;
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    bottom: 0;
+  }
+}
 </style>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 42b5dd7f8d..033b0da0bf 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -840,7 +840,9 @@ export default {
     bubble_symbol: 'Shape',
     gap_width: 'Gap Width',
     width: 'Width',
-    height: 'Height'
+    height: 'Height',
+    system_case: 'System',
+    custom_case: 'Custom'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 5ac621159c..a973e69f36 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -840,7 +840,9 @@ export default {
     bubble_symbol: '圖形',
     gap_width: '間隔',
     width: '寬度',
-    height: '高度'
+    height: '高度',
+    system_case: '系統方案',
+    custom_case: '自定義'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index fe7c71e7c2..285de2d1d8 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -840,7 +840,9 @@ export default {
     bubble_symbol: '图形',
     gap_width: '间隔',
     width: '宽度',
-    height: '高度'
+    height: '高度',
+    system_case: '系统方案',
+    custom_case: '自定义'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 424329d78f..c9ac0ad0dd 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -235,6 +235,15 @@ div:focus {
   div.el-input-group__append {
     width: 10% !important;
   }
+  .de-select-grid-class {
+    .list {
+      position: relative !important;
+      height: 200px !important;
+      overflow-y: scroll !important;
+      top: 0px !important;
+    }
+  }
+
 }
 
 %field-icon {
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index f397633982..7ea65b4b82 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -4,14 +4,46 @@
       <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
         <div v-if="sourceType==='view' || sourceType==='panelEchart'">
           <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
-            <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
-              <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
-                <div style="float: left">
-                  <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+            <el-popover
+              placement="bottom"
+              width="400"
+              trigger="click"
+              :disabled="param && !hasDataPermission('manage',param.privileges)"
+            >
+              <div style="padding: 6px 10px;">
+                <div>
+                  <span class="color-label">{{ $t('chart.system_case') }}</span>
+                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+                    <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                      <div style="float: left">
+                        <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                      </div>
+                      <span style="margin-left: 4px;">{{ option.name }}</span>
+                    </el-option>
+                  </el-select>
+                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
                 </div>
-                <span style="margin-left: 4px;">{{ option.name }}</span>
-              </el-option>
-            </el-select>
+                <div style="display: flex;align-items: center;margin-top: 10px;">
+                  <span class="color-label">{{ $t('chart.custom_case') }}</span>
+                  <span>
+                    <el-radio-group v-model="customColor" class="color-type">
+                      <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
+                        <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                      </el-radio>
+                    </el-radio-group>
+                  </span>
+                </div>
+                <div style="display: flex;align-items: center;margin-top: 10px;">
+                  <span class="color-label" />
+                  <span>
+                    <el-color-picker v-model="customColor" class="color-picker-style" @change="switchColorCase" />
+                  </span>
+                </div>
+              </div>
+              <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
+                <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+              </div>
+            </el-popover>
           </el-form-item>
 
           <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
@@ -149,12 +181,16 @@ export default {
           colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
         }
       ],
-      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE))
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
+      customColor: null,
+      colorIndex: 0
     }
   },
   watch: {
     'chart': {
       handler: function() {
+        this.customColor = null
+        this.colorIndex = 0
         this.init()
       }
     }
@@ -172,6 +208,8 @@ export default {
       val.value = items[0].value
       val.colors = items[0].colors
       this.$emit('onColorChange', val)
+      this.customColor = null
+      this.colorIndex = 0
     },
     init() {
       const chart = JSON.parse(JSON.stringify(this.chart))
@@ -184,8 +222,26 @@ export default {
         }
         if (customAttr.color) {
           this.colorForm = customAttr.color
+          if (!this.customColor) {
+            this.customColor = this.colorForm.colors[0]
+            this.colorIndex = 0
+          }
         }
       }
+    },
+
+    switchColor(index) {
+      this.colorIndex = index
+    },
+    switchColorCase() {
+      this.colorForm.colors[this.colorIndex] = this.customColor
+      this.$emit('onColorChange', this.colorForm)
+    },
+
+    resetCustomColor() {
+      this.customColor = this.colorForm.colors[0]
+      this.colorIndex = 0
+      this.changeColorCase()
     }
   }
 }
@@ -220,4 +276,22 @@ export default {
     cursor: pointer;
     z-index: 1003;
   }
+  .color-label{
+    display: inline-block;
+    width: 60px;
+  }
+
+  .color-type>>>.el-radio__input{
+    display: none;
+  }
+  .el-radio{
+    margin:0 2px 0 0!important;
+  }
+  .el-radio>>>.el-radio__label{
+    padding-left: 0;
+  }
+
+  .el-radio.is-checked{
+    border: 1px solid #0a7be0;
+  }
 </style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 5149e7ab18..729d4f6f62 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -116,7 +116,7 @@
 
     <el-dialog
       v-if="filterVisible && panelInfo.id"
-      :title="$t('panel.module')"
+      :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
       :visible.sync="filterVisible"
       custom-class="de-filter-dialog"
     >
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index c655a042b1..af9c4f8d90 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -39,8 +39,18 @@
                   @node-click="handleNodeClick"
                 >
                   <div slot-scope="{ node, data }" class="custom-tree-node">
-                    <el-button v-if="data.type === 'db'" icon="el-icon-s-data" type="text" size="mini" />
-                    <span class="label-span">{{ node.label }}</span>
+                    <!-- <el-button v-if="data.type === 'db'" icon="el-icon-s-data" type="text" size="mini" /> -->
+                    <span>
+                      <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
+                      <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+                      <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+                      <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
+                    </span>
+                    <el-tooltip class="item" effect="dark" placement="top">
+                      <div slot="content">{{ node.label }}</div>
+                      <span class="label-span">{{ node.label }}</span>
+                    </el-tooltip>
+
                   </div>
                 </el-tree>