From fc51f531edb5d428eeadd35ece314940e2d07ca0 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 6 Aug 2024 17:34:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=80=BC=E6=B2=A1=E6=9C=89=E6=9C=AC=E6=9C=88?=
 =?UTF-8?q?=E3=80=81=E6=9C=AC=E5=B9=B4=E7=AD=89=20#11283?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../v-query/ConditionDefaultConfiguration.vue | 94 +++++++++++++++++++
 .../v-query/DynamicTimeRange.vue              | 11 +++
 .../v-query/QueryConditionConfiguration.vue   | 85 +++++++++++++++++
 .../v-query/time-format-dayjs.ts              | 44 ++++++++-
 4 files changed, 233 insertions(+), 1 deletion(-)

diff --git a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
index 87013f3b9d..9af4ed4773 100644
--- a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
@@ -156,6 +156,85 @@ const relativeToCurrentList = computed(() => {
   ]
 })
 
+const relativeToCurrentListRange = computed(() => {
+  let list = []
+  if (!curComponent.value) return list
+  switch (curComponent.value.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'
+    }
+  ]
+})
+
 const aroundList = [
   {
     label: '前',
@@ -405,8 +484,22 @@ defineExpose({
         </div>
       </template>
       <template v-else-if="dynamicTime && curComponent.displayType === '7'">
+        <div class="setting">
+          <div class="setting-label">相对当前</div>
+          <div class="setting-value select">
+            <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrentRange">
+              <el-option
+                v-for="item in relativeToCurrentListRange"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </div>
         <div
           class="setting"
+          v-if="curComponent.relativeToCurrentRange === 'custom'"
           :class="
             ['yearrange', 'monthrange', 'daterange'].includes(
               curComponent.timeGranularityMultiple
@@ -437,6 +530,7 @@ defineExpose({
         </div>
         <div
           class="setting"
+          v-if="curComponent.relativeToCurrentRange === 'custom'"
           :class="
             ['yearrange', 'monthrange', 'daterange'].includes(
               curComponent.timeGranularityMultiple
diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
index 9a7be1c9a3..04f2535d0e 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
@@ -3,6 +3,7 @@ import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
 import { Calendar } from '@element-plus/icons-vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { getCustomTime } from './time-format'
+import { getCustomRange } from './time-format-dayjs'
 interface SelectConfig {
   timeType: string
   timeGranularityMultiple: DatePickType
@@ -10,6 +11,7 @@ interface SelectConfig {
   selectValue: [Date, Date]
   defaultValueCheck: boolean
   id: string
+  relativeToCurrentRange: string
   timeNum: number
   relativeToCurrentType: string
   around: string
@@ -37,6 +39,7 @@ const props = defineProps({
         defaultValueCheck: false,
         timeGranularity: 'date',
         timeNumRange: 0,
+        relativeToCurrentRange: 'custom',
         relativeToCurrentTypeRange: 'year',
         aroundRange: 'f',
         arbitraryTimeRange: new Date()
@@ -53,6 +56,7 @@ const timeConfig = computed(() => {
     relativeToCurrentType,
     timeGranularityMultiple,
     around,
+    relativeToCurrentRange,
     defaultValueCheck,
     arbitraryTime,
     timeGranularity,
@@ -65,6 +69,7 @@ const timeConfig = computed(() => {
     timeNum,
     relativeToCurrentType,
     around,
+    relativeToCurrentRange,
     timeGranularityMultiple,
     defaultValueCheck,
     arbitraryTime,
@@ -113,6 +118,7 @@ const init = () => {
     timeNumRange,
     relativeToCurrentTypeRange,
     aroundRange,
+    relativeToCurrentRange,
     arbitraryTimeRange
   } = timeConfig.value
   if (!defaultValueCheck) {
@@ -120,6 +126,11 @@ const init = () => {
     return
   }
 
+  if (relativeToCurrentRange !== 'custom') {
+    selectValue.value = getCustomRange(relativeToCurrentRange)
+    return
+  }
+
   const startTime = getCustomTime(
     timeNum,
     relativeToCurrentType,
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index 1a6a9f7c92..a392656ad5 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -996,6 +996,7 @@ const parameterCompletion = () => {
     parametersEnd: null,
     relativeToCurrent: 'custom',
     timeNum: 0,
+    relativeToCurrentRange: 'custom',
     relativeToCurrentType: 'year',
     around: 'f',
     arbitraryTime: new Date(),
@@ -1209,6 +1210,85 @@ const relativeToCurrentList = computed(() => {
   ]
 })
 
+const relativeToCurrentListRange = computed(() => {
+  let list = []
+  if (!curComponent.value) return list
+  switch (curComponent.value.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'
+    }
+  ]
+})
+
 const timeGranularityChange = (val: string) => {
   if (
     ['year', 'month', 'date', 'datetime'].indexOf(val) <
@@ -1236,6 +1316,10 @@ const timeGranularityMultipleChange = (val: string) => {
     curComponent.value.relativeToCurrentTypeRange = 'year'
   }
 
+  if (curComponent.value.relativeToCurrentRange !== 'custom') {
+    curComponent.value.relativeToCurrentRange = relativeToCurrentListRange.value[0]?.value
+  }
+
   curComponent.value.timeRange = {
     intervalType: 'none',
     dynamicWindow: false,
@@ -1243,6 +1327,7 @@ const timeGranularityMultipleChange = (val: string) => {
     regularOrTrends: 'fixed',
     regularOrTrendsValue: '',
     relativeToCurrent: 'custom',
+    relativeToCurrentRange: 'custom',
     timeNum: 0,
     relativeToCurrentType: 'year',
     around: 'f',
diff --git a/core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts b/core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts
index 6e6dc1e7d0..a74df747d0 100644
--- a/core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts
+++ b/core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts
@@ -20,4 +20,46 @@ function getAround(val = 'month' as ManipulateType, type = 'add', num = 0) {
   return new Date(dayjs()[type](num, val).startOf('day').format('YYYY/MM/DD HH:mm:ss'))
 }
 
-export { getThisStart, getThisEnd, getLastStart, getLastEnd, getAround }
+function getCustomRange(relativeToCurrentRange: string): [Date, Date] {
+  switch (relativeToCurrentRange) {
+    case 'thisYear':
+      return [getThisStart('year'), getThisEnd('year')]
+    case 'lastYear':
+      return [getLastStart('year'), getLastEnd('year')]
+    case 'thisMonth':
+      return [getThisStart('month'), getThisEnd('month')]
+    case 'lastMonth':
+      return [getLastStart('month'), getLastEnd('month')]
+    case 'LastThreeMonths':
+      return [
+        new Date(dayjs().subtract(3, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'LastSixMonths':
+      return [
+        new Date(dayjs().subtract(6, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'LastTwelveMonths':
+      return [
+        new Date(dayjs().subtract(12, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'today':
+      return [getThisStart('day'), getThisEnd('day')]
+    case 'yesterday':
+      return [getLastStart('day'), getLastEnd('day')]
+    case 'LastThreeDays':
+      return [
+        new Date(dayjs().subtract(3, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'monthBeginning':
+      return [getThisStart('month'), getThisEnd('day')]
+    case 'yearBeginning':
+      return [getThisStart('year'), getThisEnd('day')]
+    default:
+      return [new Date(), new Date()]
+  }
+}
+export { getThisStart, getThisEnd, getLastStart, getLastEnd, getAround, getCustomRange }