From 0617722410f21916ae96d40d30e0778e2239217d Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期五, 26 四月 2024 12:55:04 +0800
Subject: [PATCH] #

---
 zy-asrs-flow/src/pages/map/index.jsx |   24 ++++++++++++++++++------
 1 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 5709878..7c039da 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as PIXI from 'pixi.js';
+import * as TWEEDLE from 'tweedle.js';
 import { FormattedMessage, useIntl, useModel } from '@umijs/max';
 import { Layout, Button, Flex, Row, Col, FloatButton, Select, notification, Segmented } from 'antd';
 const { Header, Content } = Layout;
@@ -8,14 +8,13 @@
     FileAddOutlined,
     CompressOutlined,
     SettingOutlined,
-    CloseOutlined
 } from '@ant-design/icons';
 import './index.css'
 import { createStyles } from 'antd-style';
 import Edit from './components/device';
 import Settings from './components/settings'
 import * as Utils from './utils'
-import * as Websocket from './websocket'
+import WebSocketClient from './websocket'
 import Player from './player';
 import MapSearch from './header/search';
 import MapFloor from './header/floor';
@@ -61,7 +60,7 @@
     SETTINGS_MODEL: "3",
 })
 
-let player;
+let player, websocket;
 
 const Map = () => {
     const intl = useIntl();
@@ -91,6 +90,7 @@
         const storedValue = localStorage.getItem('curFloor');
         return storedValue !== null ? JSON.parse(storedValue) : null;
     });
+    const curFloorRef = React.useRef(curFloor);
     const [batchSprites, setBatchSprites] = React.useState([]);
     const [batchDrawerVisible, setBatchDrawerVisible] = React.useState(false);
 
@@ -103,6 +103,12 @@
             Utils.syncApp(player.app);
             Utils.syncMapContainer(player.mapContainer);
             Utils.syncNotify(notify);
+
+            websocket = new WebSocketClient('/ws/map/websocket');
+            websocket.connect();
+            websocket.onMessage = (data) => {
+                Utils.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
+            }
 
             const handleResize = () => {
                 setWindowSize({
@@ -123,10 +129,15 @@
                 player.adaptScreen();
                 Utils.mapNotify(intl.formatMessage({ id: 'map.load.success', defaultMessage: '娆㈣繋浣跨敤WCS绯荤粺' }));
             }, 200)
-
-            Websocket.createWs();
         }
         initialize();
+
+        return () => {
+            websocket.onMessage = (data) => {}
+            if (websocket) {
+                websocket.close();
+            }
+        }
     }, []);
 
     // resize
@@ -251,6 +262,7 @@
 
     // watch curFloor
     React.useEffect(() => {
+        curFloorRef.current = curFloor;
         if (!mapContainer && !dataFetched) {
             return;
         }

--
Gitblit v1.9.1