告警大屏css初稿，大屏小图echart测试页

src/utils/boxApi.ts

@@ -313,6 +313,55 @@ class BoxApi {
         }
     }
 
+    public async getEventsByParams(
+        token: string | null = null,
+        pageSize: number = 20,
+        currentPage: number = 1,
+        timeBefore: string | null = null,
+        timeAfter: string | null = null,
+        types: string | null = null,
+        camera_id: number | null = null
+    ): Promise<any> {
+        // 计算 offset
+        const offset = (currentPage - 1) * pageSize;
+
+        // 构建请求的 URL
+        let url = `${this.apiEvents}?limit=${pageSize}&offset=${offset}`;
+
+        // 如果有时间范围，则添加到 URL 中
+        if (timeBefore && timeAfter) {
+            url += `&time_before=${encodeURIComponent(timeBefore)}&time_after=${encodeURIComponent(timeAfter)}`;
+        }
+
+        // 如果 types 不为空，则添加到 URL 中
+        if (types) {
+            url += `&types=${encodeURIComponent(types)}`;
+        }
+        if(camera_id){
+            url += `&camera_id=${camera_id}`;
+        }
+
+        try {
+            // 发送 GET 请求
+            const res = await this.axios.get(url, this._authHeader(token));
+
+            // 判断请求是否成功
+            if (res.data.err.ec === 0) {
+                return {
+                    count: res.data.ret.count,
+                    next: res.data.ret.next,
+                    previous: res.data.ret.previous,
+                    results: res.data.ret.results
+                };
+            } else {
+                // 处理请求失败的情况
+                throw new Error(res.data.err.dm);
+            }
+        } catch (error) {
+            // 抛出异常以便调用者处理
+            throw error;
+        }
+    }
     // public async getOneEvent(token: string | null = null): Promise<any> {
     //     try {
     //         return await this.getEvents(1, 0, token);
@@ -329,18 +378,17 @@ class BoxApi {
         }
     }
 
-
     public async setEventStatus(eventId: number, status: string, remark: string | null = null, token: string | null = null): Promise<any> {
         const url = `${this.apiEvents}/${eventId}`;
-        const newRemark = remark ? remark : "";
-
-        const data = {
-            status: status,
-            remark: newRemark
-        };
-
+    
+        
+        const data: { status: string; remark?: string } = { status: status };
+        if (remark && remark.trim() !== "") {
+            data.remark = remark;
+        }
+    
         try {
-            const res = await this.axios.patch(url, data, this._authHeader(token))
+            const res = await this.axios.patch(url, data, this._authHeader(token));
             if (res.data.err.ec === 0) {
                 return res.data.ret;
             } else {
@@ -387,7 +435,7 @@ class BoxApi {
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json',
-                'Authorization': `Bearer ${accessToken}`,  
+                'Authorization': `Bearer ${accessToken}`,
                 // 'X-CSRFToken': this.getCsrfToken() 
             }
         };

src/utils/useGlobalWebSocket.ts

@@ -0,0 +1,96 @@
+// useGlobalWebSocket.ts
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const websocket = ref<WebSocket | null>(null);
+const isWebSocketConnected = ref(false);
+let heartbeatInterval: number | null = null;
+const rememberedAddress = localStorage.getItem('rememberedAddress') || '127.0.0.1';
+
+// 连接 WebSocket
+const connectWebSocket = () => {
+  websocket.value = new WebSocket(`ws://${rememberedAddress}:8080/event/ws`);
+  websocket.value.onopen = () => {
+    ElMessage.success('全局 WebSocket 连接成功');
+    isWebSocketConnected.value = true;
+    startHeartbeat();
+  };
+  websocket.value.onmessage = (event) => {
+    showNotification(event.data);
+  };
+  websocket.value.onclose = handleClose;
+  websocket.value.onerror = handleError;
+};
+
+// 关闭 WebSocket
+const closeWebSocket = () => {
+  if (websocket.value) {
+    websocket.value.close();
+    ElMessage.info('全局 WebSocket 已关闭');
+    stopHeartbeat();
+    isWebSocketConnected.value = false;
+  }
+};
+
+// 心跳检测
+const startHeartbeat = () => {
+  if (heartbeatInterval) return;
+  heartbeatInterval = window.setInterval(() => {
+    if (websocket.value && websocket.value.readyState === WebSocket.OPEN) {
+      websocket.value.send('ping');
+    }
+  }, 5000);
+};
+
+const stopHeartbeat = () => {
+  if (heartbeatInterval) {
+    clearInterval(heartbeatInterval);
+    heartbeatInterval = null;
+  }
+};
+
+// 处理连接关闭
+const handleClose = () => {
+  ElMessage.warning('WebSocket 连接已关闭');
+  isWebSocketConnected.value = false;
+  stopHeartbeat();
+  localStorage.setItem('isPopupEnabled', 'False');
+};
+
+const handleError = () => {
+  ElMessage.error('WebSocket 连接出错');
+  isWebSocketConnected.value = false;
+  stopHeartbeat();
+};
+
+// 显示通知
+const showNotification = (message: string) => {
+  if (Notification.permission === 'granted') {
+    new Notification('新消息', {
+      body: message,
+      icon: '/path/to/icon.png',
+    });
+  } else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) => {
+      if (permission === 'granted') {
+        new Notification('新消息', {
+          body: message,
+          icon: '/path/to/icon.png',
+        });
+      }
+    });
+  }
+};
+
+// 导出类型和方法
+export interface GlobalWebSocket {
+  connectWebSocket: () => void;
+  closeWebSocket: () => void;
+  isWebSocketConnected: typeof isWebSocketConnected;
+}
+
+export const useGlobalWebSocket = (): GlobalWebSocket => ({
+  connectWebSocket,
+  closeWebSocket,
+  isWebSocketConnected,
+});