feat(src/packages): 信息自定义日期新增快捷日期选择

@@ -13,6 +13,7 @@ export const option = {
   // 下拉展示
   isPanel: 0,
   dataset: dayjs().valueOf(),
+  differValue: 0,
   selectStyleOptions: {
     textColor: 'black',
     textBackgroundColor: 'white',
@@ -22,8 +23,7 @@ export const option = {
     textSelectModalBackgroundColor: 'black',
     textSelectModalTextColor: 'black'
   },
-  //是否开启前一周
-  openLastWeek: false
+  shortcut: null
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -4,27 +4,36 @@
       <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
     </setting-item-box>
   </collapse-item>
-
   <collapse-item name="时间配置" :expanded="true">
-    <setting-item-box name="近一周">
-      <setting-item>
-        <n-switch @change="handleChange" v-model:value="optionData.openLastWeek" size="small"></n-switch>
+    <setting-item-box name="快捷选择">
+      <setting-item name="日期">
+        <n-select @change="shortCutSelect" v-model:value="optionData.shortcut" size="small" :options="intervalOption" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="基础">
       <setting-item name="类型">
-        <n-select
-          @change="handleSelect"
-          v-model:value="optionData.componentInteractEventKey"
-          size="small"
-          :options="datePickerTypeOptions"
-        />
+        <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
       </setting-item>
     </setting-item-box>
-
     <setting-item-box name="默认值" :alone="true">
       <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
     </setting-item-box>
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>动态</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>动态值不为0时，默认值:取当天时间相加当前值</n-text>
+        </n-tooltip>
+      </template>
+      <n-input-number v-model:value="optionData.differValue" class="input-num-width" size="small" :min="-40" :max="40">
+        <template #suffix> 天 </template>
+      </n-input-number>
+    </setting-item-box>
     <setting-item-box name="文字颜色" :alone="true">
       <SettingItem name="颜色">
         <n-color-picker
@@ -110,6 +119,7 @@ import { icon } from '@/plugins'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { ComponentInteractEventEnum } from './interact'
+import { intervalOption } from './shortcutTime'
 
 const { HelpOutlineIcon } = icon.ionicons5
 
@@ -169,12 +179,10 @@ const datePickerTypeOptions = [
     value: ComponentInteractEventEnum.QUARTER_RANGE
   }
 ]
-const handleChange = (value: boolean) => {
-  if (!value) return
-  const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000
-  const lastWeekStart = new Date().getTime()
-  props.optionData.dataset = [lastWeekEnd, lastWeekStart] as any
-}
 
-const handleSelect = (value: string) => (props.optionData.openLastWeek = false)
+const shortCutSelect = (value: number) => {
+  const startTs = Date.now() - value
+  const endTs = Date.now()
+  props.optionData.dataset = [startTs, endTs] as any
+}
 </script>

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import dayjs from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -27,16 +27,9 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const {
-  textColor,
-  textBackgroundColor,
-  iconColor,
-  textBackgroundColorAlpha,
-  textSelectModalBackgroundColor,
-  textSelectModalTextColor
-} = toRefs(props.chartConfig.option.selectStyleOptions) as any
-
-const rangeDate = ref<number | number[]>()
+const { textColor, textBackgroundColor, iconColor, textSelectModalBackgroundColor } = toRefs(
+  props.chartConfig.option.selectStyleOptions
+)
 
 const option = shallowReactive({
   dataset: props.chartConfig.option.dataset
@@ -67,7 +60,6 @@ const onChange = (v: number | number[]) => {
   }
 }
 
-// 手动更新
 watch(
   () => props.chartConfig.option.dataset,
   (newData: number | number[]) => {
@@ -80,14 +72,32 @@ watch(
   }
 )
 
+// 手动更新
+watch(
+  () => props.chartConfig.option.differValue,
+  (newData: number) => {
+    if (props.chartConfig.option.differValue === 0) return
+    if (typeof option.dataset === 'object') {
+      option.dataset[0] = dayjs().add(newData, 'day').valueOf()
+      option.dataset[1] = dayjs().add(newData, 'day').valueOf()
+    } else {
+      option.dataset = dayjs().add(newData, 'day').valueOf()
+    }
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
+
 watch(
-  () => props.chartConfig.option.openLastWeek,
-  newData => {
+  () => props.chartConfig.option.shortcut,
+  (newData) => {
     if (!newData) return
-    const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000
-    const lastWeekStart = new Date().getTime()
-    props.chartConfig.option.componentInteractEventKey = 'daterange'
-    option.dataset = [lastWeekEnd, lastWeekStart]
+    const startTs = Date.now() - newData
+    const endTs = Date.now()
+    option.dataset = [startTs, endTs]
     onChange(option.dataset)
   },
   {

+enum TimeUnit {
+  SECOND = 'second',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY'
+}
+
+const unitMapping = {
+  [TimeUnit.SECOND]: '秒',
+  [TimeUnit.MINUTE]: '分',
+  [TimeUnit.HOUR]: '小时',
+  [TimeUnit.DAY]: '天'
+}
+
+const unitConversion = {
+  [TimeUnit.SECOND]: 1 * 1000,
+  [TimeUnit.MINUTE]: 1 * 60 * 1000,
+  [TimeUnit.HOUR]: 1 * 60 * 60 * 1000,
+  [TimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000
+}
+
+export const intervalOption = [
+  {
+    id: 1,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }]
+  },
+  {
+    id: 5,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }]
+  },
+  {
+    id: 10,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }]
+  },
+  {
+    id: 15,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }]
+  },
+  {
+    id: 30,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }]
+  },
+  {
+    id: 1,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND }
+    ]
+  },
+  {
+    id: 2,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND }
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND }
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE }
+    ]
+  },
+  {
+    id: 15,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE }
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE }
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE }
+    ]
+  },
+  {
+    id: 2,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE }
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE }
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR }
+    ]
+  },
+  {
+    id: 12,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR }
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR }
+    ]
+  },
+  {
+    id: 7,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY }
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY }
+    ]
+  }
+].map(item => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: `近${item.id + unitMapping[item.unit]}`,
+    linkage: item.linkage.map(item => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: `近${item.id + unitMapping[item.unit]}`
+      }
+    })
+  }
+})