diff --git a/core/frontend/src/components/widget/deWidget/DeDate.vue b/core/frontend/src/components/widget/deWidget/DeDate.vue
index aed842e12e..b027c2b814 100644
--- a/core/frontend/src/components/widget/deWidget/DeDate.vue
+++ b/core/frontend/src/components/widget/deWidget/DeDate.vue
@@ -1,16 +1,28 @@
 <template>
   <div class="date-picker-vant">
     <el-date-picker
-      v-if="element.options!== null && element.options.attrs!==null && show"
+      v-if="element.options !== null && element.options.attrs !== null && show"
       ref="dateRef"
       v-model="values"
       :popper-class="'coustom-date-picker' + ' ' + extPoperClass"
-      :class="{'show-required-tips': showRequiredTips}"
+      :class="{ 'show-required-tips': showRequiredTips }"
       :type="componentType"
       :range-separator="$t(element.options.attrs.rangeSeparator)"
-      :start-placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.startPlaceholder)"
-      :end-placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.endPlaceholder)"
-      :placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.placeholder)"
+      :start-placeholder="
+        showRequiredTips
+          ? $t('panel.required_tips')
+          : $t(element.options.attrs.startPlaceholder)
+      "
+      :end-placeholder="
+        showRequiredTips
+          ? $t('panel.required_tips')
+          : $t(element.options.attrs.endPlaceholder)
+      "
+      :placeholder="
+        showRequiredTips
+          ? $t('panel.required_tips')
+          : $t(element.options.attrs.placeholder)
+      "
       :append-to-body="inScreen"
       value-format="timestamp"
       :format="labelFormat"
@@ -31,7 +43,10 @@
     <div
       v-if="isMobileStatus && isRange"
       class="vant-mobile"
-      :class="['datetimerange', 'datetime', 'daterange'].includes(componentType) && 'wr50'"
+      :class="
+        ['datetimerange', 'datetime', 'daterange'].includes(componentType) &&
+        'wr50'
+      "
       @click="showPopupRight"
     />
     <van-popup
@@ -65,50 +80,58 @@
 </template>
 
 <script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
-import { timeSection } from '@/utils'
-import dayjs from 'dayjs'
-import { getThisStart, getLastStart, getAround } from '@/views/panel/filter/filterMain/time-format-dayjs.js'
-import bus from '@/utils/bus'
-import customInput from '@/components/widget/deWidget/customInput'
-import { dateMap, years, seconds } from '@/components/widget/deWidget/serviceNameFn'
-import { mapState } from 'vuex'
-import vanPopup from 'vant/lib/popup'
-import vanDatetimePicker from 'vant/lib/datetime-picker'
-import vanPicker from 'vant/lib/picker'
-import 'vant/lib/popup/style'
-import 'vant/lib/datetime-picker/style'
-import 'vant/lib/picker/style'
+import { ApplicationContext } from "@/utils/ApplicationContext";
+import { timeSection } from "@/utils";
+import dayjs from "dayjs";
+import {
+  getThisStart,
+  getLastStart,
+  getAround,
+} from "@/views/panel/filter/filterMain/time-format-dayjs.js";
+import bus from "@/utils/bus";
+import customInput from "@/components/widget/deWidget/customInput";
+import {
+  dateMap,
+  years,
+  seconds,
+} from "@/components/widget/deWidget/serviceNameFn";
+import { mapState } from "vuex";
+import vanPopup from "vant/lib/popup";
+import vanDatetimePicker from "vant/lib/datetime-picker";
+import vanPicker from "vant/lib/picker";
+import "vant/lib/popup/style";
+import "vant/lib/datetime-picker/style";
+import "vant/lib/picker/style";
 export default {
   components: { vanPopup, vanDatetimePicker, vanPicker },
   mixins: [customInput],
   props: {
     canvasId: {
       type: String,
-      required: true
+      required: true,
     },
     element: {
       type: Object,
-      default: null
+      default: null,
     },
     inDraw: {
       type: Boolean,
-      default: true
+      default: true,
     },
     inScreen: {
       type: Boolean,
       required: false,
-      default: true
+      default: true,
     },
     size: String,
     isRelation: {
       type: Boolean,
-      default: false
+      default: false,
     },
     terminal: {
       type: String,
-      default: 'pc'
-    }
+      default: "pc",
+    },
   },
   data() {
     return {
@@ -117,7 +140,7 @@ export default {
       minDate: new Date(1980, 0, 1),
       maxDate: new Date(2025, 10, 1),
       currentDate: new Date(),
-      operator: 'between',
+      operator: "between",
       defaultIndex: 2,
       columns: years,
       values: null,
@@ -126,531 +149,623 @@ export default {
       selectSecondInput: false,
       selectSecond: false,
       outTimer: null,
-      innerTimer: null
-    }
+      innerTimer: null,
+    };
   },
   computed: {
     isMobileStatus() {
-      return this.mobileStatus || this.terminal === 'mobile'
+      return this.mobileStatus || this.terminal === "mobile";
     },
     isRange() {
-      if (!this.isMobileStatus) return false
-      return ['datetimerange', 'daterange'].includes(this.componentType)
+      if (!this.isMobileStatus) return false;
+      return ["datetimerange", "daterange"].includes(this.componentType);
     },
     showdDatetimePicker() {
-      if (!this.isMobileStatus) return false
-      if (this.showSecond && this.selectSecond) return false
-      return this.componentTypeVant !== 'year'
+      if (!this.isMobileStatus) return false;
+      if (this.showSecond && this.selectSecond) return false;
+      return this.componentTypeVant !== "year";
     },
     showSecond() {
-      if (!this.isMobileStatus) return false
-      return this.labelFormat?.endsWith('ss')
+      if (!this.isMobileStatus) return false;
+      return this.labelFormat?.endsWith("ss");
     },
     componentTypeVant() {
-      if (!this.isMobileStatus) return ''
+      if (!this.isMobileStatus) return "";
       if (this.showSecond) {
-        return 'datetime'
+        return "datetime";
       }
-      if (this.labelFormat?.endsWith('mm')) {
-        return 'datetime'
+      if (this.labelFormat?.endsWith("mm")) {
+        return "datetime";
       }
-      if (this.labelFormat?.endsWith('HH')) {
-        return 'datehour'
+      if (this.labelFormat?.endsWith("HH")) {
+        return "datehour";
       }
-      return dateMap[this.componentType]
+      return dateMap[this.componentType];
     },
     extPoperClass() {
-      if (this.labelFormat && this.labelFormat.includes('HH') && !this.labelFormat.includes('HH:mm')) {
-        return 'de-no-minite'
+      if (
+        this.labelFormat &&
+        this.labelFormat.includes("HH") &&
+        !this.labelFormat.includes("HH:mm")
+      ) {
+        return "de-no-minite";
       }
-      return ''
+      return "";
     },
     defaultoptions() {
-      if (!this.element || !this.element.options || !this.element.options.attrs.default) return ''
-      return JSON.stringify(this.element.options.attrs.default)
+      if (
+        !this.element ||
+        !this.element.options ||
+        !this.element.options.attrs.default
+      )
+        return "";
+      return JSON.stringify(this.element.options.attrs.default);
     },
     defaultValueStr() {
-      if (!this.element || !this.element.options || !this.element.options.value) return ''
-      return this.element.options.value.toString()
+      if (!this.element || !this.element.options || !this.element.options.value)
+        return "";
+      return this.element.options.value.toString();
     },
     viewIds() {
-      if (!this.element || !this.element.options || !this.element.options.attrs.viewIds) return ''
-      return this.element.options.attrs.viewIds.toString()
+      if (
+        !this.element ||
+        !this.element.options ||
+        !this.element.options.attrs.viewIds
+      )
+        return "";
+      return this.element.options.attrs.viewIds.toString();
     },
     manualModify() {
-      return !!this.element.options.manualModify
+      return !!this.element.options.manualModify;
     },
     isTimeWidget() {
-      const widget = ApplicationContext.getService(this.element.serviceName)
-      return widget.isTimeWidget && widget.isTimeWidget()
+      const widget = ApplicationContext.getService(this.element.serviceName);
+      return widget.isTimeWidget && widget.isTimeWidget();
     },
     componentType() {
-      let result = this.element.options.attrs.type || 'date'
+      let result = this.element.options.attrs.type || "date";
       if (this.isTimeWidget && this.element.options.attrs.showTime) {
-        result = this.element.serviceName === 'timeDateWidget' ? 'datetime' : 'datetimerange'
+        result =
+          this.element.serviceName === "timeDateWidget"
+            ? "datetime"
+            : "datetimerange";
       }
-      return result
+      return result;
     },
     labelFormat() {
-      const result = 'yyyy-MM-dd'
-      if (this.isTimeWidget && this.element.options.attrs.showTime && this.element.options.attrs.accuracy) {
-        return result + ' ' + this.element.options.attrs.accuracy
+      const result = "yyyy-MM-dd";
+      if (
+        this.isTimeWidget &&
+        this.element.options.attrs.showTime &&
+        this.element.options.attrs.accuracy
+      ) {
+        return result + " " + this.element.options.attrs.accuracy;
       }
-      return null
+      return null;
     },
     pickerOptions() {
-      const widget = ApplicationContext.getService(this.element.serviceName)
-      if (this.element.options.attrs.type === 'daterange' && widget.shortcuts) {
-        const cuts = widget.shortcuts()
-        const result = cuts.map(cut => {
+      const widget = ApplicationContext.getService(this.element.serviceName);
+      if (this.element.options.attrs.type === "daterange" && widget.shortcuts) {
+        const cuts = widget.shortcuts();
+        const result = cuts.map((cut) => {
           return {
             text: this.$t(cut.text),
-            onClick: picker => {
-              const param = cut.callBack()
-              picker.$emit('pick', param)
-            }
-          }
-        })
+            onClick: (picker) => {
+              const param = cut.callBack();
+              this.startWindowTime = param[0]
+              const disabled = param.some(ele => {
+                return this.disabledDate(ele)
+              })
+              this.startWindowTime = 0
+              if (disabled) return
+              picker.$emit("pick", param);
+            },
+          };
+        });
         return {
           shortcuts: result,
           disabledDate: (val) => {
-            const timeStamp = +new Date(val)
-            if (!this.element.options.attrs.setTimeRange) {
-              return false
-            }
-            const {
-              intervalType,
-              regularOrTrends,
-              regularOrTrendsValue,
-              relativeToCurrent,
-              timeNum,
-              relativeToCurrentType,
-              around,
-              dynamicWindow,
-              maximumSingleQuery,
-              timeNumRange,
-              relativeToCurrentTypeRange,
-              aroundRange
-            } = this.element.options.attrs.timeRange || {}
-            let isDynamicWindowTime = false
-            if (this.startWindowTime && dynamicWindow) {
-              isDynamicWindowTime =
-                dayjs(this.startWindowTime)
-                  .add(maximumSingleQuery, 'day')
-                  .startOf('day')
-                  .valueOf() -
-                  1000 <
-                timeStamp
-            }
-            if (intervalType === 'none') {
-              if (dynamicWindow) return isDynamicWindowTime
-              return false
-            }
-            let startTime
-            if (relativeToCurrent === 'custom') {
-              startTime = getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-            } else {
-              switch (relativeToCurrent) {
-                case 'thisYear':
-                  startTime = getThisStart('year')
-                  break
-                case 'lastYear':
-                  startTime = getLastStart('year')
-                  break
-                case 'thisMonth':
-                  startTime = getThisStart('month')
-                  break
-                case 'lastMonth':
-                  startTime = getLastStart('month')
-                  break
-                case 'today':
-                  startTime = getThisStart('day')
-                  break
-                case 'yesterday':
-                  startTime = getLastStart('day')
-                  break
-                case 'monthBeginning':
-                  startTime = getThisStart('month')
-                  break
-                case 'yearBeginning':
-                  startTime = getThisStart('year')
-                  break
-
-                default:
-                  break
-              }
-            }
-            const startValue = regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
-
-            if (intervalType === 'start') {
-              return timeStamp < +new Date(startValue) || isDynamicWindowTime
-            }
-
-            if (intervalType === 'end') {
-              return timeStamp > +new Date(startValue) || isDynamicWindowTime
-            }
-
-            if (intervalType === 'timeInterval') {
-              const startTime =
-                regularOrTrends === 'fixed'
-                  ? regularOrTrendsValue[0]
-                  : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-              const endTime =
-                regularOrTrends === 'fixed'
-                  ? regularOrTrendsValue[1]
-                  : getAround(
-                    relativeToCurrentTypeRange,
-                    aroundRange === 'f' ? 'subtract' : 'add',
-                    timeNumRange
-                  )
-              return (
-                timeStamp < +new Date(startTime) - 1000 ||
-                timeStamp > +new Date(endTime) ||
-                isDynamicWindowTime
-              )
-            }
+            return this.disabledDate(val)
           },
           onPick: ({ minDate }) => {
-            this.startWindowTime = +new Date(minDate)
-          }
-        }
+            this.startWindowTime = +new Date(minDate);
+          },
+        };
       }
-      return null
+      return null;
     },
     defaultRangeTime() {
-      if (this.element.options.attrs.type === 'daterange' && this.element.options.attrs.showTime) {
-        return ['00:00:00', '23:59:59']
+      if (
+        this.element.options.attrs.type === "daterange" &&
+        this.element.options.attrs.showTime
+      ) {
+        return ["00:00:00", "23:59:59"];
       }
-      return null
+      return null;
     },
     showRequiredTips() {
-      return this.inDraw && this.element.options.attrs.required && (!this.values || this.values.length === 0)
+      return (
+        this.inDraw &&
+        this.element.options.attrs.required &&
+        (!this.values || this.values.length === 0)
+      );
     },
-    ...mapState([
-      'canvasStyleData',
-      'mobileStatus'
-    ])
-
+    ...mapState(["canvasStyleData", "mobileStatus"]),
   },
   watch: {
-    'values': function(val, old) {
+    values: function (val, old) {
       if (!this.inDraw) {
-        this.$emit('widget-value-changed', val)
+        this.$emit("widget-value-changed", val);
       }
     },
-    'viewIds': function(value, old) {
-      if (typeof value === 'undefined' || value === old) return
-      this.setCondition()
+    viewIds: function (value, old) {
+      if (typeof value === "undefined" || value === old) return;
+      this.setCondition();
     },
-    'defaultValueStr': function(value, old) {
+    defaultValueStr: function (value, old) {
       if (this.element.options.attrs.default.isDynamic) {
-        return
+        return;
       }
-      if (value === old) return
-      this.values = this.fillValueDerfault()
-      this.dateChange(value)
+      if (value === old) return;
+      this.values = this.fillValueDerfault();
+      this.dateChange(value);
     },
-    'defaultoptions': function(val, old) {
+    defaultoptions: function (val, old) {
       if (!this.element.options.attrs.default.isDynamic) {
-        this.values = this.fillValueDerfault(false)
-        this.dateChange(this.values)
-        return
+        this.values = this.fillValueDerfault(false);
+        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)
+      if (val === old) return;
+      const widget = ApplicationContext.getService(this.element.serviceName);
+      this.values = widget.dynamicDateFormNow(this.element);
+      this.dateChange(this.values);
     },
-    'labelFormat': function(val, old) {
+    labelFormat: function (val, old) {
       if (val !== old) {
-        this.show = false
+        this.show = false;
         this.$nextTick(() => {
-          this.show = true
-        })
+          this.show = true;
+        });
       }
-    }
+    },
   },
   created() {
-    this.loadInit()
+    this.loadInit();
     this.$nextTick(() => {
-      this.dynamicRefresh()
-    })
+      this.dynamicRefresh();
+    });
   },
   mounted() {
-    bus.$on('onScroll', this.onScroll)
+    bus.$on("onScroll", this.onScroll);
     if (this.inDraw) {
-      bus.$on('reset-default-value', this.resetDefaultValue)
+      bus.$on("reset-default-value", this.resetDefaultValue);
     }
   },
   beforeDestroy() {
-    this.clearTime()
-    bus.$off('onScroll', this.onScroll)
-    bus.$off('reset-default-value', this.resetDefaultValue)
+    this.clearTime();
+    bus.$off("onScroll", this.onScroll);
+    bus.$off("reset-default-value", this.resetDefaultValue);
   },
   methods: {
+    disabledDate(val) {
+      const timeStamp = +new Date(val);
+      if (!this.element.options.attrs.setTimeRange) {
+        return false;
+      }
+      const {
+        intervalType,
+        regularOrTrends,
+        regularOrTrendsValue,
+        relativeToCurrent,
+        timeNum,
+        relativeToCurrentType,
+        around,
+        dynamicWindow,
+        maximumSingleQuery,
+        timeNumRange,
+        relativeToCurrentTypeRange,
+        aroundRange,
+      } = this.element.options.attrs.timeRange || {};
+      let isDynamicWindowTime = false;
+      if (this.startWindowTime && dynamicWindow) {
+        isDynamicWindowTime =
+          dayjs(this.startWindowTime)
+            .add(maximumSingleQuery, "day")
+            .startOf("day")
+            .valueOf() -
+            1000 <
+          timeStamp;
+      }
+      if (intervalType === "none") {
+        if (dynamicWindow) return isDynamicWindowTime;
+        return false;
+      }
+      let startTime;
+      if (relativeToCurrent === "custom") {
+        startTime = getAround(
+          relativeToCurrentType,
+          around === "f" ? "subtract" : "add",
+          timeNum,
+        );
+      } else {
+        switch (relativeToCurrent) {
+          case "thisYear":
+            startTime = getThisStart("year");
+            break;
+          case "lastYear":
+            startTime = getLastStart("year");
+            break;
+          case "thisMonth":
+            startTime = getThisStart("month");
+            break;
+          case "lastMonth":
+            startTime = getLastStart("month");
+            break;
+          case "today":
+            startTime = getThisStart("day");
+            break;
+          case "yesterday":
+            startTime = getLastStart("day");
+            break;
+          case "monthBeginning":
+            startTime = getThisStart("month");
+            break;
+          case "yearBeginning":
+            startTime = getThisStart("year");
+            break;
+
+          default:
+            break;
+        }
+      }
+      const startValue =
+        regularOrTrends === "fixed" ? regularOrTrendsValue : startTime;
+
+      if (intervalType === "start") {
+        return timeStamp < +new Date(startValue) || isDynamicWindowTime;
+      }
+
+      if (intervalType === "end") {
+        return timeStamp > +new Date(startValue) || isDynamicWindowTime;
+      }
+
+      if (intervalType === "timeInterval") {
+        const startTime =
+          regularOrTrends === "fixed"
+            ? regularOrTrendsValue[0]
+            : getAround(
+                relativeToCurrentType,
+                around === "f" ? "subtract" : "add",
+                timeNum,
+              );
+        const endTime =
+          regularOrTrends === "fixed"
+            ? regularOrTrendsValue[1]
+            : getAround(
+                relativeToCurrentTypeRange,
+                aroundRange === "f" ? "subtract" : "add",
+                timeNumRange,
+              );
+        return (
+          timeStamp < +new Date(startTime) - 1000 ||
+          timeStamp > +new Date(endTime) ||
+          isDynamicWindowTime
+        );
+      }
+    },
     showPopupRight() {
       // eslint-disable-next-line
-      const [_, end] = this.values || []
-      !!end && (this.currentDate = new Date(end))
-      this.selectSecondInput = true
-      this.showDate = true
+      const [_, end] = this.values || [];
+      !!end && (this.currentDate = new Date(end));
+      this.selectSecondInput = true;
+      this.showDate = true;
     },
     cancel() {
-      this.showDate = false
+      this.showDate = false;
     },
     confirm() {
-      this.setArrValue()
+      this.setArrValue();
       if (this.showSecond) {
-        this.columns = seconds
-        this.selectSecond = true
+        this.columns = seconds;
+        this.selectSecond = true;
       }
-      if (this.selectSecond || this.componentTypeVant === 'year') {
-        return
+      if (this.selectSecond || this.componentTypeVant === "year") {
+        return;
       }
-      this.showDate = false
-      this.mobileDateChange()
+      this.showDate = false;
+      this.mobileDateChange();
     },
     onCancel() {
-      this.showDate = false
+      this.showDate = false;
       if (this.showSecond) {
-        this.selectSecond = false
+        this.selectSecond = false;
       }
     },
     setArrValue(val) {
       if (!this.isRange) {
         if (this.selectSecond) {
-          this.values = this.values + val * 1000
-          return
+          this.values = this.values + val * 1000;
+          return;
         }
-        this.values = val ? +new Date(val) : +new Date(this.currentDate)
-        return
+        this.values = val ? +new Date(val) : +new Date(this.currentDate);
+        return;
       }
-      const [start, end] = this.values || []
+      const [start, end] = this.values || [];
       if (this.selectSecond) {
         if (this.selectSecondInput) {
-          this.values = [start, +new Date(this.currentDate) + val * 1000]
+          this.values = [start, +new Date(this.currentDate) + val * 1000];
         } else {
-          this.values = [+new Date(this.currentDate) + val * 1000, end]
+          this.values = [+new Date(this.currentDate) + val * 1000, end];
         }
-        return
+        return;
       }
       if (this.selectSecondInput) {
-        this.values = [start, +new Date(this.currentDate)]
+        this.values = [start, +new Date(this.currentDate)];
       } else {
-        this.values = [+new Date(this.currentDate), end]
+        this.values = [+new Date(this.currentDate), end];
       }
     },
     onConfirm(val) {
-      this.showDate = false
-      this.setArrValue(val)
+      this.showDate = false;
+      this.setArrValue(val);
       if (this.showSecond) {
-        this.columns = years
-        this.selectSecond = false
+        this.columns = years;
+        this.selectSecond = false;
       }
-      this.mobileDateChange()
+      this.mobileDateChange();
     },
     mobileDateChange() {
       if (this.isRange) {
-        const [start, end] = this.values || []
-        if (!start || !end) return
+        const [start, end] = this.values || [];
+        if (!start || !end) return;
       }
-      this.dateChange(this.values)
+      this.dateChange(this.values);
     },
     showPopup() {
       if (this.isRange) {
-        const [start] = this.values || []
-        !!start && (this.currentDate = new Date(start))
+        const [start] = this.values || [];
+        !!start && (this.currentDate = new Date(start));
       } else {
-        this.currentDate = new Date(this.values)
-        if (this.componentTypeVant === 'year') {
-          this.defaultIndex = years.findIndex(ele => `${this.currentDate.getFullYear()}` === ele)
+        this.currentDate = new Date(this.values);
+        if (this.componentTypeVant === "year") {
+          this.defaultIndex = years.findIndex(
+            (ele) => `${this.currentDate.getFullYear()}` === ele,
+          );
         }
       }
-      this.selectSecondInput = false
-      this.showDate = true
+      this.selectSecondInput = false;
+      this.showDate = true;
     },
     loadInit() {
-      this.clearTime()
-      const existLastValidFilters = this.$store.state.lastValidFilters && this.$store.state.lastValidFilters[this.element.id]
-      if (this.element.options.attrs.default?.isDynamic && !existLastValidFilters) {
-        return this.refreshHandler()
+      this.clearTime();
+      const existLastValidFilters =
+        this.$store.state.lastValidFilters &&
+        this.$store.state.lastValidFilters[this.element.id];
+      if (
+        this.element.options.attrs.default?.isDynamic &&
+        !existLastValidFilters
+      ) {
+        return this.refreshHandler();
       }
       if (this.element.options.value || existLastValidFilters) {
-        this.values = this.fillValueDerfault()
-        this.dateChange(this.values)
+        this.values = this.fillValueDerfault();
+        this.dateChange(this.values);
       }
     },
     refreshHandler() {
       if (this.element.options.attrs.default?.isDynamic) {
-        const widget = ApplicationContext.getService(this.element.serviceName)
-        this.values = widget.dynamicDateFormNow(this.element)
-        this.dateChange(this.values)
-        return true
+        const widget = ApplicationContext.getService(this.element.serviceName);
+        this.values = widget.dynamicDateFormNow(this.element);
+        this.dateChange(this.values);
+        return true;
       }
-      return false
+      return false;
     },
     clearTime() {
       if (this.outTimer) {
-        clearTimeout(this.outTimer)
-        this.outTimer = null
+        clearTimeout(this.outTimer);
+        this.outTimer = null;
       }
       if (this.innerTimer) {
-        clearInterval(this.innerTimer)
-        this.innerTimer = null
+        clearInterval(this.innerTimer);
+        this.innerTimer = null;
       }
     },
     dynamicRefresh() {
       if (this.inDraw && this.element.options.attrs.default?.isDynamic) {
-        const nowDate = new Date()
-        const nowTime = nowDate.getTime()
-        const tomorrow = new Date(`${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${nowDate.getDate() + 1} 00:00:01`)
-        const tomorrowTime = tomorrow.getTime()
-        this.clearTime()
+        const nowDate = new Date();
+        const nowTime = nowDate.getTime();
+        const tomorrow = new Date(
+          `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${
+            nowDate.getDate() + 1
+          } 00:00:01`,
+        );
+        const tomorrowTime = tomorrow.getTime();
+        this.clearTime();
         this.outTimer = setTimeout(() => {
           if (this.inDraw) {
-            this.refreshHandler()
+            this.refreshHandler();
           }
-          this.innerTimer = setInterval(() => {
-            if (this.inDraw) {
-              this.refreshHandler()
-            }
-          }, 24 * 3600 * 1000)
-        }, tomorrowTime - nowTime)
+          this.innerTimer = setInterval(
+            () => {
+              if (this.inDraw) {
+                this.refreshHandler();
+              }
+            },
+            24 * 3600 * 1000,
+          );
+        }, tomorrowTime - nowTime);
       }
     },
     clearHandler() {
-      this.values = null
+      this.values = null;
     },
     onScroll() {
       if (this.onFocus) {
-        this.$refs.dateRef.hidePicker()
+        this.$refs.dateRef.hidePicker();
       }
     },
     textSame(str1, str2) {
       if (str1 === null && str2 === null) {
-        return true
+        return true;
       }
-      if (str1 !== null && str2 !== null && typeof str1 !== 'undefined' && typeof str2 !== 'undefined') {
-        return str1.toString() === str2.toString()
+      if (
+        str1 !== null &&
+        str2 !== null &&
+        typeof str1 !== "undefined" &&
+        typeof str2 !== "undefined"
+      ) {
+        return str1.toString() === str2.toString();
       }
-      return false
+      return false;
     },
     resetDefaultValue(ele) {
-      const id = ele.id
-      const eleVal = ele.options.value.toString()
-      if (this.inDraw && this.manualModify && this.element.id === id && !this.textSame(this.values, eleVal) && this.textSame(this.defaultValueStr, eleVal)) {
+      const id = ele.id;
+      const eleVal = ele.options.value.toString();
+      if (
+        this.inDraw &&
+        this.manualModify &&
+        this.element.id === id &&
+        !this.textSame(this.values, eleVal) &&
+        this.textSame(this.defaultValueStr, eleVal)
+      ) {
         if (!this.element.options.attrs.default.isDynamic) {
-          this.values = this.fillValueDerfault()
-          this.dateChange(this.values)
-          return
+          this.values = this.fillValueDerfault();
+          this.dateChange(this.values);
+          return;
         }
-        const widget = ApplicationContext.getService(this.element.serviceName)
-        this.values = widget.dynamicDateFormNow(this.element)
-        this.dateChange(this.values)
+        const widget = ApplicationContext.getService(this.element.serviceName);
+        this.values = widget.dynamicDateFormNow(this.element);
+        this.dateChange(this.values);
       }
     },
     onBlur() {
-      this.startWindowTime = 0
-      this.onFocus = false
+      this.startWindowTime = 0;
+      this.onFocus = false;
     },
     toFocus() {
-      this.onFocus = true
+      this.onFocus = true;
       this.$nextTick(() => {
-        this.handleCoustomStyle()
-      })
+        this.handleCoustomStyle();
+      });
     },
     search() {
-      this.setCondition()
+      this.setCondition();
     },
     getCondition() {
       const param = {
         canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
-        operator: this.operator
-      }
-      param.value = this.formatValues(param.value)
-      return param
+        operator: this.operator,
+      };
+      param.value = this.formatValues(param.value);
+      return param;
     },
     setCondition() {
       if (this.showRequiredTips) {
-        return
+        return;
       }
-      const param = this.getCondition()
-      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
+      const param = this.getCondition();
+      !this.isRelation &&
+        this.inDraw &&
+        this.$store.commit("addViewFilter", param);
     },
     dateChange(value) {
       if (!this.inDraw) {
         if (value === null) {
-          this.element.options.value = ''
+          this.element.options.value = "";
         } else {
-          this.element.options.value = Array.isArray(value) ? value.join() : value.toString()
+          this.element.options.value = Array.isArray(value)
+            ? value.join()
+            : value.toString();
         }
-        this.element.options.manualModify = false
+        this.element.options.manualModify = false;
       } else {
-        this.element.options.manualModify = true
+        this.element.options.manualModify = true;
         if (!this.showRequiredTips) {
-          this.$store.commit('setLastValidFilters', {
+          this.$store.commit("setLastValidFilters", {
             componentId: this.element.id,
-            val: (this.values && Array.isArray(this.values)) ? this.values.join(',') : this.values
-          })
+            val:
+              this.values && Array.isArray(this.values)
+                ? this.values.join(",")
+                : this.values,
+          });
         }
       }
-      this.setCondition()
+      this.setCondition();
     },
     formatFilterValue() {
-      if (this.values === null) return []
-      if (Array.isArray(this.values)) return this.values
-      return [this.values]
+      if (this.values === null) return [];
+      if (Array.isArray(this.values)) return this.values;
+      return [this.values];
     },
     formatValues(values) {
       if (!values || values.length === 0) {
-        return []
+        return [];
       }
-      if (this.element.options.attrs.type === 'daterange') {
+      if (this.element.options.attrs.type === "daterange") {
         if (values.length !== 2) {
-          return null
+          return null;
         }
-        let start = values[0]
-        let end = values[1]
-        start = timeSection(start, 'datetime', this.labelFormat)[0]
-        end = timeSection(end, 'datetime', this.labelFormat)[1]
+        let start = values[0];
+        let end = values[1];
+        start = timeSection(start, "datetime", this.labelFormat)[0];
+        end = timeSection(end, "datetime", this.labelFormat)[1];
 
-        const results = [start, end]
-        return results
+        const results = [start, end];
+        return results;
       } else {
-        const value = values[0]
-        return timeSection(parseFloat(value), this.componentType || this.element.options.attrs.type, this.labelFormat)
+        const value = values[0];
+        return timeSection(
+          parseFloat(value),
+          this.componentType || this.element.options.attrs.type,
+          this.labelFormat,
+        );
       }
     },
     fillValueDerfault(useLastFilter = true) {
-      let defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
+      let defaultV =
+        this.element.options.value === null
+          ? ""
+          : this.element.options.value.toString();
       if (this.inDraw && useLastFilter) {
-        let lastFilters = null
+        let lastFilters = null;
         if (this.$store.state.lastValidFilters) {
-          lastFilters = this.$store.state.lastValidFilters[this.element.id]
+          lastFilters = this.$store.state.lastValidFilters[this.element.id];
           if (lastFilters) {
-            defaultV = (lastFilters.val === null || typeof lastFilters.val === 'undefined') ? '' : lastFilters.val.toString()
+            defaultV =
+              lastFilters.val === null || typeof lastFilters.val === "undefined"
+                ? ""
+                : lastFilters.val.toString();
           }
         }
       }
-      if (this.element.options.attrs.type === 'daterange') {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
-          return []
+      if (this.element.options.attrs.type === "daterange") {
+        if (
+          defaultV === null ||
+          typeof defaultV === "undefined" ||
+          defaultV === "" ||
+          defaultV === "[object Object]"
+        ) {
+          return [];
         }
-        return defaultV.split(',').map(item => parseFloat(item))
+        return defaultV.split(",").map((item) => parseFloat(item));
       } else {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
-          return null
+        if (
+          defaultV === null ||
+          typeof defaultV === "undefined" ||
+          defaultV === "" ||
+          defaultV === "[object Object]"
+        ) {
+          return null;
         }
-        return parseFloat(defaultV.split(',')[0])
+        return parseFloat(defaultV.split(",")[0]);
       }
-    }
-  }
-}
-
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .show-required-tips {
@@ -665,17 +780,18 @@ export default {
     color: #ff0000 !important;
   }
 }
-.show-required-tips ::v-deep .el-input__inner, input {
+.show-required-tips ::v-deep .el-input__inner,
+input {
   border-color: #ff0000 !important;
 }
 
-.show-required-tips ::v-deep .el-input__inner, input::placeholder {
+.show-required-tips ::v-deep .el-input__inner,
+input::placeholder {
   color: #ff0000 !important;
 }
 .show-required-tips ::v-deep i {
   color: #ff0000 !important;
 }
-
 </style>
 <style lang="scss">
 .date-picker-vant {
@@ -703,10 +819,10 @@ export default {
 .coustom-date-picker {
   right: 0px;
   border: 1px solid var(--BrDateColor, #dfe4ed) !important;
-  background: var(--BgDateColor, #FFFFFF) !important;
+  background: var(--BgDateColor, #ffffff) !important;
 
   .el-picker-panel__sidebar {
-    background: var(--BgDateColor, #FFFFFF) !important;
+    background: var(--BgDateColor, #ffffff) !important;
     border-right: 1px solid var(--BrDateColor, #dfe4ed) !important;
 
     .el-picker-panel__shortcut {
@@ -721,7 +837,7 @@ export default {
 
   .el-picker-panel__footer {
     border-top: 1px solid var(--BrDateColor, #dfe4ed) !important;
-    background: var(--BgDateColor, #FFFFFF) !important;
+    background: var(--BgDateColor, #ffffff) !important;
   }
 
   .el-date-range-picker__time-picker-wrap,
@@ -729,13 +845,13 @@ export default {
     .el-input__inner {
       border: 1px solid var(--BrDateColor, #dfe4ed) !important;
       color: var(--DateColor, #606266);
-      background: var(--BgDateColor, #FFFFFF) !important;
+      background: var(--BgDateColor, #ffffff) !important;
     }
   }
 
   .el-picker-panel__link-btn:nth-child(2) {
     color: var(--DateColor, #409eff);
-    background: var(--BgDateColor, #FFFFFF) !important;
+    background: var(--BgDateColor, #ffffff) !important;
     border: 1px solid var(--BrDateColor, #dfe4ed) !important;
   }
 
@@ -765,14 +881,13 @@ export default {
   .el-picker-panel__icon-btn,
   .el-date-picker__header-label {
     color: var(--DateColor, #606266);
-
   }
 
   .el-month-table td.current:not(.disabled) .cell,
   .el-month-table td.today:not(.disabled) .cell,
   .el-year-table td.current:not(.disabled) .cell,
   .el-year-table td.today:not(.disabled) .cell {
-    color: #409EFF;
+    color: #409eff;
   }
 }
 
diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 8da910de76..1b6da1b9cd 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -42,6 +42,9 @@ export default {
     }
   },
   time: {
+    end_time_start_time: 'The end time must be greater than or equal to the start time',
+    passing_parameters: 'Empty data does not support passing parameters',
+    not_supported: 'After binding parameters, passing empty data is not supported',
     set_time_filtering_range: 'Set time filtering range',
     filter_range: 'The default value is outside the date filtering range, please reset it!',
     interval_type: 'Interval type',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 4d431ed5ef..eaf4026aaa 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -42,6 +42,9 @@ export default {
     }
   },
   time: {
+    end_time_start_time: '結束時間必須大於或等於開始時間',
+    passing_parameters: '空數據不支持傳參數',
+    not_supported: '綁定參數後，不支持傳空數據',
     set_time_filtering_range: '設定時間篩選範圍',
     filter_range: '預設值超出日期篩選範圍內，請重新設定！',
     interval_type: '區間類型',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index bce38bb4e7..cafbb8d4d4 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -46,6 +46,9 @@ export default {
     upload_limit_size: '图片大小不超过'
   },
   time: {
+    end_time_start_time: '结束时间必须大于或等于开始时间',
+    passing_parameters: '空数据不支持传参数',
+    not_supported: '空数据不支持传参数',
     set_time_filtering_range: '设置时间筛选范围',
     filter_range: '默认值超出日期筛选范围内，请重新设置!',
     interval_type: '区间类型',
diff --git a/core/frontend/src/views/dataFilling/form/create.vue b/core/frontend/src/views/dataFilling/form/create.vue
index f0a80a1086..1bb352e0f2 100644
--- a/core/frontend/src/views/dataFilling/form/create.vue
+++ b/core/frontend/src/views/dataFilling/form/create.vue
@@ -557,6 +557,7 @@ export default {
                     <el-input
                       v-if="item.type === 'input' && item.settings.inputType !== 'number'"
                       v-model="item.value"
+                      :key="item.id + item.settings.inputType"
                       :type="item.settings.inputType"
                       :required="item.settings.required"
                       :placeholder="item.settings.placeholder"
@@ -565,6 +566,7 @@ export default {
                     <el-input-number
                       v-if="item.type === 'input' && item.settings.inputType === 'number'"
                       v-model="item.value"
+                      :key="item.id + item.settings.inputType"
                       :required="item.settings.required"
                       :placeholder="item.settings.placeholder"
                       style="width: 100%"
@@ -574,6 +576,7 @@ export default {
                     <el-input
                       v-else-if="item.type === 'textarea'"
                       v-model="item.value"
+                      :key="item.id + 'textarea'"
                       type="textarea"
                       :required="item.settings.required"
                       :placeholder="item.settings.placeholder"
@@ -582,6 +585,7 @@ export default {
                     <el-select
                       v-else-if="item.type === 'select'"
                       v-model="item.value"
+                      :key="item.id + 'select'"
                       :required="item.settings.required"
                       :placeholder="item.settings.placeholder"
                       style="width: 100%"
@@ -599,6 +603,7 @@ export default {
                     <el-radio-group
                       v-else-if="item.type === 'radio'"
                       v-model="item.value"
+                      :key="item.id + 'radio'"
                       :required="item.settings.required"
                       style="width: 100%"
                       size="small"
@@ -613,6 +618,7 @@ export default {
                     <el-checkbox-group
                       v-else-if="item.type === 'checkbox'"
                       v-model="item.value"
+                      :key="item.id + 'checkbox'"
                       :required="item.settings.required"
                       size="small"
                     >
@@ -626,6 +632,7 @@ export default {
                     <el-date-picker
                       v-else-if="item.type === 'date' && !item.settings.enableTime"
                       v-model="item.value"
+                      :key="item.id + 'date'"
                       :required="item.settings.required"
                       type="date"
                       :placeholder="item.settings.placeholder"
@@ -635,6 +642,7 @@ export default {
                     <el-date-picker
                       v-else-if="item.type === 'date' && item.settings.enableTime"
                       v-model="item.value"
+                      :key="item.id + 'dateEnableTime'"
                       :required="item.settings.required"
                       type="datetime"
                       :placeholder="item.settings.placeholder"
@@ -645,6 +653,7 @@ export default {
                       v-else-if="item.type === 'dateRange' && !item.settings.enableTime"
                       v-model="item.value"
                       :required="item.settings.required"
+                      :key="item.id + 'dateRangeEnableTime'"
                       type="daterange"
                       :range-separator="item.settings.rangeSeparator"
                       :start-placeholder="item.settings.startPlaceholder"
@@ -656,6 +665,7 @@ export default {
                       v-else-if="item.type === 'dateRange' && item.settings.enableTime"
                       v-model="item.value"
                       :required="item.settings.required"
+                      :key="item.id + 'datetimerangeRangeEnableTime'"
                       type="datetimerange"
                       :range-separator="item.settings.rangeSeparator"
                       :start-placeholder="item.settings.startPlaceholder"
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 97c5a8bc6e..86d28efa15 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -122,11 +122,21 @@
               </div>
             </template>
             <div class="check-item">
-              <el-checkbox
-                v-if="widget.name && ['textSelectWidget', 'textSelectGridWidget'].includes(widget.name)"
-                v-model="attrs.showEmpty"
-              >{{ $t('panel.show_empty') }}
-              </el-checkbox>
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="$t('time.passing_parameters')"
+                placement="top"
+                manual
+                v-model="visibleShowEmpty"
+              >
+                <el-checkbox
+                  v-if="widget.name && ['textSelectWidget', 'textSelectGridWidget'].includes(widget.name)"
+                  :disabled="attrs.enableParameters"
+                  v-model="attrs.showEmpty"
+                ><span @mouseenter="handlerVisibleShowEmpty" @mouseleave="handlerVisibleShowEmpty">{{ $t('panel.show_empty') }}</span>
+                </el-checkbox>
+              </el-tooltip>
             </div>
             <div class="check-item">
               <el-checkbox
@@ -184,13 +194,22 @@
               </el-popover>
             </div>
             <div class="check-item">
-              <el-checkbox
-                v-if="showParams"
-                v-model="attrs.enableParameters"
-                @change="enableParametersChange"
-              ><span>
-                {{ $t('panel.binding_parameters') }} </span>
-              </el-checkbox>
+              <el-tooltip
+                manual
+                v-model="visibleEnableParameters"
+              >
+              <template #content>
+                <span>{{ $t('time.not_supported') }}</span>
+              </template>
+                <el-checkbox
+                  v-if="showParams"
+                  :disabled="attrs.showEmpty"
+                  v-model="attrs.enableParameters"
+                  @change="enableParametersChange"
+                ><span @mouseenter="handlerVisibleEnableParameters" @mouseleave="handlerVisibleEnableParameters">
+                  {{ $t('panel.binding_parameters') }} </span>
+                </el-checkbox>
+              </el-tooltip>
               <el-popover
                 placement="bottom-end"
                 :disabled="!attrs.enableParameters"
@@ -320,6 +339,8 @@ export default {
         { label: this.$t('dataset.start_time'), name: 'start' },
         { label: this.$t('dataset.end_time'), name: 'end' }
       ],
+      visibleEnableParameters: false,
+      visibleShowEmpty: false,
       showParams: false,
       isRangeParamWidget: false,
       attrs: null,
@@ -422,6 +443,16 @@ export default {
     }
   },
   methods: {
+    handlerVisibleEnableParameters() {
+      if (this.attrs.showEmpty) {
+        this.visibleEnableParameters = !this.visibleEnableParameters
+      }
+    },
+    handlerVisibleShowEmpty() {
+      if (this.attrs.enableParameters) {
+        this.visibleShowEmpty = !this.visibleShowEmpty
+      }
+    },
     changeDynamicParams(val, name) {
       const start = this.attrs.startParameters ? JSON.parse(JSON.stringify(this.attrs.startParameters)) : []
 
diff --git a/core/frontend/src/views/panel/filter/filterMain/RangeFilterTime.vue b/core/frontend/src/views/panel/filter/filterMain/RangeFilterTime.vue
index ce5ce4ae6e..ba2d0d1775 100644
--- a/core/frontend/src/views/panel/filter/filterMain/RangeFilterTime.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/RangeFilterTime.vue
@@ -300,6 +300,7 @@ export default {
         relativeToCurrentType,
         around,
         intervalType,
+        relativeToCurrent,
         timeNumRange,
         relativeToCurrentTypeRange,
         aroundRange,
@@ -307,6 +308,7 @@ export default {
       return {
         timeNum,
         relativeToCurrentType,
+        relativeToCurrent,
         around,
         intervalType,
         timeNumRange,
@@ -421,10 +423,36 @@ export default {
       }
     },
     closeFilter() {
-      this.timeRange = cloneDeep(defaultObj);
+      this.timeRange = cloneDeep(this.timeRangeData);
       this.$emit("changeData", null);
     },
     changeFilter() {
+      const {
+        timeNum,
+        relativeToCurrentType,
+        around,
+        intervalType,
+        timeNumRange,
+        regularOrTrends,
+        relativeToCurrentTypeRange,
+        aroundRange,
+      } = this.timeRange;
+      if (intervalType === "timeInterval" && regularOrTrends === 'dynamic') {
+        const startTime = getAround(
+          relativeToCurrentType,
+          around === "f" ? "subtract" : "add",
+          timeNum,
+        );
+        const endTime = getAround(
+          relativeToCurrentTypeRange,
+          aroundRange === "f" ? "subtract" : "add",
+          timeNumRange,
+        );
+        if (+endTime < +startTime) {
+          this.$message.error(this.$t('time.end_time_start_time'));
+          return;
+        }
+      }
       this.$emit("changeData", cloneDeep(this.timeRange));
     },
   },