Merge branch 'ww' into 'main'

feat: add global alarm notify

See merge request huang/yun-teng-iot-front!346

@@ -42,3 +42,5 @@ VITE_GLOB_CONFIGURATION = /thingskit-drawio
 # Content Security Policy
 # Content Security Policy
 VITE_CONTENT_SECURITY_POLICY = false
 VITE_CONTENT_SECURITY_POLICY = false
 
 
+# Alarm Notify Polling Interval Time
+VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 5000

@@ -42,3 +42,6 @@ VITE_GLOB_CONFIGURATION = /thingskit-scada
 
 
 # Content Security Policy
 # Content Security Policy
 VITE_CONTENT_SECURITY_POLICY = false
 VITE_CONTENT_SECURITY_POLICY = false
+
+# Alarm Notify Polling Interval Time
+VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 60000

@@ -8,6 +8,7 @@
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ConfigProvider } from 'ant-design-vue';
   import { ConfigProvider } from 'ant-design-vue';
+  import { useAlarmNotify } from './views/alarm/log/hook/useAlarmNotify';
   import { AppProvider } from '/@/components/Application';
   import { AppProvider } from '/@/components/Application';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
   import { useLocale } from '/@/locales/useLocale';
@@ -15,4 +16,5 @@
   const { getAntdLocale } = useLocale();
   const { getAntdLocale } = useLocale();
 
 
   useTitle();
   useTitle();
-</script>
+  useAlarmNotify();
+</script>

@@ -6,6 +6,8 @@ import {
   DeviceQueryParam,
   DeviceQueryParam,
 } from '/@/api/device/model/deviceModel';
 } from '/@/api/device/model/deviceModel';
 import { ChildDeviceParams } from './model/deviceModel';
 import { ChildDeviceParams } from './model/deviceModel';
+import { PaginationResult } from '/#/axios';
+import { AlarmLogItem } from './model/deviceConfigModel';
 enum DeviceManagerApi {
 enum DeviceManagerApi {
   /**
   /**
    * 设备URL
    * 设备URL
@@ -94,7 +96,7 @@ export const getDeviceDetail = (id: string) => {
 
 
 // 查询设备详情中的告警
 // 查询设备详情中的告警
 export const getDeviceAlarm = (params?: DeviceProfileQueryParam) => {
 export const getDeviceAlarm = (params?: DeviceProfileQueryParam) => {
-  return defHttp.get({
+  return defHttp.get<PaginationResult<AlarmLogItem>>({
     url: DeviceManagerApi.DEVICE_ALARM_URL,
     url: DeviceManagerApi.DEVICE_ALARM_URL,
     params,
     params,
   });
   });

@@ -165,3 +165,37 @@ export interface IDeviceConfigAddOrEditModel {
   updateTime?: '2021-12-15T02:17:26.645Z';
   updateTime?: '2021-12-15T02:17:26.645Z';
   updater?: string;
   updater?: string;
 }
 }
+
+export interface Data {
+  CO: number;
+}
+
+export interface Details {
+  data: Data;
+}
+
+export interface AlarmLogItem {
+  id: string;
+  tenantId: string;
+  creator?: any;
+  updater?: any;
+  createdTime: string;
+  updatedTime: string;
+  customerId: string;
+  tbDeviceId: string;
+  originatorType: number;
+  deviceId: string;
+  deviceName: string;
+  type: string;
+  severity: string;
+  status: string;
+  startTs: string;
+  endTs: string;
+  ackTs: string;
+  clearTs: string;
+  details: Details;
+  propagate: boolean;
+  propagateRelationTypes?: any;
+  organizationId: string;
+  organizationName: string;
+}

 import { BasicPageParams } from '/@/api/model/baseModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
+import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
 export enum DeviceState {
 export enum DeviceState {
   INACTIVE = 'INACTIVE',
   INACTIVE = 'INACTIVE',
   ONLINE = 'ONLINE',
   ONLINE = 'ONLINE',
@@ -17,6 +18,7 @@ export type DeviceParam = {
 };
 };
 export type DeviceProfileParam = {
 export type DeviceProfileParam = {
   name?: string;
   name?: string;
+  status?: AlarmStatus;
 };
 };
 export type DeviceId = {
 export type DeviceId = {
   id?: string;
   id?: string;

@@ -2,6 +2,21 @@ import { alarmLevel, statusType } from '/@/views/device/list/config/detail.confi
 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { BasicColumn } from '/@/components/Table';
 import moment from 'moment';
 import moment from 'moment';
+
+export enum AlarmStatus {
+  CLEARED_UN_ACK = 'CLEARED_UNACK',
+  ACTIVE_UN_ACK = 'ACTIVE_UNACK',
+  CLEARED_ACK = 'CLEARED_ACK',
+  ACTIVE_ACK = 'ACTIVE_ACK',
+}
+
+export enum AlarmStatusMean {
+  CLEARED_UNACK = '清楚未确认',
+  ACTIVE_UNACK = '激活未确认',
+  CLEARED_ACK = '清除已确认',
+  ACTIVE_ACK = '激活已确认',
+}
+
 export const alarmSearchSchemas: FormSchema[] = [
 export const alarmSearchSchemas: FormSchema[] = [
   {
   {
     field: 'status',
     field: 'status',
@@ -11,20 +26,20 @@ export const alarmSearchSchemas: FormSchema[] = [
     componentProps: {
     componentProps: {
       options: [
       options: [
         {
         {
-          label: '清除未确认',
-          value: 'CLEARED_UNACK',
+          label: AlarmStatusMean[AlarmStatus.CLEARED_UN_ACK],
+          value: AlarmStatus.CLEARED_UN_ACK,
         },
         },
         {
         {
-          label: '激活未确认',
-          value: 'ACTIVE_UNACK',
+          label: AlarmStatusMean[AlarmStatus.ACTIVE_UN_ACK],
+          value: AlarmStatus.ACTIVE_UN_ACK,
         },
         },
         {
         {
-          label: '清除已确认',
-          value: 'CLEARED_ACK',
+          label: AlarmStatusMean[AlarmStatus.CLEARED_ACK],
+          value: AlarmStatus.CLEARED_ACK,
         },
         },
         {
         {
-          label: '激活已确认',
-          value: 'ACTIVE_ACK',
+          label: AlarmStatusMean[AlarmStatus.ACTIVE_ACK],
+          value: AlarmStatus.ACTIVE_ACK,
         },
         },
       ],
       ],
     },
     },

+import { AlarmStatus, AlarmStatusMean } from '../config/detail.config';
+import { clearOrAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager';
+import { notification, Button, Tag } from 'ant-design-vue';
+import { h, onMounted, onUnmounted } from 'vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { alarmLevel } from '/@/views/device/list/config/detail.config';
+
+interface UseAlarmNotifyParams {
+  alarmNotifyStatus?: AlarmStatus;
+  interval?: number;
+  color?: string;
+}
+
+export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
+  const {
+    alarmNotifyStatus = AlarmStatus.ACTIVE_UN_ACK,
+    interval = import.meta.env.VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
+    color = 'orange',
+  } = params;
+  const alarmNotifyStatusMean = AlarmStatusMean[alarmNotifyStatus];
+
+  const handleMarkRead = async (id: string) => {
+    try {
+      await clearOrAckAlarm(id, false);
+    } catch (error) {}
+  };
+
+  let timeout: Nullable<NodeJS.Timer> = null;
+
+  const getAlarmLog = async () => {
+    try {
+      const { items = [] } =
+        (await getDeviceAlarm({ status: alarmNotifyStatus, page: 1, pageSize: 10 })) || {};
+
+      if (items.length) {
+        const first = items.at(0)!;
+        const { deviceName, id, severity } = first;
+
+        let key: Nullable<string> = `open-notify-${id}`;
+
+        const severityMean = alarmLevel(severity);
+
+        console.log('enter');
+        notification.open({
+          message: '设备告警',
+          duration: null,
+          key,
+          description: h('div', {}, [
+            h('div', { style: { marginRight: '5px' } }, [
+              h('span', { style: { marginRight: '5px' } }, '设备:'),
+              h('span', {}, `[${deviceName}]`),
+            ]),
+            h('div', { style: { marginTop: '5px' } }, [
+              h('span', { style: { marginRight: '5px' } }, '告警状态:'),
+              h(Tag, { color }, () => `${alarmNotifyStatusMean}`),
+            ]),
+            h('div', { style: { marginTop: '5px' } }, [
+              h('span', { style: { marginRight: '5px' } }, '告警级别:'),
+              h(Tag, { color: '#f50' }, () => `${severityMean}`),
+            ]),
+          ]),
+          icon: h(ExclamationCircleOutlined, { style: { color: '#faa22d' } }),
+          onClose: () => {
+            console.log('enter close');
+            // currentNotifyId = null;
+            key = null;
+          },
+          btn: h(
+            Button,
+            {
+              type: 'primary',
+              size: 'small',
+              onClick: async () => {
+                await handleMarkRead(id);
+                notification.close(key!);
+                key = null;
+              },
+            },
+            () => '标记已读'
+          ),
+        });
+      }
+    } catch (error) {}
+  };
+
+  const polling = () => {
+    timeout = setInterval(() => {
+      getAlarmLog();
+    }, interval);
+  };
+
+  onMounted(() => {
+    polling();
+  });
+
+  onUnmounted(() => {
+    clearInterval(timeout as NodeJS.Timer);
+    timeout = null;
+    // currentNotifyId = null;
+  });
+}

@@ -42,3 +42,8 @@ export interface UploadFileParams {
   filename?: string;
   filename?: string;
   [key: string]: any;
   [key: string]: any;
 }
 }
+
+export interface PaginationResult<T = Recordable> {
+  items: T[];
+  total: number;
+}

@@ -72,6 +72,7 @@ declare global {
     VITE_USE_IMAGEMIN: boolean;
     VITE_USE_IMAGEMIN: boolean;
     VITE_GENERATE_UI: string;
     VITE_GENERATE_UI: string;
     VITE_CONTENT_SECURITY_POLICY: boolean;
     VITE_CONTENT_SECURITY_POLICY: boolean;
+    VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME: number;
   }
   }
 
 
   declare function parseInt(s: string | number, radix?: number): number;
   declare function parseInt(s: string | number, radix?: number): number;