diff --git a/core/frontend/src/components/widget/deWidget/DeDate.vue b/core/frontend/src/components/widget/deWidget/DeDate.vue
index 49716a08e4..b3dc3e800c 100644
--- a/core/frontend/src/components/widget/deWidget/DeDate.vue
+++ b/core/frontend/src/components/widget/deWidget/DeDate.vue
@@ -45,7 +45,7 @@
       class="vant-mobile"
       :class="
         ['datetimerange', 'datetime', 'daterange'].includes(componentType) &&
-          'wr50'
+        'wr50'
       "
       @click="showPopupRight"
     />
@@ -80,58 +80,58 @@
 </template>
 
 <script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
-import { timeSection } from '@/utils'
-import dayjs from 'dayjs'
+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'
+  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'
+  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 {
@@ -140,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,
@@ -149,212 +149,222 @@ 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')
+        this.labelFormat.includes("HH") &&
+        !this.labelFormat.includes("HH:mm")
       ) {
-        return 'de-no-minite'
+        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)
+      ) {
+        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()
+      ) {
+        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'
+          this.element.serviceName === "timeDateWidget"
+            ? "datetime"
+            : "datetimerange";
       }
-      return result
+      return result;
     },
     labelFormat() {
-      const result = 'yyyy-MM-dd'
+      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 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 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()
-              this.startWindowTime = param[0]
-              const disabled = param.some(ele => {
-                return this.disabledDate(ele - 1000)
-              })
-              this.startWindowTime = 0
-              if (disabled) return
-              picker.$emit('pick', param)
-            }
-          }
-        })
+              const param = cut.callBack();
+              this.startWindowTime = param[0];
+              const disabled = param.some((ele) => {
+                return this.disabledDate(ele - 1000);
+              });
+              this.startWindowTime = 0;
+              if (disabled) return;
+              picker.$emit("pick", param);
+            },
+          };
+        });
         return {
           shortcuts: result,
           disabledDate: (val) => {
-            return this.disabledDate(val)
+            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.type === "daterange" &&
         this.element.options.attrs.showTime
       ) {
-        return ['00:00:00', '23:59:59']
+        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)
-      )
+      );
     },
-    ...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);
     }
-    const _this = this
-    window.addEventListener('message', function(event) {
-      if (event.data === 'closeFilterComponent') {
-        _this.$refs.dateRef.hidePicker()
+    const _this = this;
+    window.addEventListener("message", function (event) {
+      if (event.data === "closeFilterComponent") {
+        _this.$refs.dateRef.hidePicker();
       }
-    })
+    });
   },
   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)
+      const timeStamp = +new Date(val);
       if (!this.element.options.attrs.setTimeRange) {
-        return false
+        return false;
       }
       const {
         intervalType,
@@ -368,264 +378,264 @@ export default {
         maximumSingleQuery,
         timeNumRange,
         relativeToCurrentTypeRange,
-        aroundRange
-      } = this.element.options.attrs.timeRange || {}
-      let isDynamicWindowTime = false
+        aroundRange,
+      } = this.element.options.attrs.timeRange || {};
+      let isDynamicWindowTime = false;
       if (this.startWindowTime && dynamicWindow) {
         isDynamicWindowTime =
           dayjs(this.startWindowTime)
-            .add(maximumSingleQuery, 'day')
-            .startOf('day')
+            .add(maximumSingleQuery, "day")
+            .startOf("day")
             .valueOf() -
             1000 <
-          timeStamp
+          timeStamp;
       }
-      if (intervalType === 'none') {
-        if (dynamicWindow) return isDynamicWindowTime
-        return false
+      if (intervalType === "none") {
+        if (dynamicWindow) return isDynamicWindowTime;
+        return false;
       }
-      let startTime
-      if (relativeToCurrent === 'custom') {
+      let startTime;
+      if (relativeToCurrent === "custom") {
         startTime = getAround(
           relativeToCurrentType,
-          around === 'f' ? 'subtract' : 'add',
-          timeNum
-        )
+          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
+          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
+            break;
         }
       }
       const startValue =
-        regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
+        regularOrTrends === "fixed" ? regularOrTrendsValue : startTime;
 
-      if (intervalType === 'start') {
-        return timeStamp < +new Date(startValue) || isDynamicWindowTime
+      if (intervalType === "start") {
+        return timeStamp < +new Date(startValue) || isDynamicWindowTime;
       }
 
-      if (intervalType === 'end') {
-        return timeStamp > +new Date(startValue) || isDynamicWindowTime
+      if (intervalType === "end") {
+        return timeStamp > +new Date(startValue) || isDynamicWindowTime;
       }
 
-      if (intervalType === 'timeInterval') {
+      if (intervalType === "timeInterval") {
         const startTime =
-          regularOrTrends === 'fixed'
+          regularOrTrends === "fixed"
             ? regularOrTrendsValue[0]
             : getAround(
-              relativeToCurrentType,
-              around === 'f' ? 'subtract' : 'add',
-              timeNum
-            )
+                relativeToCurrentType,
+                around === "f" ? "subtract" : "add",
+                timeNum,
+              );
         const endTime =
-          regularOrTrends === 'fixed'
+          regularOrTrends === "fixed"
             ? regularOrTrendsValue[1]
             : getAround(
-              relativeToCurrentTypeRange,
-              aroundRange === 'f' ? 'subtract' : 'add',
-              timeNumRange
-            )
+                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
+      this.currentDate = new Date(end || new Date());
+      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 || [];
+        this.currentDate = new Date(start || new Date());
       } else {
-        this.currentDate = new Date(this.values)
-        if (this.componentTypeVant === 'year') {
+        this.currentDate = new Date(this.values || new Date());
+        if (this.componentTypeVant === "year") {
           this.defaultIndex = years.findIndex(
-            (ele) => `${this.currentDate.getFullYear()}` === ele
-          )
+            (ele) => `${this.currentDate.getFullYear()}` === ele,
+          );
         }
       }
-      this.selectSecondInput = false
-      this.showDate = true
+      this.selectSecondInput = false;
+      this.showDate = true;
     },
     loadInit() {
-      this.clearTime()
+      this.clearTime();
       const existLastValidFilters =
         this.$store.state.lastValidFilters &&
-        this.$store.state.lastValidFilters[this.element.id]
+        this.$store.state.lastValidFilters[this.element.id];
       if (
         this.element.options.attrs.default?.isDynamic &&
         !existLastValidFilters
       ) {
-        return this.refreshHandler()
+        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 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()
+          } 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()
+                this.refreshHandler();
               }
             },
-            24 * 3600 * 1000
-          )
-        }, tomorrowTime - nowTime)
+            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'
+        typeof str1 !== "undefined" &&
+        typeof str2 !== "undefined"
       ) {
-        return str1.toString() === str2.toString()
+        return str1.toString() === str2.toString();
       }
-      return false
+      return false;
     },
     resetDefaultValue(ele) {
-      const id = ele.id
-      const eleVal = ele.options.value.toString()
+      const id = ele.id;
+      const eleVal = ele.options.value.toString();
       if (
         this.inDraw &&
         this.manualModify &&
@@ -634,141 +644,141 @@ export default {
         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()
+      const param = this.getCondition();
       !this.isRelation &&
         this.inDraw &&
-        this.$store.commit('addViewFilter', param)
+        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()
+            : 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
-          })
+                ? 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]
+        const value = values[0];
         return timeSection(
           parseFloat(value),
           this.componentType || this.element.options.attrs.type,
-          this.labelFormat
-        )
+          this.labelFormat,
+        );
       }
     },
     fillValueDerfault(useLastFilter = true) {
       let defaultV =
         this.element.options.value === null
-          ? ''
-          : this.element.options.value.toString()
+          ? ""
+          : 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()
+              lastFilters.val === null || typeof lastFilters.val === "undefined"
+                ? ""
+                : lastFilters.val.toString();
           }
         }
       }
-      if (this.element.options.attrs.type === 'daterange') {
+      if (this.element.options.attrs.type === "daterange") {
         if (
           defaultV === null ||
-          typeof defaultV === 'undefined' ||
-          defaultV === '' ||
-          defaultV === '[object Object]'
+          typeof defaultV === "undefined" ||
+          defaultV === "" ||
+          defaultV === "[object Object]"
         ) {
-          return []
+          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]'
+          typeof defaultV === "undefined" ||
+          defaultV === "" ||
+          defaultV === "[object Object]"
         ) {
-          return null
+          return null;
         }
-        return parseFloat(defaultV.split(',')[0])
+        return parseFloat(defaultV.split(",")[0]);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .show-required-tips {