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

2024-08-07 11:14:06 +08:00 · 2024-08-07 11:14:06 +08:00 · 52f71875ab
commit 52f71875ab
parent c78f4ef398
6 changed files with 191 additions and 58 deletions
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRangeFiltering.vue
+++ b/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]
 }

--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/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 => {
--- a/core/core-frontend/src/custom-component/v-query/RangeFilterTime.vue
+++ b/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
-            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.timeNum" :min="0" controls-position="right" />
-              <el-select v-model="timeRange.relativeToCurrentType">
+          <div class="setting">
+            <div class="setting-label">相对当前</div>
+            <div class="setting-value select">
+              <el-select v-model="timeRange.relativeToCurrentRange">
                <el-option
-                  v-for="item in relativeToCurrentTypeList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-              <el-select v-model="timeRange.around">
-                <el-option
-                  v-for="item in aroundList"
+                  v-for="item in relativeToCurrentListRange"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
@ -263,37 +329,68 @@ const relativeToCurrentList = computed(() => {
              </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>
+          <template v-if="timeRange.relativeToCurrentRange === 'custom'">
+            <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.timeNum" :min="0" controls-position="right" />
+                <el-select v-model="timeRange.relativeToCurrentType">
+                  <el-option
+                    v-for="item in relativeToCurrentTypeList"
+                    :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"
+                  />
+                </el-select>
+              </div>
            </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'">
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/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',
--- a/core/core-frontend/src/custom-component/v-query/time-format.ts
+++ b/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
--- a/core/core-frontend/src/hooks/web/useFilter.ts
+++ b/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]