Merge branch 'fix/board-displayTime-problem' into 'main_dev'

修改看板组件告警实时数据问题和添加是否展示时间字段

See merge request yunteng/thingskit-front!741

@@ -213,7 +213,6 @@
           </Tooltip>
           <Tooltip title="删除">
             <DeleteOutlined
-              v-show="dataSource.length > 1"
               @click="handleDelete(item)"
               class="cursor-pointer text-lg !leading-32px"
             />

@@ -96,6 +96,7 @@
   );
 
   const transformMessage = (cmdId: number) => {
+    if (props.config.option.mode == 'SELECT_PREVIEW') return;
     currentCmdId.value = cmdId;
     send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
   };

@@ -139,8 +139,8 @@
   );
 
   const transformMessage = (cmdId: number) => {
+    if (props.config.option.mode == 'SELECT_PREVIEW') return;
     currentCmdId.value = cmdId;
-
     send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
   };
 

@@ -13,7 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.UNIT]: 'm',
   [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
-  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
     [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
     [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',

@@ -55,6 +55,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -20,12 +20,13 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeName, attributeRename } = option;
-    const { flowmeterConfig, unit, fontColor } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
       flowmeterConfig: presetFlowmeterConfig,
       unit: persetUnit,
       fontColor: presetFontColor,
+      showTime: persetShowTime,
     } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
@@ -41,6 +42,7 @@
       unit: unit ?? persetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -76,7 +78,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center relative">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center relative"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <svg
       class="waves-rect"
@@ -121,7 +126,7 @@
     <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
       getDesign.attribute || '属性'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>
 

@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.UNIT]: 'm',
   [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
     [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',

@@ -55,6 +55,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -20,12 +20,13 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeName, attributeRename } = option;
-    const { flowmeterConfig, unit, fontColor } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
       flowmeterConfig: presetFlowmeterConfig,
       unit: persetUnit,
       fontColor: presetFontColor,
+      showTime: persetShowTime,
     } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
@@ -41,6 +42,7 @@
       unit: unit ?? persetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -66,7 +68,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center relative">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center relative"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <svg
       class="waves-rect"
@@ -114,7 +119,7 @@
     <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
       getDesign.attribute || '属性'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>
 

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -19,6 +19,11 @@
         label: '显示设备名称',
         component: 'Checkbox',
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -37,12 +37,13 @@
 
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
-    const { fontColor: presetFontColor } = persetOption || {};
+    const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {};
     const { componentInfo, attribute, attributeName, attributeRename } = option || {};
-    const { fontColor } = componentInfo || {};
+    const { fontColor, showTime } = componentInfo || {};
     return {
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -59,7 +60,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center relative">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center relative"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg">
       <defs>
@@ -256,7 +260,7 @@
     <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
       getDesign.attribute || '属性'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>
 

@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
   [ComponentConfigFieldEnum.UNIT]: 'kw/h',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -28,6 +28,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -48,12 +48,17 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
-    const { unit, fontColor } = componentInfo || {};
+    const {
+      fontColor: presetFontColor,
+      unit: presetUnit,
+      showTime: persetShowTime,
+    } = persetOption || {};
+    const { unit, fontColor, showTime } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -71,7 +76,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <div class="flex flex-col w-full h-full">
       <DeviceName class="text-center" :config="config" />
 
@@ -134,7 +142,7 @@
         <span>{{ getDesign.attribute || '电表' }}</span>
       </div>
 
-      <UpdateTime :time="time" />
+      <UpdateTime v-show="getDesign.showTime" :time="time" />
     </div>
   </main>
 </template>

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
 };
 

@@ -25,6 +25,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -27,12 +27,17 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
-    const { unit, fontColor } = componentInfo || {};
+    const {
+      fontColor: presetFontColor,
+      unit: presetUnit,
+      showTime: persetShowTime,
+    } = persetOption || {};
+    const { unit, fontColor, showTime } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: persetShowTime || showTime,
     };
   });
 
@@ -222,12 +227,15 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
     <div class="text-gray-500 text-xs text-center truncate">{{
       getDesign.attribute || '温度'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -29,6 +29,7 @@ export const option: PublicPresetOptions = {
   ],
   [ComponentConfigFieldEnum.UNIT]: 'km/h',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -81,6 +81,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -112,11 +118,12 @@
       fontColor: value[ComponentConfigFieldEnum.FONT_COLOR],
       unit: value[ComponentConfigFieldEnum.UNIT],
       showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: ComponentInfo) => {
-    const { gradientInfo, unit, fontColor, showDeviceName } = data;
+    const { gradientInfo, unit, fontColor, showDeviceName, showTime } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
     const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -124,6 +131,7 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,

@@ -36,14 +36,16 @@
       fontColor: presetFontColor,
       unit: presetUnit,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
     } = persetOption || {};
 
-    const { unit, fontColor, gradientInfo } = componentInfo || {};
+    const { unit, fontColor, gradientInfo, showTime } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime || persetShowTime,
     };
   });
 
@@ -205,12 +207,15 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
     <div class="text-center text-gray-500 text-xs truncate">
       {{ getDesign.attribute || '速度' }}
     </div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -24,7 +24,7 @@
   // const time = ref<Nullable<number>>(null);
 
   const updateInterval = ref<number>(1000); //默认每秒更新一次
-  const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点
+  const maxDataPoints = ref<number>(30); //默认每秒显示10个数据点
 
   const chartData = ref<{ time: string | number; value: number }[]>([]);
   const legendData = ref<string[]>(['温度']);
@@ -51,7 +51,7 @@
       grid: {
         top: '30%',
         left: '6%',
-        right: '16%',
+        right: '10%',
         bottom: '1%',
         containLabel: true,
       },

@@ -219,7 +219,7 @@ class Subscriber {
           throw error;
         }
       }
-      return;
+      // return;
     }
 
     for (const item of subscriptionGroup) {

@@ -91,7 +91,11 @@
 
   const isAlarm = computed(() => {
     const frontId = props.sourceInfo.frontId;
-    if (frontId == 'DeviceAlarm' || frontId == 'DeviceAlarmHistory') {
+    if (
+      frontId == 'DeviceAlarm' ||
+      frontId == 'DeviceAlarmHistory' ||
+      frontId == 'StatisticsComponent7'
+    ) {
       return true;
     } else {
       return false;

@@ -20,7 +20,7 @@ export enum SchemaFiled {
   LIMIT = 'limit',
   AGG = 'agg',
   ORDER_BY = 'orderBy',
-  PAGE_SIZe = 'pageSize',
+  PAGE_SIZE = 'pageSize',
 }
 
 export enum AggregateDataEnum {
@@ -60,7 +60,7 @@ export const formSchema = (): FormSchema[] => {
     },
 
     {
-      field: SchemaFiled.PAGE_SIZe,
+      field: SchemaFiled.PAGE_SIZE,
       label: '分页条数',
       component: 'InputNumber',
       defaultValue: 20,

-export { default as alarmTimeModal } from './index.vue';
+export { default as AlarmTimeModal } from './index.vue';

 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import { formSchema, SchemaFiled } from './config';
+  import { AggregateDataEnum, formSchema, QueryWay, SchemaFiled } from './config';
   import { useForm } from '/@/components/Form';
   import { useModalInner } from '/@/components/Modal';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -8,13 +8,81 @@
   import { BasicForm } from '/@/components/Form';
   import { BasicModal } from '/@/components/Modal';
   import { nextTick } from 'vue';
+  import {
+    getPacketIntervalByRange,
+    getPacketIntervalByValue,
+  } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
 
-  const emit = defineEmits(['register', 'getAlarmForm']);
+  const emit = defineEmits(['register', 'getAlarmForm', 'getHistoryForm']);
   // const emit = defineEmits<{
   //   (event: 'getAlarmForm', data: WidgetDataType): void;
   // }>();
 
-  const [registerModal, { closeModal }] = useModalInner();
+  const fontId = ref('');
+  const [registerModal, { closeModal }] = useModalInner(async (data) => {
+    fontId.value = unref(data).record.frontId;
+    method.updateSchema([
+      {
+        field: SchemaFiled.PAGE_SIZE,
+        ifShow: unref(fontId) !== 'StatisticsComponent7',
+      },
+    ]);
+    if (unref(fontId) !== 'StatisticsComponent7') return;
+    await nextTick();
+    method.appendSchemaByField(
+      {
+        field: SchemaFiled.AGG,
+        label: '数据聚合功能',
+        component: 'Select',
+        defaultValue: AggregateDataEnum.NONE,
+        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 },
+          ],
+        },
+      },
+      SchemaFiled.DATE_RANGE
+    );
+    method.appendSchemaByField(
+      {
+        field: SchemaFiled.INTERVAL,
+        label: '分组间隔',
+        component: 'Select',
+        dynamicRules: ({ model }) => {
+          return [
+            {
+              required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
+              message: '分组间隔为必填项',
+              type: 'number',
+            },
+          ];
+        },
+        ifShow({ values }) {
+          return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
+        },
+        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,
+          };
+        },
+      },
+      SchemaFiled.AGG
+    );
+  });
 
   const [register, method] = useForm({
     schemas: formSchema(),
@@ -33,21 +101,14 @@
   const handleCancel = () => {
     // destory()
   };
-  const alarmForm = ref({ time: 2592000000, pageSize: 10 }); //默认30天
   const handleSubmit = async () => {
-    const { way, pageSize, startTs, endTs } = method.getFieldsValue();
-    if (way == 'timePeriod') {
-      alarmForm.value = {
-        time: new Date(endTs).getTime() - new Date(startTs).getTime(),
-        pageSize,
-      };
+    const values = method.getFieldsValue();
+    if (unref(fontId) == 'StatisticsComponent7') {
+      emit('getHistoryForm', values);
     } else {
-      alarmForm.value = {
-        time: startTs,
-        pageSize,
-      };
+      emit('getAlarmForm', values);
     }
-    emit('getAlarmForm', unref(alarmForm));
+
     await nextTick();
     closeModal();
   };

+import { Ref, inject, provide } from 'vue';
+
+const SymbolKey = Symbol('history-info');
+interface IHistory {
+  [key: string]: string;
+}
+
+export interface HistoryContextType {
+  historyForm: Ref<IHistory> | any;
+  getHistoryForm: (value: any) => void;
+}
+
+export const createHistoryContext = (options: HistoryContextType) => {
+  provide(SymbolKey, options);
+};
+
+export const useHistoryContext = () => {
+  return inject<HistoryContextType>(SymbolKey) || ({} as Partial<HistoryContextType>);
+};

@@ -25,13 +25,14 @@
   import { ModalParamsType } from '/#/utils';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { HistoryTrendModal } from './components/HistoryTrendModal';
-  import { alarmTimeModal } from './components/alarmTimeModal';
+  import { AlarmTimeModal } from './components/AlarmTimeModal';
   import { watch } from 'vue';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { ThemeEnum } from '/@/enums/appEnum';
   import { createDataBoardContext } from './hooks/useDataBoardContext';
   import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
   import { createAlarmContext } from './hooks/useAlarmTime';
+  import { createHistoryContext } from './hooks/useHistoryForm';
 
   const props = defineProps<{
     value?: Recordable;
@@ -85,15 +86,46 @@
     time: 2592000000,
     pageSize: 10,
   });
-  const getAlarmForm = (value) => {
-    alarmForm.value = {
-      time: value.time,
-      pageSize: value.pageSize,
-    };
-  };
 
+  //告警发送数据
+  const getAlarmForm = (values) => {
+    const { way, pageSize, startTs, endTs } = values;
+    if (way == 'timePeriod')
+      alarmForm.value = {
+        time: new Date(endTs).getTime() - new Date(startTs).getTime(),
+        pageSize,
+      };
+    else
+      alarmForm.value = {
+        time: startTs,
+        pageSize,
+      };
+  };
   createAlarmContext({ alarmForm: alarmForm, getAlarmForm });
 
+  // 历史数据发送
+  const historyForm = ref({
+    startTs: 2592000000,
+    endTs: undefined,
+    agg: 'NONE',
+    limit: null,
+    interval: undefined,
+    way: 'latest',
+  });
+  const getHistoryForm = (values) => {
+    const { startTs, endTs, agg, limit, interval, way } = values;
+    historyForm.value = {
+      startTs,
+      endTs,
+      agg,
+      limit,
+      interval,
+      way,
+    };
+    console.log(values);
+  };
+  createHistoryContext({ historyForm: historyForm, getHistoryForm });
+
   const { send, close } = useSocket(dataSource);
 
   createDataBoardContext({ send, close });
@@ -188,7 +220,11 @@
     <HistoryTrendModal @register="registerTrendModal" />
 
     <!-- 告警选择时间 -->
-    <alarmTimeModal @register="registerAlarmModal" @getAlarmForm="getAlarmForm" />
+    <AlarmTimeModal
+      @register="registerAlarmModal"
+      @getAlarmForm="getAlarmForm"
+      @getHistoryForm="getHistoryForm"
+    />
   </section>
 </template>