From 3a3055280f64a32dca48ce805357a5cd04313787 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 16 Dec 2021 18:16:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E5=8A=A8=E6=80=81=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataset/DataSetTableFieldController.java  |   8 +
 frontend/src/api/dataset/dataset.js           |   9 +
 .../src/components/dataease/DeOutWidget.vue   |   2 +-
 .../src/components/widget/DeWidget/DeDate.vue | 101 +++--
 .../widget/DeWidget/DeInputSearch.vue         |  33 +-
 .../widget/DeWidget/DeNumberRange.vue         |  57 ++-
 .../components/widget/DeWidget/DeSelect.vue   | 123 +++--
 .../widget/DeWidget/DeSelectGrid.vue          | 298 +++++--------
 .../serviceImpl/NumberRangeServiceImpl.js     |   4 +-
 .../NumberSelectGridServiceImpl.js            |   4 +-
 .../serviceImpl/NumberSelectServiceImpl.js    |   5 +-
 .../serviceImpl/TextInputServiceImpl.js       |   4 +-
 .../serviceImpl/TextSelectGridServiceImpl.js  |   4 +-
 .../serviceImpl/TextSelectServiceImpl.js      |   4 +-
 .../serviceImpl/TimeDateRangeServiceImpl.js   |   4 +-
 .../widget/serviceImpl/TimeDateServiceImpl.js |  74 ++-
 .../serviceImpl/TimeMonthServiceImpl.js       |   4 +-
 .../widget/serviceImpl/TimeYearServiceImpl.js |   4 +-
 frontend/src/styles/index.scss                | 317 +++++++------
 frontend/src/views/panel/edit/index.vue       |  46 +-
 .../filter/defaultValue/DeDateDefault.vue     | 129 ++++++
 .../src/views/panel/filter/filterDialog.vue   | 422 +++---------------
 .../panel/filter/filterMain/FilterControl.vue | 183 ++++++++
 .../panel/filter/filterMain/FilterFoot.vue    |  71 +++
 .../panel/filter/filterMain/FilterHead.vue    | 147 ++++++
 25 files changed, 1245 insertions(+), 812 deletions(-)
 create mode 100644 frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
 create mode 100644 frontend/src/views/panel/filter/filterMain/FilterControl.vue
 create mode 100644 frontend/src/views/panel/filter/filterMain/FilterFoot.vue
 create mode 100644 frontend/src/views/panel/filter/filterMain/FilterHead.vue

diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
index ae53fe41ef..9b79eaebcb 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
@@ -12,6 +12,7 @@ import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 import java.util.List;
+import java.util.stream.Collectors;
 
 /**
  * @Author gin
@@ -75,4 +76,11 @@ public class DataSetTableFieldController {
     public List<Object> fieldValues(@PathVariable String fieldId) {
         return dataSetFieldService.fieldValues(fieldId);
     }
+
+    @ApiOperation("多字段值枚举")
+    @PostMapping("multFieldValues")
+    public List<Object> multFieldValues(@RequestBody List<String> fieldIds) {
+        List<Object> results = fieldIds.stream().map(fieldId -> dataSetFieldService.fieldValues(fieldId)).flatMap(list -> list.stream()).distinct().collect(Collectors.toList());
+        return results;
+    }
 }
diff --git a/frontend/src/api/dataset/dataset.js b/frontend/src/api/dataset/dataset.js
index 07c3a56f68..2619d3068b 100644
--- a/frontend/src/api/dataset/dataset.js
+++ b/frontend/src/api/dataset/dataset.js
@@ -138,6 +138,15 @@ export function fieldValues(fieldId) {
   })
 }
 
+export function multFieldValues(data) {
+  return request({
+    url: '/dataset/field/multFieldValues',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
 export function isKettleRunning(showLoading = true) {
   return request({
     url: '/dataset/group/isKettleRunning',
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index 1af15c884c..4863525c90 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -39,7 +39,7 @@ export default {
   props: {
     element: {
       type: Object,
-      default: null
+      default: () => {}
     },
     inDraw: {
       type: Boolean,
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 94eeb76d41..8c89eef9a0 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -1,13 +1,13 @@
 <template>
   <el-date-picker
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
     ref="dateRef"
     v-model="values"
-    :type="options.attrs.type"
-    :range-separator="$t(options.attrs.rangeSeparator)"
-    :start-placeholder="$t(options.attrs.startPlaceholder)"
-    :end-placeholder="$t(options.attrs.endPlaceholder)"
-    :placeholder="$t(options.attrs.placeholder)"
+    :type="element.options.attrs.type"
+    :range-separator="$t(element.options.attrs.rangeSeparator)"
+    :start-placeholder="$t(element.options.attrs.startPlaceholder)"
+    :end-placeholder="$t(element.options.attrs.endPlaceholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
     :append-to-body="inScreen"
     style="min-height: 36px;"
     value-format="timestamp"
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
 import { timeSection } from '@/utils'
 export default {
 
@@ -36,20 +37,53 @@ export default {
   },
   data() {
     return {
-      options: null,
       operator: 'between',
       values: null
     }
   },
-  created() {
-    this.options = this.element.options
-
-    if (this.options.value) {
-      if (this.options.attrs.type !== 'daterange') {
-        this.values = Array.isArray(this.options.value) ? this.options.value[0] : this.options.value
-      } else {
-        this.values = this.options.value
+  computed: {
+    defaultoptions() {
+      if (!this.element || !this.element.options || !this.element.options.attrs.default) return ''
+      return JSON.stringify(this.element.options.attrs.default)
+    }
+  },
+  watch: {
+    'element.options.value': function(value, old) {
+      if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+        // 如果设置了动态时间 不做任何操作
+        return
       }
+      if (value === old) return
+      this.values = this.fillValueDerfault()
+      this.dateChange(value)
+    },
+    'defaultoptions': function(val, old) {
+      // console.log('default chaneg')
+      if (this.element.serviceName !== 'timeDateWidget') {
+        if (!this.element.options.attrs.default.isDynamic) {
+          this.values = this.fillValueDerfault()
+          this.dateChange(this.values)
+          return
+        }
+      }
+      if (val === old) return
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      this.values = widget.dynamicDateFormNow(this.element)
+      this.dateChange(this.values)
+    }
+  },
+  created() {
+    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+      if (this.element.options.attrs.default) {
+        const widget = ApplicationContext.getService(this.element.serviceName)
+        this.values = widget.dynamicDateFormNow(this.element)
+        this.dateChange(this.values)
+      }
+      return
+    }
+    if (this.element.options.value) {
+      this.values = this.fillValueDerfault()
+      this.dateChange(this.values)
     }
   },
   methods: {
@@ -57,32 +91,35 @@ export default {
       this.setCondition()
     },
     setCondition() {
-      if (this.values) {
-        if (this.options.attrs.type !== 'daterange') {
-          this.options.value = Array.isArray(this.values) ? this.values[0] : this.values
-        } else {
-          this.options.value = this.values
-        }
-      } else {
-        this.options.value = []
-      }
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
         operator: this.operator
       }
       param.value = this.formatValues(param.value)
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
     dateChange(value) {
+      if (!this.inDraw) {
+        if (value === null) {
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value.toString()
+        }
+      }
       this.setCondition()
       this.styleChange()
     },
+    formatFilterValue() {
+      if (this.values === null) return []
+      if (Array.isArray(this.values)) return this.values
+      return [this.values]
+    },
     formatValues(values) {
       if (!values || values.length === 0) {
         return []
       }
-      if (this.options.attrs.type === 'daterange') {
+      if (this.element.options.attrs.type === 'daterange') {
         if (values.length !== 2) {
           return null
         }
@@ -94,11 +131,21 @@ export default {
         return results
       } else {
         const value = values[0]
-        return timeSection(value, this.options.attrs.type)
+        return timeSection(parseFloat(value), this.element.options.attrs.type)
       }
     },
     styleChange() {
       this.$store.commit('recordStyleChange')
+    },
+    fillValueDerfault() {
+      const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
+      if (this.element.options.attrs.type === 'daterange') {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
+        return defaultV.split(',').map(item => parseFloat(item))
+      } else {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
+        return parseFloat(defaultV.split(',')[0])
+      }
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
index 18f23069b9..25ed3e071c 100644
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -1,10 +1,11 @@
 <template>
 
   <el-input
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
     v-model="value"
     resize="vertical"
-    :placeholder="$t(options.attrs.placeholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
+    @input="valueChange"
     @keypress.enter.native="search"
     @dblclick="setEdit"
   >
@@ -29,38 +30,46 @@ export default {
   },
   data() {
     return {
-      options: null,
       operator: 'like',
       value: null,
       canEdit: false
     }
   },
+  watch: {
+    'element.options.value': function(value, old) {
+      if (value === old) return
+      this.value = value
+      this.search()
+    }
+  },
   created() {
-    this.options = this.element.options
-    if (this.inDraw && this.options.value && this.options.value.length > 0) {
-      this.value = this.options.value[0]
+    if (this.element.options.value) {
+      this.value = this.element.options.value
+      this.search()
     }
   },
   methods: {
     search() {
-    //   this.options.value && this.setCondition()
-      this.options.value = []
-      if (this.inDraw && this.value) {
-        this.options.value = [this.value]
+      if (!this.inDraw) {
+        this.element.options.value = this.value
       }
-
       this.setCondition()
     },
     setCondition() {
       const param = {
         component: this.element,
-        value: !this.options.value ? [] : Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: !this.value ? [] : [this.value],
         operator: this.operator
       }
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
     setEdit() {
       this.canEdit = true
+    },
+    valueChange(val) {
+      if (!this.inDraw) {
+        this.element.options.value = val
+      }
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index e46c0c01ac..5e9b4b0466 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -1,13 +1,13 @@
 <template>
 
-  <el-form v-if="options!== null && options.attrs!==null" ref="form" :model="form" :rules="rules">
+  <el-form v-if="element.options!== null && element.options.attrs!==null" ref="form" :model="form" :rules="rules">
     <div class="de-number-range-container">
       <el-form-item prop="min">
-        <el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" @change="handleMinChange" />
+        <el-input v-model="form.min" :placeholder="$t(element.options.attrs.placeholder_min)" @input="inputChange" @change="handleMinChange" />
       </el-form-item>
       <span>{{ $t('denumberrange.split_placeholder') }}</span>
       <el-form-item prop="max">
-        <el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" @change="handleMaxChange" />
+        <el-input v-model="form.max" :placeholder="$t(element.options.attrs.placeholder_max)" @input="inputChange" @change="handleMaxChange" />
       </el-form-item>
     </div>
   </el-form>
@@ -32,7 +32,6 @@ export default {
 
   data() {
     return {
-      options: null,
       operator: 'between',
       values: null,
       canEdit: false,
@@ -54,7 +53,24 @@ export default {
       timeMachine: null
     }
   },
+  computed: {
+    defaultvalues() {
+      if (!this.element.options.value) {
+        return JSON.stringify([])
+      }
+      return JSON.stringify(this.element.options.value)
+    }
+  },
   watch: {
+    'defaultvalues': function(value, old) {
+      if (value === old) return
+      const values = this.element.options.value
+      this.form.min = values[0]
+      if (values.length > 1) {
+        this.form.max = values[1]
+      }
+      this.search()
+    },
     form: {
       handler(value) {
         this.destryTimeMachine()
@@ -65,12 +81,13 @@ export default {
     }
   },
   created() {
-    this.options = this.element.options
-    if (this.inDraw && this.options.value && this.options.value.length > 0) {
-      this.form.min = this.options.value[0]
-      if (this.options.value.length > 1) {
-        this.form.max = this.options.value[1]
+    if (this.element.options.value && this.element.options.value.length > 0) {
+      const values = this.element.options.value
+      this.form.min = values[0]
+      if (values.length > 1) {
+        this.form.max = values[1]
       }
+      this.search()
     }
   },
   methods: {
@@ -136,13 +153,15 @@ export default {
     },
 
     search() {
-      this.$refs.form.validate(valid => {
-        if (!valid) {
-          return false
-        }
+      this.$nextTick(() => {
+        this.$refs.form.validate(valid => {
+          if (!valid) {
+            return false
+          }
 
-        this.setCondition()
-        this.$store.commit('recordStyleChange')
+          this.setCondition()
+          this.$store.commit('recordStyleChange')
+        })
       })
     },
     setCondition() {
@@ -153,7 +172,6 @@ export default {
         operator: this.operator
       }
 
-      this.inDraw && (this.options.value = param.value)
       if (this.form.min && this.form.max) {
         this.inDraw && this.$store.commit('addViewFilter', param)
         return
@@ -178,6 +196,13 @@ export default {
     },
     styleChange() {
       this.$store.commit('recordStyleChange')
+    },
+
+    inputChange(val) {
+      if (!this.inDraw) {
+        const values = [this.form.min, this.form.max]
+        this.element.options.value = values
+      }
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 602711bbaa..6061c80d42 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -1,38 +1,38 @@
 <template>
 
   <el-select
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null && show"
     ref="deSelect"
-    v-model="options.value"
+    v-model="value"
     :collapse-tags="showNumber"
-    :clearable="!options.attrs.multiple"
-    :multiple="options.attrs.multiple"
-    :placeholder="$t(options.attrs.placeholder)"
+    :clearable="!element.options.attrs.multiple"
+    :multiple="element.options.attrs.multiple"
+    :placeholder="$t(element.options.attrs.placeholder)"
     :popper-append-to-body="inScreen"
     @change="changeValue"
     @focus="setOptionWidth"
   >
     <el-option
-      v-for="item in options.attrs.datas"
-      :key="item[options.attrs.key]"
+      v-for="item in datas"
+      :key="item[element.options.attrs.key]"
       :style="{width:selectOptionWidth}"
-      :label="item[options.attrs.label]"
-      :value="item[options.attrs.value]"
+      :label="item[element.options.attrs.label]"
+      :value="item[element.options.attrs.value]"
     >
-      <span :title="item[options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[options.attrs.label] }}</span>
+      <span :title="item[element.options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[element.options.attrs.label] }}</span>
     </el-option>
   </el-select>
 
 </template>
 
 <script>
-import { fieldValues } from '@/api/dataset/dataset'
+import { multFieldValues } from '@/api/dataset/dataset'
 export default {
 
   props: {
     element: {
       type: Object,
-      default: null
+      default: () => {}
     },
     inDraw: {
       type: Boolean,
@@ -46,54 +46,80 @@ export default {
   },
   data() {
     return {
-      options: null,
       showNumber: false,
-      selectOptionWidth: 0
+      selectOptionWidth: 0,
+      show: true,
+      value: null,
+      datas: []
     }
   },
   computed: {
     operator() {
-      return this.options.attrs.multiple ? 'in' : 'eq'
+      return this.element.options.attrs.multiple ? 'in' : 'eq'
     }
   },
+
   watch: {
-    'options.attrs.multiple': function(value) {
-      const sourceValue = this.options.value
-      const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
-      if (value) {
-        !sourceValid && (this.options.value = [])
-        sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
-        !this.inDraw && (this.options.value = [])
-      } else {
-        !sourceValid && (this.options.value = null)
-        sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
-        !this.inDraw && (this.options.value = null)
+    'element.options.value': function(value, old) {
+      if (value === old) return
+      this.value = this.fillValueDerfault()
+      this.changeValue(value)
+    },
+    'element.options.attrs.fieldId': function(value, old) {
+      if (typeof value === 'undefined' || value === old) return
+      this.datas = []
+      this.element.options.attrs.fieldId &&
+      this.element.options.attrs.fieldId.length > 0 &&
+      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+        this.datas = this.optionDatas(res.data)
+      }) || (this.element.options.value = '')
+    },
+    'element.options.attrs.multiple': function(value, old) {
+      if (typeof old === 'undefined' || value === old) return
+      if (!this.inDraw) {
+        this.value = value ? [] : null
+        this.element.options.value = ''
       }
-    }
-  },
-  created() {
-    this.options = this.element.options
-    if (this.options.attrs.fieldId) {
-      fieldValues(this.options.attrs.fieldId).then(res => {
-        this.options.attrs.datas = this.optionDatas(res.data)
+
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
       })
     }
 
-    // this.setCondition()
   },
-  mounted() {
-    // this.$nextTick(() => {
-    //   this.options && this.options.value && this.changeValue(this.options.value)
-    // })
-    this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.changeValue(this.options.value)
+  created() {
+    this.initLoad()
   },
+
   methods: {
+    initLoad() {
+      this.value = this.fillValueDerfault()
+      this.datas = []
+      if (this.element.options.attrs.fieldId) {
+        multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+          this.datas = this.optionDatas(res.data)
+        })
+      }
+      if (this.element.options.value) {
+        this.value = this.fillValueDerfault()
+        this.changeValue(this.value)
+      }
+    },
     changeValue(value) {
+      if (!this.inDraw) {
+        if (value === null) {
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value
+        }
+      }
       this.setCondition()
       this.styleChange()
       this.showNumber = false
+
       this.$nextTick(() => {
-        if (!this.$refs.deSelect.$refs.tags || !this.options.attrs.multiple) {
+        if (!this.element.options.attrs.multiple || !this.$refs.deSelect || !this.$refs.deSelect.$refs.tags) {
           return
         }
         const kids = this.$refs.deSelect.$refs.tags.children[0].children
@@ -108,11 +134,26 @@ export default {
     setCondition() {
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
         operator: this.operator
       }
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
+    formatFilterValue() {
+      if (this.value === null) return []
+      if (Array.isArray(this.value)) return this.value
+      return this.value.split(',')
+    },
+    fillValueDerfault() {
+      const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
+      if (this.element.options.attrs.multiple) {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
+        return defaultV.split(',')
+      } else {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
+        return defaultV.split(',')[0]
+      }
+    },
     styleChange() {
       this.$store.commit('recordStyleChange')
     },
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 02a54d5250..81b20117d2 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -1,39 +1,24 @@
 <template>
 
-  <div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
+  <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
     <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 class="list">
-      <el-tree
-        v-if="options!== null && options.attrs!==null"
-        ref="deSelectGrid"
-        :data="(options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas).filter(node => node.text.includes(keyWord))"
-        :props="defaultProp"
-        :indent="0"
-        class="de-filter-tree"
-        default-expand-all
-      >
-        <span slot-scope="{ node, data }" class="custom-tree-node-list father">
-          <span style="display: flex;flex: 1;width: 0;">
-            <el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></el-radio>
-            <el-checkbox v-if="options.attrs.multiple && data.id !== allNode.id" v-model="data.checked" :label="data.id" @change="changeCheckBox(data)"><span> {{ node.label }} </span></el-checkbox>
-            <el-checkbox v-if="options.attrs.multiple && data.id === allNode.id" v-model="data.checked" :indeterminate="data.indeterminate" :label="data.id" @change="allCheckChange(data)"><span> {{ node.label }} </span></el-checkbox>
-          </span>
-          <span v-if="!options.attrs.multiple && options.value && options.value === data.id" class="child">
-            <span style="margin-left: 12px;" @click.stop>
-              <span class="el-dropdown-link">
-                <el-button
-                  icon="el-icon-circle-close"
-                  type="text"
-                  size="small"
-                  @click="cancelRadio(data)"
-                />
-              </span>
-            </span>
-          </span>
-        </span>
-      </el-tree>
+
+      <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox>
+
+        <el-checkbox-group v-model="value" @change="handleCheckedChange">
+          <el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+
+      <div v-else class="radio-group-container">
+        <el-radio-group v-model="value" @change="changeRadioBox">
+          <el-radio v-for="(item, index) in datas" :key="index" :label="item.id">{{ item.id }}</el-radio>
+        </el-radio-group>
+      </div>
 
     </div>
 
@@ -42,7 +27,7 @@
 </template>
 
 <script>
-import { fieldValues } from '@/api/dataset/dataset'
+import { multFieldValues } from '@/api/dataset/dataset'
 export default {
 
   props: {
@@ -62,8 +47,7 @@ export default {
   },
   data() {
     return {
-      options: null,
-      // value: null,
+      value: null,
       checked: null,
       defaultProp: {
         id: 'id',
@@ -76,157 +60,109 @@ export default {
         text: this.$t('commons.all'),
         checked: false,
         indeterminate: false
-      }
+      },
+      show: true,
+      datas: [],
+      isIndeterminate: false,
+      checkAll: false
     }
   },
   computed: {
     operator() {
-      return this.options.attrs.multiple ? 'in' : 'eq'
+      return this.element.options.attrs.multiple ? 'in' : 'eq'
     }
   },
   watch: {
-    'options.attrs.multiple': function(value) {
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      this.options.attrs.datas = datas
-      const sourceValue = this.options.value
-      const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
-      if (value) {
-        !sourceValid && (this.options.value = [])
-        sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
-        !this.inDraw && (this.options.value = [])
-        if (!this.inDraw) {
-          this.options.value = []
-          this.allNode.indeterminate = false
-          this.allNode.checked = false
-        }
-        // this.setMutiBox()
-      } else {
-        !sourceValid && (this.options.value = null)
-        sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
-        !this.inDraw && (this.options.value = null)
+
+    'element.options.value': function(value, old) {
+      if (value === old) return
+      this.value = this.fillValueDerfault()
+      this.changeValue(value)
+
+      if (this.element.options.attrs.multiple) {
+        this.checkAll = this.value.length === this.datas.length
+        this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
       }
+    },
+    'element.options.attrs.fieldId': function(value, old) {
+      if (typeof value === 'undefined' || value === old) return
+      this.datas = []
+      this.element.options.attrs.fieldId &&
+      this.element.options.attrs.fieldId.length > 0 &&
+      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+        this.datas = this.optionDatas(res.data)
+      }) || (this.element.options.value = '')
+    },
+    'element.options.attrs.multiple': function(value, old) {
+      if (typeof old === 'undefined' || value === old) return
+      if (!this.inDraw) {
+        this.value = value ? [] : null
+        this.element.options.value = ''
+      }
+
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
+      })
     }
-    // keyWord(val) {
-    //   console.log(val)
-    //   this.$refs.deSelectGrid.filter(val)
-    // }
   },
   created() {
-    this.options = this.element.options
-    if (this.options.attrs.fieldId) {
-      fieldValues(this.options.attrs.fieldId).then(res => {
-        this.options.attrs.datas = this.optionDatas(res.data)
-        this.setMutiBox()
-        this.setRadioBox()
-      })
-    } else {
-      this.setMutiBox()
-      this.setRadioBox()
-    }
-  },
-  mounted() {
-    // this.$nextTick(() => {
-    //   this.options && this.options.value && this.changeValue(this.options.value)
-    // })
-    this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.initValue(this.options.value)
+    this.initLoad()
   },
+
   methods: {
-    initValue(value) {
-      // this.options.value = [value]
-      this.setCondition()
-    },
-    setMutiBox() {
-      if (this.options && this.options.attrs.multiple) {
-        this.options.attrs.datas.forEach(data => {
-          data.checked = (this.options.value && this.options.value.includes(data.id))
+    initLoad() {
+      this.value = this.element.options.attrs.multiple ? [] : null
+      if (this.element.options.attrs.fieldId) {
+        multFieldValues(this.element.options.attrs.fieldId.split()).then(res => {
+          this.datas = this.optionDatas(res.data)
+          if (this.element.options.attrs.multiple) {
+            this.checkAll = this.value.length === this.datas.length
+            this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
+          }
         })
-        this.setAllNodeStatus()
+      }
+      if (this.element.options.value) {
+        this.value = this.fillValueDerfault()
+        this.changeValue(this.value)
       }
     },
-    setRadioBox() {
-      if (this.options && !this.options.attrs.multiple) {
-        if (Array.isArray(this.options.value) && this.options.value.length > 0) {
-          // this.value = this.options.value.length[0]
+    changeValue(value) {
+      if (!this.inDraw) {
+        if (value === null) {
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value
         }
       }
+      this.setCondition()
+      this.styleChange()
     },
 
     setCondition() {
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
         operator: this.operator
       }
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
-    changeCheckBox(data) {
-      const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
-      const index = values.indexOf(data.id)
-      if (index < 0 && data.checked) {
-        values.push(data.id)
-      }
-      if (index >= 0 && !data.checked) {
-        values.splice(index, 1)
-      }
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      datas.forEach(item => {
-        if (item.id === data.id) {
-          item.checked = data.checked
-        }
-      })
-      this.options.attrs.datas = datas
-
-      this.setAllNodeStatus()
-
-      this.options.value = values
-      this.setCondition()
-      this.styleChange()
+    formatFilterValue() {
+      if (this.value === null) return []
+      if (Array.isArray(this.value)) return this.value
+      return this.value.split(',')
     },
-    // 勾选数据项 会影响全选节点的状态
-    setAllNodeStatus() {
-      const nodeSize = this.options.attrs.datas.length
-      const checkedSize = this.options.attrs.datas.filter(item => item.checked).length
-      if (nodeSize === checkedSize) {
-        this.allNode.checked = true
-        this.allNode.indeterminate = false
-      } else if (checkedSize === 0) {
-        this.allNode.checked = false
-        this.allNode.indeterminate = false
+    fillValueDerfault() {
+      const defaultV = this.element.options.value
+      if (this.element.options.attrs.multiple) {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
+        return defaultV.split(',')
       } else {
-        this.allNode.checked = false
-        this.allNode.indeterminate = true
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
+        return defaultV.split(',')[0]
       }
     },
-    allCheckChange(data) {
-      data.indeterminate = false
-      const values = []
-      this.options.value = []
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      datas.forEach(item => {
-        item.checked = data.checked
-        // data.checked && this.options.value.push(item.id)
-        data.checked && values.push(item.id)
-      })
-      this.options.attrs.datas = datas
-      this.options.value = values
-      this.setCondition()
-    },
-    changeRadioBox(value) {
-      // this.options.value = []
-      // if (this.value) this.options.value = [this.value]
-      this.setCondition()
-    },
-    cancelRadio(data) {
-      this.options.value = null
-      this.changeRadioBox()
-    },
-    // filterNode(value, data) {
-    //   if (!value) return true
-    //   return data[this.defaultProp.label].indexOf(value) !== -1
-    // },
+
     styleChange() {
       this.$store.commit('recordStyleChange')
     },
@@ -238,6 +174,20 @@ export default {
           text: item
         }
       })
+    },
+    changeRadioBox(value) {
+      this.changeValue(value)
+    },
+    handleCheckAllChange(val) {
+      this.value = val ? this.datas.map(item => item.id) : []
+      this.isIndeterminate = false
+      this.changeValue(this.value)
+    },
+    handleCheckedChange(values) {
+      const checkedCount = values.length
+      this.checkAll = checkedCount === this.datas.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.datas.length
+      this.changeValue(values)
     }
 
   }
@@ -245,28 +195,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.custom-tree-node-list {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding:0 8px;
-  }
-  .father .child {
-    /*display: none;*/
-    visibility: hidden;
-  }
-  .father:hover .child {
-    /*display: inline;*/
-    visibility: visible;
-  }
-.de-filter-tree {
-  >>>span.is-leaf {
-    width: 5px !important;
-    padding: 6px 0 !important;
-  }
-}
+
 .de-select-grid-search {
   >>>input {
     border-radius: 0px;
@@ -281,4 +210,23 @@ export default {
     bottom: 0;
   }
 }
+
+.radio-group-container > .el-radio-group > label {
+    display: block !important;
+    margin: 10px !important;
+}
+
+.checkbox-group-container{
+  label.el-checkbox {
+    display: block !important;
+    margin: 10px !important;
+  }
+
+  .el-checkbox-group > label {
+    display: block !important;
+    margin: 10px !important;
+  }
+
+}
+
 </style>
diff --git a/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
index 4ac1d4b687..66f1cd1d40 100644
--- a/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
@@ -11,7 +11,9 @@ const dialogPanel = {
     attrs: {
       placeholder_min: 'denumberrange.please_key_min',
       placeholder_max: 'denumberrange.please_key_max',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
index d7dba70e8c..1f6bec12bd 100644
--- a/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
@@ -16,7 +16,9 @@ const dialogPanel = {
       datas: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
index 311bfb8cc0..dc37adb66f 100644
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@@ -13,9 +13,12 @@ const dialogPanel = {
       multiple: false,
       placeholder: 'denumberselect.placeholder',
       datas: [],
+      viewIds: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
index bc98583a82..acc729cdfe 100644
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@@ -10,7 +10,9 @@ const dialogPanel = {
   options: {
     attrs: {
       placeholder: 'deinputsearch.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
 
     },
     value: ''
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
index ba5933e468..b340323362 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
@@ -16,7 +16,9 @@ const dialogPanel = {
       datas: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index cb71ec13b1..e7933b0d81 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@@ -16,7 +16,9 @@ const dialogPanel = {
       datas: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 8085e8066e..71888b44ee 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -13,7 +13,9 @@ const dialogPanel = {
       rangeSeparator: 'dedaterange.split_placeholder',
       startPlaceholder: 'dedaterange.from_placeholder',
       endPlaceholder: 'dedaterange.to_placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index 82ad3edffc..3b2c7913be 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -11,7 +11,16 @@ const dialogPanel = {
     attrs: {
       type: 'date',
       placeholder: 'dedate.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        dynamicPrefix: 1,
+        dynamicInfill: 'day',
+        dynamicSuffix: 'before'
+      }
     },
     value: ''
   },
@@ -62,6 +71,69 @@ class TimeDateServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  dynamicDateFormNow(element) {
+    if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
+
+    if (element.options.attrs.default.dkey === 0) {
+      return Date.now()
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      const oneday = 24 * 3600 * 1000
+      return Date.now() - oneday
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      const now = new Date()
+      const nowMonth = now.getMonth()
+      var nowYear = now.getFullYear()
+      return new Date(nowYear, nowMonth, 1).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 3) {
+      const dynamicPrefix = element.options.attrs.default.dynamicPrefix
+      const dynamicInfill = element.options.attrs.default.dynamicInfill
+      const dynamicSuffix = element.options.attrs.default.dynamicSuffix
+
+      if (dynamicInfill === 'day') {
+        const oneday = 24 * 3600 * 1000
+        const step = oneday * dynamicPrefix
+        return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
+      }
+      if (dynamicInfill === 'week') {
+        const oneday = 24 * 3600 * 1000
+        const step = oneday * dynamicPrefix * 7
+        return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
+      }
+      if (dynamicInfill === 'month') {
+        const now = new Date()
+        const nowMonth = now.getMonth()
+        const nowYear = now.getFullYear()
+        const nowDate = now.getDate()
+
+        const tarYear = nowYear
+        if (dynamicSuffix === 'before') {
+          const deffMonth = nowMonth - dynamicPrefix
+          let diffYear = deffMonth / 12
+          if (deffMonth < 0) {
+            diffYear -= 1
+          }
+          return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+        } else {
+          const deffMonth = nowMonth + dynamicPrefix
+          const diffYear = deffMonth / 12
+          return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+        }
+      }
+      if (dynamicInfill === 'year') {
+        const now = new Date()
+        const nowMonth = now.getMonth()
+        const nowYear = now.getFullYear()
+        const nowDate = now.getDate()
+        return new Date(nowYear - 1, nowMonth, nowDate).getTime()
+      }
+    }
+  }
 }
 const timeDateServiceImpl = new TimeDateServiceImpl({ name: 'timeDateWidget' })
 export default timeDateServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
index 219f6b73e0..45f77dd99d 100644
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -11,7 +11,9 @@ const dialogPanel = {
     attrs: {
       type: 'month',
       placeholder: 'deyearmonth.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index d7fb9cfb4d..2beb3d6935 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -11,7 +11,9 @@ const dialogPanel = {
     attrs: {
       type: 'year',
       placeholder: 'deyear.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index d6393f38a5..e8209f8d57 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,4 +1,3 @@
-
 /* $--font-path: '~element-ui/lib/theme-chalk/fonts'; */
 
 
@@ -149,17 +148,20 @@ div:focus {
   .el-tabs__header {
     margin: 0 0 0 0 !important;
   }
+
   .el-tabs__content {
     height: calc(100% - 55px) !important;
+
     .el-tab-pane {
-        height: 100% !important;
+      height: 100% !important;
     }
   }
 }
 
 .de-search-header {
   .el-tabs__header {
-    display: none !important;;
+    display: none !important;
+    ;
   }
 }
 
@@ -205,7 +207,7 @@ div:focus {
 }
 
 .de-filter-data-table {
-  .el-table__body-wrapper > table > {
+  .el-table__body-wrapper>table> {
     tbody {
       .el-table__row {
         :hover {
@@ -221,7 +223,7 @@ div:focus {
 }
 
 .de-msg-data-table {
-  .el-table__body-wrapper > table > {
+  .el-table__body-wrapper>table> {
     tbody {
       .el-table__row {
         :hover {
@@ -247,13 +249,14 @@ div:focus {
 .custom-component-class {
   width: 100%;
 
-  div:not(.de-number-range-container ) {
+  div:not(.de-number-range-container) {
     width: 100% !important;
   }
 
   div.el-input-group__append {
     width: 10% !important;
   }
+
   .de-select-grid-class {
     .list {
       position: relative !important;
@@ -340,7 +343,7 @@ div:focus {
   margin: 0 2px 0 0;
 }
 
-.ds-icon-union{
+.ds-icon-union {
   width: 14px;
   height: 14px;
   color: #a479e7;
@@ -389,58 +392,63 @@ div:focus {
 }
 
 .el-color-dropdown__link-btn {
-  display: none!important;
+  display: none !important;
 }
 
 .el-table {
+  background-color: var(--TableBG) !important;
+
+  tr {
     background-color: var(--TableBG) !important;
-    tr {
-        background-color: var(--TableBG) !important;
-    }
-    th {
-        background-color: var(--TableBG) !important;
-    }
+  }
+
+  th {
+    background-color: var(--TableBG) !important;
+  }
 }
 
 .blackTheme .el-textarea__inner {
-    color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
+  color: var(--TableColor) !important;
+  background-color: var(--MainBG) !important;
 }
+
 .blackTheme .el-textarea__inner:not(:focus) {
-    color: var(--TableColor) !important;
-    border-color: var(--border-color-input) !important;
+  color: var(--TableColor) !important;
+  border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input__inner {
-    background-color: var(--MainBG) !important;
-    color: var(--TableColor) !important;
+  background-color: var(--MainBG) !important;
+  color: var(--TableColor) !important;
 }
+
 .blackTheme .el-input__inner:not(:focus) {
-    color: var(--TableColor) !important;
-    border-color: var(--border-color-input) !important;
+  color: var(--TableColor) !important;
+  border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input-number__decrease {
-    color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
-    border: none !important;
+  color: var(--TableColor) !important;
+  background-color: var(--MainBG) !important;
+  border: none !important;
 }
+
 .blackTheme .el-input-number__increase {
-    color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
-    border: none !important;
+  color: var(--TableColor) !important;
+  background-color: var(--MainBG) !important;
+  border: none !important;
 }
 
 .blackTheme .el-picker-panel__footer {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
 }
 
 
 .el-pagination {
-    button:disabled {
-        color: var(--TableColor) !important;
-        background-color: var(--MainBG) !important;
-    }
+  button:disabled {
+    color: var(--TableColor) !important;
+    background-color: var(--MainBG) !important;
+  }
 }
 
 /* .blackTheme .el-pager li {
@@ -453,26 +461,29 @@ div:focus {
 } */
 
 .fu-search-bar-button {
-    background-color: var(--Main) !important;
+  background-color: var(--Main) !important;
 }
 
 .blackTheme .fu-quick-search input {
-    color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
+  color: var(--TableColor) !important;
+  background-color: var(--MainBG) !important;
 }
+
 .blackTheme .vue-treeselect__single-value {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
 }
+
 .blackTheme .el-tag.el-tag--info {
-    background-color: var(--ContentBG);
-    border-color: var(--TableBorderColor);
-    color: var(--TableColor) !important;  ;
+  background-color: var(--ContentBG);
+  border-color: var(--TableBorderColor);
+  color: var(--TableColor) !important;
+  ;
 }
 
 .blackTheme .vue-treeselect__control {
-    background-color: var(--MainBG) !important;
-    color: var(--TableColor) !important;
-    border-color: var(--border-color-input) !important;
+  background-color: var(--MainBG) !important;
+  color: var(--TableColor) !important;
+  border-color: var(--border-color-input) !important;
 }
 
 /* .blackTheme .el-popover {
@@ -480,93 +491,105 @@ div:focus {
 } */
 
 .blackTheme .main-area-input {
-    input.el-input__inner {
-        color: var(--TableColor) !important;
-        background-color: var(--ContentBG) !important;
-    }
-    .el-input-group__append {
-        background-color: var(--ContentBG) !important;
-        border-color: var(--ContentBG) !important;
-    }
+  input.el-input__inner {
+    color: var(--TableColor) !important;
+    background-color: var(--ContentBG) !important;
+  }
+
+  .el-input-group__append {
+    background-color: var(--ContentBG) !important;
+    border-color: var(--ContentBG) !important;
+  }
 }
 
 .blackTheme .el-tree {
-    background-color: var(--SiderBG) !important;
+  background-color: var(--SiderBG) !important;
 }
 
 .blackTheme .el-tree-node__content:hover {
-    background-color: var(--MenuHovorBG) !important;
+  background-color: var(--MenuHovorBG) !important;
 }
 
-.blackTheme .is-current > .el-tree-node__content {
-    background-color: var(--MenuActiveBG) !important;
+.blackTheme .is-current>.el-tree-node__content {
+  background-color: var(--MenuActiveBG) !important;
 }
+
 .blackTheme .el-collapse-item__header {
-    background-color: var(--ContentBG) !important;
-    color: var(--TextPrimary) !important;
-    border: none !important;
+  background-color: var(--ContentBG) !important;
+  color: var(--TextPrimary) !important;
+  border: none !important;
 }
+
 .blackTheme .el-collapse-item__wrap {
-    background-color: var(--ContentBG) !important;
-    border: none !important;
+  background-color: var(--ContentBG) !important;
+  border: none !important;
 }
+
 .blackTheme .content-container__header {
-    color: var(--TextPrimary);
+  color: var(--TextPrimary);
 }
+
 .blackTheme .el-button--default {
-    background-color: var(--MainBG) !important;
-    color: var(--Main) !important;
+  background-color: var(--MainBG) !important;
+  color: var(--Main) !important;
 }
+
 /* .blackTheme .el-dialog {
     background: var(--ContentBG) !important;
     color: var(--TextPrimary) !important;
 }
  */
 .blackTheme .el-dialog__title {
-    color: #ffffff !important;
+  color: #ffffff !important;
 }
 
 .blackTheme .title-text {
-    color: var(--TextPrimary) !important;
+  color: var(--TextPrimary) !important;
 }
 
 .blackTheme .el-tabs__item:not(.is-active) {
-    color: var(--TextPrimary) !important;
+  color: var(--TextPrimary) !important;
 }
-.blackTheme .el-tabs__item:hover{
-    color: var(--Main) !important;
+
+.blackTheme .el-tabs__item:hover {
+  color: var(--Main) !important;
 }
 
 .blackTheme:not(.in-panel) .elx-table--main-wrapper {
 
-    .body--wrapper {
-        background-color: var(--TableBG) !important;
-    }
+  .body--wrapper {
+    background-color: var(--TableBG) !important;
+  }
 }
+
 .blackTheme:not(.in-panel) .elx-table {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
 }
 
 .blackTheme:not(.in-panel) .elx-body--column {
-    background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
+  background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
 }
+
 .blackTheme:not(.in-panel) .elx-header--column {
-    background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
+  background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
 }
+
 .blackTheme:not(.in-panel) tr.row--current {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
 }
+
 .blackTheme:not(.in-panel) tr.elx-body--row:hover {
-    background-color: var(--TableBG) !important;
+  background-color: var(--TableBG) !important;
 }
 
 .blackTheme:not(.in-panel) .elx-table--header-border-line {
-    border-color: var(--TableBorderColor) !important;
+  border-color: var(--TableBorderColor) !important;
 }
 
 .el-collapse-item__content {
-  padding-bottom: 0!important;
+  padding-bottom: 0 !important;
 }
+
 .el-collapse-item__header {
   height: 34px !important;
   line-height: 34px !important;
@@ -576,105 +599,110 @@ div:focus {
 }
 
 .blackTheme .el-submenu__title {
-    color: var(--TextPrimary) ;
+  color: var(--TextPrimary);
 }
+
 .blackTheme .el-drawer__body {
-    background-color: var(--ContentBG);
+  background-color: var(--ContentBG);
 }
 
 .blackTheme .el-select-dropdown__item.hover {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
+
 .blackTheme .el-select-dropdown__item:hover {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
 
 .blackTheme .el-dropdown-menu__item:not(.is-disabled):hover {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
 
 .blackTheme .el-dropdown-menu__item:focus {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
 
 
 .blackTheme .el-dropdown-menu__item--divided:before {
-    background-color: #000000 !important;
+  background-color: #000000 !important;
 }
 
 
 .blackTheme .el-card__header {
-    border-color: var(--TableBorderColor) !important;
+  border-color: var(--TableBorderColor) !important;
 }
 
 .blackTheme .CodeMirror {
-    background-color: #000000 ;
-    color: #ffffff;
+  background-color: #000000;
+  color: #ffffff;
 }
+
 .blackTheme .CodeMirror-code {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 .blackTheme .CodeMirror-gutters {
-    background-color: #000000 ;
+  background-color: #000000;
 }
 
 .blackTheme .CodeMirror-line {
-    background-color: #000000 !important;
+  background-color: #000000 !important;
 }
 
 .blackTheme .el-radio-button__inner {
-    background-color: var(--TableBG);
-    color: var(--TableColor);
-    border: var(--TableBorder);
+  background-color: var(--TableBG);
+  color: var(--TableColor);
+  border: var(--TableBorder);
 }
 
 .blackTheme .el-loading-mask {
-    background-color: rgb(135 131 131 / 70%);
+  background-color: rgb(135 131 131 / 70%);
 }
 
-.blackTheme >>> ::-webkit-scrollbar-thumb {
-    background: #38393a !important;
+.blackTheme>>> ::-webkit-scrollbar-thumb {
+  background: #38393a !important;
 }
 
 .blackTheme .el-message-box__content {
-    color:#F2F6FC;
+  color: #F2F6FC;
 }
 
 .blackTheme .el-message-box__btns {
-    .el-button--default:not(.el-button--primary) {
-        background-color: #171b22 ;
-        color: #2681ff;
-    }
-    .el-button--primary {
-        color: #21333b;
-        background-color: #2681ff;
-        border-color: #2681ff;
-    }
+  .el-button--default:not(.el-button--primary) {
+    background-color: #171b22;
+    color: #2681ff;
+  }
+
+  .el-button--primary {
+    color: #21333b;
+    background-color: #2681ff;
+    border-color: #2681ff;
+  }
 }
 
 .blackTheme .vue-treeselect__menu {
-    border: 1px solid var(--TableBorderColor, #cfcfcf);
-    background: var(--MainBG, #fff);
+  border: 1px solid var(--TableBorderColor, #cfcfcf);
+  background: var(--MainBG, #fff);
 }
 
 .blackTheme .vue-treeselect__option:not(.vue-treeselect__option--highlight) {
-    color: #606266;
-}
-.blackTheme .vue-treeselect__option--highlight {
-    color: #2681ff;
-    background-color: #000000;
+  color: #606266;
 }
 
-.blackTheme .el-table__body tr.current-row > td {
-    background-color: #324f62;
+.blackTheme .vue-treeselect__option--highlight {
+  color: #2681ff;
+  background-color: #000000;
+}
+
+.blackTheme .el-table__body tr.current-row>td {
+  background-color: #324f62;
 }
 
 .blue-color {
-    color: var(--Main, #0000ff);
+  color: var(--Main, #0000ff);
 }
 
-.link-date-picker-class > .el-picker-panel__footer > .el-button--text:first-child{
+.link-date-picker-class>.el-picker-panel__footer>.el-button--text:first-child {
   display: none;
 }
 
@@ -684,41 +712,48 @@ div:focus {
 
 
 .el-color-svpanel__black {
-  background: linear-gradient(to top, #000, rgba(0,0,0,0)) !important;
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) !important;
 }
 
 .el-color-svpanel__white {
-  background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) !important;
 }
 
 
-.rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{
+.rate-date-class>.el-picker-panel__footer>.el-button--text:first-child {
   display: none;
 }
-.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
+
+.rate-date-class>.el-picker-panel__body-wrapper>.el-picker-panel__body {
   >.el-date-picker__header {
     display: none;
   }
-  >.el-picker-panel__content{
-    >table > tbody {
+
+  >.el-picker-panel__content {
+    >table>tbody {
       >tr:first-child {
         display: none;
       }
-      >tr >td.prev-month,td.next-month {
+
+      >tr>td.prev-month,
+      td.next-month {
         display: none;
       }
     }
   }
 }
-.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
+
+.rate-day-class>.el-picker-panel__footer>.el-button--text:first-child {
   display: none;
 }
-.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
+
+.rate-day-class>.el-picker-panel__body-wrapper>.el-picker-panel__body {
   >.el-date-picker__header {
     display: none;
   }
-  >.el-picker-panel__content{
-    >table > tbody {
+
+  >.el-picker-panel__content {
+    >table>tbody {
       >tr:not(:nth-child(3)) {
         display: none;
       }
@@ -726,30 +761,36 @@ div:focus {
   }
 }
 
-.chart-type .el-radio__input{
-  display: none!important;
+.chart-type .el-radio__input {
+  display: none !important;
 }
 
-.chart-type .el-radio__label{
-  padding-left: 0!important;
+.chart-type .el-radio__label {
+  padding-left: 0 !important;
 }
 
-.chart-type .radio-row .radio-style{
+.chart-type .radio-row .radio-style {
   width: 80px;
   height: 60px;
   padding: 0;
 }
 
-.el-color-predefine__color-selector{
-  border: 1px solid #999999!important;
-  margin: 0 0 6px 6px!important;
+.el-color-predefine__color-selector {
+  border: 1px solid #999999 !important;
+  margin: 0 0 6px 6px !important;
 }
+
 .de-checkbox {
   width: 100%;
   margin-left: 0px !important;
+
   .el-checkbox__input {
     padding: 0 0 8px 0 !important;
   }
 }
 
-
+.no-label-item {
+  .el-form-item__content {
+    margin-left: 10px !important;
+  }
+}
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index af3e93512d..3fe25b2cf0 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -146,20 +146,18 @@
       custom-class="de-filter-dialog"
       @close="cancelFilter"
     >
-      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" :component-info="currentFilterCom" @re-fresh-component="reFreshComponent">
-        <component
-          :is="currentFilterCom.component"
-          :id="'component' + currentFilterCom.id"
-          class="component"
-          :style="currentFilterCom.style"
-          :element="currentFilterCom"
-          :in-draw="false"
-        />
-      </filter-dialog>
+      <filter-dialog
+        v-if="filterVisible && currentWidget"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @sure-button-status="sureStatusChange"
+        @re-fresh-component="reFreshComponent"
+      />
       <div style="text-align: end !important;margin: 0 15px 10px !important;">
         <span slot="footer">
           <el-button size="mini" @click="cancelFilter">{{ $t('commons.cancel') }}</el-button>
-          <el-button :disabled="!currentFilterCom.options.attrs.fieldId" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
+          <el-button :disabled="!enableSureButton" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
         </span>
       </div>
     </el-dialog>
@@ -217,9 +215,7 @@ import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
 import { findOne } from '@/api/panel/panel'
 import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
-import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 import Preview from '@/components/canvas/components/Editor/Preview'
-import AttrList from '@/components/canvas/components/AttrList'
 import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
@@ -234,9 +230,7 @@ import FilterDialog from '../filter/filterDialog'
 import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
-import RectangleAttr from '@/components/canvas/components/RectangleAttr'
 import TextAttr from '@/components/canvas/components/TextAttr'
-import FilterTextAttr from '@/components/canvas/components/FilterTextAttr'
 import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 import ComponentWait from '@/views/panel/edit/ComponentWait'
 
@@ -253,16 +247,12 @@ export default {
     Toolbar,
     FilterDialog,
     SubjectSetting,
-    PreviewFullScreen,
     Preview,
-    AttrList,
     AttrListExtend,
     AssistComponent,
     PanelTextEditor,
-    RectangleAttr,
     TextAttr,
-    ChartGroup,
-    FilterTextAttr
+    ChartGroup
   },
   data() {
     return {
@@ -295,7 +285,6 @@ export default {
         width: null,
         height: null
       },
-      beforeDialogValue: [],
       styleDialogVisible: false,
       currentDropElement: null,
       adviceGroupId: null,
@@ -312,7 +301,8 @@ export default {
         'rect-shape',
         'de-show-date',
         'de-video'
-      ]
+      ],
+      enableSureButton: false
     }
   },
 
@@ -674,11 +664,9 @@ export default {
       }
     },
     openFilterDialog() {
-      this.beforeDialogValue = []
       this.filterVisible = true
     },
     closeFilter() {
-      this.beforeDialogValue = []
       this.filterVisible = false
       this.currentWidget = null
       this.clearCurrentInfo()
@@ -688,9 +676,10 @@ export default {
       bus.$emit('onRemoveLastItem')
     },
     sureFilter() {
-      this.currentFilterCom.options.value = []
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
       this.$store.commit('setComponentWithId', this.currentFilterCom)
       this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
       this.closeFilter()
     },
     reFreshComponent(component) {
@@ -701,9 +690,9 @@ export default {
       if (this.curComponent && this.curComponent.serviceName) {
         const serviceName = this.curComponent.serviceName
         this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openFilterDialog()
       }
-      this.currentFilterCom = this.curComponent
-      this.openFilterDialog()
     },
     closeLeftPanel() {
       this.show = false
@@ -880,6 +869,9 @@ export default {
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
       this.$refs.canvasEditor.handleDragOver(e)
+    },
+    sureStatusChange(status) {
+      this.enableSureButton = status
     }
   }
 }
diff --git a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
new file mode 100644
index 0000000000..dc4e970995
--- /dev/null
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
@@ -0,0 +1,129 @@
+<template>
+  <div v-if="element">
+    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
+
+      <el-form-item label="设定默认值">
+        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
+          <el-radio :label="false">固定时间</el-radio>
+          <el-radio :label="true">动态时间</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" label="相对当前时间">
+
+        <el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
+          <el-option label="今天" :value="0" />
+          <el-option label="昨天" :value="1" />
+          <el-option label="本月首日" :value="2" />
+          <el-option label="自定义" :value="3" />
+        </el-select>
+
+      </el-form-item>
+
+      <div class="inline">
+
+        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="">
+          <el-input v-model="element.options.attrs.default.dynamicPrefix" type="number" size="mini" :min="1" :max="10" @input="dynamicPrefixChange" />
+        </el-form-item>
+
+        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
+          <el-select v-model="element.options.attrs.default.dynamicInfill" size="mini" placeholder="" @change="dynamicInfillChange">
+            <el-option label="天" value="day" />
+            <el-option label="周" value="week" />
+            <el-option label="月" value="month" />
+            <el-option label="年" value="year" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
+
+          <el-select v-model="element.options.attrs.default.dynamicSuffix" size="mini" placeholder="" @change="dynamicSuffixChange">
+            <el-option label="前" value="before" />
+            <el-option label="后" value="after" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" label="预览">
+        <el-date-picker
+          v-model="dval"
+          type="date"
+          disabled
+          placeholder=""
+          class="relative-time"
+        />
+      </el-form-item>
+
+      <el-form-item v-else label="设置">
+        <component
+          :is="element.component"
+          :id="'component' + element.id"
+          class="relative-time"
+          :style="element.style"
+          :element="element"
+          :in-draw="false"
+        />
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
+export default {
+  name: 'DeDateDefault',
+  props: {
+
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dval: null
+    }
+  },
+  created() {
+    this.setDval()
+  },
+  methods: {
+    dynamicChange(value) {
+      this.setDval()
+    },
+    dkeyChange(value) {
+      this.setDval()
+    },
+
+    dynamicPrefixChange(value) {
+      this.setDval()
+    },
+    dynamicInfillChange(value) {
+      this.setDval()
+    },
+    dynamicSuffixChange(value) {
+      this.setDval()
+    },
+    setDval() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      const time = widget.dynamicDateFormNow(this.element)
+      this.dval = time
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inline {
+  display: flex;
+  >>>.el-input--mini {
+      min-width: 70px;
+  }
+}
+.relative-time {
+    width: 100%;
+}
+
+</style>
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 70eb1f83a1..da3693a240 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -40,7 +40,6 @@
                   @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>
                       <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" />
@@ -59,19 +58,17 @@
                 <div v-if="showDomType === 'field'">
                   <draggable
                     v-model="fieldDatas"
-                    :disabled="selectField.length !== 0"
                     :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
                     animation="300"
                     :move="onMove"
                     class="drag-list"
-                    @end="end1"
-                    @start="start1"
+                    @end="end"
                   >
                     <transition-group>
                       <div
                         v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))"
                         :key="item.id"
-                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        :class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
                         class="filter-db-row"
                       >
                         <i class="el-icon-s-data" />
@@ -134,19 +131,17 @@
                 <div v-else-if="comShowDomType === 'field'">
                   <draggable
                     v-model="comFieldDatas"
-                    :disabled="selectField.length !== 0"
                     :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
                     animation="300"
                     :move="onMove"
                     class="drag-list"
-                    @end="end1"
-                    @start="start1"
+                    @end="end"
                   >
                     <transition-group>
                       <div
                         v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
                         :key="item.id"
-                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        :class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
                         class="filter-db-row"
                       >
                         <i class="el-icon-s-data" />
@@ -163,138 +158,13 @@
     </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">{{ $t('panel.field') }} </div>
-                </div> -->
+      <div v-if="currentElement.options && currentElement.options.attrs">
+        <filter-head :element="currentElement" />
 
-                <div class="field-content-right">
-                  <el-row style="display:flex;height: 32px;">
-                    <draggable
-                      v-model="selectField"
-                      group="dimension"
-                      animation="300"
-                      :move="onMove"
-                      class="theme-drag"
-                      style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
-                      @end="end2"
-                    >
-                      <transition-group class="list-group" :data-value="$t('panel.drag_here')">
-                        <drag-item
-                          v-for="(item,index) in selectField"
-                          :key="item.id"
-                          :item="item"
-                          :index="index"
-                          @closeItem="closeItem"
-                        />
-                      </transition-group>
-                    </draggable>
-                  </el-row>
-                </div>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <div class="filter-options-left">
-              <el-switch
-                v-if="widget.showSwitch"
-                v-model="componentInfo.options.attrs.multiple"
-                :active-text="$t('panel.multiple_choice')"
-                :inactive-text="$t('panel.single_choice')"
-                @change="multipleChange"
-              />
-            </div>
-          </el-col>
-          <el-col :span="16">
-            <div class="filter-options-right">
-              <span style="padding-right: 10px;">
-                <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题
-                </el-checkbox>
-                <el-popover
-                  v-model="titlePopovervisible"
-                  placement="bottom-end"
-                  :disabled="!componentInfo.options.attrs.showTitle"
-                  width="200"
-                >
-                  <div
-                    style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"
-                  >
-                    <el-input
-                      v-model="componentInfo.options.attrs.title"
-                      placeholder="请输入标题"
-                      type="textarea"
-                      maxlength="15"
-                      show-word-limit
-                    />
-                  </div>
+        <filter-control :element="currentElement" :widget="widget" :control-attrs="myAttrs" :child-views="childViews" />
 
-                  <i
-                    slot="reference"
-                    :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}"
-                    class="el-icon-setting i-filter"
-                  />
-                </el-popover>
-              </span>
-              <span style="padding-left: 10px;">
-                <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
-                  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+        <filter-foot :element="currentElement" />
 
-                <el-popover
-                  v-model="popovervisible"
-                  placement="bottom-end"
-                  :disabled="!componentInfo.options.attrs.enableRange"
-                  width="200"
-                >
-                  <div class="view-container-class">
-                    <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
-                      <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
-                        <div class="span-div">
-                          <svg-icon :icon-class="item.type" class="chart-icon" />
-                          <span
-                            v-if="item.name && item.name.length <= 7"
-                            style="margin-left: 6px"
-                          >{{ item.name }}</span>
-                          <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
-                            <span style="margin-left: 6px">{{ item.name }}</span>
-                          </el-tooltip>
-                        </div>
-
-                      </el-checkbox>
-                    </el-checkbox-group>
-                  </div>
-
-                  <i
-                    slot="reference"
-                    :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}"
-                    class="el-icon-setting i-filter"
-                  />
-                </el-popover>
-              </span>
-            </div>
-
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <div class="filter-content">
-              <el-card class="box-card">
-                <div style="margin-bottom: 10px;">
-                  <span> {{ widget.label }}</span>
-                </div>
-                <div class="custom-component-class">
-                  <slot />
-                </div>
-              </el-card>
-
-            </div>
-          </el-col>
-        </el-row>
       </div>
     </de-main-container>
   </de-container>
@@ -305,15 +175,16 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
-import DragItem from '@/components/DragItem'
+import FilterHead from './filterMain/FilterHead'
+import FilterControl from './filterMain/FilterControl'
+import FilterFoot from './filterMain/FilterFoot'
+
 import {
   mapState
 } from 'vuex'
-  // import { ApplicationContext } from '@/utils/ApplicationContext'
 import {
   groupTree,
   fieldList,
-  fieldValues,
   post
 } from '@/api/dataset/dataset'
 import {
@@ -329,7 +200,9 @@ export default {
     DeContainer,
     DeAsideContainer,
     draggable,
-    DragItem
+    FilterHead,
+    FilterControl,
+    FilterFoot
   },
   props: {
 
@@ -337,9 +210,10 @@ export default {
       type: Object,
       default: null
     },
-    componentInfo: {
+
+    element: {
       type: Object,
-      default: null
+      default: () => {}
     }
   },
 
@@ -370,7 +244,6 @@ export default {
         id: 'id',
         parentId: 'pid'
       },
-      selectField: [],
       widget: null,
       fieldValues: [],
       popovervisible: false,
@@ -390,48 +263,36 @@ export default {
       expandedArray: [],
       viewKeyWord: '',
       titlePopovervisible: false,
-      fieldsParent: null
+      fieldsParent: null,
+
+      myAttrs: null,
+
+      childViews: {
+        viewInfos: []
+      },
+      currentElement: null
     }
   },
   computed: {
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    },
+
     ...mapState([
-      'componentData',
-      'curComponent',
-      'isClickComponent',
-      'canvasStyleData',
-      'curComponentIndex'
+      'componentData'
     ])
   },
 
   watch: {
-    selectField(values) {
+    'myAttrs.dragItems'(values) {
       if (values && values.length > 0) {
-        const value = values[0]
-        const fieldId = value.id
-        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.componentInfo.options.attrs.activeName = this.activeName
-            this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
-            this.$emit('re-fresh-component', this.componentInfo)
-          })
-        } else {
-          this.componentInfo.options.attrs.fieldId = fieldId
-          this.componentInfo.options.attrs.dragItems = values
-          this.componentInfo.options.attrs.activeName = this.activeName
-          this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
-          this.$emit('re-fresh-component', this.componentInfo)
-        }
-      } else if (this.componentInfo && this.componentInfo.options.attrs.fieldId) {
-        this.componentInfo.options.attrs.fieldId = null
-        this.componentInfo.options.attrs.activeName = null
-        this.$emit('re-fresh-component', this.componentInfo)
+        const fieldIds = values.map(val => val.id)
+        this.myAttrs.fieldId = fieldIds.join()
+        // this.myAttrs.dragItems = values
+        this.myAttrs.activeName = this.activeName
+        this.myAttrs.fieldsParent = this.fieldsParent
+      } else if (this.myAttrs && this.myAttrs.fieldId) {
+        this.myAttrs.fieldId = null
+        this.myAttrs.activeName = null
       }
+      this.enableSureButton()
     },
     keyWord(val) {
       this.expandedArray = []
@@ -447,12 +308,13 @@ export default {
     }
   },
   created() {
-    // this.widget = ApplicationContext.getService(this.widgetId)
     this.widget = this.widgetInfo
+    this.currentElement = JSON.parse(JSON.stringify(this.element))
+    this.myAttrs = this.currentElement.options.attrs
     this.treeNode(this.groupForm)
 
-    if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
-      this.selectField = this.componentInfo.options.attrs.dragItems
+    if (this.myAttrs && this.myAttrs.dragItems) {
+      this.enableSureButton()
     }
     this.initWithField()
     this.loadViews()
@@ -460,10 +322,10 @@ export default {
 
   methods: {
     initWithField() {
-      if (this.componentInfo && this.componentInfo.options.attrs.activeName) {
-        this.activeName = this.componentInfo.options.attrs.activeName
-        if (this.componentInfo.options.attrs.fieldsParent) {
-          this.fieldsParent = this.componentInfo.options.attrs.fieldsParent
+      if (this.myAttrs && this.myAttrs.activeName) {
+        this.activeName = this.myAttrs.activeName
+        if (this.myAttrs.fieldsParent) {
+          this.fieldsParent = this.myAttrs.fieldsParent
           this.$nextTick(() => {
             this.activeName === 'dataset' && this.showFieldDatas(this.fieldsParent)
             this.activeName !== 'dataset' && this.comShowFieldDatas(this.fieldsParent)
@@ -525,6 +387,7 @@ export default {
       viewIds && viewIds.length > 0 && viewsWithIds(viewIds).then(res => {
         const datas = res.data
         this.viewInfos = datas
+        this.childViews.viewInfos = datas
       })
     },
     handleNodeClick(data) {
@@ -598,19 +461,12 @@ export default {
           return
         }
       }
-      //   this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
-      //   this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
     },
     comRemoveTail() {
       this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1)
       this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false
     },
     backToLink(bread) {
-      //   if (bread.type === 'field') {
-      //     this.showDomType = 'db'
-      //   } else {
-      //     this.showDomType = 'tree'
-      //   }
       this.showDomType = 'tree'
 
       this.removeTail(bread)
@@ -626,14 +482,6 @@ export default {
       this.viewKeyWord = ''
       this.comRemoveTail()
     },
-    // loadTable(sceneId) {
-    //   loadTable({ sceneId: sceneId, sort: 'type asc,create_time desc,name asc' }).then(res => {
-    //     res && res.data && (this.sceneDatas = res.data.map(tb => {
-    //       tb.type = 'db'
-    //       return tb
-    //     }))
-    //   })
-    // },
 
     loadField(tableId) {
       fieldList(tableId).then(res => {
@@ -673,20 +521,12 @@ export default {
       this.moveId = e.draggedContext.element.id
       return true
     },
-    start1() {
 
-    },
-    end1(e) {
+    end(e) {
       this.refuseMove(e)
       this.removeCheckedKey(e)
-      this.save()
     },
-    save() {
 
-    },
-    end2(e) {
-      this.refuseMove(e)
-    },
     refuseMove(e) {
       const that = this
       const xItems = this.fieldDatas.filter(function(m) {
@@ -699,43 +539,25 @@ export default {
     },
     removeCheckedKey(e) {
       const that = this
-      const xItems = this.selectField.filter(function(m) {
+      if (!this.currentElement.options.attrs.dragItems) return
+      const xItems = this.currentElement.options.attrs.dragItems.filter(function(m) {
         return m.id === that.moveId
       })
 
       if (xItems && xItems.length > 1) {
-        this.selectField.splice(e.newDraggableIndex, 1)
+        this.currentElement.options.attrs.dragItems.splice(e.newDraggableIndex, 1)
       }
     },
-    closeItem(tag) {
-      const index = tag.index
-      this.selectField.splice(index, 1)
-    },
 
-    multipleChange(value) {
-      // this.componentInfo.options.attrs.multiple = value
-      //   this.componentInfo.options.value = null
-      this.$emit('re-fresh-component', this.componentInfo)
+    enableSureButton() {
+      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems.length > 0
+      this.$emit('sure-button-status', enable)
     },
 
-    checkedViewsChange(values) {
-      // this.componentInfo.options.attrs.viewIds = values
-      this.$emit('re-fresh-component', this.componentInfo)
-    },
-    enableRangeChange(value) {
-      if (!value) {
-        this.componentInfo.options.attrs.viewIds = []
-      }
-      // this.componentInfo.options.attrs.enableRange = value
-      this.$emit('re-fresh-component', this.componentInfo)
-    },
-    showTitleChange(value) {
-      if (!value) {
-        this.componentInfo.options.attrs.title = ''
-        this.componentInfo.style.backgroundColor = ''
-      }
-      this.$emit('re-fresh-component', this.componentInfo)
+    getElementInfo() {
+      return this.currentElement
     }
+
   }
 }
 
@@ -768,81 +590,6 @@ export default {
     padding: 5px 10px;
   }
 
-  .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 var(--TableBorderColor, #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 var(--TableBorderColor, #E6E6E6);
-        width: 0%;
-        max-width: 0%;
-        position: relative;
-        display: table-cell;
-        vertical-align: middle;
-        margin: 0px;
-        padding: 0 0 0 0;
-        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 - 120px);
-    top: 160px;
-
-  }
-
   .filter-dialog-tabs {
     border: 1px solid var(--TableBorderColor, #E6E6E6);
     padding: 10px;
@@ -913,59 +660,4 @@ export default {
     height: calc(100% - 6px);
   }
 
-  .box-card {
-    width: 100%;
-    height: 100%;
-  }
-
-  .i-filter {
-    text-align: center;
-    margin-left: 5px;
-    margin-top: 1px;
-  }
-
-  .i-filter-inactive {
-    color: #9ea6b2 !important;
-    cursor: not-allowed !important;
-  }
-
-  .i-filter-active {
-    cursor: pointer !important;
-  }
-
-  .view-container-class {
-
-    min-height: 150px;
-    max-height: 200px;
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    word-break: break-all;
-    position: relative;
-
-  }
-
-  .list-group:empty,
-  .list-group>div:empty {
-    display: inline-block;
-    width: 100%;
-    height: calc(100% - 13px);
-  }
-
-  .list-group:empty:before,
-  .list-group>div:empty:before {
-    content: attr(data-value);
-  }
-
-  .blackTheme .theme-drag {
-    background-color: var(--MainBG, #fff);
-  }
-
-  .span-div {
-    width: 135px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
 </style>
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
new file mode 100644
index 0000000000..02a0ad3e20
--- /dev/null
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -0,0 +1,183 @@
+<template>
+  <el-row>
+    <el-col :span="8">
+      <div class="filter-options-left">
+        <el-switch
+          v-if="widget.showSwitch"
+          v-model="attrs.multiple"
+          :active-text="$t('panel.multiple_choice')"
+          :inactive-text="$t('panel.single_choice')"
+          @change="multipleChange"
+        />
+      </div>
+    </el-col>
+    <el-col :span="16">
+      <div class="filter-options-right">
+        <span style="padding-right: 10px;">
+          <el-checkbox v-model="attrs.showTitle" @change="showTitleChange">显示标题
+          </el-checkbox>
+          <el-popover v-model="titlePopovervisible" placement="bottom-end" :disabled="!attrs.showTitle" width="200">
+            <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
+              <el-input v-model="attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
+            </div>
+
+            <i
+              slot="reference"
+              :class="{'i-filter-active': attrs.showTitle, 'i-filter-inactive': !attrs.showTitle}"
+              class="el-icon-setting i-filter"
+            />
+          </el-popover>
+        </span>
+        <span style="padding-left: 10px;">
+          <el-checkbox v-model="attrs.enableRange" @change="enableRangeChange"><span>
+            {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+
+          <el-popover v-model="popovervisible" placement="bottom-end" :disabled="!attrs.enableRange" width="200">
+            <div class="view-container-class">
+              <el-checkbox-group v-model="attrs.viewIds" @change="checkedViewsChange">
+                <el-checkbox
+                  v-for="(item ) in childViews.viewInfos"
+                  :key="item.id"
+                  :label="item.id"
+                  class="de-checkbox"
+                >
+                  <div class="span-div">
+                    <svg-icon :icon-class="item.type" class="chart-icon" />
+                    <span v-if="item.name && item.name.length <= 7" style="margin-left: 6px">{{ item.name }}</span>
+                    <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
+                      <span style="margin-left: 6px">{{ item.name }}</span>
+                    </el-tooltip>
+                  </div>
+
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+
+            <i
+              slot="reference"
+              :class="{'i-filter-active': attrs.enableRange, 'i-filter-inactive': !attrs.enableRange}"
+              class="el-icon-setting i-filter"
+            />
+          </el-popover>
+        </span>
+      </div>
+
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'FilterControl',
+  props: {
+    widget: {
+      type: Object,
+      default: null
+    },
+    controlAttrs: {
+      type: Object,
+      default: null
+    },
+
+    childViews: {
+      type: Object,
+      default: () => {}
+    },
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      attrs: null,
+      titlePopovervisible: false,
+      popovervisible: false
+
+    }
+  },
+
+  created() {
+    this.attrs = this.controlAttrs
+  },
+  methods: {
+    multipleChange(value) {
+      this.fillAttrs2Filter()
+    },
+    checkedViewsChange(values) {
+      this.fillAttrs2Filter()
+    },
+    enableRangeChange(value) {
+      if (!value) {
+        this.attrs.viewIds = []
+      }
+      this.fillAttrs2Filter()
+    },
+    showTitleChange(value) {
+      if (!value) {
+        this.attrs.title = ''
+        // this.componentInfo.style.backgroundColor = ''
+      }
+      this.fillAttrs2Filter()
+    },
+
+    fillAttrs2Filter() {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .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;
+  }
+
+  .i-filter {
+    text-align: center;
+    margin-left: 5px;
+    margin-top: 1px;
+  }
+
+  .i-filter-inactive {
+    color: #9ea6b2 !important;
+    cursor: not-allowed !important;
+  }
+
+  .i-filter-active {
+    cursor: pointer !important;
+  }
+
+  .view-container-class {
+
+    min-height: 150px;
+    max-height: 200px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    word-break: break-all;
+    position: relative;
+
+  }
+
+  .span-div {
+    width: 135px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/filter/filterMain/FilterFoot.vue b/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
new file mode 100644
index 0000000000..327a974a38
--- /dev/null
+++ b/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-row>
+    <el-col :span="24">
+      <div class="filter-content">
+        <el-card v-if="element.serviceName && element.serviceName !== 'timeDateWidget'" class="box-card">
+          <div style="margin-bottom: 10px;">
+            <span>默认值设置</span>
+          </div>
+          <div class="custom-component-class">
+            <component
+              :is="element.component"
+              :id="'component' + element.id"
+              class="component"
+              :style="element.style"
+              :element="element"
+              :in-draw="false"
+            />
+          </div>
+
+        </el-card>
+
+        <el-card v-if="element.serviceName && element.serviceName === 'timeDateWidget'" class="box-card">
+          <de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
+        </el-card>
+
+      </div>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script>
+import DeDateDefault from '@/views/panel/filter/defaultValue/DeDateDefault'
+export default {
+  name: 'FilterFoot',
+  components: {
+    DeDateDefault
+  },
+  props: {
+
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  methods: {
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .filter-content {
+    height: calc(50vh - 120px);
+    top: 160px;
+
+  }
+
+  .box-card {
+    width: 100%;
+    height: 100%;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
new file mode 100644
index 0000000000..9858627c7a
--- /dev/null
+++ b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -0,0 +1,147 @@
+<template>
+  <el-row>
+    <el-col :span="24">
+      <div class="filter-field">
+        <div class="field-content">
+
+          <div class="field-content-right">
+            <el-row style="display:flex;height: 32px;">
+              <draggable
+                v-model="element.options.attrs.dragItems"
+                group="dimension"
+                animation="300"
+                :move="onMove"
+                class="theme-drag"
+                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
+                @end="end2"
+              >
+                <div class="list-group-container">
+                  <drag-item
+                    v-for="(item,index) in element.options.attrs.dragItems"
+                    :key="item.id"
+                    :item="item"
+                    :index="index"
+                    @closeItem="closeItem"
+                  />
+                </div>
+                <transition-group class="list-group" :data-value="$t('panel.drag_here')" />
+              </draggable>
+            </el-row>
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import DragItem from '@/components/DragItem'
+export default {
+  name: 'FilterHead',
+  components: {
+    draggable,
+    DragItem
+  },
+  props: {
+    element: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      targets: []
+    }
+  },
+
+  watch: {
+
+  },
+  created() {
+  },
+  methods: {
+    onMove(e, originalEvent) {
+      // this.moveId = e.draggedContext.element.id
+      return true
+    },
+    end2(e) {},
+
+    closeItem(tag) {
+      const index = tag.index
+      this.element.options.attrs.dragItems.splice(index, 1)
+    }
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+  .filter-field {
+    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 var(--TableBorderColor, #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 var(--TableBorderColor, #E6E6E6);
+        width: 0%;
+        max-width: 0%;
+        position: relative;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0px;
+        padding: 0 0 0 0;
+        height: 100%;
+      }
+    }
+
+  }
+  .list-group-container:empty,.list-group-container>div:empty {
+      display: none;
+  }
+  .list-group:empty,
+  .list-group>div:empty {
+    display: inline-block;
+    width: 100%;
+    height: calc(100% - 13px);
+  }
+
+  .list-group:empty:before,
+  .list-group>div:empty:before {
+    content: attr(data-value);
+  }
+
+    .blackTheme .theme-drag {
+    background-color: var(--MainBG, #fff);
+  }
+
+</style>