diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
index e22d9b8742..10ce586676 100644
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -65,6 +65,7 @@ export default {
     },
 
     cut() {
+      this.deleteCurCondition()
       this.$store.commit('cut')
     },
 
@@ -78,10 +79,17 @@ export default {
     },
 
     deleteComponent() {
+      this.deleteCurCondition()
       this.$store.commit('deleteComponent')
       this.$store.commit('recordSnapshot')
     },
 
+    deleteCurCondition() {
+      if (this.curComponent.type === 'custom') {
+        bus.$emit('delete-condition', { componentId: this.curComponent.id })
+      }
+    },
+
     upComponent() {
       this.$store.commit('upComponent')
       this.$store.commit('recordSnapshot')
diff --git a/frontend/src/components/canvas/components/Editor/MarkLine.vue b/frontend/src/components/canvas/components/Editor/MarkLine.vue
index a07ccedc80..7ad032c413 100644
--- a/frontend/src/components/canvas/components/Editor/MarkLine.vue
+++ b/frontend/src/components/canvas/components/Editor/MarkLine.vue
@@ -61,7 +61,7 @@ export default {
 
       this.hideLine()
       components.forEach(component => {
-        if (component == this.curComponent) return
+        if (component === this.curComponent) return
         const componentStyle = getComponentRotatedStyle(component.style)
         const { top, left, bottom, right } = componentStyle
         const componentHalfwidth = componentStyle.width / 2
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index eca610433c..b086c8ef74 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -61,13 +61,11 @@ export default {
     ])
   },
   mounted() {
-    debugger
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
     erd.listenTo(document.getElementById('canvasInfo'), element => {
       _this.$nextTick(() => {
-        debugger
         _this.restore()
       })
     })
diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
index 96b6db6fa7..59bb770dcd 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
@@ -71,7 +71,6 @@ export default {
       })
     })
     window.onresize = () => {
-      debugger
       this.resize()
     }
     // this.resize()
@@ -88,7 +87,6 @@ export default {
       this.handleScaleChange()
     },
     restore() {
-      debugger
       this.panelId = this.$route.path.split('/')[2]
       // 加载视图数据
       get('panel/group/findOne/' + this.panelId).then(response => {
diff --git a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
index d14a926e07..a3ba065164 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
@@ -19,7 +19,6 @@ export default {
 
   methods: {
     toDir() {
-      debugger
       this.$router.replace('/panel/index')
       bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
     }
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 277591c938..3c6c103ced 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -25,14 +25,14 @@
       :class="{ lock: item.isLock }"
     >
 
-      <de-drawing-widget
+      <component
+        :is="item.component"
         v-if="item.type==='custom'"
         :id="'component' + item.id"
         class="component"
-        :style="getComponentStyle(item.style)"
-        :service-name="item.widgetService.name"
-        :panel-id="panelInfo.id"
-        @filter-value-change="filterValueChange"
+        :style="item.style"
+        :element="item"
+        @set-condition-value="setConditionValue"
       />
 
       <component
@@ -67,6 +67,7 @@
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
+// eslint-disable-next-line no-unused-vars
 import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
 import { $ } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
@@ -75,7 +76,8 @@ import Area from './Area'
 import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-
+import { Condition } from '@/components/widget/bean/Condition'
+import bus from '@/utils/bus'
 export default {
   components: { Shape, ContextMenu, MarkLine, Area, Grid },
   props: {
@@ -94,7 +96,8 @@ export default {
       },
       width: 0,
       height: 0,
-      isShowArea: false
+      isShowArea: false,
+      conditions: []
     }
   },
   computed: {
@@ -116,6 +119,9 @@ export default {
     eventBus.$on('hideArea', () => {
       this.hideArea()
     })
+    bus.$on('delete-condition', condition => {
+      this.deleteCondition(condition)
+    })
   },
   methods: {
     changeStyleWithScale,
@@ -281,7 +287,8 @@ export default {
     },
 
     getComponentStyle(style) {
-      return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+    //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      return style
     },
 
     handleInput(element, value) {
@@ -290,6 +297,7 @@ export default {
     },
 
     getTextareaHeight(element, text) {
+      // eslint-disable-next-line prefer-const
       let { lineHeight, fontSize, height } = element.style
       if (lineHeight === '') {
         lineHeight = 1.5
@@ -301,6 +309,28 @@ export default {
 
     filterValueChange(value) {
       console.log('emit:' + value)
+    },
+
+    setConditionValue(obj) {
+      const { component, value, operator } = obj
+      const fieldId = component.options.attrs.fieldId
+      const condition = new Condition(component.id, fieldId, operator, value, null)
+      this.addCondition(condition)
+    },
+    addCondition(condition) {
+      this.conditions.push(condition)
+      this.executeSearch()
+    },
+    deleteCondition(condition) {
+      this.conditions = this.conditions.filter(item => {
+        const componentIdSuitable = !condition.componentId || (item.componentId === condition.componentId)
+        const fieldIdSuitable = !condition.fieldId || (item.fieldId === condition.fieldId)
+        return !(componentIdSuitable && fieldIdSuitable)
+      })
+      this.executeSearch()
+    },
+    executeSearch() {
+      console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
     }
   }
 }
diff --git a/frontend/src/components/canvas/store/compose.js b/frontend/src/components/canvas/store/compose.js
index 2166b54bdc..c130e800e9 100644
--- a/frontend/src/components/canvas/store/compose.js
+++ b/frontend/src/components/canvas/store/compose.js
@@ -6,95 +6,95 @@ import { $ } from '@/components/canvas/utils/utils'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 
 export default {
-    state: {
-        areaData: { // 选中区域包含的组件以及区域位移信息
-            style: {
-                top: 0,
-                left: 0,
-                width: 0,
-                height: 0,
-            },
-            components: [],
-        },
-        editor: null,
+  state: {
+    areaData: { // 选中区域包含的组件以及区域位移信息
+      style: {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      },
+      components: []
     },
-    mutations: {
-        getEditor(state) {
-            state.editor = $('#editor')
-        },
-
-        setAreaData(state, data) {
-            state.areaData = data
-        },
-
-        compose({ componentData, areaData, editor }) {
-            const components = []
-            areaData.components.forEach(component => {
-                if (component.component != 'Group') {
-                    components.push(component)
-                } else {
-                    // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
-                    const parentStyle = { ...component.style }
-                    const subComponents = component.propValue
-                    const editorRect = editor.getBoundingClientRect()
-
-                    store.commit('deleteComponent')
-                    subComponents.forEach(component => {
-                        decomposeComponent(component, editorRect, parentStyle)
-                        store.commit('addComponent', { component })
-                    })
-
-                    components.push(...component.propValue)
-                    store.commit('batchDeleteComponent', component.propValue)
-                }
-            })
-
-            store.commit('addComponent', {
-                component: {
-                    id: generateID(),
-                    component: 'Group',
-                    ...commonAttr,
-                    style: {
-                        ...commonStyle,
-                        ...areaData.style,
-                    },
-                    propValue: components,
-                },
-            })
-
-            eventBus.$emit('hideArea')
-
-            store.commit('batchDeleteComponent', areaData.components)
-            store.commit('setCurComponent', {
-                component: componentData[componentData.length - 1],
-                index: componentData.length - 1,
-            })
-
-            areaData.components = []
-        },
-
-        // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经放到 Group 组件中了
-        batchDeleteComponent({ componentData }, deleteData) {
-            deleteData.forEach(component => {
-                for (let i = 0, len = componentData.length; i < len; i++) {
-                    if (component.id == componentData[i].id) {
-                        componentData.splice(i, 1)
-                        break
-                    }
-                }
-            })
-        },
-
-        decompose({ curComponent, editor }) {
-            const parentStyle = { ...curComponent.style }
-            const components = curComponent.propValue
-            const editorRect = editor.getBoundingClientRect()
-
-            store.commit('deleteComponent')
-            components.forEach(component => {
-                decomposeComponent(component, editorRect, parentStyle)
-                store.commit('addComponent', { component })
-            })
-        },
+    editor: null
+  },
+  mutations: {
+    getEditor(state) {
+      state.editor = $('#editor')
     },
+
+    setAreaData(state, data) {
+      state.areaData = data
+    },
+
+    compose({ componentData, areaData, editor }) {
+      const components = []
+      areaData.components.forEach(component => {
+        if (component.component !== 'Group') {
+          components.push(component)
+        } else {
+          // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
+          const parentStyle = { ...component.style }
+          const subComponents = component.propValue
+          const editorRect = editor.getBoundingClientRect()
+
+          store.commit('deleteComponent')
+          subComponents.forEach(component => {
+            decomposeComponent(component, editorRect, parentStyle)
+            store.commit('addComponent', { component })
+          })
+
+          components.push(...component.propValue)
+          store.commit('batchDeleteComponent', component.propValue)
+        }
+      })
+
+      store.commit('addComponent', {
+        component: {
+          id: generateID(),
+          component: 'Group',
+          ...commonAttr,
+          style: {
+            ...commonStyle,
+            ...areaData.style
+          },
+          propValue: components
+        }
+      })
+
+      eventBus.$emit('hideArea')
+
+      store.commit('batchDeleteComponent', areaData.components)
+      store.commit('setCurComponent', {
+        component: componentData[componentData.length - 1],
+        index: componentData.length - 1
+      })
+
+      areaData.components = []
+    },
+
+    // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经放到 Group 组件中了
+    batchDeleteComponent({ componentData }, deleteData) {
+      deleteData.forEach(component => {
+        for (let i = 0, len = componentData.length; i < len; i++) {
+          if (component.id == componentData[i].id) {
+            componentData.splice(i, 1)
+            break
+          }
+        }
+      })
+    },
+
+    decompose({ curComponent, editor }) {
+      const parentStyle = { ...curComponent.style }
+      const components = curComponent.propValue
+      const editorRect = editor.getBoundingClientRect()
+
+      store.commit('deleteComponent')
+      components.forEach(component => {
+        decomposeComponent(component, editorRect, parentStyle)
+        store.commit('addComponent', { component })
+      })
+    }
+  }
 }
diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 3b1fd50f71..f426d07177 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -1,55 +1,55 @@
 import { sin, cos } from '@/components/canvas/utils/translate'
 
 export function getStyle(style, filter = []) {
-    const needUnit = [
-        'fontSize',
-        'width',
-        'height',
-        'top',
-        'left',
-        'borderWidth',
-        'letterSpacing',
-        'borderRadius',
-    ]
+  const needUnit = [
+    'fontSize',
+    'width',
+    'height',
+    'top',
+    'left',
+    'borderWidth',
+    'letterSpacing',
+    'borderRadius'
+  ]
 
-    const result = {}
-    Object.keys(style).forEach(key => {
-        if (!filter.includes(key)) {
-            if (key != 'rotate') {
-                result[key] = style[key]
+  const result = {}
+  Object.keys(style).forEach(key => {
+    if (!filter.includes(key)) {
+      if (key !== 'rotate') {
+        result[key] = style[key]
 
-                if (needUnit.includes(key)) {
-                    result[key] += 'px'
-                }
-            } else {
-                result.transform = key + '(' + style[key] + 'deg)'
-            }
+        if (needUnit.includes(key)) {
+          result[key] += 'px'
         }
-    })
+      } else {
+        result.transform = key + '(' + style[key] + 'deg)'
+      }
+    }
+  })
 
-    return result
+  return result
 }
 
 // 获取一个组件旋转 rotate 后的样式
 export function getComponentRotatedStyle(style) {
-    style = { ...style }
-    if (style.rotate != 0) {
-        const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
-        const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值，变大是负值
-        style.left += diffX
-        style.right = style.left + newWidth
+  style = { ...style }
+  if (style.rotate != 0) {
+    const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
+    const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值，变大是负值
+    style.left += diffX
+    style.right = style.left + newWidth
 
-        const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
-        const diffY = (newHeight - style.height) / 2 // 始终是正
-        style.top -= diffY
-        style.bottom = style.top + newHeight
+    const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
+    const diffY = (newHeight - style.height) / 2 // 始终是正
+    style.top -= diffY
+    style.bottom = style.top + newHeight
 
-        style.width = newWidth
-        style.height = newHeight
-    } else {
-        style.bottom = style.top + style.height
-        style.right = style.left + style.width
-    }
+    style.width = newWidth
+    style.height = newHeight
+  } else {
+    style.bottom = style.top + style.height
+    style.right = style.left + style.width
+  }
 
-    return style
+  return style
 }
diff --git a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
index 03bf5480d8..0cebb0cd2d 100644
--- a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
+++ b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
@@ -1,5 +1,6 @@
 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
+import store from '@/store'
 export default {
   name: 'DeDrawingWidget',
   functional: true,
@@ -7,25 +8,23 @@ export default {
     serviceName: {
       type: String,
       default: null
-    },
-    panelId: {
-      type: String,
-      default: null
     }
   },
 
   render(createElement, context) {
     const widgetInfo = ApplicationContext.getService(context.props.serviceName)
     // const widgetInfo = context.props.widgetInfo
-    const panelId = context.props.panelId
-    const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel(panelId) || null
+    const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel() || null
+    const drawInfo = widgetInfo.getDrawPanel && widgetInfo.getDrawPanel() || null
+    const curComponent = store.state.curComponent
     if (!dialogInfo) {
       throw new Error('系统错误')
     }
     return createElement(dialogInfo.component, {
       props: {
-        element: dialogInfo
+        element: curComponent || drawInfo || dialogInfo
       },
+      style: context.data.style,
       on: {
         'value-change': value => {
           context.listeners['filter-value-change'] && context.listeners['filter-value-change'](value)
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 90e4c70c47..ac6e7f230e 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :placeholder="options.attrs.placeholder" @change="changeValue">
+  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
@@ -12,19 +12,31 @@
 </template>
 
 <script>
+
 export default {
 
   props: {
     element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-      options: null
+      options: null,
+      operator: 'eq'
     }
   },
+  watch: {
+    'element.style': function(value) {
+      // console.log(value)
+    }
+  },
+
   created() {
     this.options = this.element.options
   },
@@ -35,7 +47,7 @@ export default {
   },
   methods: {
     changeValue(value) {
-      this.$emit('value-change', value)
+      this.inDraw && this.$emit('set-condition-value', { component: this.element, value: value, operator: this.operator })
     }
   }
 }
diff --git a/frontend/src/components/widget/bean/Condition.js b/frontend/src/components/widget/bean/Condition.js
new file mode 100644
index 0000000000..55c962c5a8
--- /dev/null
+++ b/frontend/src/components/widget/bean/Condition.js
@@ -0,0 +1,14 @@
+/**
+ * fieldId 字段ID
+ * value 字段值
+ * viewIds 过滤视图范围
+ */
+export class Condition {
+  constructor(componentId, fieldId, operator, value, viewIds) {
+    this.componentId = componentId
+    this.fieldId = fieldId
+    this.operator = operator || 'eq'
+    this.value = value
+    this.viewIds = viewIds
+  }
+}
diff --git a/frontend/src/components/widget/bean/widget.js b/frontend/src/components/widget/bean/widget.js
deleted file mode 100644
index cc719a363a..0000000000
--- a/frontend/src/components/widget/bean/widget.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export class Widget {
-  constructor(options = {}) {
-    this.type = options.type
-    this.default_style = options.default_style
-    this.icon = options.icon
-    this.lable = options.label
-  }
-}
diff --git a/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js b/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
index 69d0b5eff8..96efa05c0e 100644
--- a/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
+++ b/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
@@ -1,3 +1,4 @@
+
 import { DrawWidgetService } from '../service/DrawWidgetService'
 
 const leftPanel = {
@@ -42,39 +43,23 @@ class MySelectImpl extends DrawWidgetService {
   constructor(options = {}) {
     Object.assign(options, { name: 'mySelectWidget' })
     super(options)
+    this.filterDialog = true
   }
 
-  initLeftPanel(uuid) {
-    uuid = uuid || this.uuid()
-    this.setLeftPanel(uuid, leftPanel)
-    return uuid
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
 
-  initFilterDialog(uuid) {
-    uuid = uuid || this.uuid()
-    this.setDialogPanel(uuid, dialogPanel)
-    return uuid
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
 
-  initDrawPanel(uuid) {
-    uuid = uuid || this.uuid()
-    this.setDrawPanel(uuid, drawPanel)
-    return uuid
-  }
-
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
-
-  }
-
-  setOptionDatas(uuid, data) {
-    const dialogPanel = this.getDialogPanel(uuid)
-    dialogPanel.options.attrs.datas = data
-    this.setDialogPanel(uuid, dialogPanel)
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 
   filterFieldMethod(fields) {
@@ -82,6 +67,16 @@ class MySelectImpl extends DrawWidgetService {
       return field['deType'] === 0
     })
   }
+
+  optionDatas(datas) {
+    if (!datas) return null
+    return datas.map(item => {
+      return {
+        id: item,
+        text: item
+      }
+    })
+  }
 }
 const mySelectImpl = new MySelectImpl()
 export default mySelectImpl
diff --git a/frontend/src/components/widget/service/DrawWidgetService.js b/frontend/src/components/widget/service/DrawWidgetService.js
index 9c1c4f290c..9caa08bf7e 100644
--- a/frontend/src/components/widget/service/DrawWidgetService.js
+++ b/frontend/src/components/widget/service/DrawWidgetService.js
@@ -1,5 +1,4 @@
 import store from '@/store'
-import { uuid } from 'vue-uuid'
 export const commonStyle = {
   rotate: 0,
   opacity: 1
@@ -15,9 +14,9 @@ export class DrawWidgetService {
   constructor(options) {
     this.options = options
     this.name = options.name
-    this.leftPanelPath = 'application/addLeftWidget'
-    this.dialogPanelPath = 'application/addDialogWidget'
-    this.drawPanelPath = 'application/addDrawWidget'
+    // this.leftPanelPath = 'application/addLeftWidget'
+    // this.dialogPanelPath = 'application/addDialogWidget'
+    // this.drawPanelPath = 'application/addDrawWidget'
     this.storeWidget()
   }
   /**
@@ -28,56 +27,26 @@ export class DrawWidgetService {
   store(path, data) {
     store.dispatch(path, data)
   }
-  uuid() {
-    return uuid.v1()
-  }
-  setLeftPanel(uuid, leftPanel) {
-    this.store(this.leftPanelPath, { uuid: uuid, leftPanel: leftPanel })
-  }
-  getLeftPanel(uuid) {
-    if (!store.getters.leftWidgetMap[uuid]) {
-      this.initLeftPanel && this.initLeftPanel(uuid)
-    }
-    return store.getters.leftWidgetMap[uuid]
+
+  getLeftPanel() {
+    return this.initLeftPanel()
   }
 
-  setDialogPanel(uuid, dialogPanel) {
-    this.store(this.dialogPanelPath, { uuid: uuid, dialogPanel: dialogPanel })
-  }
-  getDialogPanel(uuid) {
-    if (!store.getters.dialogWidgetMap[uuid]) {
-      this.initFilterDialog && this.initFilterDialog(uuid)
-    }
-    return store.getters.dialogWidgetMap[uuid]
+  getDialogPanel() {
+    return this.initFilterDialog()
   }
 
-  setDrawPanel(uuid, drawPanel) {
-    if (!store.getters.drawWidgetMap[uuid]) { // 第一次
-      drawPanel.style = Object.assign(drawPanel.style, commonStyle)
-      drawPanel = Object.assign(drawPanel, commonAttr)
-      if (this.initFilterDialog) { // 需要弹窗
-        const dialogOptions = this.getDialogPanel(uuid)
-        drawPanel = Object.assign(drawPanel, dialogOptions)
-      }
+  getDrawPanel() {
+    let drawPanel = this.initDrawPanel()
+    drawPanel.style = Object.assign(drawPanel.style, commonStyle)
+    drawPanel = Object.assign(drawPanel, commonAttr)
+    if (this.filterDialog) {
+      const dialogOptions = this.getDialogPanel()
+      drawPanel = Object.assign(drawPanel, dialogOptions)
     }
-    this.store(this.drawPanelPath, { uuid: uuid, drawPanel: drawPanel })
+    return drawPanel
   }
-
-  getDrawPanel(uuid) {
-    if (!store.getters.drawWidgetMap[uuid]) {
-      this.initDrawPanel && this.initDrawPanel(uuid)
-    }
-    return store.getters.drawWidgetMap[uuid]
-  }
-
   storeWidget() {
-    // store.dispatch('application/loadBean', { key: this.name, value: this })
     this.store('application/loadBean', { key: this.name, value: this })
   }
-  initWidget() {
-    console.log('this is initWidget')
-  }
-  toDrawWidget() {
-    console.log('this is toDrawWidget')
-  }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index c6e15c6139..3a27cba8a3 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -74,13 +74,20 @@
       :visible.sync="filterVisible"
       custom-class="de-filter-dialog"
     >
-      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" @re-fresh-component="reFreshComponent">
-        <de-drawing-widget
+      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" :component-info="currentFilterCom" @re-fresh-component="reFreshComponent">
+        <!-- <de-drawing-widget
           v-if="filterVisible"
           style="width: 100% !important;"
           class="component"
           :service-name="currentWidget.name"
-          :panel-id="panelInfo.id"
+        /> -->
+        <component
+          :is="currentFilterCom.component"
+          :id="'component' + currentFilterCom.id"
+          class="component"
+          :style="currentFilterCom.style"
+          :element="currentFilterCom"
+          :in-draw="false"
         />
       </filter-dialog>
       <!-- <div slot="footer" class="dialog-footer">
@@ -143,7 +150,8 @@ export default {
       activeName: 'attr',
       reSelectAnimateIndex: undefined,
       filterVisible: false,
-      currentWidget: null
+      currentWidget: null,
+      currentFilterCom: null
     }
   },
 
@@ -171,7 +179,6 @@ export default {
       }
     },
     panelInfo(newVal, oldVal) {
-      debugger
       this.init(newVal.id)
     }
   },
@@ -193,7 +200,6 @@ export default {
   },
   methods: {
     init(panelId) {
-      debugger
       // 如果临时画布有数据 则使用临时画布数据（视图编辑的时候 会保存临时画布数据）
       const componentDataTemp = this.$store.state.panel.componentDataTemp
       const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
@@ -267,17 +273,16 @@ export default {
       } else {
         this.currentWidget = ApplicationContext.getService(componentInfo.id)
 
-        const drawPanel = this.currentWidget.getDrawPanel(this.panelInfo.id)
-        drawPanel.style.top = e.offsetY
-        drawPanel.style.left = e.offsetX
-        drawPanel.id = newComponentId
-        this.currentWidget.setDrawPanel(this.panelInfo.id, drawPanel)
-        if (this.currentWidget.initFilterDialog) {
+        this.currentFilterCom = this.currentWidget.getDrawPanel(this.panelInfo.id)
+        this.currentFilterCom.style.top = e.offsetY
+        this.currentFilterCom.style.left = e.offsetX
+        this.currentFilterCom.id = newComponentId
+        if (this.currentWidget.filterDialog) {
           this.show = false
           this.openFilterDiolog()
           return
         }
-        component = deepCopy(drawPanel)
+        component = deepCopy(this.currentFilterCom)
       }
 
       component.style.top = e.offsetY
@@ -285,6 +290,11 @@ export default {
       component.id = newComponentId
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot')
+      this.clearCurrentInfo()
+    },
+    clearCurrentInfo() {
+      this.currentWidget = null
+      this.currentFilterCom = null
     },
 
     handleDragOver(e) {
@@ -316,17 +326,16 @@ export default {
     cancelFilter() {
       this.filterVisible = false
       this.currentWidget = null
+      this.clearCurrentInfo()
     },
     sureFilter() {
-      const currentComponent = this.currentWidget.getDrawPanel(this.panelInfo.id)
-      currentComponent.widgetService = this.currentWidget
-      const component = deepCopy(currentComponent)
+      const component = deepCopy(this.currentFilterCom)
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot')
       this.cancelFilter()
     },
     reFreshComponent(component) {
-      this.currentComponent = component
+      this.currentFilterCom = component
     }
   }
 }
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index abdeb1e2a0..9a0f22633d 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -160,6 +160,10 @@ export default {
     widgetInfo: {
       type: Object,
       default: null
+    },
+    componentInfo: {
+      type: Object,
+      default: null
     }
   },
   data() {
@@ -181,22 +185,17 @@ export default {
       fieldValues: []
     }
   },
-  computed: {
-    uuid() {
-      return this.$store.state.panel.panelInfo.id
-    }
-  },
+
   watch: {
     selectField(values) {
       if (values && values.length > 0) {
         const value = values[0]
         const fieldId = value.id
-        this.widget && this.widget.setOptionDatas && fieldValues(fieldId).then(res => {
-          const datas = res.data.map(item => {
-            return { id: item, text: item }
-          })
-          this.widget.setOptionDatas(this.uuid, datas)
-        //   this.$emit('re-fresh-component', this.componentInfo)
+        const info = this.componentInfo
+        this.widget && fieldValues(fieldId).then(res => {
+          info.options.attrs.datas = this.widget.optionDatas(res.data)
+          info.options.attrs.fieldId = fieldId
+          this.$emit('re-fresh-component', info)
         })
       }
     }
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 91e8b1a984..18c9a9f3f0 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -65,10 +65,8 @@ export default {
       const widgetNames = this.widgetSubjects[key]
       this.widgetSubjects[key] = widgetNames.map(widgetName => {
         const widget = ApplicationContext.getService(widgetName)
-        const uuid = this.panelInfo.id
-        // widget.initLeftPanel(uuid)
         const result = { widgetName: widgetName }
-        Object.assign(result, widget.getLeftPanel(uuid))
+        Object.assign(result, widget.getLeftPanel())
         return result
       })
     }
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 98b41efe0f..98ec9346d5 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -69,7 +69,6 @@ export default {
     },
     saveToTemplate() {
       html2canvas(this.$refs.imageWrapper).then(canvas => {
-        debugger
         const snapShot = canvas.toDataURL('image/jpeg', 0.5) // 0.5是图片质量
         if (snapShot !== '') {
           const templateInfo = {