diff --git a/frontend/src/components/widget/DeWidget/DeTreeSelect.vue b/frontend/src/components/widget/DeWidget/DeTreeSelect.vue
new file mode 100644
index 0000000000..bbdea8ec26
--- /dev/null
+++ b/frontend/src/components/widget/DeWidget/DeTreeSelect.vue
@@ -0,0 +1,63 @@
+<template>
+
+  <el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
+    <el-option
+      v-for="item in options.attrs.datas"
+      :key="item[options.attrs.key]"
+      :label="item[options.attrs.label]"
+      :value="item[options.attrs.value]"
+    />
+  </el-select>
+
+</template>
+
+<script>
+
+export default {
+
+  props: {
+    element: {
+      type: Object,
+      default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      options: null,
+      operator: 'eq',
+      values: null
+    }
+  },
+  watch: {
+    'options.attrs.multiple': function(value) {
+      if (value) {
+        this.values = []
+      } else {
+        this.values = null
+      }
+    }
+  },
+
+  created() {
+    this.options = this.element.options
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    changeValue(value) {
+      this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
new file mode 100644
index 0000000000..514365a509
--- /dev/null
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@@ -0,0 +1,80 @@
+
+import { WidgetService } from '../service/WidgetService'
+
+const leftPanel = {
+  icon: 'iconfont icon-xialakuang',
+  label: '数字下拉',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    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 NumberSelectServiceImpl extends WidgetService {
+  constructor(options = {}) {
+    Object.assign(options, { name: 'numberSelectWidget' })
+    super(options)
+    this.filterDialog = true
+    this.showSwitch = true
+  }
+
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
+  }
+
+  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'] === 2
+    })
+  }
+
+  optionDatas(datas) {
+    if (!datas) return null
+    return datas.map(item => {
+      return {
+        id: item,
+        text: item
+      }
+    })
+  }
+}
+const numberSelectServiceImpl = new NumberSelectServiceImpl()
+export default numberSelectServiceImpl
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index bfa730ed84..de92d15faa 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -54,6 +54,9 @@ export default {
           'textSelectWidget',
           'textInputWidget'
         ],
+        '数字过滤组件': [
+          'numberSelectWidget'
+        ],
         '按钮': [
           'buttonSureWidget'
         ]
@@ -186,6 +189,24 @@ export default {
         color: #fff;
     }
   }
+  .tree-filter {
+    background-color: rgba(22,160,132,.1);
+    .filter-widget-icon {
+        color: #37b4aa;
+    }
+    .filter-widget-text {
+        color: #3d4d66;
+    }
+  }
+  .tree-filter:hover {
+    background-color: #37b4aa;
+    .filter-widget-icon {
+        color: #37b4aa;
+    }
+    .filter-widget-text {
+        color: #fff;
+    }
+  }
 
   .filter-widget-icon {
     width: 40px;