diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
index b3453178ba..c2b67f7323 100644
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -41,7 +41,6 @@ export default {
   ]),
   methods: {
     edit() {
-      debugger
       // 编辑时临时保存 当前修改的画布
       localStorage.setItem('canvasDataEditTmp', JSON.stringify(this.componentData))
       localStorage.setItem('canvasStyleEditTmp', JSON.stringify(this.canvasStyleData))
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 4a09bed1cd..13a016959d 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -134,7 +134,6 @@ export default {
       this.isShowArea = true
 
       const move = (moveEvent) => {
-        debugger
         this.width = Math.abs(moveEvent.clientX - startX)
         this.height = Math.abs(moveEvent.clientY - startY)
         if (moveEvent.clientX < startX) {
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 25b4e1c712..826a69cdda 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -87,7 +87,6 @@ export default {
   },
   methods: {
     closePanelEdit() {
-      debugger
       bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
     },
     goFile() {
diff --git a/frontend/src/components/canvas/index.vue b/frontend/src/components/canvas/index.vue
index e3a752eb32..d349e1744d 100644
--- a/frontend/src/components/canvas/index.vue
+++ b/frontend/src/components/canvas/index.vue
@@ -4,9 +4,9 @@
 
     <main>
       <!-- 左侧组件列表 -->
-<!--      <section class="left">-->
-<!--        <ComponentList />-->
-<!--      </section>-->
+      <!--      <section class="left">-->
+      <!--        <ComponentList />-->
+      <!--      </section>-->
       <!-- 中间画布 -->
       <section class="center">
         <div
@@ -80,7 +80,6 @@ export default {
       e.preventDefault()
       e.stopPropagation()
 
-      debugger
       let component
       const id = e.dataTransfer.getData('componentId')
       componentList.forEach(componentTemp => {
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index 5c4a88cd30..2f2638c14e 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -22,7 +22,8 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date'
+  component: 'de-date',
+  filterDialog: true
 }
 
 class TimeYearServiceImpl extends WidgetService {
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index cf7f3f5859..39bb7d023f 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -85,6 +85,20 @@ div:focus {
     }
 }
 
+.de-filter-dialog {
+    min-width: 500px !important;
+    width: 50% !important;
+    
+    .el-dialog__header{
+        background-color: #f4f4f5;
+        padding: 10px 20px !important;
+    }
+    .el-dialog__body{
+        padding: 1px 20px !important;
+
+    }
+}
+
 .de-search-header {
     .el-tabs__header{
         display: none !important;;
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 87b431239a..c5fb5f40d7 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -56,7 +56,6 @@ export default {
   },
   methods: {
     drawEcharts() {
-      // debugger
       const chart = this.chart
       let chart_option = {}
       // type
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index a2b2969f1e..b2a381237b 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -68,6 +68,14 @@
       </de-main-container>
     </de-container>
 
+    <el-dialog
+      title="过滤组件"
+      :visible.sync="filterVisible"
+      custom-class="de-filter-dialog"
+    >
+      <filter-dialog />
+    </el-dialog>
+
   </el-container>
 </template>
 
@@ -94,6 +102,7 @@ import '@/components/canvas/styles/animate.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/components/canvas/styles/reset.css'
 import { ApplicationContext } from '@/utils/ApplicationContext'
+import FilterDialog from '../filter/filterDialog'
 export default {
   name: 'PanelEdit',
   components: {
@@ -103,7 +112,8 @@ export default {
     FilterGroup,
     ViewSelect,
     Editor,
-    Toolbar
+    Toolbar,
+    FilterDialog
   },
   data() {
     return {
@@ -112,7 +122,8 @@ export default {
       clickNotClose: false,
       showIndex: -1,
       activeName: 'attr',
-      reSelectAnimateIndex: undefined
+      reSelectAnimateIndex: undefined,
+      filterVisible: false
     }
   },
 
@@ -249,7 +260,13 @@ export default {
           }
         })
       } else {
-        component = deepCopy(ApplicationContext.getService(componentInfo.id))
+        const wd = ApplicationContext.getService(componentInfo.id)
+        if (wd.filterDialog) {
+          this.show = false
+          this.openFilterDiolog()
+          return
+        }
+        component = deepCopy(wd)
       }
 
       component.style.top = e.offsetY
@@ -282,6 +299,9 @@ export default {
       if (e.button !== 2) {
         this.$store.commit('hideContextMenu')
       }
+    },
+    openFilterDiolog() {
+      this.filterVisible = true
     }
 
   }
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
new file mode 100644
index 0000000000..bcc734e4c3
--- /dev/null
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -0,0 +1,169 @@
+<template>
+
+  <de-container class="de-dialog-container">
+    <de-aside-container class="ms-aside-container">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane :lazy="true" class="de-tab" label="按表选择" name="dataset">按表选择</el-tab-pane>
+        <el-tab-pane :lazy="true" class="de-tab" label="按组件选择" name="assembly">按组件选择</el-tab-pane>
+      </el-tabs>
+    </de-aside-container>
+
+    <!--画布区域-->
+    <de-main-container class="ms-main-container">
+      <div>
+        <el-row>
+          <el-col :span="24">
+            <div class="filter-field">
+              <div class="field-content">
+                <div class="field-content-left">
+                  <div class="field-content-text">字段</div>
+                </div>
+
+                <div class="field-content-right">请拖入左侧字段</div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="filter-options-left">
+              <el-switch
+                active-text="单选"
+                inactive-text="多选"
+              />
+            </div>
+          </el-col>
+          <el-col :span="16"><div class="filter-options-right">
+            <el-checkbox disabled>备选项1</el-checkbox>
+            <el-checkbox disabled>备选项</el-checkbox>
+          </div>
+
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="filter-content" />
+          </el-col>
+        </el-row>
+      </div>
+    </de-main-container>
+  </de-container>
+
+</template>
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+export default {
+  name: 'FilterDialog',
+  components: {
+    DeMainContainer,
+    DeContainer,
+    DeAsideContainer
+  },
+  data() {
+    return {
+      activeName: 'dataset'
+    }
+  },
+  created() {
+
+  },
+
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .de-dialog-container {
+    height: 50vh !important;
+
+  }
+  .ms-aside-container {
+    width: 40% !important;
+    min-width: 230px !important;
+    max-width: 260px !important;
+    height: 100%;
+    min-height: 400px;
+    padding: 5px;
+    border: none;
+  }
+
+  .ms-main-container {
+    height: 100%;
+    min-height: 400px;
+
+  }
+
+  .filter-field {
+    //   background: #99a9bf;
+      border-radius: 4px;
+      height: 45px;
+      .field-content {
+        position: relative;
+        display: table;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+
+        .field-content-left {
+            width: 50px;
+            max-width: 50px;
+            position: relative;
+            display: table-cell;
+            vertical-align: middle;
+            margin: 0px;
+            padding: 8px;
+            height: 100%;
+            border-right: none;
+            border: 1px solid #E6E6E6;
+            .field-content-text {
+                box-sizing: border-box;
+                overflow: hidden;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                word-break: break-all;
+            }
+        }
+        .field-content-right {
+            border-left: none;
+            color: #9ea6b2;
+            border: 1px solid #E6E6E6;
+            width: 0%;
+            max-width: 0%;
+            position: relative;
+            display: table-cell;
+            vertical-align: middle;
+            margin: 0px;
+            padding: 0 0 0 10px;
+            height: 100%;
+        }
+    }
+
+  }
+  .filter-options-left {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: nowrap;
+      height: 50px;
+  }
+  .filter-options-right {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      flex-wrap: nowrap;
+      height: 50px;
+  }
+
+  .filter-content {
+      height: calc(50vh - 150px);
+      top: 160px;
+      background: #99a9bf;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index ed7a82ce00..a2a29bf107 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -25,7 +25,6 @@ export default {
   },
   mounted() {
     bus.$on('PanelSwitchComponent', (c) => {
-      debugger
       console.log(c)
       this.param = c.param
       switch (c.name) {