Merge branch 'perf/daterange' into 'main_dev'

perf: 优化时期选择起始时间范围

See merge request yunteng/thingskit-view!231

@@ -74,9 +74,10 @@ export const useChartDataFetch = (
                     const {requestParams} = toRaw(targetComponent.request)
                     const {Params} = requestParams
                     const {entityType, startTs, endTs} = Params
-                    const days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
+                    let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
                     if (entityType === 'DEVICE') {
-                        startTsValue = Date.now() - (days <= 32 ? 2592000000 : days <= 8 ? 604800000 : days <= 2 ? 86400000 : startTs as unknown as number)
+                        days = days <= 2 ? 1 : days<= 8 ? 7 : 30
+                        startTsValue =  dayjs().subtract(days - 1, 'day').startOf('day').valueOf()
                         startTsValue = dayjs(startTsValue).startOf('day').valueOf()
                         endTsValue = dayjs().endOf('day').valueOf()
                         ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number

 <script lang="ts" setup>
-import { NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber } from 'naive-ui';
-import { defaultIntervalOptions, aggergationOptions } from '../DynamicForm/timeInterval'
-import { unref, computed, ref, watch } from 'vue';
-import { isObject } from '@/utils/external/is';
+import {NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber} from 'naive-ui';
+import {defaultIntervalOptions, aggergationOptions} from '../DynamicForm/timeInterval'
+import {unref, computed, ref, watch} from 'vue';
+import {isObject} from '@/utils/external/is';
+import dayjs from "dayjs";
 
 interface Value {
   agg?: Nullable<string>
@@ -13,12 +14,12 @@ interface Value {
 }
 
 const props = withDefaults(
-  defineProps<{
-    value?: Value
-  }>(),
-  {
-    value: () => ({})
-  }
+    defineProps<{
+      value?: Value
+    }>(),
+    {
+      value: () => ({})
+    }
 )
 
 const emit = defineEmits<{
@@ -33,16 +34,22 @@ const interval = ref()
 const limit = ref(7)
 const rangeShortcuts = {
   昨天: () => {
-    const cur = new Date().getTime()
-    return [cur - 86400000, cur] as const
+    return [
+      dayjs().startOf('day').valueOf(),
+      dayjs().endOf('day').valueOf()
+    ] as const
   },
   最近7天: () => {
-    const cur = new Date().getTime()
-    return [cur - 604800000, cur] as const
+    return [
+      dayjs().subtract(6, 'day').startOf('day').valueOf(),
+      dayjs().endOf('day').valueOf()
+    ] as const
   },
   最近30天: () => {
-    const cur = new Date().getTime()
-    return [cur - 2592000000, cur] as const
+    return [
+      dayjs().subtract(29, 'day').startOf('day').valueOf(),
+      dayjs().endOf('day').valueOf()
+    ] as const
   }
 }
 
@@ -69,32 +76,32 @@ const getIntervalTimeOptions = computed(() => {
 
 const handleTimePerionChange = (value: number[]) => {
   const [startTs, endTs] = value || []
-  emit('update:value', { ...props.value, startTs, endTs, interval: null })
-  emit('change', { ...props.value || {}, startTs, endTs, interval: null })
+  emit('update:value', {...props.value, startTs, endTs, interval: null})
+  emit('change', {...props.value || {}, startTs, endTs, interval: null})
 }
 
 const handleAggChange = (value: string) => {
-  const _value = { ...props.value, agg: value, ...(value === 'NONE' ? { limit: 7 } : {}) }
+  const _value = {...props.value, agg: value, ...(value === 'NONE' ? {limit: 7} : {})}
   Reflect.deleteProperty(_value, value === 'NONE' ? 'interval' : 'limit')
   emit('update:value', _value)
   emit('change', _value)
 }
 
 const handleIntervalChange = (value: number) => {
-  const _value = { ...props.value, interval: value }
+  const _value = {...props.value, interval: value}
   emit('update:value', _value)
   emit('change', _value)
 }
 
 const handleLimitChange = (value: Nullable<number>) => {
-  const _value = { ...props.value, limit: value }
+  const _value = {...props.value, limit: value}
   emit('update:value', _value)
   emit('change', _value)
 }
 
 watch(() => props.value, (target) => {
   if (target && isObject(target)) {
-    const { agg: _agg, interval: _interval, startTs, endTs, limit: _limit } = target || {}
+    const {agg: _agg, interval: _interval, startTs, endTs, limit: _limit} = target || {}
     if (startTs && endTs) {
       timePeriod.value = [startTs!, endTs!]
     } else {
@@ -111,26 +118,29 @@ watch(() => props.value, (target) => {
   <NGrid :cols="24">
     <NGi :span="16">
       <NFormItem :show-label="false">
-        <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围"
-          @update-value="handleTimePerionChange" clearable :default-time="['00:00:00', '23:59:59']"></NDatePicker>
+        <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange"
+                     placeholder="请选择时间范围"
+                     @update-value="handleTimePerionChange" clearable
+                     :default-time="['00:00:00', '23:59:59']"></NDatePicker>
       </NFormItem>
     </NGi>
     <NGi :span="4">
       <NFormItem :show-label="false">
         <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name"
-          value-field="id" placeholder="聚合方式" clearable></NSelect>
+                 value-field="id" placeholder="聚合方式" clearable></NSelect>
       </NFormItem>
     </NGi>
     <NGi v-if="!getShowLimit" :span="4">
       <NFormItem :show-label="false">
         <NSelect v-model:value="interval" @update:value="handleIntervalChange" :options="getIntervalTimeOptions"
-          label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
+                 label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
       </NFormItem>
     </NGi>
     <NGi v-if="getShowLimit" :span="4">
       <NFormItem :show-label="false">
         <NInputNumber v-model:value="limit" :default-value="7" @update:value="handleLimitChange"
-          :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1" placeholder="请输入最大条数" />
+                      :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1"
+                      placeholder="请输入最大条数"/>
       </NFormItem>
     </NGi>
   </NGrid>