fix(src/packages): 信息控件下的时间选择器新增面版内快捷选择

@@ -13,7 +13,7 @@ export const option = {
   // 下拉展示
   isPanel: 0,
   // 默认值
-  dataset: dayjs().valueOf() as number | number[] | null,
+  dataset: [new Date().getTime() - 86400000,new Date().getTime()],
   // 默认值类型
   defaultType: DefaultTypeEnum.STATIC,
   // 动态默认值偏移单位

@@ -5,20 +5,21 @@
     :panel="!!chartConfig.option.isPanel"
     :type="chartConfig.option.componentInteractEventKey"
     :style="`width:${w}px;`"
-    :to="false"
+    :to="true"
     @update:value="onChange"
+    :shortcuts="rangeShortcuts"
   />
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch ,ref,computed} from 'vue'
-import dayjs, {ManipulateType} from 'dayjs'
+import { PropType, toRefs, shallowReactive, watch, ref, computed } from 'vue'
+import dayjs, { ManipulateType } from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartInteract } from '@/hooks/external/useChartDateInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
-import {ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum} from './interact'
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum } from './interact'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 
 const props = defineProps({
   chartConfig: {
@@ -28,8 +29,24 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+
 const rangeDate = ref<number | number[]>()
 
+const rangeShortcuts = {
+  昨天: () => {
+    const cur = new Date().getTime()
+    return [cur - 86400000, cur] as const
+  },
+  最近7天: () => {
+    const cur = new Date().getTime()
+    return [cur - 604800000, cur] as const
+  },
+  最近30天: () => {
+    const cur = new Date().getTime()
+    return [cur - 2592000000, cur] as const
+  }
+}
+
 const option = shallowReactive({
   dataset: props.chartConfig.option.dataset
 })
@@ -38,36 +55,35 @@ const isRange = computed(() => {
   return props.chartConfig.option.componentInteractEventKey.endsWith('range')
 })
 
-
 // 监听事件改变
 const onChange = (v: number | number[] | null) => {
   if (isRange.value) {
     let dateStart = null
     let dateEnd = null
     let daterange = null
-    if(v instanceof Array){
+    if (v instanceof Array) {
       dateStart = v[0]
       dateEnd = v[1]
       daterange = `${v[0]}-${v[1]}`
     }
     // 存储到联动数据
     useChartInteract(
-        props.chartConfig,
-        useChartEditStore,
-        {
-          [ComponentInteractParamsEnum.DATE_START]: dateStart,
-          [ComponentInteractParamsEnum.DATE_END]: dateEnd,
-          [ComponentInteractParamsEnum.DATE_RANGE]: daterange
-        },
-        InteractEventOn.CHANGE
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: dateStart,
+        [ComponentInteractParamsEnum.DATE_END]: dateEnd,
+        [ComponentInteractParamsEnum.DATE_RANGE]: daterange
+      },
+      InteractEventOn.CHANGE
     )
   } else {
     // 存储到联动数据
     useChartInteract(
-        props.chartConfig,
-        useChartEditStore,
-        { [ComponentInteractParamsEnum.DATE]: v },
-        InteractEventOn.CHANGE
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
     )
   }
 }
@@ -87,7 +103,7 @@ const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => {
     case ComponentInteractEventEnum.YEAR:
     case ComponentInteractEventEnum.YEAR_RANGE:
       date = date.startOf('year')
-        break
+      break
     case ComponentInteractEventEnum.QUARTER:
     case ComponentInteractEventEnum.QUARTER_RANGE:
       date = date.startOf('quarter')
@@ -99,48 +115,50 @@ const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => {
 }
 
 watch(
-    () => {
-      return {
-        type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum,
-        defaultType: props.chartConfig.option.defaultType as string,
-        differValue: props.chartConfig.option.differValue as number[],
-        differUnit: props.chartConfig.option.differUnit as ManipulateType[],
-        dataset: props.chartConfig.option.dataset as number | number[] | null,
-      };
-    },
-    (newData, oldData) => {
-      const hasTypeChanged = newData.type !== oldData?.type;
-      const hasDefaultTypeChanged = newData.defaultType !== oldData?.defaultType;
-      const hasDifferValueChanged = newData.differValue !== oldData?.differValue;
-      const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit;
+  () => {
+    return {
+      type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum,
+      defaultType: props.chartConfig.option.defaultType as string,
+      differValue: props.chartConfig.option.differValue as number[],
+      differUnit: props.chartConfig.option.differUnit as ManipulateType[],
+      dataset: props.chartConfig.option.dataset as number | number[] | null
+    }
+  },
+  (newData, oldData) => {
+    const hasTypeChanged = newData.type !== oldData?.type
+    const hasDefaultTypeChanged = newData.defaultType !== oldData?.defaultType
+    const hasDifferValueChanged = newData.differValue !== oldData?.differValue
+    const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit
 
-      if (hasTypeChanged || hasDefaultTypeChanged || hasDifferValueChanged || hasDifferUnitChanged) {
-        if (newData.defaultType === DefaultTypeEnum.NONE) {
-          props.chartConfig.option.dataset = null;
-        } else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) {
-          let date = dayjs();
-          if (isRange.value) {
-            props.chartConfig.option.dataset = [
-             getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf(),
-             getDiffDate(newData.type,date.add(newData.differValue[1], newData.differUnit[1])).valueOf(),
-            ];
-          } else {
-            props.chartConfig.option.dataset = getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf()
-          }
+    if (hasTypeChanged || hasDefaultTypeChanged || hasDifferValueChanged || hasDifferUnitChanged) {
+      if (newData.defaultType === DefaultTypeEnum.NONE) {
+        props.chartConfig.option.dataset = null
+      } else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) {
+        let date = dayjs()
+        if (isRange.value) {
+          props.chartConfig.option.dataset = [
+            getDiffDate(newData.type, date.add(newData.differValue[0], newData.differUnit[0])).valueOf(),
+            getDiffDate(newData.type, date.add(newData.differValue[1], newData.differUnit[1])).valueOf()
+          ]
+        } else {
+          props.chartConfig.option.dataset = getDiffDate(
+            newData.type,
+            date.add(newData.differValue[0], newData.differUnit[0])
+          ).valueOf()
         }
       }
-      option.dataset = props.chartConfig.option.dataset;
-      onChange(option.dataset);
-    },
-    {
-      immediate: true,
     }
-);
-
+    option.dataset = props.chartConfig.option.dataset
+    onChange(option.dataset)
+  },
+  {
+    immediate: true
+  }
+)
 
 watch(
   () => props.chartConfig.option.shortcut,
-  (newData) => {
+  newData => {
     if (!newData) return
     const startTs = Date.now() - newData
     const endTs = Date.now()
@@ -153,7 +171,6 @@ watch(
 )
 </script>
 
-
 <style lang="scss" scoped>
 @include deep() {
   .n-input {
@@ -162,4 +179,4 @@ watch(
     align-items: center;
   }
 }
-</style>
\ No newline at end of file
+</style>