Merge branch 'perf/datarange' into 'main_dev'

perf(src/views/share): 优化日期控件，添加快捷选项，动态更新时间

See merge request yunteng/thingskit-view!227

@@ -9,6 +9,8 @@ import { useChartDataSocket } from './useChartDataSocket'
 import { customRequest } from '@/api/external/customRequest'
 import { useFilterFn } from './useFilterFn'
 import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
+import dayjs from 'dayjs'
+
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -67,6 +69,18 @@ export const useChartDataFetch = (
         clearInterval(fetchInterval)
 
         const fetchFn = async () => {
+          let startTsValue = null
+          let endTsValue = null
+          const { requestParams } = toRaw(targetComponent.request)
+          const { Params } = requestParams
+          const { entityType, startTs, endTs } = Params
+          const days = Math.ceil((endTs - startTs) / (1 * 60 * 60 * 24 * 1000))
+          if (entityType === 'DEVICE') {
+            startTsValue = Date.now() - days <= 32 ? 2592000000: days <= 8 ? 604800000 : startTs
+            endTsValue = Date.now()
+            toRaw(targetComponent.request).requestParams.Params.startTs = startTsValue
+            toRaw(targetComponent.request).requestParams.Params.endTs = endTsValue
+          }
           const res = await customRequest(toRaw(targetComponent.request))
           if (res) {
             try {
@@ -106,9 +120,9 @@ export const useChartDataFetch = (
     } catch (error) {
       console.log(error)
     }
-  } 
+  }
 
-  if (isPreview()) { 
+  if (isPreview()) {
     requestIntervalFn()
     const chartEditStore = useChartEditStore()
     const { initial } = useChartDataSocket()
@@ -116,9 +130,9 @@ export const useChartDataFetch = (
      * 支持分组也可以接受ws
      * 如果是分组并且绑定了ws
      */
-    chartEditStore.getComponentList?.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
-      if(item.isGroup){
-        if(item.request.requestUrl?.includes('ws')){
+    chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => {
+      if (item.isGroup) {
+        if (item.request.requestUrl?.includes('ws')) {
           initial(item, useChartEditStore, updateCallback)
         }
       }

@@ -240,6 +240,7 @@ const defaultTypeUpdate = (v: string) => {
 }
 
 const shortCutSelect = (value: number) => {
+  console.log(value)
   startTs.value = Date.now() - value
   endTs.value = Date.now()
   props.optionData.dataset = [startTs.value, endTs.value] as any

@@ -31,6 +31,20 @@ const timePeriod = ref<Nullable<[number, number]>>(null)
 const agg = ref()
 const interval = ref()
 const limit = ref(7)
+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 getRangeOptions = (number: number) => {
   for (let i = 0; i < defaultIntervalOptions.length; i++) {
@@ -97,7 +111,7 @@ watch(() => props.value, (target) => {
   <NGrid :cols="24">
     <NGi :span="16">
       <NFormItem :show-label="false">
-        <NDatePicker v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围"
+        <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>