diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 4ac293ebc8..958d4005b4 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -1694,15 +1694,34 @@ public class ChartViewService {
                     continue;
                 }
 
+                Boolean isEndParam = false;
                 for (String parameter : chartExtFilterRequest.getParameters()) {
                     if (parameter.contains("|DE|")) {
-                        if (!parameter.split("\\|DE\\|")[0].equals(table.getId())) {
+                        String[] parameterArray = parameter.split("\\|DE\\|");
+                        if (!parameterArray[0].equals(table.getId())) {
                             continue;
                         }
-                        List<SqlVariableDetails> parameters = sqlVariables.stream().filter(item -> item.getVariableName().equalsIgnoreCase(parameter.split("\\|DE\\|")[1])).collect(Collectors.toList());
+                        String paramName = null;
+                        if (parameterArray.length > 1) {
+                            paramName = parameterArray[1];
+                            if (paramName.contains("_START_END_SPLIT")) {
+                                String[] paramNameArray = paramName.split("_START_END_SPLIT");
+                                paramName = paramNameArray[0];
+                                isEndParam = true;
+                            }
+                        } else {
+                            continue;
+                        }
+                        final String finalParamName = paramName;
+                        List<SqlVariableDetails> parameters = sqlVariables.stream().filter(item -> item.getVariableName().equalsIgnoreCase(finalParamName)).collect(Collectors.toList());
                         if (CollectionUtils.isNotEmpty(parameters)) {
-                            String filter = qp.transFilter(chartExtFilterRequest, parameters.get(0));
-                            sql = sql.replace("${" + parameter.split("\\|DE\\|")[1] + "}", filter);
+                            String filter = null;
+                            if (isEndParam) {
+                                filter = transEndParamSql(chartExtFilterRequest, parameters.get(0));
+                            } else {
+                                filter = qp.transFilter(chartExtFilterRequest, parameters.get(0));
+                            }
+                            sql = sql.replace("${" + finalParamName + "}", filter);
                         }
                     } else {
                         List<SqlVariableDetails> parameters = sqlVariables.stream().filter(item -> item.getVariableName().equalsIgnoreCase(parameter)).collect(Collectors.toList());
@@ -1718,6 +1737,11 @@ public class ChartViewService {
         return sql;
     }
 
+    public String transEndParamSql(ChartExtFilterRequest chartExtFilterRequest, SqlVariableDetails sqlVariableDetails) {
+        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(sqlVariableDetails.getType().size() > 1 ? sqlVariableDetails.getType().get(1) : "YYYY");
+        return simpleDateFormat.format(new Date(Long.parseLong(chartExtFilterRequest.getValue().get(1))));
+    }
+
     private String getDrillSort(List<ChartViewFieldDTO> xAxis, ChartViewFieldDTO field) {
         String res = "";
         for (ChartViewFieldDTO f : xAxis) {
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
index 3dcc29a6f6..d18f91f69f 100644
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@@ -107,6 +107,9 @@ class NumberSelectServiceImpl extends WidgetService {
       return defaultV.split(',')[0]
     }
   }
+  isParamWidget() {
+    return true
+  }
 }
 const numberSelectServiceImpl = new NumberSelectServiceImpl()
 export default numberSelectServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index 4b5b79d85a..2a28a2d658 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@@ -102,6 +102,9 @@ class TextSelectServiceImpl extends WidgetService {
   isCustomSortWidget() {
     return true
   }
+  isParamWidget() {
+    return true
+  }
 
   fillValueDerfault(element) {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 301074284a..cd33146057 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -31,7 +31,10 @@ const dialogPanel = {
         eDynamicSuffix: 'after'
       },
       showTime: false,
-      accuracy: 'HH:mm'
+      accuracy: 'HH:mm',
+      parameters: [],
+      startParameters: [],
+      endParameters: []
     },
     value: '',
     manualModify: false
@@ -329,13 +332,13 @@ class TimeDateRangeServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -400,6 +403,12 @@ class TimeDateRangeServiceImpl extends WidgetService {
       { 'text': 'dynamic_year.last', 'callBack': () => this.formatShortValues([this.getStartYear(-1).getTime(), this.getEndYear(-1).getTime()]) }
     ]
   }
+  isParamWidget() {
+    return true
+  }
+  isRangeParamWidget() {
+    return true
+  }
 }
 const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index d9ce3365ad..a1646a5383 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -189,13 +189,13 @@ class TimeDateServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -234,6 +234,9 @@ class TimeDateServiceImpl extends WidgetService {
   isTimeWidget() {
     return true
   }
+  isParamWidget() {
+    return true
+  }
 }
 const timeDateServiceImpl = new TimeDateServiceImpl({
   name: 'timeDateWidget'
diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
index c8defe995a..1254999750 100644
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -150,13 +150,13 @@ class TimeMonthServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -186,6 +186,9 @@ class TimeMonthServiceImpl extends WidgetService {
       return timeSection(parseFloat(value), element.options.attrs.type)
     }
   }
+  isParamWidget() {
+    return true
+  }
 }
 const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index 54bbfac589..90d440cdf2 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -137,13 +137,13 @@ class TimeYearServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -173,6 +173,9 @@ class TimeYearServiceImpl extends WidgetService {
       return timeSection(parseFloat(value), element.options.attrs.type)
     }
   }
+  isParamWidget() {
+    return true
+  }
 }
 const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e4e820d4ac..6cebef7bc6 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -93,7 +93,7 @@ div:focus {
 }
 
 .de-filter-dialog {
-  min-width: 500px !important;
+  min-width: 785px !important;
   width: 55% !important;
 
   .el-dialog__header {
@@ -322,12 +322,12 @@ div:focus {
   margin: 0 2px 1px 0;
 }
 
-.field-icon-dimension{
-  color: #3370FF!important;
+.field-icon-dimension {
+  color: #3370FF !important;
 }
 
-.field-icon-quota{
-  color: #04B49C!important;
+.field-icon-quota {
+  color: #04B49C !important;
 }
 
 .ds-icon-pdf {
@@ -1509,6 +1509,7 @@ div:focus {
 .de-status {
   position: relative;
   margin-left: 15px;
+
   &::before {
     content: '';
     position: absolute;
@@ -1546,6 +1547,7 @@ div:focus {
   &::before {
     background: var(--deDanger, #F54A45);
   }
+
   .el-icon-s-order {
     color: var(--primary, #3370ff);
     cursor: pointer;
@@ -1590,6 +1592,7 @@ div:focus {
     margin: 0;
     margin-right: 8px;
     position: relative;
+
     i {
       position: absolute;
       right: 2px;
@@ -1621,6 +1624,7 @@ div:focus {
     justify-content: center;
     align-items: center;
   }
+
   .arrow-filter:hover {
     background: rgba(31, 35, 41, 0.1);
     border-radius: 4px;
@@ -1633,6 +1637,7 @@ div:focus {
   .el-icon-arrow-left.arrow-filter {
     margin-right: 5px;
   }
+
   .filter-texts-container {
     flex: 1;
     overflow-x: auto;
@@ -1674,11 +1679,13 @@ div:focus {
     transform: translate(-50%, -50%);
   }
 }
+
 .calcu-field {
   .calcu-cont {
     display: flex;
     justify-content: space-between;
   }
+
   .codemirror {
     height: 250px;
     overflow-y: auto;
@@ -1686,6 +1693,7 @@ div:focus {
     border: 1px solid #bbbfc4;
     border-radius: 4px;
   }
+
   .codemirror .CodeMirror-scroll {
     height: 250px;
     overflow-y: auto;
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index d054c00185..d6dfacc517 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -169,7 +169,51 @@
             width="200"
           >
             <div class="view-container-class">
-              <el-checkbox-group v-model="attrs.parameters">
+              <el-tabs
+                v-if="isRangeParamWidget"
+                v-model="activeName"
+              >
+                <el-tab-pane
+                  v-for="(item, index) in tabsOption"
+                  :key="item.name + index"
+                  :label="item.label"
+                  :name="item.name"
+                >
+                  <el-checkbox-group
+                    v-model="attrs[item.name + 'Parameters']"
+                    @change="val => {changeDynamicParams(val, item.name)}"
+                  >
+                    <el-checkbox
+                      v-for="(item ) in childViews.datasetParams"
+                      :key="item.id"
+                      :label="item.id"
+                      :disabled="attrs[tabsOption[(index + 1)%2].name + 'Parameters'] && attrs[tabsOption[(index + 1)%2].name + 'Parameters'].includes(item.id)"
+                      class="de-checkbox"
+                    >
+                      <div class="span-div">
+                        <span
+                          v-if="item.alias && item.alias.length <= 7"
+                          style="margin-left: 6px"
+                        >{{ item.alias }}</span>
+                        <el-tooltip
+                          v-else
+                          class="item"
+                          effect="dark"
+                          :content="item.alias"
+                          placement="left"
+                        >
+                          <span style="margin-left: 6px">{{ item.alias }}</span>
+                        </el-tooltip>
+                      </div>
+
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </el-tab-pane>
+              </el-tabs>
+              <el-checkbox-group
+                v-else
+                v-model="attrs.parameters"
+              >
                 <el-checkbox
                   v-for="(item ) in childViews.datasetParams"
                   :key="item.id"
@@ -236,7 +280,13 @@ export default {
   },
   data() {
     return {
+      activeName: 'start',
+      tabsOption: [
+        { label: this.$t('dataset.start_time'), name: 'start' },
+        { label: this.$t('dataset.end_time'), name: 'end' }
+      ],
       showParams: false,
+      isRangeParamWidget: false,
       attrs: null,
       titlePopovervisible: false,
       popovervisible: false,
@@ -278,11 +328,21 @@ export default {
 
   created() {
     this.attrs = this.controlAttrs
-    if ('timeYearWidget,timeMonthWidget,timeDateWidget,textSelectWidget,numberSelectWidget'.indexOf(this.widget.name) !== -1) {
+    if (this.widget.isTimeWidget && this.widget.isTimeWidget()) {
       this.showParams = true
+      this.isRangeParamWidget = this.widget.isRangeParamWidget && this.widget.isRangeParamWidget()
     }
   },
   methods: {
+    changeDynamicParams(val, name) {
+      const start = this.attrs.startParameters ? JSON.parse(JSON.stringify(this.attrs.startParameters)) : []
+
+      const end = this.attrs.endParameters ? JSON.parse(JSON.stringify(this.attrs.endParameters)) : []
+      if (end?.length) {
+        end[0] += '_START_END_SPLIT'
+      }
+      this.attrs.parameters = [...new Set([...start, ...end])]
+    },
     sortChange(param) {
       this.element.options.attrs.sort = param
     },