Merge branch 'dev-fix-ww' into 'main_dev'

feat(公共接口/动态表单): 时间区间选择器新增周期范围选择配置

See merge request yunteng/thingskit-view!52

@@ -3,6 +3,7 @@ import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentI
 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { isShareMode } from "@/views/share/hook"
 import { customHttp } from "./http"
+import { SelectTimeAggregationFieldEnum } from "@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation"
 
 export enum ParamsType {
   REQUIRED,
@@ -91,6 +92,21 @@ const extraValue = (object: Recordable) => {
   }, {})
 }
 
+const handleParams = (Params: Recordable) => {
+  if (Params.keys && Params?.keys?.length) {
+    Params.keys = (Params.keys || [] as any).join(',')
+  }
+
+  const timePeriod = Params[SelectTimeAggregationFieldEnum.TIME_PERIOD]
+  if (timePeriod) {
+    Params.startTs = Date.now() - timePeriod
+    Params.endTs = Date.now()
+    Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD)
+  }
+
+  return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
+}
+
 export const customRequest = async (request: RequestConfigType) => {
   const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
   let { requestUrl } = request as ExtraRequestConfigType
@@ -105,10 +121,7 @@ export const customRequest = async (request: RequestConfigType) => {
 
   const body = transformBodyValue(Body, requestParamsBodyType)
 
-  if (Params.keys && Params?.keys?.length) {
-    Params.keys = (Params.keys || [] as any).join(',')
-  }
-
+  Params = handleParams(Params)
   return customHttp.request<any>({
     url: requestUrl,
     baseURL: getOriginUrl(requestOriginUrl!),

@@ -9,6 +9,7 @@ export interface ParamsItemType {
   key: string
   required: boolean
   value: string
+  mores: boolean
 }
 
 export interface PublicInterfaceRequestParams {

@@ -95,7 +95,6 @@ watch(
   () => props.chartConfig.option.dataset,
   newData => {
     option.dataset = newData
-    console.log(option.dataset)
   },
   {
     immediate: true,

@@ -4,6 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele
 import { computed, nextTick, ref, unref, watch } from 'vue';
 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
 import { Help } from '@vicons/ionicons5'
+import { SelectTimeAggregation } from '../SelectTImeAggregation'; 
 
 const props = defineProps<{
   paramsItemList: ParamsItemType[]
@@ -13,7 +14,8 @@ const componentMap: { [key in ComponentType]?: any } = {
   [ComponentType.SELECT_TREE]: NTreeSelect,
   [ComponentType.SELECT]: NSelect,
   [ComponentType.INPUT]: NInput,
-  [ComponentType.DATE_PICKER]: NDatePicker
+  [ComponentType.DATE_PICKER]: NDatePicker,
+  [ComponentType.SELECT_TIME_AGGREGATION]: SelectTimeAggregation
 }
 
 const getParamsItemList = computed(() => {

+enum TimeUnitEnum {
+  SECOND = 'SECOND',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY',
+}
+
+const unitMapping = {
+  [TimeUnitEnum.SECOND]: '秒',
+  [TimeUnitEnum.MINUTE]: '分',
+  [TimeUnitEnum.HOUR]: '小时',
+  [TimeUnitEnum.DAY]: '天',
+}
+
+const unitConversion = {
+  [TimeUnitEnum.SECOND]: 1 * 1000,
+  [TimeUnitEnum.MINUTE]: 1 * 60 * 1000,
+  [TimeUnitEnum.HOUR]: 1 * 60 * 60 * 1000,
+  [TimeUnitEnum.DAY]: 1 * 60 * 60 * 24 * 1000,
+}
+
+export  const defaultIntervalOptions = [
+  {
+    id: 1,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 15,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND },
+      { id: 5, unit: TimeUnitEnum.SECOND },
+    ]
+  },
+  {
+    id: 2,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND },
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND },
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 15,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 2,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+    ]
+  },
+  {
+    id: 12,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnitEnum.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+      { id: 2, unit: TimeUnitEnum.HOUR },
+    ]
+  },
+  {
+    id: 7,
+    unit: TimeUnitEnum.DAY,
+    linkage: [
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+      { id: 2, unit: TimeUnitEnum.HOUR },
+      { id: 5, unit: TimeUnitEnum.HOUR },
+      { id: 10, unit: TimeUnitEnum.HOUR },
+      { id: 12, unit: TimeUnitEnum.HOUR },
+      { id: 1, unit: TimeUnitEnum.DAY },
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnitEnum.DAY,
+    linkage: [
+      { id: 2, unit: TimeUnitEnum.HOUR },
+      { id: 5, unit: TimeUnitEnum.HOUR },
+      { id: 10, unit: TimeUnitEnum.HOUR },
+      { id: 12, unit: TimeUnitEnum.HOUR },
+      { id: 1, unit: TimeUnitEnum.DAY },
+    ]
+  },
+].map(item => {
+  return {
+    id: item.id * unitConversion[item.unit],
+    name: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map(item => {
+      return {
+        id: item.id * unitConversion[item.unit],
+        name: item.id + unitMapping[item.unit],
+      }
+    })
+  }
+})
+ 
+export const aggergationOptions = [
+  { id: 'AVG', name: '平均值' },
+  { id: 'MIN', name: '最小值' },
+  { id: 'MAX', name: '最大值' },
+  { id: 'SUM', name: '求和' },
+  { id: 'COUNT', name: '计数' },
+  { id: 'NONE', name: '空' },
+]

@@ -6,6 +6,8 @@ import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
 import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
 import { DictEnum } from '@/enums/external/dictEnum'
+import { SelectTimeAggregationFieldEnum, SelectTimeAggregationValueTypw } from "../SelectTImeAggregation"
+import { isArray } from "@/utils"
 
 const GROUP_SEPARATOR = ','
 
@@ -15,7 +17,8 @@ export enum BuiltInVariable {
   ORGANIZATION_ID = 'organizationId',
   DEVICE_PROFILE_ID = 'deviceProfileId',
   DATE_FIXED = 'fixed_date',
-  DATE_RANGE = 'date_range'
+  DATE_RANGE = 'date_range',
+  SELECT_TIME_AGGREGATION = 'selectTimeAggregation'
 }
 
 export enum ComponentType {
@@ -23,6 +26,7 @@ export enum ComponentType {
   SELECT_TREE = 'selectTree',
   DATE_PICKER = 'datePicker',
   INPUT = 'input',
+  SELECT_TIME_AGGREGATION = 'selectTimeAggregation'
 }
 
 
@@ -57,7 +61,9 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
 
   const builtInVariable = ref<BuiltInVariableRecord>()
 
-  const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({})
+  const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({
+    [BuiltInVariable.SELECT_TIME_AGGREGATION]: {}
+  })
 
   const optionsSet = reactive<Recordable>({})
 
@@ -109,7 +115,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return
     const result: Recordable[] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] })
     optionsSet[BuiltInVariable.ENTITY_ID] = result.map(item => ({ ...item, alias: item.alias || item.name }))
-    console.log(optionsSet[BuiltInVariable.ENTITY_ID])
   }
 
   const getDeviceAttrOption = async () => {
@@ -121,6 +126,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
 
   const getValue = computed(() => {
     const value = { ...unref(params) }
+
     if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) {
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED)
       Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED])
@@ -130,13 +136,24 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) {
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
       const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
-      const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE] || []
+      const dateRangeValue = value[BuiltInVariable.DATE_RANGE]
+      const [startValue, endValue] = isArray(dateRangeValue) ? dateRangeValue : [null, null]
       value[start] = startValue
       value[end] = endValue
-
       Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE)
     }
 
+    if (Reflect.has(value, BuiltInVariable.SELECT_TIME_AGGREGATION)) {
+      const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
+      const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
+      const aggregation = Reflect.get(value, BuiltInVariable.SELECT_TIME_AGGREGATION) || {}
+      const result = { ...aggregation, [start]: aggregation.startTs, [end]: aggregation.endTs }
+      Reflect.deleteProperty(result, SelectTimeAggregationFieldEnum.START_TS)
+      Reflect.deleteProperty(result, SelectTimeAggregationFieldEnum.END_TS)
+      Object.assign(value, { ...result, [start]: aggregation.startTs, [end]: aggregation.endTs })
+      Reflect.deleteProperty(value, BuiltInVariable.SELECT_TIME_AGGREGATION)
+    }
+
     return value
   })
 
@@ -240,6 +257,15 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     } as InputProps
   }
 
+  const getSelectTimeAggregation = computed(() => {
+    return {
+      value: params[BuiltInVariable.SELECT_TIME_AGGREGATION],
+      onChange(value: SelectTimeAggregationValueTypw) {
+        params[BuiltInVariable.SELECT_TIME_AGGREGATION] = value
+      }
+    }
+  })
+
   const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
     [BuiltInVariable.ORGANIZATION_ID]: {
       component: ComponentType.SELECT_TREE,
@@ -270,9 +296,31 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
       component: ComponentType.DATE_PICKER,
       key: BuiltInVariable.DATE_FIXED,
       props: getSelectDate
+    },
+  }
+
+  const moresComponentConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
+    [BuiltInVariable.DATE_RANGE]: {
+      component: ComponentType.SELECT_TIME_AGGREGATION,
+      key: BuiltInVariable.SELECT_TIME_AGGREGATION,
+      props: getSelectTimeAggregation
     }
   }
 
+  const timePeriodRules = (required: boolean, key: string, message: string) => {
+    return [{
+      trigger: ['blur', 'change'],
+      validator() {
+        const record = params[BuiltInVariable.SELECT_TIME_AGGREGATION]
+        if (required && ![record[SelectTimeAggregationFieldEnum.AGG], record[SelectTimeAggregationFieldEnum.INTERVAL], record[SelectTimeAggregationFieldEnum.END_TS], record[SelectTimeAggregationFieldEnum.START_TS]].every(Boolean)) {
+          validFlag.value = false
+          return new Error(`${message}需要填写完整`)
+        }
+        validFlag.value = true
+      }
+    }] as FormItemRule
+  }
+
   const validFlag = ref(true)
 
   const createRules = (required: boolean, key: string, message: string) => {
@@ -288,20 +336,25 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     }] as FormItemRule
   }
 
-  const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => {
+  const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any, mores: boolean) => {
     const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR)
     return groupList.reduce((prev, next) => {
-      const result = builtInVariableConfiguration[next as BuiltInVariable]
-      const props = unref(result?.props)
+      let result = builtInVariableConfiguration[next as BuiltInVariable]
+      let props = unref(result?.props)
       const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText
       let schema: DynamicFormSchema
-      if (builtInVariableConfiguration[next as BuiltInVariable]) {
+      if (result) {
+        if (mores) {
+          result = moresComponentConfiguration[next as BuiltInVariable]
+          props = unref(result?.props)
+        }
+
         schema = {
           ...result,
           props,
           name,
           required,
-          rules: createRules(required, next, name || next)
+          rules: mores ? timePeriodRules(required, next, name || next) : createRules(required, next, name || next)
         } as DynamicFormSchema
       } else {
         schema = {
@@ -313,7 +366,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
           rules: createRules(required, value, value)
         } as DynamicFormSchema
       }
-
       return [...prev, schema]
 
     }, [] as DynamicFormSchema[])
@@ -321,10 +373,11 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
   }
 
   const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => {
-    return unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required }) => {
-      const schemas = toFormSchemas(key, required, value)
+    const result = unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required, mores }) => {
+      const schemas = toFormSchemas(key, required, value, mores)
       return [...prev, ...schemas]
     }, [] as DynamicFormSchema[])
+    return result
   })
 
   const createForm = async () => {
@@ -335,15 +388,22 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
   }
 
   const setParams = (Params: Recordable = {}) => {
-    for (const { key, value } of unref(getParams)) {
+    for (const { key, value, mores } of unref(getParams)) {
       const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR)
       if (isDateComponent(key as BuiltInVariable)) {
         if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) {
           params[key] = Params[splitKeys[0]] || null
           continue
         }
-        const value = [Params[splitKeys[0]], Params[splitKeys[1]]]
-        params[key] = value.every(Boolean) ? value : null
+        if (mores) {
+          const { agg, interval, limit } = Params
+          const startTs = Params[splitKeys[0]]
+          const endTs = Params[splitKeys[1]]
+          params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { agg, interval, startTs, endTs, limit }
+        } else {
+          const value = [Params[splitKeys[0]], Params[splitKeys[1]]]
+          params[key] = value.every(Boolean) ? value : null
+        }
         continue
       }
       for (const temp of splitKeys) {
@@ -356,6 +416,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     Object.keys(params).forEach(key => {
       Reflect.deleteProperty(params, key)
     })
+    params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {}
   }
 
   const setDynamicFormValue = (params: Recordable) => {

+export { default as SelectTimeAggregation } from './index.vue'
+
+export interface SelectTimeAggregationValueTypw {
+  timePeriod?: Nullable<number>
+  startTs?: Nullable<number>
+  endTs?: Nullable<number>
+  agg?: Nullable<string>
+  interval?: Nullable<number>
+}
+
+
+export enum SelectTimeAggregationFieldEnum {
+  TIME_PERIOD = 'timePeriod',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  AGG = 'agg',
+  INTERVAL = 'interval'
+}
+

+<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';
+
+interface Value {
+  agg?: Nullable<string>
+  interval?: Nullable<number>
+  startTs?: Nullable<number>
+  endTs?: Nullable<number>
+  limit?: Nullable<number>
+}
+
+const props = withDefaults(
+  defineProps<{
+    value?: Value
+  }>(),
+  {
+    value: () => ({})
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:value', value: Value): void
+  (e: 'change', value: Value): void
+}>()
+
+
+const timePeriod = ref<Nullable<[number, number]>>(null)
+const agg = ref()
+const interval = ref()
+const limit = ref(7)
+
+const getRangeOptions = (number: number) => {
+  for (let i = 0; i < defaultIntervalOptions.length; i++) {
+    const option = defaultIntervalOptions[i]
+    if (option.id >= number || i === defaultIntervalOptions.length - 1) {
+      return option.linkage
+    }
+
+  }
+}
+
+const getShowLimit = computed(() => {
+  return unref(agg) === 'NONE'
+})
+
+const getIntervalTimeOptions = computed(() => {
+  const [startTs, endTs] = unref(timePeriod) || []
+  if (!startTs || !endTs) return []
+  const diff = Math.abs(startTs - endTs)
+  return getRangeOptions(diff)
+})
+
+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 })
+}
+
+const handleAggChange = (value: string) => {
+  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 }
+  emit('update:value', _value)
+  emit('change', _value)
+}
+
+const handleLimitChange = (value: Nullable<number>) => {
+  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 || {}
+    if (startTs && endTs) {
+      timePeriod.value = [startTs!, endTs!]
+    } else {
+      timePeriod.value = null
+    }
+    agg.value = _agg
+    limit.value = _limit!
+    interval.value = _interval
+  }
+})
+</script>
+
+<template>
+  <NGrid :cols="24">
+    <NGi :span="16">
+      <NFormItem :show-label="false">
+        <NDatePicker v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围"
+          @update-value="handleTimePerionChange" clearable></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>
+      </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>
+      </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="请输入最大条数" />
+      </NFormItem>
+    </NGi>
+  </NGrid>
+</template>

@@ -95,7 +95,7 @@ const getSharePageContentData = async () => {
     }
     setTitle(dataViewName || '')
     showModal.value = false
-    allowLoadPreviewPage.value = false
+    allowLoadPreviewPage.value = unref(isEmpty)
   } catch (error) {
     console.log(error)
   } finally {