feat(查询组件): 日期范围组件，默认值没有本月、本年等 #11283

core/core-frontend/src/custom-component/v-query/DynamicTimeRangeFiltering.vue

@@ -3,11 +3,12 @@ import { toRefs, PropType, onBeforeMount, watch, computed } from 'vue'
 import { Calendar } from '@element-plus/icons-vue'
 import { type DatePickType } from 'element-plus-secondary'
 import type { ManipulateType } from 'dayjs'
-import { getAround } from './time-format-dayjs'
+import { getAround, getCustomRange } from './time-format-dayjs'
 interface SelectConfig {
   regularOrTrends: string
   regularOrTrendsValue: [Date, Date]
   intervalType: string
+  relativeToCurrentRange: string
   timeNum: number
   relativeToCurrentType: ManipulateType
   around: string
@@ -27,6 +28,7 @@ const props = defineProps({
         regularOrTrends: 'fixed',
         timeNum: 0,
         intervalType: 'none',
+        relativeToCurrentRange: 'custom',
         relativeToCurrentType: 'year',
         around: 'f',
         timeGranularity: 'date',
@@ -50,6 +52,7 @@ const timeConfig = computed(() => {
     timeNum,
     relativeToCurrentType,
     around,
+    relativeToCurrentRange,
     intervalType,
     regularOrTrends,
     timeGranularity,
@@ -62,6 +65,7 @@ const timeConfig = computed(() => {
     relativeToCurrentType,
     around,
     intervalType,
+    relativeToCurrentRange,
     regularOrTrends,
     timeGranularity,
     timeNumRange,
@@ -87,10 +91,13 @@ watch(
 )
 
 const init = () => {
+  console.log('relativeToCurrentRange')
+
   const {
     timeNum,
     relativeToCurrentType,
     around,
+    relativeToCurrentRange,
     regularOrTrends,
     timeNumRange,
     relativeToCurrentTypeRange,
@@ -117,6 +124,11 @@ const init = () => {
     timeNumRange
   )
 
+  if (!!relativeToCurrentRange && relativeToCurrentRange !== 'custom') {
+    config.value.regularOrTrendsValue = getCustomRange(relativeToCurrentRange)
+    return
+  }
+
   config.value.regularOrTrendsValue = [startTime, endTime]
 }
 

core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue

@@ -576,16 +576,21 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
   if (intervalType === 'timeInterval') {
     const startTime =
       regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[0]
+        ? new Date(
+            dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+          )
         : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
     const endTime =
       regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[1]
+        ? new Date(
+            dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+          )
         : getAround(
             relativeToCurrentTypeRange,
             aroundRange === 'f' ? 'subtract' : 'add',
             timeNumRange
           )
+
     return (
       startWindowTime < +new Date(startTime) - 1000 ||
       timeStamp > +new Date(endTime) ||
@@ -760,7 +765,7 @@ const validate = () => {
               'end-config'
             )
           : new Date(ele.defaultValue[1])
-      if (!relativeToCurrentRange || relativeToCurrentRange === 'custom') {
+      if (!!relativeToCurrentRange && relativeToCurrentRange !== 'custom') {
         ;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
       }
       if (+startTime > +endTime) {
@@ -1032,6 +1037,10 @@ const parameterCompletion = () => {
   Object.entries(attributes).forEach(([key, val]) => {
     !curComponent.value[key] && (curComponent.value[key] = val)
   })
+
+  if (!curComponent.value.timeRange.relativeToCurrentRange) {
+    curComponent.value.timeRange.relativeToCurrentRange = 'custom'
+  }
 }
 
 const handleCondition = item => {

core/core-frontend/src/custom-component/v-query/RangeFilterTime.vue

@@ -11,6 +11,7 @@ const props = defineProps({
       dynamicWindow: false,
       maximumSingleQuery: 0,
       regularOrTrends: 'fixed',
+      relativeToCurrentRange: 'custom',
       regularOrTrendsValue: '',
       relativeToCurrent: 'custom',
       timeNum: 0,
@@ -173,6 +174,85 @@ const relativeToCurrentList = computed(() => {
     }
   ]
 })
+
+const relativeToCurrentListRange = computed(() => {
+  let list = []
+  if (!timeRange.value) return list
+  switch (props.timeGranularityMultiple) {
+    case 'yearrange':
+      list = [
+        {
+          label: '今年',
+          value: 'thisYear'
+        },
+        {
+          label: '去年',
+          value: 'lastYear'
+        }
+      ]
+      break
+    case 'monthrange':
+      list = [
+        {
+          label: '本月',
+          value: 'thisMonth'
+        },
+        {
+          label: '上月',
+          value: 'lastMonth'
+        },
+        {
+          label: '最近 3 个 月',
+          value: 'LastThreeMonths'
+        },
+        {
+          label: '最近 6 个 月',
+          value: 'LastSixMonths'
+        },
+        {
+          label: '最近 12 个 月',
+          value: 'LastTwelveMonths'
+        }
+      ]
+      break
+    case 'daterange':
+    case 'datetimerange':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '最近 3 天',
+          value: 'LastThreeDays'
+        },
+        {
+          label: '月初至今',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初至今',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+
+    default:
+      break
+  }
+
+  return [
+    ...list,
+    {
+      label: '自定义',
+      value: 'custom'
+    }
+  ]
+})
 </script>
 
 <template>
@@ -200,7 +280,7 @@ const relativeToCurrentList = computed(() => {
           </el-radio-group>
         </div>
         <template v-if="dynamicTime && timeRange.intervalType !== 'timeInterval'">
-          <div class="setting">
+          <div class="setting" v-if="timeRange.intervalType !== 'timeInterval'">
             <div class="setting-label">相对当前</div>
             <div class="setting-value select">
               <el-select v-model="timeRange.relativeToCurrent">
@@ -236,26 +316,12 @@ const relativeToCurrentList = computed(() => {
           </div>
         </template>
         <template v-else-if="dynamicTime && timeRange.intervalType === 'timeInterval'">
-          <div
+          <div class="setting">
-            class="setting"
+            <div class="setting-label">相对当前</div>
-            :class="
+            <div class="setting-value select">
-              ['yearrange', 'monthrange'].includes(timeGranularityMultiple) && 'is-year-month-range'
+              <el-select v-model="timeRange.relativeToCurrentRange">
-            "
-          >
-            <div class="setting-label">开始时间</div>
-            <div class="setting-input range">
-              <el-input-number v-model="timeRange.timeNum" :min="0" controls-position="right" />
-              <el-select v-model="timeRange.relativeToCurrentType">
                 <el-option
-                  v-for="item in relativeToCurrentTypeList"
+                  v-for="item in relativeToCurrentListRange"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-              <el-select v-model="timeRange.around">
-                <el-option
-                  v-for="item in aroundList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -263,37 +329,68 @@ const relativeToCurrentList = computed(() => {
               </el-select>
             </div>
           </div>
-          <div
+          <template v-if="timeRange.relativeToCurrentRange === 'custom'">
-            class="setting"
+            <div
-            :class="
+              class="setting"
-              ['yearrange', 'monthrange'].includes(timeGranularityMultiple) && 'is-year-month-range'
+              :class="
-            "
+                ['yearrange', 'monthrange'].includes(timeGranularityMultiple) &&
-          >
+                'is-year-month-range'
-            <div class="setting-label">结束时间</div>
+              "
-            <div class="setting-input range">
+            >
-              <el-input-number
+              <div class="setting-label">开始时间</div>
-                v-model="timeRange.timeNumRange"
+              <div class="setting-input range">
-                :min="0"
+                <el-input-number v-model="timeRange.timeNum" :min="0" controls-position="right" />
-                controls-position="right"
+                <el-select v-model="timeRange.relativeToCurrentType">
-              />
+                  <el-option
-              <el-select v-model="timeRange.relativeToCurrentTypeRange">
+                    v-for="item in relativeToCurrentTypeList"
-                <el-option
+                    :key="item.value"
-                  v-for="item in relativeToCurrentTypeList"
+                    :label="item.label"
-                  :key="item.value"
+                    :value="item.value"
-                  :label="item.label"
+                  />
-                  :value="item.value"
+                </el-select>
-                />
+                <el-select v-model="timeRange.around">
-              </el-select>
+                  <el-option
-              <el-select v-model="timeRange.aroundRange">
+                    v-for="item in aroundList"
-                <el-option
+                    :key="item.value"
-                  v-for="item in aroundList"
+                    :label="item.label"
-                  :key="item.value"
+                    :value="item.value"
-                  :label="item.label"
+                  />
-                  :value="item.value"
+                </el-select>
-                />
+              </div>
-              </el-select>
             </div>
-          </div>
+            <div
+              class="setting"
+              :class="
+                ['yearrange', 'monthrange'].includes(timeGranularityMultiple) &&
+                'is-year-month-range'
+              "
+            >
+              <div class="setting-label">结束时间</div>
+              <div class="setting-input range">
+                <el-input-number
+                  v-model="timeRange.timeNumRange"
+                  :min="0"
+                  controls-position="right"
+                />
+                <el-select v-model="timeRange.relativeToCurrentTypeRange">
+                  <el-option
+                    v-for="item in relativeToCurrentTypeList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <el-select v-model="timeRange.aroundRange">
+                  <el-option
+                    v-for="item in aroundList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </div>
+            </div>
+          </template>
         </template>
       </div>
       <div class="parameters" :class="dynamicTime && 'setting'">

core/core-frontend/src/custom-component/v-query/Time.vue

@@ -299,11 +299,19 @@ const disabledDate = val => {
   if (intervalType === 'timeInterval') {
     const startTime =
       regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[0]
+        ? new Date(
+            dayjs(new Date(regularOrTrendsValue[0]))
+              .startOf(queryTimeType.value)
+              .format('YYYY/MM/DD HH:mm:ss')
+          )
         : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
     const endTime =
       regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[1]
+        ? new Date(
+            dayjs(new Date(regularOrTrendsValue[1]))
+              .endOf(queryTimeType.value)
+              .format('YYYY/MM/DD HH:mm:ss')
+          )
         : getAround(
             relativeToCurrentTypeRange,
             aroundRange === 'f' ? 'subtract' : 'add',

core/core-frontend/src/custom-component/v-query/time-format.ts

@@ -233,6 +233,7 @@ interface TimeRange {
   regularOrTrends: string
   regularOrTrendsValue: string
   relativeToCurrent: string
+  relativeToCurrentRange: string
   timeNum: number
   relativeToCurrentType: ManipulateType
   around: string

core/core-frontend/src/hooks/web/useFilter.ts

@@ -1,6 +1,7 @@
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { getDynamicRange, getCustomTime } from '@/custom-component/v-query/time-format'
+import { getCustomRange } from '@/custom-component/v-query/time-format-dayjs'
 const dvMainStore = dvMainStoreWithOut()
 const { componentData } = storeToRefs(dvMainStore)
 
@@ -266,6 +267,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
                   timeNum,
                   relativeToCurrentType,
                   around,
+                  relativeToCurrentRange,
                   arbitraryTime,
                   timeGranularity,
                   timeNumRange,
@@ -275,7 +277,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
                   arbitraryTimeRange
                 } = item
 
-                const startTime = getCustomTime(
+                let startTime = getCustomTime(
                   timeNum,
                   relativeToCurrentType,
                   timeGranularity,
@@ -284,7 +286,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
                   timeGranularityMultiple,
                   'start-panel'
                 )
-                const endTime = getCustomTime(
+                let endTime = getCustomTime(
                   timeNumRange,
                   relativeToCurrentTypeRange,
                   timeGranularity,
@@ -293,6 +295,10 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
                   timeGranularityMultiple,
                   'end-panel'
                 )
+
+                if (!!relativeToCurrentRange && relativeToCurrentRange !== 'custom') {
+                  ;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
+                }
                 item.defaultValue = [startTime, endTime]
                 item.selectValue = [startTime, endTime]
                 selectValue = [startTime, endTime]