feat: 新增看板告警实时数据柱状图等组件

+import cloneDeep from 'lodash-es/cloneDeep';
+import { DeviceAlarmConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  // componetDesign: false,
+  [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D',
+  [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DeviceAlarmConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(DeviceAlarmConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { option } from './config';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      // {
+      //   field: ComponentConfigFieldEnum.OPEN_COLOR,
+      //   label: '设备正常颜色',
+      //   component: 'ColorPicker',
+      //   changeEvent: 'update:value',
+      //   componentProps: {
+      //     defaultValue: option.openColor,
+      //   },
+      // },
+      // {
+      //   field: ComponentConfigFieldEnum.CLOSE_COLOR,
+      //   label: '设备告警颜色',
+      //   component: 'ColorPicker',
+      //   changeEvent: 'update:value',
+      //   componentProps: {
+      //     defaultValue: option.closeColor,
+      //   },
+      // },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  // import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { formSchemas } from '../DeviceAlarmHistory/datasource.config';
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: formSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+// import { ComponentEnum, ComponentNameEnum } from '../index.type';
+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('DeviceAlarm');
+export const DeviceAlarmConfig: ConfigType = {
+  ...componentKeys,
+  title: '设备告警',
+  package: PackagesCategoryEnum.ALARM,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { computed, watch } from 'vue';
+  import { ref, onMounted, unref } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useCustomDataFetch } from '../../../hook/socket/useSocket';
+  import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
+  import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
+  import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
+
+  interface IStatus {
+    text: string;
+    color: string;
+  }
+
+  interface IAlarmStatusList {
+    id: string;
+    deviceName: string;
+    showDeviceName: boolean;
+    status: IStatus;
+    time: number;
+  }
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const isOpenClose = ref<boolean>(true);
+
+  const { send } = useDataBoardContext();
+
+  const currentCmdId = ref();
+
+  const alarmLevel = (type: string): IStatus => {
+    if (type === 'CRITICAL') {
+      return { text: '紧急', color: 'alarm_state_critical' };
+    } else if (type === 'MAJOR') {
+      return { text: '重要', color: 'alarm_state_major' };
+    } else if (type === 'MINOR') {
+      return { text: '次要', color: 'alarm_state_minor' };
+    } else if (type === 'WARNING') {
+      return { text: '警告', color: 'alarm_state_warning' };
+    } else {
+      return { text: '不确定', color: 'alarm_state_other' };
+    }
+  };
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const { dataSource } = option;
+    const { showDeviceName: presetShowDeviceName } = persetOption;
+
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { deviceId, deviceName, deviceRename, componentInfo } = item;
+        return {
+          id: deviceId,
+          deviceName: deviceRename || deviceName,
+          showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
+        };
+      }),
+    };
+  });
+
+  const randomFn = () => {
+    useIntervalFn(() => {
+      isOpenClose.value = !unref(isOpenClose);
+    }, 4000);
+  };
+
+  // 发送websocket的格式
+  const getMessage = (cmdId: number) => {
+    const message = {
+      alarmDataCmds: [
+        {
+          query: {
+            entityFilter: {
+              type: 'entityList',
+              resolveMultiple: true,
+              entityType: 'DEVICE',
+              entityList: unref(getDesign).dataSource?.map((item) => item.id),
+            },
+            pageLink: {
+              page: 0,
+              pageSize: unref(alarmForm)?.pageSize,
+              textSearch: null,
+              searchPropagatedAlarms: false,
+              statusList: [],
+              severityList: [],
+              typeList: [],
+              sortOrder: {
+                key: {
+                  key: 'createdTime',
+                  type: 'ALARM_FIELD',
+                },
+                direction: 'DESC',
+              },
+              timeWindow: unref(alarmForm)?.time,
+            },
+            alarmFields: [
+              {
+                type: 'ALARM_FIELD',
+                key: 'createdTime',
+              },
+              {
+                type: 'ALARM_FIELD',
+                key: 'originator',
+              },
+              {
+                type: 'ALARM_FIELD',
+                key: 'type',
+              },
+              {
+                type: 'ALARM_FIELD',
+                key: 'severity',
+              },
+              {
+                type: 'ALARM_FIELD',
+                key: 'status',
+              },
+            ],
+            entityFields: [],
+            latestValues: [],
+          },
+          cmdId,
+        },
+      ],
+    };
+    return message;
+  };
+
+  const alarmStatusList = ref<IAlarmStatusList[]>([
+    {
+      id: '1',
+      deviceName: '设备',
+      status: { text: '紧急', color: 'alarm_state_major' },
+      time: 1689574726,
+      showDeviceName: true,
+    },
+  ]);
+
+  const { alarmForm } = useAlarmContext();
+
+  watch(
+    () => alarmForm?.value,
+    () => {
+      send?.(JSON.stringify(getMessage(unref(currentCmdId))));
+    },
+    { immediate: false }
+  );
+
+  const transformMessage = (cmdId: number) => {
+    currentCmdId.value = cmdId;
+    send?.(JSON.stringify(getMessage(cmdId)));
+  };
+
+  const getReduce = (data) => {
+    const list = data.reduce((acc, obj) => {
+      const found = acc.find((item) => item.entityId.id == obj.entityId.id);
+      if (!found) {
+        acc.push(obj);
+      }
+      return acc;
+    }, []);
+
+    data.forEach((item) => {
+      list?.forEach((item1) => {
+        if (item.entityId.id == item1.entityId.id) {
+          item1.time = Number(item1.createdTime > item.createdTime)
+            ? item1.createdTime
+            : item.createdTime;
+        }
+      });
+    });
+
+    return list;
+  };
+
+  const updateFn = (message: ReceiveAlarmDataCmdsMessageType) => {
+    alarmStatusList.value = unref(getDesign).dataSource?.map((item) => {
+      return {
+        id: item.id,
+        deviceName: item.deviceName,
+        showDeviceName: item.showDeviceName,
+        status: { text: '', color: '' },
+        time: 0,
+      };
+    }) as any;
+    const { data } = message;
+    const alarmList = data?.data;
+    const uniData = getReduce(alarmList); //去重得到最新的事件对象
+
+    if (!data?.data.length) return;
+    uniData.forEach((item) => {
+      alarmStatusList.value?.forEach((item1) => {
+        if (item.entityId.id == item1.id) {
+          item1.status = alarmLevel(item.severity);
+          item1.time = item.createdTime;
+        }
+      });
+    });
+  };
+
+  onMounted(() => {
+    !props.config.option.uuid && randomFn();
+  });
+
+  useCustomDataFetch(props, transformMessage, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main :style="getScale" class="w-full h-full flex justify-center items-center">
+    <!-- <DeviceName :config="config" class="text-center" /> -->
+    <div
+      v-for="item in alarmStatusList"
+      :key="item.id"
+      class="flex flex-col justify-center items-center"
+    >
+      <div class="text-gray-500 text-sm truncate"
+        >{{
+          item.status.text
+            ? item.showDeviceName
+              ? item.deviceName + '-'
+              : ''
+            : '当前设备未发现告警'
+        }}{{ item.status.text }}</div
+      >
+      <div :class="item.status.color"></div>
+      <UpdateTime :time="item.time" />
+    </div>
+  </main>
+</template>
+<style lang="less" scoped>
+  .alarm_state_critical {
+    background: #cf1322;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #cf1322;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_major {
+    background: #ff6e03;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff6e03;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_minor {
+    background: #ff0;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff0;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_warning {
+    background: #edf760;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #edf760;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_other {
+    background: #d3adf7;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #d3adf7;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { DeviceAlarmHistoryConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  componetDesign: false,
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DeviceAlarmHistoryConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(DeviceAlarmHistoryConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '../../../enum';
+  import { option } from './config';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { ComponentInfo } from '/@/views/visual/palette/types';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+      // {
+      //   field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+      //   label: '显示设备名称',
+      //   component: 'Checkbox',
+      //   defaultValue: option.showDeviceName,
+      // },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    // return getFieldsValue();
+    const item = getFieldsValue();
+    return {
+      unit: item[ComponentConfigFieldEnum.UNIT],
+      showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+    } as ComponentInfo;
+  };
+
+  const setFormValues = (data: Recordable) => {
+    // return setFieldsValue(data);
+    const { unit, fontColor, showDeviceName } = data;
+
+    const value = {
+      [ComponentConfigFieldEnum.UNIT]: unit,
+      [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
+      [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+    };
+    return setFieldsValue(value);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { FormSchema } from '/@/components/Form';
+import { DataSourceField } from '../../../config/common.config';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
+import { DataActionModeEnum } from '/@/enums/toolEnum';
+import { unref } from 'vue';
+import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+import { MasterDeviceList } from '/@/api/dataBoard/model';
+
+export const formSchemas = (): FormSchema[] => {
+  const mode = useSelectWidgetMode();
+  const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
+  return [
+    {
+      field: DataSourceField.DEVICE_NAME,
+      component: 'Input',
+      label: '设备名',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_TYPE,
+      component: 'ApiSelect',
+      label: '设备类型',
+      colProps: { span: 8 },
+      rules: [{ message: '请选择设备类型', required: true }],
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'device_type',
+          },
+          valueField: 'itemValue',
+          labelField: 'itemText',
+          placeholder: '请选择设备类型',
+          onChange: (value: DeviceTypeEnum) => {
+            setFieldsValue({
+              [DataSourceField.IS_GATEWAY_DEVICE]: value === DeviceTypeEnum.GATEWAY,
+              [DataSourceField.DEVICE_PROFILE_ID]: null,
+              [DataSourceField.DEVICE_ID]: null,
+              [DataSourceField.ATTRIBUTE]: null,
+              [DataSourceField.ATTRIBUTE_NAME]: null,
+              [DataSourceField.TRANSPORT_TYPE]: null,
+            });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_PROFILE_ID,
+      component: 'ApiSelect',
+      label: '产品',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '产品为必填项' }],
+      componentProps: ({ formActionType, formModel }) => {
+        const { setFieldsValue } = formActionType;
+        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+        return {
+          api: async () => {
+            if (!deviceType) return [];
+            const list = await getDeviceProfile(deviceType);
+            if (isUpdate) {
+              const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+              const record = list.find((item) => item.id === deviceProfileId);
+              setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
+            }
+            return list;
+          },
+          labelField: 'name',
+          valueField: 'id',
+          placeholder: '请选择产品',
+          onChange: (_, option = {} as Record<'transportType', string>) => {
+            setFieldsValue({
+              [DataSourceField.DEVICE_ID]: null,
+              [DataSourceField.ATTRIBUTE]: null,
+              [DataSourceField.ATTRIBUTE_NAME]: null,
+              [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
+            });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.ORIGINATION_ID,
+      component: 'OrgTreeSelect',
+      label: '组织',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '组织为必填项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          placeholder: '请选择组织',
+          onChange() {
+            setFieldsValue({
+              [DataSourceField.DEVICE_ID]: null,
+            });
+          },
+          showCreate: false,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_PROFILE_ID,
+      component: 'Input',
+      label: '',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_ID,
+      component: 'ApiSelect',
+      label: '设备',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '设备名称为必填项' }],
+      componentProps({ formModel, formActionType }) {
+        const { setFieldsValue } = formActionType;
+        const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+
+        return {
+          api: async () => {
+            if (organizationId) {
+              try {
+                const data = await getMeetTheConditionsDevice({
+                  organizationId,
+                  deviceProfileId,
+                  deviceType,
+                });
+                if (data)
+                  return data.map((item) => ({
+                    ...item,
+                    label: item.alias || item.name,
+                    value: item.tbDeviceId,
+                    deviceType: item.deviceType,
+                  }));
+              } catch (error) {}
+            }
+            return [];
+          },
+          onChange(_value, record: MasterDeviceList) {
+            setFieldsValue({
+              [DataSourceField.DEVICE_NAME]: record?.label,
+            });
+          },
+          placeholder: '请选择设备',
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_RENAME,
+      component: 'Input',
+      label: '设备名',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: '设备重命名',
+      },
+    },
+  ];
+};

+<script lang="ts" setup>
+  // import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  import { formSchemas } from './datasource.config';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: formSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('DeviceAlarmHistory');
+
+export const DeviceAlarmHistoryConfig: ConfigType = {
+  ...componentKeys,
+  title: '设备告警历史',
+  package: PackagesCategoryEnum.ALARM,
+};

+<script lang="ts" setup>
+  import { computed, unref, ref, watch } from 'vue';
+  import { ComponentPropsConfigType } from '../../../index.type';
+  import { option } from './config';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { onMounted } from 'vue';
+  import { nextTick } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { h } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
+  import { useCustomDataFetch } from '../../../hook/socket/useSocket';
+  import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
+  import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
+
+  import { getMessage } from '../config';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  interface IList {
+    [key: string]: string | number;
+  }
+
+  const alarmLevel = (type: string): IList => {
+    if (type === 'CRITICAL') {
+      return { text: '紧急', color: 'red' };
+    } else if (type === 'MAJOR') {
+      return { text: '重要', color: 'pink' };
+    } else if (type === 'MINOR') {
+      return { text: '次要', color: 'warning' };
+    } else if (type === 'WARNING') {
+      return { text: '警告', color: 'warning' };
+    } else {
+      return { text: '不确定', color: 'default' };
+    }
+  };
+
+  const statusType = (type: string): string => {
+    if (type === 'CLEARED_UNACK') {
+      return '清除未确认';
+    } else if (type === 'CLEARED_ACK') {
+      return '清除已确认';
+    } else if (type === 'ACTIVE_ACK') {
+      return '激活已确认';
+    } else {
+      return '激活未确认';
+    }
+  };
+
+  const { send } = useDataBoardContext();
+
+  const currentCmdId = ref();
+
+  const alarmColumns: BasicColumn[] = [
+    {
+      title: '状态',
+      dataIndex: 'severity',
+      ellipsis: true,
+      width: 80,
+      customRender: ({ record }) => {
+        const { severity } = record;
+        const { text, color } = alarmLevel(severity);
+        return h(Tag, { color }, () => text);
+      },
+    },
+    { title: '设备', dataIndex: 'device', ellipsis: true, width: 120 },
+    { title: '告警场景', dataIndex: 'type', ellipsis: true, width: 80 },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      ellipsis: true,
+      width: 80,
+      format: (text) => statusType(text),
+    },
+    {
+      title: '时间',
+      dataIndex: 'time',
+      ellipsis: true,
+      width: 110,
+      format(text) {
+        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
+      },
+    },
+  ];
+  const devicealarmList = ref([
+    { severity: 0, device: '温湿度', type: '规则', status: 50, time: 1688974276000 },
+    { severity: 1, device: '温湿度1', type: '规则1', status: 350, time: 1688994276000 },
+    { severity: 0, device: '温湿度2', type: '规则2', status: 150, time: 1688174276000 },
+    { severity: 0, device: '温湿度3', type: '规则2', status: 150, time: 1688174276000 },
+    { severity: 0, device: '温湿度4', type: '规则2', status: 150, time: 1688174276000 },
+    { severity: 0, device: '温湿度5', type: '规则2', status: 150, time: 1688174276000 },
+  ]);
+
+  const [registerTable, { setProps, redoHeight, setTableData }] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    canResize: true,
+    size: 'small',
+    maxHeight: 144,
+    dataSource: devicealarmList,
+    columns: alarmColumns,
+  });
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, presetShowDeviceName } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
+          item;
+        return {
+          unit: unit ?? presetUnit,
+          attribute,
+          attributeRename,
+          attributeName,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
+          deviceName,
+          deviceRename,
+          id: deviceId,
+        };
+      }),
+    };
+  });
+
+  // const getMessage = (cmdId: number) => {
+  //   const message = {
+  //     alarmDataCmds: [
+  //       {
+  //         query: {
+  //           entityFilter: {
+  //             type: 'entityList',
+  //             resolveMultiple: true,
+  //             entityType: 'DEVICE',
+  //             entityList: unref(getDesign).dataSource?.map((item) => item.id),
+  //           },
+  //           pageLink: {
+  //             page: 0,
+  //             pageSize: unref(alarmForm)?.pageSize,
+  //             textSearch: null,
+  //             searchPropagatedAlarms: false,
+  //             statusList: [],
+  //             severityList: [],
+  //             typeList: [],
+  //             sortOrder: {
+  //               key: {
+  //                 key: 'createdTime',
+  //                 type: 'ALARM_FIELD',
+  //               },
+  //               direction: 'DESC',
+  //             },
+  //             timeWindow: unref(alarmForm)?.time,
+  //           },
+  //           alarmFields: [
+  //             {
+  //               type: 'ALARM_FIELD',
+  //               key: 'createdTime',
+  //             },
+  //             {
+  //               type: 'ALARM_FIELD',
+  //               key: 'originator',
+  //             },
+  //             {
+  //               type: 'ALARM_FIELD',
+  //               key: 'type',
+  //             },
+  //             {
+  //               type: 'ALARM_FIELD',
+  //               key: 'severity',
+  //             },
+  //             {
+  //               type: 'ALARM_FIELD',
+  //               key: 'status',
+  //             },
+  //           ],
+  //           entityFields: [],
+  //           latestValues: [],
+  //         },
+  //         cmdId,
+  //       },
+  //     ],
+  //   };
+  //   return message;
+  // };
+
+  const { alarmForm } = useAlarmContext();
+
+  watch(
+    () => alarmForm?.value,
+    () => {
+      send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
+    },
+    { immediate: false }
+  );
+
+  const transformMessage = (cmdId: number) => {
+    currentCmdId.value = cmdId;
+
+    send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
+  };
+
+  const updateFn = (message: ReceiveAlarmDataCmdsMessageType) => {
+    const { data } = message || {};
+    const tableList = ref<any>(
+      data?.data.map((item) => {
+        return {
+          time: item.createdTime,
+          device: item.originatorName,
+          severity: item.severity,
+          type: item.type,
+          status: item.status,
+        };
+      })
+    );
+    setTableData(unref(tableList));
+  };
+
+  useCustomDataFetch(props, transformMessage, updateFn);
+
+  onMounted(async () => {
+    await nextTick();
+    resize();
+  });
+
+  const resize = async () => {
+    const { height } = unref(getContainerSize);
+    height && setProps({ maxHeight: height - 100, scroll: { x: 470, y: height - 100 } });
+    await nextTick();
+    redoHeight();
+  };
+
+  const { getContainerSize } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="flex flex-col justify-center items-center w-full h-full">
+    <DeviceName :config="config" />
+    <div class="w-full h-full">
+      <BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
+    </div>
+  </main>
+</template>

+export const getMessage = (cmdId, getDesign, alarmForm) => {
+  const entityList = [...new Set(getDesign.dataSource?.map((item) => item.id))];
+  const message = {
+    alarmDataCmds: [
+      {
+        query: {
+          entityFilter: {
+            type: 'entityList',
+            resolveMultiple: true,
+            entityType: 'DEVICE',
+            entityList: entityList,
+          },
+          pageLink: {
+            page: 0,
+            pageSize: alarmForm?.pageSize,
+            textSearch: null,
+            searchPropagatedAlarms: false,
+            statusList: [],
+            severityList: [],
+            typeList: [],
+            sortOrder: {
+              key: {
+                key: 'createdTime',
+                type: 'ALARM_FIELD',
+              },
+              direction: 'DESC',
+            },
+            timeWindow: alarmForm?.time,
+          },
+          alarmFields: [
+            {
+              type: 'ALARM_FIELD',
+              key: 'createdTime',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'originator',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'type',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'severity',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'status',
+            },
+          ],
+          entityFields: [],
+          latestValues: [],
+        },
+        cmdId,
+      },
+    ],
+  };
+  return message;
+};

+import { DeviceAlarmHistoryConfig } from './DeviceAlarmHistory';
+import { DeviceAlarmConfig } from './DeviceAlarm';
+
+export const AlarmList = [DeviceAlarmConfig, DeviceAlarmHistoryConfig];

@@ -52,7 +52,6 @@
 
   const handleBlur = async () => {
     if (unref(oldSliderValue) !== unref(sliderValue)) {
-      console.log('effect');
       const flag = await sendCommand(props.config.option, unref(sliderValue));
       flag
         ? ((sliderValue.value = unref(sliderValue)),

@@ -67,10 +67,8 @@
       },
     }))
   );
-  // console.log(unref(series), 'series');
 
   const options = (): EChartsOption => {
-    // getStageColor(gradientInfo);
     return {
       tooltip: {
         trigger: 'item',

@@ -8,15 +8,6 @@ import {
 } from '../../../index.type';
 import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
 import { ComponentConfigFieldEnum } from '../../../enum';
-
-export enum Gradient {
-  FIRST = 'first',
-  SECOND = 'second',
-}
-export enum GradientColor {
-  FIRST = '#07ffd6',
-  SECOND = '#5eff10',
-}
 export const option: PublicPresetOptions = {
   multipleDataSourceComponent: true,
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',

@@ -6,6 +6,8 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
@@ -22,33 +24,45 @@
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
     const { dataSource = [] } = option || {};
-    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    const {
+      unit: presetUnit,
+      fontColor: presetFontColor,
+      showDeviceName: persetShowDeviceName,
+    } = persetOption || {};
     return {
       dataSource: dataSource?.map((item) => {
-        const { unit, fontColor } = item.componentInfo || {};
-        const { attribute, attributeRename } = item;
+        const { unit, fontColor, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceId, deviceName, deviceRename } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
+          attributeName,
           attributeRename,
+          deviceName,
+          deviceRename,
+          showDeviceName: showDeviceName ?? persetShowDeviceName,
+          id: deviceId,
         };
       }),
     };
   });
+
   const seriesList = [
     { value: 120, name: '123', itemStyle: { color: '#02E5F0' } },
     { value: 150, name: '456', itemStyle: { color: '#028CF0' } },
     { value: 40, name: '789', itemStyle: { color: '#F09202' } },
   ];
   const data = ['温度', '湿度', '温度1'];
+
   const options = (): EChartsOption => {
-    // getStageColor(gradientInfo);
     return {
       color: ['#3398DB'],
       tooltip: {
         // 提示框
-        trigger: 'axis',
+        trigger: 'item',
+        confine: true,
         axisPointer: {
           type: 'shadow',
         },
@@ -59,9 +73,6 @@
         axisTick: {
           alignWithLabel: true,
         },
-        // axisPointer: {
-        //   type: 'line',
-        // },
       },
       grid: {
         top: '15%',
@@ -104,32 +115,40 @@
     } as EChartsOption);
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    const series = dataSource.map((item) => {
-      const { attribute, attributeRename, fontColor, unit } = item;
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-
-      return {
-        value,
-        name: attributeRename ?? attribute,
-        itemStyle: { color: fontColor },
-        tooltip: {
-          valueFormatter(value) {
-            return `${value} ${unit ?? ''}`;
-          },
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => ({
+      value: 0,
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
+      }`,
+      attribute: item.attribute,
+      id: item.id,
+      itemStyle: {
+        color: item.fontColor,
+      },
+      tooltip: {
+        valueFormatter(value) {
+          return `${value} ${item.unit ?? ''}`;
         },
-      } as SeriesOption['data'];
-    });
-    const xAxisData = series.map((item) => {
-      const { name } = item as any;
-      return name;
+      },
+    }))
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      series.value.forEach((item) => {
+        if (item.id == deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
+      time.value = timespan;
     });
-    // }
-    // console.log(message, 'message', series, 'series', sum);
-    updateChart(series, xAxisData);
+    const xAxisData = unref(series).map((item) => item.name);
+
+    updateChart(toRaw(unref(series)), xAxisData);
   };
 
   useMultipleDataFetch(props, updateFn);

@@ -6,6 +6,8 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
@@ -22,16 +24,26 @@
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
     const { dataSource = [] } = option || {};
-    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    const {
+      unit: presetUnit,
+      fontColor: presetFontColor,
+      showDeviceName: persetShowDeviceName,
+    } = persetOption || {};
     return {
       dataSource: dataSource?.map((item) => {
-        const { unit, fontColor } = item.componentInfo || {};
-        const { attribute, attributeRename } = item;
+        const { unit, fontColor, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceId, deviceName, deviceRename } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
+          attributeName,
           attributeRename,
+          deviceName,
+          deviceRename,
+          showDeviceName: showDeviceName ?? persetShowDeviceName,
+          id: deviceId,
         };
       }),
     };
@@ -48,7 +60,8 @@
       color: ['#3398DB'],
       tooltip: {
         // 提示框
-        trigger: 'axis',
+        trigger: 'item',
+        confine: true,
         axisPointer: {
           type: 'shadow',
         },
@@ -104,32 +117,39 @@
     } as EChartsOption);
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    const series = dataSource.map((item) => {
-      const { attribute, attributeRename, fontColor, unit } = item;
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-
-      return {
-        value,
-        name: attributeRename ?? attribute,
-        itemStyle: { color: fontColor },
-        tooltip: {
-          valueFormatter(value) {
-            return `${value} ${unit ?? ''}`;
-          },
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => ({
+      value: 0,
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
+      }`,
+      attribute: item.attribute,
+      id: item.id,
+      itemStyle: {
+        color: item.fontColor,
+      },
+      tooltip: {
+        valueFormatter(value) {
+          return `${value} ${item.unit ?? ''}`;
         },
-      } as SeriesOption['data'];
-    });
-    const yAxisData = series.map((item) => {
-      const { name } = item as any;
-      return name;
+      },
+    }))
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      series.value.forEach((item) => {
+        if (item.id == deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+        time.value = timespan;
+      });
     });
-    // }
-    // console.log(message, 'message', series, 'series', sum);
-    updateChart(series, yAxisData);
+    const xAxisData = unref(series).map((item) => item.name);
+    updateChart(toRaw(unref(series)), xAxisData);
   };
 
   useMultipleDataFetch(props, updateFn);

 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { computed, unref } from 'vue';
   import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
-  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { nextTick } from 'vue';
+  import { onMounted } from 'vue';
+  import { toRaw } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+
+  interface IList {
+    [key: string]: string | number;
+  }
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const realTimeList = ref<any>([
-    { attribute: '测试', price: 2, time: '2023-06-29' },
-    { attribute: '测试1', price: 21, time: '2023-06-29' },
-    { attribute: '测试2', price: 213, time: '2023-06-29' },
-  ]);
-  const realTimeColumn = reactive<BasicColumn[]>([
-    { title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true },
-    { title: '值', dataIndex: 'price', width: 80, ellipsis: true },
-    { title: '时间', dataIndex: 'time', width: 80, ellipsis: true },
-  ]);
-
-  const [registerTable] = useTable({
-    showIndexColumn: false,
-    showTableSetting: false,
-    dataSource: realTimeList,
-    canResize: true,
-    maxHeight: 144,
-    size: 'small',
-    columns: realTimeColumn as any,
+  const [registerTable, { setTableData, setColumns, getDataSource, redoHeight, setProps }] =
+    useTable({ showIndexColumn: false, showTableSetting: false, canResize: true, size: 'small' });
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {};
+    const columns: BasicColumn[] = dataSource.map((item) => ({
+      title: item.attributeRename || item.attributeName || item.attribute,
+      dataIndex: item.attribute,
+      width: 80,
+      ellipsis: true,
+      format(text, record) {
+        const value = text ? text + (record.unit || '') : '';
+        return value;
+      },
+    }));
+    columns.push({
+      title: '时间',
+      dataIndex: 'time',
+      width: 110,
+      ellipsis: true,
+      format(text) {
+        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
+      },
+    });
+    return {
+      columns,
+      dataSource: dataSource?.map((item) => {
+        const { unit, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
+          item;
+        return {
+          unit: unit ?? presetUnit,
+          attribute,
+          attributeRename,
+          attributeName,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
+          deviceName,
+          deviceRename,
+          id: deviceId,
+        };
+      }),
+    };
   });
 
-  const updateFn: MultipleDataFetchUpdateFn = () => {};
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
+    const list: IList = {};
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      list[attribute] = getNumberValue(value);
+      list.time = timespan || list.time;
+    });
+    await nextTick();
+    setTableData([list, ...toRaw(unref(getDataSource()))]);
+  };
 
   useMultipleDataFetch(props, updateFn);
+  onMounted(async () => {
+    setColumns(
+      props.config.option.dataSource
+        ? unref(getDesign).columns
+        : [
+            { title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true },
+            { title: '时间', dataIndex: 'time', width: 80, ellipsis: true },
+          ]
+    );
+    !props.config.option.dataSource &&
+      setTableData([
+        { attribute: '温度', time: '2023-06-29' },
+        { attribute: '湿度', time: '2023-06-29' },
+        { attribute: '湿度', time: '2023-06-29' },
+      ]);
+
+    await nextTick();
+    resize();
+  });
+  const resize = async () => {
+    const { height } = unref(getContainerSize);
+    height && setProps({ scroll: { x: 190, y: height - 120 } });
+
+    await nextTick();
+    redoHeight();
+  };
+
+  const { getContainerSize } = useComponentScale(props, resize);
 </script>
 
 <template>
-  <main class="flex flex-col justify-center items-center">
+  <main class="flex flex-col justify-center items-center w-full h-full">
     <DeviceName :config="config" />
-    <div>
+    <div class="w-full h-full">
       <!-- <PageWrapper> -->
-      <BasicTable @register="registerTable" />
+      <BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
       <!-- </PageWrapper> -->
     </div>
   </main>

@@ -8,13 +8,6 @@
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
-        field: ComponentConfigFieldEnum.FONT_COLOR,
-        label: '数值字体颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        defaultValue: option.fontColor,
-      },
-      {
         field: ComponentConfigFieldEnum.UNIT,
         label: '数值单位',
         component: 'Input',

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
-  import { unref, ref, onMounted, nextTick, toRaw } from 'vue';
+  import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue';
   import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
-  import { dateFormat } from '/@/utils/common/compUtils';
+  import { useIntervalFn } from '@vueuse/core';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  interface IList {
+    [key: string]: string | number;
+  }
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
-
   const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
 
   const chartInstance = ref<Nullable<ECharts>>(null);
-
   const time = ref<Nullable<number>>(null);
 
-  function randomData() {
-    now.value = now.value + oneDay;
-    const newTime = dateFormat(unref(now), 'MM-dd hh:mm:ss');
-    value = value + Math.random() * 21 - 10;
-    return {
-      name: newTime,
-      value: [newTime, Math.round(value)],
-    };
-  }
-  const data = ref<any>([]);
-  const now = ref<number>(1688026367000);
-  let oneDay = 5000; //间隔秒数
-  let value = Math.random() * 1000;
-  for (let i = 0; i < 10; i++) {
-    data.value.push(randomData());
-  }
-  setInterval(function () {
-    for (let i = 0; i < 1; i++) {
-      data.value.shift();
-      data.value.push(randomData());
-    }
-    unref(chartInstance)?.setOption(options());
-  }, 1000);
-
-  // const getDesign = computed(() => {
-  //   const { persetOption, option } = props.config;
-  //   const { dataSource = [] } = option || {};
-  //   const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
-  //   return {
-  //     dataSource: dataSource?.map((item) => {
-  //       const { unit, fontColor } = item.componentInfo || {};
-  //       const { attribute, attributeRename } = item;
-  //       return {
-  //         unit: unit ?? presetUnit,
-  //         fontColor: fontColor ?? presetFontColor,
-  //         attribute,
-  //         attributeRename,
-  //       };
-  //     }),
-  //   };
-  // });
+  const updateInterval = ref<number>(1000); //默认每秒更新一次
+  const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点
+
+  const chartData = ref<{ time: string | number; value: number }[]>([]);
+  const legendData = ref<string[]>(['温度']);
+  const timeList = ref<string[]>([]);
+
+  const generateRandomData = () => {
+    const minValue = 0;
+    const maxValue = 100;
+    const time = new Date().toLocaleTimeString();
+    const value = Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
+    return { time, value, name: '温度' };
+  };
 
   const options = (): EChartsOption => {
-    // getStageColor(gradientInfo);
     return {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          width: 1,
-          color: '#019680',
-        },
-      },
       tooltip: {
-        show: true,
+        // trigger: 'axis',
       },
       legend: {
         top: '10%',
         left: 'center',
-        data: ['温度', '湿度'],
+        data: ['温度'],
       },
       grid: {
-        top: '45%',
-        left: '20%',
-        bottom: '14%',
+        top: '30%',
+        left: '6%',
+        right: '16%',
+        bottom: '1%',
         containLabel: true,
       },
       xAxis: {
         type: 'category',
-        splitLine: {
-          show: true,
-          lineStyle: {
-            width: 1,
-            type: 'solid',
-            color: 'rgba(226,226,226,0.5)',
-          },
-        },
-        data: toRaw(unref(data)).map((item) => item.name),
+        // boundaryGap: false,
       },
       yAxis: {
         type: 'value',
-        boundaryGap: [0, '50%'],
-        splitLine: {
-          show: false,
-        },
+        boundaryGap: [0, '100%'],
       },
-      series: [
-        {
-          type: 'line',
-          name: '温度',
-          stack: 'Total',
-          data: unref(data).map((item) => item.value),
-        },
-        {
-          type: 'line',
-          name: '湿度',
-          stack: 'Total',
-          data: unref(data).map((item) => {
-            return Number(item.value[1]) * 0.99;
-          }),
-        },
-      ],
+      series: [{ type: 'line', name: '温度', data: [] }],
     };
   };
 
+  const random = () => {
+    useIntervalFn(() => {
+      const newData = generateRandomData();
+      chartData.value.push(newData);
+      if (unref(chartData).length > maxDataPoints.value) {
+        chartData.value.shift();
+      }
+      unref(chartInstance)?.setOption({
+        xAxis: {
+          data: toRaw(unref(chartData).map((data) => data.time)),
+        },
+        series: [{ data: toRaw(unref(chartData).map((item) => item.value)) }],
+      });
+    }, updateInterval);
+  };
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, showDeviceName, fontColor } = item.componentInfo || {};
+        console.log(item, 'item');
+        const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } =
+          item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          attribute,
+          attributeName,
+          attributeRename,
+          showDeviceName,
+          deviceName,
+          deviceRename,
+          id: deviceId,
+        };
+      }),
+    };
+  });
+
   const initial = () => {
     chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
     chartInstance.value.setOption(options());
   };
 
-  // const updateChart = (data: SeriesOption['data'], yAxisData) => {
-  //   unref(chartInstance)?.setOption({
-  //     series: [{ data }],
-  //     yAxis: { data: yAxisData },
-  //   } as EChartsOption);
-  // };
-
-  const updateFn: MultipleDataFetchUpdateFn = () => {
-    // console.log(message, 'message');
-    return {};
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => {
+      return {
+        type: 'line',
+        name: `${item.showDeviceName || item.deviceRename || item.deviceName} - ${
+          item.attributeRename || item.attributeName
+        }`,
+        data: [] as { name: string; value: number }[],
+        id: item.id,
+        attribute: item.attribute,
+      };
+    })
+  );
+
+  const { forEachGroupMessage } = useReceiveMessage();
+
+  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
+    legendData.value = unref(getDesign).dataSource.map((item) => {
+      return `${item.deviceRename || item.deviceName} - ${
+        item.attributeRename || item.attributeName
+      }`;
+    });
+    const list: IList | any = {};
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      list.time = timespan || list.time;
+      series.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.data.push({
+            name: formatToDateTime(list.time, 'HH:mm:ss'),
+            value: value,
+          });
+          if (item.data.length > unref(maxDataPoints)) {
+            item.data.shift();
+          }
+        }
+      });
+    });
+    list.time && timeList.value.push(formatToDateTime(list.time, 'HH:mm:ss'));
+    if (unref(timeList).length > unref(maxDataPoints)) {
+      timeList.value.shift();
+    }
+    await nextTick();
+    unref(chartInstance)?.setOption({
+      xAxis: {
+        data: toRaw(unref(timeList)),
+      },
+      legend: {
+        data: toRaw(unref(legendData)),
+      },
+      series: toRaw(
+        unref(series).map((item) => {
+          const { type, name, data } = item;
+          return {
+            type,
+            name,
+            data,
+          };
+        })
+      ),
+    });
   };
 
   useMultipleDataFetch(props, updateFn);
-
   onMounted(() => {
     initial();
-    // !props.config.option.uuid && randomFn();
-    !props.config.option.uuid;
+    !props.config.option.dataSource?.length && random();
   });
 
   const resize = async () => {
     await nextTick();
 
     // 修改echarts大小
-    unref(chartInstance)?.setOption({
-      legend: {
-        textStyle: {
-          fontSize: 14 * unref(getRatio),
-        },
-      },
-    } as EChartsOption);
+    // unref(chartInstance)?.setOption({
+    //   legend: {
+    //     textStyle: {
+    //       fontSize: 14 * unref(getRatio),
+    //     },
+    //   },
+    // } as EChartsOption);
     unref(chartInstance)?.resize();
   };
 
-  const { getRatio } = useComponentScale(props, resize);
+  useComponentScale(props, resize);
 </script>
 
 <template>

-import { StatisticsComponent1Config } from './StatisticsComponent1';
-import { StatisticsComponent2Config } from './StatisticsComponent2';
-// import { StatisticsComponent3Config } from './StatisticsComponent3';
-// import { StatisticsComponent4Config } from './StatisticsComponent4';
-// import { StatisticsComponent5Config } from './StatisticsComponent5';
-// import { StatisticsComponent6Config } from './StatisticsComponent6';
+// import { StatisticsComponent1Config } from './StatisticsComponent1';
+// import { StatisticsComponent2Config } from './StatisticsComponent2';
+import { StatisticsComponent3Config } from './StatisticsComponent3';
+import { StatisticsComponent4Config } from './StatisticsComponent4';
+import { StatisticsComponent5Config } from './StatisticsComponent5';
+import { StatisticsComponent6Config } from './StatisticsComponent6';
 
 export const STATISTICSList = [
-  StatisticsComponent1Config,
-  StatisticsComponent2Config,
-  // StatisticsComponent3Config,
-  // StatisticsComponent4Config,
-  // StatisticsComponent5Config,
-  // StatisticsComponent6Config,
+  // StatisticsComponent1Config,
+  // StatisticsComponent2Config,
+  StatisticsComponent3Config,
+  StatisticsComponent4Config,
+  StatisticsComponent5Config,
+  StatisticsComponent6Config,
 ];

@@ -180,6 +180,7 @@ class Subscriber {
     }
 
     if (isEntityDataUpdateMsg(message)) {
+      this.triggerEntityDataMessage(message);
       return;
     }
 
@@ -248,6 +249,20 @@ class Subscriber {
       return;
     }
   }
+  triggerEntityDataMessage(message: ReceiveEntityDataMessageType) {
+    const { cmdId } = message;
+    const isCustomSubscribeMessage = this.customSubscribeMap.get(cmdId);
+    if (isCustomSubscribeMessage) {
+      const updateFn = isCustomSubscribeMessage.updateFn;
+      try {
+        updateFn?.(message);
+      } catch (error) {
+        console.error(`Custom subscribe message invoke update function failed`);
+        throw error;
+      }
+      return;
+    }
+  }
 }
 
 const subscriber = new Subscriber();
@@ -426,4 +441,8 @@ export const useCustomDataFetch = (
       immediate: true,
     }
   );
+
+  return {
+    getNextSubscribeId: subscriber.getNextSubscribeId,
+  };
 };

@@ -3,6 +3,15 @@ import { ComponentPropsConfigType } from '../index.type';
 import { componentOptionsInitConfig } from '../publicConfig';
 
 export const useComponentScale = (props: { config: ComponentPropsConfigType }, onScale?: Fn) => {
+  const getContainerSize = computed(() => {
+    const { option } = props.config;
+    const { widthPx, heightPx } = option;
+    return {
+      width: widthPx,
+      height: heightPx,
+    };
+  });
+
   const getRatio = computed(() => {
     try {
       const { option, attr } = props.config;
@@ -47,5 +56,5 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o
       onScale?.();
     });
 
-  return { getScale, getScaleRadio, getRatio };
+  return { getScale, getScaleRadio, getRatio, getContainerSize };
 };

@@ -21,6 +21,7 @@ export enum PackagesCategoryNameEnum {
   MAP = '地图组件',
   FLOWMETER = '流量计',
   STATISTICS = '统计',
+  ALARM = '告警',
   OTHER = '其他',
 }
 
@@ -35,6 +36,7 @@ export enum PackagesCategoryEnum {
   MAP = 'MAP',
   FLOWMETER = 'FLOWMETER',
   STATISTICS = 'STATISTICS',
+  ALARM = 'ALARM',
   OTHER = 'OTHER',
 }
 
@@ -137,6 +139,7 @@ export interface PackagesType {
   [PackagesCategoryEnum.CONTROL]: ConfigType[];
   [PackagesCategoryEnum.MAP]: ConfigType[];
   [PackagesCategoryEnum.FLOWMETER]: ConfigType[];
-  // [PackagesCategoryEnum.STATISTICS]: ConfigType[];
+  [PackagesCategoryEnum.STATISTICS]: ConfigType[];
   [PackagesCategoryEnum.OTHER]: ConfigType[];
+  [PackagesCategoryEnum.ALARM]: ConfigType[];
 }

@@ -5,7 +5,8 @@ import { MapList } from './components/Map';
 import { OtherList } from './components/Other';
 // import { PictureList } from './components/Picture';
 import { TextList } from './components/Text';
-// import { STATISTICSList } from './components/Statistics';
+import { STATISTICSList } from './components/Statistics';
+import { AlarmList } from './components/Alarm';
 import { PackagesCategoryEnum, PackagesType } from './index.type';
 
 export const packageList: PackagesType = {
@@ -15,11 +16,12 @@ export const packageList: PackagesType = {
   [PackagesCategoryEnum.CONTROL]: ControlList,
   [PackagesCategoryEnum.MAP]: MapList,
   [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
-  // [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
+  [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
+  [PackagesCategoryEnum.ALARM]: AlarmList,
   [PackagesCategoryEnum.OTHER]: OtherList,
 };
 
 /**
  * @description
  */
-export const CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST: string[] = [];
+export const CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST: string[] = ['DeviceAlarmHistory'];

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { useDataFetch } from '../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -6,7 +6,7 @@
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { VisualComponentPermission } from '../..';
   import { Tooltip } from 'ant-design-vue';
-  import { MoreOutlined, AreaChartOutlined } from '@ant-design/icons-vue';
+  import { MoreOutlined, AreaChartOutlined, FieldTimeOutlined } from '@ant-design/icons-vue';
   import { WidgetDataType } from '../../hooks/useDataSource';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { addDataComponent, deleteDataComponent } from '/@/api/dataBoard';
@@ -29,6 +29,7 @@
     (event: 'ok'): void;
     (event: 'update', data: WidgetDataType): void;
     (event: 'openTrend', data: WidgetDataType): void;
+    (event: 'openAlarm', data: WidgetDataType): void;
   }>();
 
   const { isCustomerUser } = useRole();
@@ -88,6 +89,15 @@
     return isBoolean(flag) ? flag : true;
   });
 
+  const isAlarm = computed(() => {
+    const frontId = props.sourceInfo.frontId;
+    if (frontId == 'DeviceAlarm' || frontId == 'DeviceAlarmHistory') {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
   async function handleCopy() {
     const id = props.sourceInfo.id;
     const copyRecord = props.rawDataSource.componentData.find((item) => item.id === id);
@@ -120,6 +130,10 @@
   const handleOpenTrendModal = () => {
     emit('openTrend', toRaw(props.sourceInfo));
   };
+
+  const handleAlarmModal = () => {
+    emit('openAlarm', toRaw(props.sourceInfo));
+  };
 </script>
 
 <template>
@@ -132,8 +146,9 @@
       </Tooltip>
 
       <div v-if="!getIsSharePage" class="flex items-center w-16 justify-evenly">
-        <Tooltip v-if="!isCustomerUser && hasTrendQueryIcon" title="趋势">
-          <AreaChartOutlined class="text-lg" @click="handleOpenTrendModal" />
+        <Tooltip v-if="!isCustomerUser && hasTrendQueryIcon" :title="isAlarm ? '时间' : '趋势'">
+          <FieldTimeOutlined v-if="isAlarm" class="text-lg" @click="handleAlarmModal" />
+          <AreaChartOutlined v-else class="text-lg" @click="handleOpenTrendModal" />
         </Tooltip>
         <AuthDropDown
           v-if="!isCustomerUser && dropMenuList.length"

+import moment from 'moment';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+import { intervalOption } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+export enum SchemaFiled {
+  DEVICE_ID = 'deviceId',
+  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',
+  PAGE_SIZe = 'pageSize',
+}
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+export const formSchema = (): FormSchema[] => {
+  return [
+    {
+      field: SchemaFiled.WAY,
+      label: '查询方式',
+      component: 'RadioGroup',
+      defaultValue: QueryWay.LATEST,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: [
+            { label: '最后', value: QueryWay.LATEST },
+            { label: '时间段', value: QueryWay.TIME_PERIOD },
+          ],
+          onChange(event: ChangeEvent) {
+            (event.target as HTMLInputElement).value === QueryWay.LATEST
+              ? setFieldsValue({
+                  [SchemaFiled.DATE_RANGE]: [],
+                  [SchemaFiled.START_TS]: null,
+                  [SchemaFiled.END_TS]: null,
+                })
+              : setFieldsValue({ [SchemaFiled.START_TS]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+
+    {
+      field: SchemaFiled.PAGE_SIZe,
+      label: '分页条数',
+      component: 'InputNumber',
+      defaultValue: 20,
+      ifShow: true,
+      componentProps() {
+        return {
+          min: 10,
+          max: 50000,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: SchemaFiled.START_TS,
+      label: '最后数据',
+      component: 'Select',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.LATEST;
+      },
+      defaultValue: 2592000000,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: intervalOption,
+          onChange() {
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+      rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
+    },
+    {
+      field: SchemaFiled.DATE_RANGE,
+      label: '时间段',
+      component: 'RangePicker',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
+      },
+      rules: [{ required: true, message: '时间段为必选项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          showTime: {
+            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+          },
+          onChange() {
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+    },
+    {
+      field: SchemaFiled.LIMIT,
+      label: '最大条数',
+      component: 'InputNumber',
+      ifShow({ values }) {
+        return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+      },
+      helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
+      componentProps() {
+        return {
+          max: 50000,
+          min: 7,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+  ];
+};

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

+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { formSchema, SchemaFiled } from './config';
+  import { useForm } from '/@/components/Form';
+  import { useModalInner } from '/@/components/Modal';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { BasicForm } from '/@/components/Form';
+  import { BasicModal } from '/@/components/Modal';
+  import { nextTick } from 'vue';
+
+  const emit = defineEmits(['register', 'getAlarmForm']);
+  // const emit = defineEmits<{
+  //   (event: 'getAlarmForm', data: WidgetDataType): void;
+  // }>();
+
+  const [registerModal, { closeModal }] = useModalInner();
+
+  const [register, method] = useForm({
+    schemas: formSchema(),
+    baseColProps: useGridLayout(1) as unknown as ColEx,
+    showSubmitButton: false,
+    showResetButton: false,
+    rowProps: {
+      gutter: 10,
+    },
+    labelWidth: 120,
+    fieldMapToTime: [
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss:mm'],
+    ],
+  });
+
+  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,
+      };
+    } else {
+      alarmForm.value = {
+        time: startTs,
+        pageSize,
+      };
+    }
+    emit('getAlarmForm', unref(alarmForm));
+    await nextTick();
+    closeModal();
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    @cancel="handleCancel"
+    @ok="handleSubmit"
+    :destroy-on-close="true"
+    :show-ok-btn="true"
+    cancel-text="关闭"
+    width="40%"
+    title="历史趋势"
+  >
+    <section
+      class="flex flex-col p-4 h-full w-full min-w-7/10"
+      style="color: #f0f2f5; background-color: #f0f2f5"
+    >
+      <section class="bg-white my-3 p-2">
+        <BasicForm @register="register" />
+      </section>
+    </section>
+  </BasicModal>
+</template>
+
+<style scoped></style>

+import { Ref, inject, provide } from 'vue';
+
+const SymbolKey = Symbol('alarm-info');
+interface IAlarm {
+  pageSize: number;
+  time: string | number;
+}
+
+export interface AlarmContextType {
+  alarmForm: Ref<IAlarm>;
+  getAlarmForm: (value: any) => void;
+}
+
+export const createAlarmContext = (options: AlarmContextType) => {
+  provide(SymbolKey, options);
+};
+
+export const useAlarmContext = () => {
+  return inject<AlarmContextType>(SymbolKey) || ({} as Partial<AlarmContextType>);
+};

@@ -25,11 +25,13 @@
   import { ModalParamsType } from '/#/utils';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { HistoryTrendModal } from './components/HistoryTrendModal';
+  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';
 
   const props = defineProps<{
     value?: Recordable;
@@ -73,6 +75,25 @@
     openTrendModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
   };
 
+  // 设备告警时间选择
+  const [registerAlarmModal, { openModal: openAlarmModal }] = useModal();
+  const handleOpenAlarm = (data: WidgetDataType) => {
+    openAlarmModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
+  };
+
+  const alarmForm = ref({
+    time: 2592000000,
+    pageSize: 10,
+  });
+  const getAlarmForm = (value) => {
+    alarmForm.value = {
+      time: value.time,
+      pageSize: value.pageSize,
+    };
+  };
+
+  createAlarmContext({ alarmForm: alarmForm, getAlarmForm });
+
   const { send, close } = useSocket(dataSource);
 
   createDataBoardContext({ send, close });
@@ -147,6 +168,7 @@
                 :source-info="item"
                 @update="handleUpdateWidget"
                 @open-trend="handleOpenTrend"
+                @open-alarm="handleOpenAlarm"
                 @ok="getDataSource"
               />
             </template>
@@ -162,9 +184,12 @@
 
     <DataSourceBindPanel @register="register" :layout="dataSource" @ok="getDataSource" />
 
+    <!-- 趋势 -->
     <HistoryTrendModal @register="registerTrendModal" />
+
+    <!-- 告警选择时间 -->
+    <alarmTimeModal @register="registerAlarmModal" @getAlarmForm="getAlarmForm" />
   </section>
 </template>
 
 <style lang="less" scoped></style>
-../packages/hook/socket/useSocket