refactor(web-antd): 用 SSE 替代 WebSocket 实现通知和电表数据实时推送

apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricitySituation/index.vue

@@ -1,45 +1,49 @@
 <script setup lang="ts">
+import { useNotifyStore } from '#/store';
 import { useAccessStore } from '@vben/stores';
+import FloorTree from '../components/floor-tree.vue';
 import { BackTop, message, Spin } from 'ant-design-vue';
 import { Page, VbenCountToAnimator } from '@vben/common-ui';
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
-import FloorTree from '../components/floor-tree.vue';
-import { getWebSocketService } from '#/api/websocket';
+import { ref, onMounted, onBeforeUnmount, reactive, watch } from 'vue';
 import { currentReading } from '#/api/property/energyManagement/meterInfo';
 
-const ws = getWebSocketService();
+const notifyStore = useNotifyStore();
 const readingData = ref<any>({});
 const readingTime = ref('');
-let readingLoading = ref(false);
+const readingLoading = ref(false);
 
-if (ws) {
-  // 使用setOnMessageCallback方法设置消息回调
-  ws.setOnMessageCallback((event: MessageEvent) => {
-    // 解析数据并更新UI
-    try {
-      const data = JSON.parse(event.data);
-      if (data.type === 'meter') {
-        if (typeof data.data === 'undefined') {
-          message.warn('当前楼层暂无电表！');
+onMounted(() => {
+  notifyStore.startListeningMessage();
+  // 监听sseList的变化
+  watch(
+    () => notifyStore.sseList,
+    (val) => {
+      const latestMessage = val[val.length - 1];
+
+      try {
+        // 尝试解析消息内容
+        const parsedMessage = JSON.parse(latestMessage);
+        console.log('收到sse消息:', parsedMessage);
+        if (parsedMessage.type === 'meter') {
+          // 根据消息内容执行相应操作
+          handleSSEMessage(parsedMessage);
         }
-        readingData.value = data.data;
-        readingTime.value = data.readingTime;
+      } catch (e) {
+        console.log('收到非JSON消息:', latestMessage);
+        // 处理非JSON格式消息
       }
-    } catch (e) {
-      console.error('Error parsing data:');
-    }
-    readingLoading.value = false;
-  });
+    },
+    { deep: true },
+  );
+});
 
-  // 如果需要，也可以设置错误回调
-  ws.setOnErrorCallback((error: any) => {
-    console.log('Error in WebSocket:');
-    currentReading({ meterType: 0, floorId: 0 });
-    readingLoading.value = false;
-  });
-}else {
+function handleSSEMessage(data: any) {
+  if (data.data.length === 0) {
+    message.warn('当前楼层暂无电表！');
+  }
+  readingData.value = data.data;
+  readingTime.value = data.readingTime;
   readingLoading.value = false;
-  message.warn('websocket未连接！请刷新页面重试！');
 }
 
 onBeforeUnmount(() => {
@@ -50,10 +54,6 @@ async function handleSelectFloor(selectedKeys, info) {
   if (typeof selectedKeys[0] === 'undefined') {
     return;
   }
-  if (ws.webSocket.readyState !== 1) {
-    message.warn('websocket未连接！请刷新页面重试！');
-    return;
-  }
   readingLoading.value = true;
   await currentReading({
     meterType: 1,