feat(web-antd): 实现电表数据实时推送功能

- 新增 WebSocket 服务，用于接收实时推送的电表数据

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

@@ -1,13 +1,44 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import { useAccessStore } from '@vben/stores';
 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 { currentReading } from '#/api/property/energyManagement/meterInfo';
 
-onMounted(() => {});
+const ws = getWebSocketService();
 
-onBeforeUnmount(() => {});
+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('当前楼层暂无电表！');
+        }
+        readingData.value = data.data;
+        readingTime.value = data.readingTime;
+      }
+    } catch (e) {
+      console.error('Error parsing data:');
+    }
+    readingLoading.value = false;
+  });
+
+  // 如果需要，也可以设置错误回调
+  ws.setOnErrorCallback((error: any) => {
+    console.log('Error in WebSocket:');
+    currentReading({ meterType: 0, floorId: 0 });
+    readingLoading.value = false;
+  });
+}
+
+onBeforeUnmount(() => {
+  currentReading({ meterType: 0, floorId: 0 });
+});
 
 const readingData = ref<any>({});
 const readingTime = ref('');
@@ -16,21 +47,15 @@ async function handleSelectFloor(selectedKeys, info) {
   if (typeof selectedKeys[0] === 'undefined') {
     return;
   }
+  if (ws.webSocket.readyState !== 1) {
+    message.warn('websocket未连接！请刷新页面重试！');
+    return;
+  }
   readingLoading.value = true;
-  const reading = await currentReading({
+  await currentReading({
     meterType: 1,
     floorId: selectedKeys[0],
   });
-  readingLoading.value = false;
-  if (reading === null) {
-    message.warn('当前楼层暂无电表数据！');
-  }
-  const nowTime =
-    new Date().toLocaleDateString().replace(/\//g, '-') +
-    ' ' +
-    new Date().toLocaleTimeString();
-  readingTime.value = nowTime;
-  readingData.value = reading;
 }
 
 function targetFn() {
@@ -54,7 +79,13 @@ function targetFn() {
                 {{ item.meterName }}
               </h2>
               <div class="meterInfo-reading">
-                <p>{{ item.initReading }}</p>
+                <p>
+                  <VbenCountToAnimator
+                    :end-val="item.initReading"
+                    :decimals="2"
+                    prefix=""
+                  />
+                </p>
                 <div></div>
               </div>
               <div class="meterInfo-list">