Merge pull request dataease#3688 from dataease/pr@dev@feat_date_range…

…_dynamic_time

feat(过滤器): 日期范围过滤器动态时间可设置固定时分秒

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

@@ -222,6 +222,10 @@ class TimeDateRangeServiceImpl extends WidgetService {
     }
   }
   dynamicDateFormNow(element) {
+    const values = this.dynamicDateFormNowProxy(element)
+    return this.formatDynamicTimes(values, element)
+  }
+  dynamicDateFormNowProxy(element) {
     if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
 
     if (element.options.attrs.default.dkey === 0) {
@@ -265,6 +269,34 @@ class TimeDateRangeServiceImpl extends WidgetService {
       return [startTime, endTime]
     }
   }
+
+  formatDynamicTimes(values, element) {
+    if (!values?.length || !element.options.attrs.default.isDynamic) {
+      return values
+    }
+    const baseTime = +new Date('2022-11-09 00:00:00.000')
+    let labelFormat = 'yyyy-MM-dd'
+    if (element.options.attrs.showTime && element.options.attrs.accuracy) {
+      labelFormat = labelFormat + ' ' + element.options.attrs.accuracy
+    }
+    let [ start, end ] = values
+
+    const attrs = element.options.attrs
+
+    if (attrs.default.sDynamicSuffixTime && attrs.default.isDynamic && attrs.default.dkey === 4 && attrs.showTime) {
+      start = attrs.default.sDynamicSuffixTime - baseTime + timeSection(start, 'date')[0]
+    } else {
+      start = timeSection(start, 'date', labelFormat)[0]
+    }
+    if (attrs.default.eDynamicSuffixTime && attrs.default.isDynamic && attrs.default.dkey === 4 && attrs.showTime) {
+      end = attrs.default.eDynamicSuffixTime - baseTime + timeSection(end, 'date')[0]
+    } else {
+      end = timeSection(end, 'date', labelFormat)[1]
+    }
+
+    const results = [start, end]
+    return results
+  }
   validDynamicValue(element) {
     if (!element.options.attrs.default.isDynamic) return true
     if (element.options.attrs.default.dkey !== 4) return true

frontend/src/styles/index.scss

@@ -770,7 +770,7 @@ div:focus {
 
 .no-label-item {
   .el-form-item__content {
-    margin-left: 10px !important;
+    margin-left: 5px !important;
   }
 }
 

frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue

@@ -13,10 +13,8 @@
           @change="dynamicChange"
         >
           <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
-          <el-radio
-            :label="true"
-            :disabled="isTimeWidget && element.options.attrs.showTime"
-          >{{ $t('dynamic_time.dynamic') }}</el-radio>
+          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
+
         </el-radio-group>
       </el-form-item>
 
@@ -82,6 +80,7 @@
         >
           <el-input-number
             v-model="element.options.attrs.default.sDynamicPrefix"
+            style="min-width: 80px;width: auto;"
             controls-position="right"
             size="mini"
             :min="0"
@@ -97,6 +96,7 @@
         >
           <el-select
             v-model="element.options.attrs.default.sDynamicInfill"
+            style="min-width: 60px; width: auto;"
             size="mini"
             placeholder=""
             @change="dynamicInfillChange"
@@ -128,6 +128,7 @@
 
           <el-select
             v-model="element.options.attrs.default.sDynamicSuffix"
+            style="min-width: 60px; width: auto;"
             size="mini"
             placeholder=""
             @change="dynamicSuffixChange"
@@ -143,6 +144,21 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4 && isTimeWidget && element.options.attrs.showTime"
+          label=""
+          class="no-label-item"
+        >
+          <el-time-picker
+            v-model="element.options.attrs.default.sDynamicSuffixTime"
+            value-format="timestamp"
+            :format="element.options.attrs.accuracy"
+            style="width: auto; min-width: 110px;"
+            placeholder=""
+            @change="eDynamicSuffixTimeChange"
+          />
+        </el-form-item>
+
       </div>
 
       <div class="inline-first">
@@ -153,6 +169,7 @@
         >
           <el-input-number
             v-model="element.options.attrs.default.eDynamicPrefix"
+            style="min-width: 80px;width: auto;"
             controls-position="right"
             size="mini"
             :min="0"
@@ -168,6 +185,7 @@
         >
           <el-select
             v-model="element.options.attrs.default.eDynamicInfill"
+            style="min-width: 60px;width: auto;"
             size="mini"
             placeholder=""
             @change="dynamicInfillChange"
@@ -199,6 +217,7 @@
 
           <el-select
             v-model="element.options.attrs.default.eDynamicSuffix"
+            style="min-width: 60px;width: auto;"
             size="mini"
             placeholder=""
             @change="dynamicSuffixChange"
@@ -214,6 +233,21 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4 && isTimeWidget && element.options.attrs.showTime"
+          label=""
+          class="no-label-item"
+        >
+          <el-time-picker
+            v-model="element.options.attrs.default.eDynamicSuffixTime"
+            value-format="timestamp"
+            style="min-width: 110px;width: auto;"
+            :format="element.options.attrs.accuracy"
+            placeholder=""
+            @change="eDynamicSuffixTimeChange"
+          />
+        </el-form-item>
+
       </div>
 
       <el-form-item
@@ -264,7 +298,8 @@ export default {
   },
   data() {
     return {
-      dval: null
+      dval: null,
+      baseTime: new Date('2022-11-09 00:00:00.000').getTime()
     }
   },
   computed: {
@@ -300,6 +335,7 @@ export default {
     }
   },
   created() {
+    this.fillEmptySuffixTime()
     this.setDval()
   },
   methods: {
@@ -336,6 +372,22 @@ export default {
       this.dval = time
       bus.$emit('valid-values-change', (!time || time.length === 0 || time[1] > time[0] || this.isOneDay))
       this.element.options.manualModify = false
+    },
+
+    fillEmptySuffixTime() {
+      if (!this.element.options.attrs.default.sDynamicSuffixTime) {
+        this.$set(this.element.options.attrs.default, 'sDynamicSuffixTime', this.baseTime)
+      }
+
+      if (!this.element.options.attrs.default.eDynamicSuffixTime) {
+        this.$set(this.element.options.attrs.default, 'eDynamicSuffixTime', new Date('2022-11-09 23:59:59.999').getTime())
+      }
+    },
+    eDynamicSuffixTimeChange(val) {
+      this.setDval()
+    },
+    sDynamicSuffixTimeChange(val) {
+      this.setDval()
     }
   }
 }

frontend/src/views/panel/filter/filterMain/FilterControl.vue

@@ -270,7 +270,10 @@ export default {
     },
     showTimeChange(value) {
       this.attrs.accuracy = this.accuracyOptions[1].id
-      this.attrs.default.isDynamic = false
+      if (this.widget.name !== 'timeDateRangeWidget') {
+        this.attrs.default.isDynamic = false
+      }
+
       this.fillAttrs2Filter()
     },
     checkedViewsChange(values) {