fix(动态请求): 优化时间周期聚合条件

@@ -392,8 +392,8 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
           continue
         }
         if (mores) {
-          const { agg, interval, timePeriod } = Params
-          params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { agg, interval, timePeriod }
+          const { agg, interval, startTs, endTs, limit } = Params
+          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

-<script lang="ts">
-export default {
-  inheritAttrs: true,
-  components: { NFormItem }
-}
-</script>
 <script lang="ts" setup>
-import { FormItemRule, NFormItem, NGi, NGrid, NSelect } from 'naive-ui';
+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 {
-  timePeriod?: Nullable<number>
   agg?: Nullable<string>
   interval?: Nullable<number>
+  startTs?: Nullable<number>
+  endTs?: Nullable<number>
+  limit?: Nullable<number>
 }
 
 const props = withDefaults(
@@ -31,120 +27,95 @@ const emit = defineEmits<{
 }>()
 
 
-const timePeriod = ref(props.value?.timePeriod)
-const agg = ref(props.value?.agg)
-const interval = ref(props.value?.interval)
-
-const getIntervalTimeOptions = computed(() => {
-  return defaultIntervalOptions.find(item => item.id === unref(timePeriod))?.linkage || []
-})
-
-// const getTimePeriod = computed({
-//   get() {
-//     return props.value?.timePeriod
-//   },
-//   set(value) {
-//     emit('update:value', { ...props.value || {}, timePeriod: value })
-//     emit('change', { ...props.value || {}, timePeriod: value })
-//   }
-// })
+const timePeriod = ref<Nullable<[number, number]>>(null)
+const agg = ref()
+const interval = ref()
+const limit = ref(7)
 
-// const getAggereation = computed({
-//   get() {
-//     return props.value?.agg
-//   },
-//   set(value) {
-//     emit('update:value', { ...props.value || {}, agg: value })
-//     emit('change', { ...props.value || {}, agg: value })
+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 getInterval = computed({
-//   get() {
-//     return props.value?.interval
-//   },
-//   set(value) {
-//     emit('update:value', { ...props.value || {}, interval: value })
-//     emit('change', { ...props.value || {}, interval: value })
+  }
+}
 
-//   }
-// })
+const getShowLimit = computed(() => {
+  return unref(agg) === 'NONE'
+})
 
-// const getTimePeriod = computed(() => props.value.timePeriod)
-// const getAggereation = computed(() => props.value.agg)
-// const getInterval = computed(() => props.value.interval)
+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) => {
-  emit('update:value', { ...props.value, timePeriod: value, interval: null })
-  emit('change', { ...props.value || {}, timePeriod: value, interval: null })
+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) => {
-  emit('update:value', { ...props.value, agg: value })
-  emit('change', { ...props.value, agg: value })
+  const _value = { ...props.value, agg: value }
+  Reflect.deleteProperty(_value, value === 'NONE' ? 'interval' : 'limit')
+  emit('update:value', _value)
+  emit('change', _value)
 }
 
 const handleIntervalChange = (value: number) => {
-  emit('update:value', { ...props.value, interval: value })
-  emit('change', { ...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 }
+  emit('update:value', _value)
+  emit('change', _value)
 }
 
 watch(() => props.value, (target) => {
   if (target && isObject(target)) {
-    const { agg: _agg, interval: _interval, timePeriod: _timePeriod } = target || {}
-    timePeriod.value = _timePeriod
+    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
   }
 })
-
-const timePeriodRule: FormItemRule = {
-  trigger: ['blur'],
-  validator() {
-    if (!unref(timePeriod)) {
-      return new Error('请选择时间周期')
-    }
-  }
-}
-
-const aggRule: FormItemRule = {
-  trigger: ['blur'],
-  validator() {
-    if (!unref(agg)) {
-      return new Error('请选择聚合方式')
-    }
-  }
-}
-
-const intervalRule: FormItemRule = {
-  trigger: ['blur'],
-  validator() {
-    if (!unref(interval)) {
-      return new Error('请选择间隔时间')
-    }
-  }
-}
-
 </script>
 
 <template>
-  <NGrid :cols="3">
-    <NGi>
-      <NFormItem :show-label="false" :rule="timePeriodRule">
-        <NSelect v-model:value="timePeriod" :options="defaultIntervalOptions" label-field="name" value-field="id"
-          @update:value="handleTimePerionChange" placeholder="请选择时间周期"></NSelect>
+  <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>
-      <NFormItem :show-label="false" :rule="aggRule">
+    <NGi :span="4">
+      <NFormItem :show-label="false">
         <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name"
-          value-field="id" placeholder="聚合方式"></NSelect>
+          value-field="id" placeholder="聚合方式" clearable></NSelect>
       </NFormItem>
     </NGi>
-    <NGi>
-      <NFormItem :show-label="false" :rule="intervalRule">
+    <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="间隔时间"></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" @update:value="handleLimitChange" :min="7" :step="1" placeholder="请输入最大条数" />
       </NFormItem>
     </NGi>
   </NGrid>