diff --git a/frontend/src/components/widget/DeWidget/DeButton.vue b/frontend/src/components/widget/DeWidget/DeButton.vue
index 3139c3a308..b4ccf843a7 100644
--- a/frontend/src/components/widget/DeWidget/DeButton.vue
+++ b/frontend/src/components/widget/DeWidget/DeButton.vue
@@ -13,27 +13,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-
+      options: null,
+      operator: 'eq',
+      values: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-    //   this.defaultOptions = Object.assign({}, this.options)
-    //   const dom = this.$refs[this.options.refId]
-    //   for (const key in this.options.attrs) {
-    //     if (Object.hasOwnProperty.call(this.defaultOptions.attrs, key)) {
-    //       const element = this.defaultOptions.attrs[key]
-    //       dom.$props[key] = element
-    //     }
-    //   }
-    })
+  created() {
+    this.options = this.element.options
   }
 }
 </script>
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index a65add192b..6c35974ae3 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -14,10 +14,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
+  },
+  data() {
+    return {
+      options: null,
+      operator: 'eq',
+      values: null
+    }
+  },
+  created() {
+    this.options = this.element.options
   }
 }
 </script>
diff --git a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
deleted file mode 100644
index 0cebb0cd2d..0000000000
--- a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
-import store from '@/store'
-export default {
-  name: 'DeDrawingWidget',
-  functional: true,
-  props: {
-    serviceName: {
-      type: String,
-      default: null
-    }
-  },
-
-  render(createElement, context) {
-    const widgetInfo = ApplicationContext.getService(context.props.serviceName)
-    // const widgetInfo = context.props.widgetInfo
-    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: curComponent || drawInfo || dialogInfo
-      },
-      style: context.data.style,
-      on: {
-        'value-change': value => {
-          context.listeners['filter-value-change'] && context.listeners['filter-value-change'](value)
-        }
-      }
-    },
-    context.data,
-    context.children
-    )
-  }
-}
-</script>
diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
index 4626a4b688..227c854393 100644
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <el-input v-if="options!== null && options.attrs!==null" v-model="options.value" style="width:260px;" :placeholder="options.attrs.placeholder">
+  <el-input v-if="options!== null && options.attrs!==null" v-model="options.value" style="width: 260px" :placeholder="options.attrs.placeholder">
 
     <el-button slot="append" icon="el-icon-search" />
   </el-input>
@@ -11,20 +11,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-
+      options: null,
+      operator: 'eq',
+      values: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-
-    })
+  created() {
+    this.options = this.element.options
   }
 }
 </script>
diff --git a/frontend/src/components/widget/DeWidget/DeQuarter.vue b/frontend/src/components/widget/DeWidget/DeQuarter.vue
index 4a12aab453..9b6bf243c2 100644
--- a/frontend/src/components/widget/DeWidget/DeQuarter.vue
+++ b/frontend/src/components/widget/DeWidget/DeQuarter.vue
@@ -11,10 +11,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
+  },
+  data() {
+    return {
+      options: null,
+      operator: 'eq',
+      values: null
+    }
+  },
+  created() {
+    this.options = this.element.options
   }
 }
 </script>
diff --git a/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js b/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
deleted file mode 100644
index 648a986d48..0000000000
--- a/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
+++ /dev/null
@@ -1,83 +0,0 @@
-
-import { DrawWidgetService } from '../service/DrawWidgetService'
-
-const leftPanel = {
-//   name: 'text-select',
-  icon: 'iconfont icon-xialakuang',
-  label: '文本下拉',
-  defaultClass: 'text-filter'
-}
-
-const dialogPanel = {
-  options: {
-    refId: '1234567890',
-    attrs: {
-      multiple: false,
-      placeholder: '请选择',
-      datas: [],
-      key: 'id',
-      label: 'text',
-      value: 'id'
-    },
-    value: ''
-  },
-  defaultClass: 'text-filter',
-  component: 'de-select'
-}
-const drawPanel = {
-  type: 'custom',
-  style: {
-    width: 300,
-    height: 35,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
-  component: 'de-select'
-}
-
-class MySelectImpl extends DrawWidgetService {
-  constructor(options = {}) {
-    Object.assign(options, { name: 'mySelectWidget' })
-    super(options)
-    this.filterDialog = true
-    this.showSwitch = true
-  }
-
-  initLeftPanel() {
-    const value = JSON.parse(JSON.stringify(leftPanel))
-    return value
-    // console.log('this is first initWidget')
-  }
-
-  initFilterDialog() {
-    const value = JSON.parse(JSON.stringify(dialogPanel))
-    return value
-  }
-
-  initDrawPanel() {
-    const value = JSON.parse(JSON.stringify(drawPanel))
-    return value
-  }
-
-  filterFieldMethod(fields) {
-    return fields.filter(field => {
-      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/index.js b/frontend/src/components/widget/index.js
index 3c6748ef3f..bdb163d2f4 100644
--- a/frontend/src/components/widget/index.js
+++ b/frontend/src/components/widget/index.js
@@ -31,8 +31,8 @@ requireComponent.keys().forEach(fileName => {
   )
 })
 
-// const req = require.context('./serviceImpl', false, /\.js$/)
-const req = require.context('./drawServiceImpl', false, /\.js$/)
+const req = require.context('./serviceImpl', false, /\.js$/)
+// const req = require.context('./drawServiceImpl', false, /\.js$/)
 const requireAll = requireContext => requireContext.keys()
 
 const widgets = {}
diff --git a/frontend/src/components/widget/service/DrawWidgetService.js b/frontend/src/components/widget/service/DrawWidgetService.js
deleted file mode 100644
index cc0ce079a1..0000000000
--- a/frontend/src/components/widget/service/DrawWidgetService.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import store from '@/store'
-export const commonStyle = {
-  rotate: 0,
-  opacity: 1
-}
-
-export const commonAttr = {
-  animations: [],
-  events: {},
-  groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
-  isLock: false // 是否锁定组件
-}
-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.storeWidget()
-  }
-  /**
-   * 存储数据到本地
-   * @param {本地存储路径} path
-   * @param {要存储的数据} data
-   */
-  store(path, data) {
-    store.dispatch(path, data)
-  }
-
-  getLeftPanel() {
-    return this.initLeftPanel()
-  }
-
-  getDialogPanel() {
-    return this.initFilterDialog()
-  }
-
-  getDrawPanel() {
-    let drawPanel = this.initDrawPanel()
-    drawPanel.serviceName = this.options.name
-    drawPanel.style = Object.assign(drawPanel.style, commonStyle)
-    drawPanel = Object.assign(drawPanel, commonAttr)
-    if (this.filterDialog) {
-      const dialogOptions = this.getDialogPanel()
-      drawPanel = Object.assign(drawPanel, dialogOptions)
-    }
-    return drawPanel
-  }
-  storeWidget() {
-    this.store('application/loadBean', { key: this.name, value: this })
-  }
-}
diff --git a/frontend/src/components/widget/service/WidgetService.js b/frontend/src/components/widget/service/WidgetService.js
index 2962c5dd2a..d77ee0d95a 100644
--- a/frontend/src/components/widget/service/WidgetService.js
+++ b/frontend/src/components/widget/service/WidgetService.js
@@ -12,20 +12,42 @@ export const commonAttr = {
 }
 export class WidgetService {
   constructor(options) {
+    this.options = options
     this.name = options.name
-    options = { ...commonAttr, ...options }
-    Object.assign(this, options)
-    this.style = { ...commonStyle, ...options.style }
-    this.type = 'custom'
+    // this.leftPanelPath = 'application/addLeftWidget'
+    // this.dialogPanelPath = 'application/addDialogWidget'
+    // this.drawPanelPath = 'application/addDrawWidget'
     this.storeWidget()
   }
+  /**
+   * 存储数据到本地
+   * @param {本地存储路径} path
+   * @param {要存储的数据} data
+   */
+  store(path, data) {
+    store.dispatch(path, data)
+  }
+
+  getLeftPanel() {
+    return this.initLeftPanel()
+  }
+
+  getDialogPanel() {
+    return this.initFilterDialog()
+  }
+
+  getDrawPanel() {
+    let drawPanel = this.initDrawPanel()
+    drawPanel.serviceName = this.options.name
+    drawPanel.style = Object.assign(drawPanel.style, commonStyle)
+    drawPanel = Object.assign(drawPanel, commonAttr)
+    if (this.filterDialog) {
+      const dialogOptions = this.getDialogPanel()
+      drawPanel = Object.assign(drawPanel, dialogOptions)
+    }
+    return drawPanel
+  }
   storeWidget() {
-    store.dispatch('application/loadBean', { key: this.name, value: this })
-  }
-  initWidget() {
-    console.log('this is initWidget')
-  }
-  toDrawWidget() {
-    console.log('this is toDrawWidget')
+    this.store('application/loadBean', { key: this.name, value: this })
   }
 }
diff --git a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
index cd9171d20d..c14bfd0801 100644
--- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
@@ -1,50 +1,50 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'buttonSureWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-chaxunsousuo',
   label: '确定',
+  defaultClass: 'time-filter'
+}
+
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 100,
-    height: 34,
-    borderWidth: '',
-    borderColor: '',
-    borderRadius: '',
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
     letterSpacing: 0,
     textAlign: '',
-    color: '',
-    backgroundColor: ''
+    color: ''
   },
-  defaultClass: 'time-filter',
-  component: 'de-button',
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'primary',
       round: true
     },
     value: '测试按钮'
-  }
+  },
+  component: 'de-button'
 }
 
 class ButtonSureServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'buttonSureWidget' })
     super(options)
+    this.filterDialog = false
+    this.showSwitch = false
   }
 
-  initWidget() {
-    // console.log('this is first initWidget')
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 }
-const buttonSureServiceImpl = new ButtonSureServiceImpl({ name: 'buttonSureWidget' })
+const buttonSureServiceImpl = new ButtonSureServiceImpl()
 export default buttonSureServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
index f7de83f62a..2b3fa32565 100644
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@@ -1,65 +1,65 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'textInputWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-shuru',
   label: '文本搜索',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    attrs: {
+      placeholder: '请选择'
+
+    },
+    value: ''
+  },
+  defaultClass: 'text-filter',
+  component: 'de-input-search'
+}
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 100,
-    height: 34,
-    borderWidth: '',
-    borderColor: '',
-    borderRadius: '',
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
     letterSpacing: 0,
     textAlign: '',
-    color: '',
-    backgroundColor: ''
+    color: ''
   },
-  defaultClass: 'text-filter',
-  component: 'de-input-search',
-  options: {
-    refId: '1234567890',
-    attrs: {
-      placeholder: '请输入关键字'
-    },
-    value: ''
-  },
-  filterDialog: true
+  component: 'de-input-search'
 }
 
 class TextInputServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'textInputWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
-    // console.log('this is first initWidget')
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  dynamicStype() {
-    return {
-      'background-color': 'rgba(35,190,239,.1)'
-    }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
+
   filterFieldMethod(fields) {
     return fields.filter(field => {
       return field['deType'] === 0
     })
   }
-//   dynamicIconStype() {
-//     return {
-//       color: '#23beef'
-//     }
-//   }
 }
-const textInputServiceImpl = new TextInputServiceImpl({ name: 'textInputWidget' })
+const textInputServiceImpl = new TextInputServiceImpl()
 export default textInputServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index 0f4fcb4c91..4cf30e26e0 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@@ -1,20 +1,14 @@
+
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'textSelectWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-xialakuang',
   label: '文本下拉',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       multiple: false,
       placeholder: '请选择',
@@ -26,29 +20,44 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'text-filter',
-  component: 'de-select',
-  filterDialog: true
+  component: 'de-select'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-select'
 }
 
 class TextSelectServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'textSelectWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = true
   }
 
-  initWidget() {
-    // console.log('this is first initWidget')
-  }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
-
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
   }
 
-  setOptionDatas(data) {
-    this.options.attrs.datas = data
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 
   filterFieldMethod(fields) {
@@ -56,6 +65,16 @@ class TextSelectServiceImpl extends WidgetService {
       return field['deType'] === 0
     })
   }
+
+  optionDatas(datas) {
+    if (!datas) return null
+    return datas.map(item => {
+      return {
+        id: item,
+        text: item
+      }
+    })
+  }
 }
-const textSelectServiceImpl = new TextSelectServiceImpl({ name: 'textSelectWidget' })
+const textSelectServiceImpl = new TextSelectServiceImpl()
 export default textSelectServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 59f221d31d..7900a1459d 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -1,20 +1,13 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeDateRangeWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-riqi',
   label: '日期范围',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'daterange',
       rangeSeparator: '至',
@@ -24,25 +17,45 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeDateRangeServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeDateRangeWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
@@ -50,5 +63,5 @@ class TimeDateRangeServiceImpl extends WidgetService {
     })
   }
 }
-const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl({ name: 'timeDateRangeWidget' })
+const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index bafdd93a19..9dc954f614 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -1,11 +1,27 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeDateWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-ri',
   label: '日期',
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
+  options: {
+    attrs: {
+      type: 'date',
+      placeholder: '请选择日期'
+    },
+    value: ''
+  },
+  defaultClass: 'time-filter',
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 200,
-    height: 22,
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
@@ -13,35 +29,31 @@ const defaultOptions = {
     textAlign: '',
     color: ''
   },
-  options: {
-    refId: '1234567890',
-    attrs: {
-      type: 'date',
-      placeholder: '请选择日期'
-    },
-    value: ''
-  },
-
-  defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
 }
 
 class TimeDateServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeDateWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
index 4a99ae13be..26e5600638 100644
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -1,20 +1,13 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeMonthWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-yue',
   label: '年月',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'month',
       placeholder: '请选择年月'
@@ -22,25 +15,45 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeMonthServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeMonthWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
@@ -48,5 +61,5 @@ class TimeMonthServiceImpl extends WidgetService {
     })
   }
 }
-const timeMonthServiceImpl = new TimeMonthServiceImpl({ name: 'timeMonthWidget' })
+const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
index dd7c478212..0d28dcb752 100644
--- a/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
@@ -1,11 +1,26 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeQuarterWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-jidu',
   label: '季度',
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
+  options: {
+    attrs: {
+      placeholder: '请选择年份'
+    },
+    value: ''
+  },
+  defaultClass: 'time-filter',
+  component: 'de-quarter'
+}
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 200,
-    height: 22,
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
@@ -13,34 +28,31 @@ const defaultOptions = {
     textAlign: '',
     color: ''
   },
-  options: {
-    refId: '1234567890',
-    attrs: {
-
-      placeholder: '请选择季度'
-    },
-    value: ''
-  },
-  defaultClass: 'time-filter',
-  component: 'de-quarter',
-  filterDialog: true
+  component: 'de-quarter'
 }
 
 class TimeQuarterServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeQuarterWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
@@ -48,5 +60,5 @@ class TimeQuarterServiceImpl extends WidgetService {
     })
   }
 }
-const timeQuarterServiceImpl = new TimeQuarterServiceImpl({ name: 'timeQuarterWidget' })
+const timeQuarterServiceImpl = new TimeQuarterServiceImpl()
 export default timeQuarterServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index 597eb4cb32..656d8a6ac0 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -1,20 +1,13 @@
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeYearWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-nian',
   label: '年份',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'year',
       placeholder: '请选择年份'
@@ -22,25 +15,45 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeYearServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeYearWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
-  }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 
   filterFieldMethod(fields) {
@@ -49,5 +62,5 @@ class TimeYearServiceImpl extends WidgetService {
     })
   }
 }
-const timeYearServiceImpl = new TimeYearServiceImpl({ name: 'timeYearWidget' })
+const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 5df916bd4d..821df439a1 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -237,12 +237,18 @@ export default {
       if (values && values.length > 0) {
         const value = values[0]
         const fieldId = value.id
-        this.widget && fieldValues(fieldId).then(res => {
-          this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
+        if (this.widget && this.widget.optionDatas) {
+          fieldValues(fieldId).then(res => {
+            this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
+            this.componentInfo.options.attrs.fieldId = fieldId
+            this.componentInfo.options.attrs.dragItems = values
+            this.$emit('re-fresh-component', this.componentInfo)
+          })
+        } else {
           this.componentInfo.options.attrs.fieldId = fieldId
           this.componentInfo.options.attrs.dragItems = values
           this.$emit('re-fresh-component', this.componentInfo)
-        })
+        }
       }
     }
   },
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 18c9a9f3f0..926cbaea7e 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -36,28 +36,28 @@ export default {
     return {
       componentList,
       panelInfo: this.$store.state.panel.panelInfo,
+      //   widgetSubjects: {
+      //     '文本过滤组件': [
+      //       'mySelectWidget'
+      //     ]
+      //   }
       widgetSubjects: {
+        '时间过滤组件': [
+          'timeYearWidget',
+          'timeMonthWidget',
+          'timeQuarterWidget',
+          'timeDateWidget',
+          'timeDateRangeWidget'
+
+        ],
         '文本过滤组件': [
-          'mySelectWidget'
+          'textSelectWidget',
+          'textInputWidget'
+        ],
+        '按钮': [
+          'buttonSureWidget'
         ]
       }
-      //   widgetSubjects: {
-      //     '时间过滤组件': [
-      //       'timeYearWidget',
-      //       'timeMonthWidget',
-      //       'timeQuarterWidget',
-      //       'timeDateWidget',
-      //       'timeDateRangeWidget'
-
-    //     ],
-    //     '文本过滤组件': [
-    //       'textSelectWidget',
-    //       'textInputWidget'
-    //     ],
-    //     '按钮': [
-    //       'buttonSureWidget'
-    //     ]
-    //   }
     }
   },
   created() {