feat: 公共接口管理新增聚合间隔等时间

+import { FormSchema } from '/@/components/Form';
+
+export const scheme: FormSchema[] = [
+  {
+    field: 'effectScope',
+    label: '时间周期',
+    colProps: { span: 24 },
+    component: 'Input',
+    defaultValue: 'effectScope',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'agg',
+    label: '聚合方式',
+    defaultValue: 'agg',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'interval',
+    label: '间隔时间',
+    defaultValue: 'interval',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+];

+<script setup lang="ts">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { scheme } from './config';
+
+  defineEmits(['register']);
+
+  const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: scheme,
+    showActionButtonGroup: false,
+  });
+
+  const getValue = () => {
+    return getFieldsValue();
+  };
+
+  const setValue = (objs) => setFieldsValue(objs);
+
+  const resetValue = () => resetFields();
+
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+
+<template>
+  <BasicForm @register="registerForm" />
+</template>

-import moment, { Moment } from 'moment';
-import { getPacketIntervalByRange, getPacketIntervalByValue } from './helper';
-import { FormSchema } from '/@/components/Form';
-import { ColEx } from '/@/components/Form/src/types';
-import { useGridLayout } from '/@/hooks/component/useGridLayout';
-export enum QueryWay {
-  LATEST = 'latest',
-  TIME_PERIOD = 'timePeriod',
-}
-
-export enum SchemaFiled {
-  WAY = 'way',
-  TIME_PERIOD = 'timePeriod',
-  KEYS = 'keys',
-  DATE_RANGE = 'dataRange',
-  START_TS = 'startTs',
-  END_TS = 'endTs',
-  INTERVAL = 'interval',
-  LIMIT = 'limit',
-  AGG = 'agg',
-  ORDER_BY = 'orderBy',
-}
-
-export enum AggregateDataEnum {
-  MIN = 'MIN',
-  MAX = 'MAX',
-  AVG = 'AVG',
-  SUM = 'SUM',
-  COUNT = 'COUNT',
-  NONE = 'NONE',
-}
-export const defaultSchemas: FormSchema[] = [
-  {
-    field: SchemaFiled.DATE_RANGE,
-    label: '时间段',
-    component: 'RangePicker',
-    rules: [{ required: true, message: '时间段为必选项' }],
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      let dates: Moment[] = [];
-      return {
-        showTime: {
-          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-        },
-        onCalendarChange(value: Moment[]) {
-          dates = value;
-        },
-        disabledDate(current: Moment) {
-          if (!dates || dates.length === 0 || !current) {
-            return false;
-          }
-          const diffDate = current.diff(dates[0], 'years', true);
-          return Math.abs(diffDate) > 1;
-        },
-        onChange() {
-          dates = [];
-          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
-        },
-        getPopupContainer: () => document.body,
-      };
-    },
-    colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
-  },
-  {
-    field: SchemaFiled.AGG,
-    label: '数据聚合功能',
-    component: 'Select',
-    componentProps: {
-      getPopupContainer: () => document.body,
-      options: [
-        { label: '最小值', value: AggregateDataEnum.MIN },
-        { label: '最大值', value: AggregateDataEnum.MAX },
-        { label: '平均值', value: AggregateDataEnum.AVG },
-        { label: '求和', value: AggregateDataEnum.SUM },
-        { label: '计数', value: AggregateDataEnum.COUNT },
-        { label: '空', value: AggregateDataEnum.NONE },
-      ],
-    },
-  },
-  {
-    field: SchemaFiled.INTERVAL,
-    label: '分组间隔',
-    component: 'Select',
-    dynamicRules: ({ model }) => {
-      return [
-        {
-          required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
-          message: '分组间隔为必填项',
-          type: 'number',
-        },
-      ];
-    },
-    componentProps({ formModel, formActionType }) {
-      const options =
-        formModel[SchemaFiled.WAY] === QueryWay.LATEST
-          ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
-          : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
-      if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
-        formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
-      }
-      return {
-        options,
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: SchemaFiled.LIMIT,
-    label: '最大条数',
-    component: 'InputNumber',
-    // defaultValue: 7,
-    ifShow({ values }) {
-      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
-    },
-    helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
-    componentProps() {
-      return {
-        max: 50000,
-        min: 7,
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-];

@@ -14,6 +14,7 @@
           </td>
           <td style="width: 12vw">
             <Select
+              :disabled="item.key === 'effectScope,agg,interval' ? true : false"
               v-model:value="item.key"
               placeholder="请选择"
               :options="selectOptions"
@@ -24,17 +25,19 @@
           </td>
           <td style="width: 12vw">
             <div v-if="item.key === 'date_range'">
-              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
-              <span>~</span>
-              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
-            </div>
-            <div v-if="item.key === 'date_range'">
-              <a-checkbox
-                style="position: relative; left: 0"
-                @change="onHandleCheck"
-                v-model:checked="isDateRange"
-                >更多选项</a-checkbox
-              >
+              <div>
+                <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
+                <span>~</span>
+                <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
+              </div>
+              <div>
+                <a-checkbox
+                  style="position: relative; left: -3.1vw"
+                  @change="onHandleCheck"
+                  v-model:checked="isDateRange"
+                  >更多选项</a-checkbox
+                >
+              </div>
             </div>
             <div v-else>
               <a-input
@@ -63,15 +66,15 @@
   </div>
   <BasicModal
     @register="registerModal"
-    title="历史数据"
-    width="70%"
-    :minHeight="400"
-    :footer="null"
+    title=""
+    width="40%"
+    :minHeight="90"
     wrap-class-name="history-trend-model"
     :canFullscreen="false"
     @cancel="handleCancelModal"
+    @ok="onHandleModal"
   >
-    <TimePeriodForm @register="timePeriodRegister" />
+    <DateRangeSelect ref="dateRangeSelectRef" />
   </BasicModal>
 </template>
 <script lang="ts" setup name="editCellTable">
@@ -82,10 +85,7 @@
   import { editCellTableTHeadConfig } from '../../../config';
   import { selectType, tableItems } from '../../../types';
   import { useModal, BasicModal } from '/@/components/Modal';
-  import TimePeriodForm from './selectDateRange.vue';
-  import { selectDeviceAttrSchema } from './config.data';
-  import { defaultSchemas } from './config';
-  import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm/useTimePeriodForm';
+  import DateRangeSelect from './DateRangeSelect/index.vue';
 
   defineProps({
     method: {
@@ -95,7 +95,9 @@
 
   const selectOptions = ref<selectType[]>([]);
 
-  const [registerModal, { openModal }] = useModal();
+  const dateRangeSelectRef = ref<InstanceType<typeof DateRangeSelect>>();
+
+  const [registerModal, { openModal, closeModal }] = useModal();
 
   const isDateRange = ref(false);
 
@@ -106,15 +108,19 @@
     }
   };
 
-  const [timePeriodRegister, method] = useTimePeriodForm({
-    schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
-    async submitFunc() {
-      const value = method.getFieldsValue();
-      console.log(value);
-    },
-  });
+  const handleCancelModal = () => {
+    closeModal();
+    dateRangeSelectRef.value?.resetValue();
+    isDateRange.value = false;
+  };
 
-  const handleCancelModal = () => {};
+  const getDateRangeValue = ref<any>({});
+
+  const onHandleModal = () => {
+    const values = dateRangeSelectRef.value?.getValue();
+    getDateRangeValue.value = values;
+    closeModal();
+  };
 
   onMounted(() => {
     getSelectOptions();
@@ -192,7 +198,7 @@
 
   //获取数据
   const getValue = () => {
-    const assemblyData = tableArray.content.map((it) => {
+    let assemblyData: any = tableArray.content.map((it) => {
       return {
         key: it.key,
         value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
@@ -200,13 +206,25 @@
         required: it.required,
       };
     });
+    assemblyData = assemblyData.filter((item) => item.key !== 'effectScope,agg,interval');
+    if (getDateRangeValue.value) {
+      const joinStr = Object.keys(getDateRangeValue.value)?.join(',');
+      if (isDateRange.value) {
+        assemblyData.push({
+          key: joinStr,
+          value: '',
+          isDateRange: isDateRange.value,
+        });
+      }
+    }
     return assemblyData;
   };
 
   //设置数据
   const setValue = async (data) => {
     await nextTick();
-    const assemblyData = data.map((it) => {
+    console.log(data);
+    let assemblyData = data.map((it) => {
       return {
         key: it.key,
         value: it.value,
@@ -216,6 +234,19 @@
         date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
       };
     });
+    const findIsDateRange = data.find((it) => it?.isDateRange === true);
+    if (findIsDateRange?.isDateRange) {
+      isDateRange.value = findIsDateRange?.isDateRange;
+      getDateRangeValue.value = {
+        effectScope: 'effectScope',
+        agg: 'agg',
+        interval: 'interval',
+      };
+    } else {
+      assemblyData = assemblyData.filter(
+        (item) => item?.isDateRange == false || !item?.isDateRange
+      );
+    }
     tableArray.content = assemblyData;
     tableArray.content.forEach(() => {
       handleChange();
@@ -224,6 +255,7 @@
 
   //重置数据
   const resetValue = () => {
+    isDateRange.value = false;
     tableArray.content = [];
     tableArray.content.push({
       key: undefined,

-<script setup lang="ts">
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { defaultSchemas, SchemaFiled } from './config';
-  import { onMounted } from 'vue';
-  import { useGridLayout } from '/@/hooks/component/useGridLayout';
-  import { ColEx } from '/@/components/Form/src/types';
-
-  const emit = defineEmits(['register']);
-  const [register, method] = useForm({
-    schemas: defaultSchemas,
-    labelWidth: 120,
-    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
-    fieldMapToTime: [
-      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'],
-    ],
-    showResetButton: false,
-    showSubmitButton: false,
-  });
-  onMounted(() => {
-    emit('register', method);
-  });
-</script>
-
-<template>
-  <BasicForm @register="register" />
-</template>

@@ -145,9 +145,13 @@
     await nextTick(() => {
       //拆分"xx,xx,xx"多个
       const getSingleKey = props.data?.list;
-      const getMuteKey = props.data?.list?.filter((it: any) => it.key?.split(',').length > 1);
+      const findDateRange = [getSingleKey.find((item) => item?.key == 'effectScope,agg,interval')];
+      const getMuteKey = props.data?.list?.filter(
+        (it: any) => it.key?.split(',').length > 1 && it?.key !== 'effectScope,agg,interval'
+      );
       const getMuteKeys = getMultipleKeys(getMuteKey);
-      const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter(
+      const getMuteDateRangeKeys = getMultipleKeys(findDateRange);
+      let mergeKeys = [...getSingleKey, ...getMuteKeys, ...getMuteDateRangeKeys]?.filter(
         (it: any) => it.key?.split(',').length === 1
       );
       testEditCellTableRef.value?.setTableArray(mergeKeys);

@@ -14,6 +14,8 @@ export type tableItems = {
   fixed_date_value?: string;
   editDisabled?: boolean;
   required?: boolean;
+  data_range_select?: boolean;
+  isDateRange?: boolean;
   date1?: string;
   date2?: string;
   keyValue?: null | string;