添加通信断开链接提示

graphic-pixi

@@ -1 +1 @@
-Subproject commit cbc4bd23a8a4bd5c1d00aea526fc5dc630a37836
+Subproject commit 7fe73a8334f36cf917255a99d75c454abcb96d79

src/drawApp/lineApp.ts

@@ -63,6 +63,7 @@ import { LogicSectionTemplate } from 'src/graphics/logicSection/LogicSection';
 import { LogicSectionData } from './graphics/LogicSectionInteraction';
 import { alert } from 'src/protos/alertInfo';
 import { useLineNetStore } from 'src/stores/line-net-store';
+import { QNotifyUpdateOptions, Notify } from 'quasar';
 
 // const QuickJumpMenu = new ContextMenu({
 //   name: '快捷跳转',
@@ -246,6 +247,19 @@ export async function loadLineDatas(app: GraphicApp) {
         return states;
       },
     });
+    let msgNotify: null | ((props?: QNotifyUpdateOptions | undefined) => void) =
+      null;
+    app.on('websocket-connect-state-change', (connected) => {
+      if (!connected && !msgNotify) {
+        msgNotify = Notify.create({
+          type: 'negative',
+          timeout: 0,
+          message: '通信链接已断开！',
+        });
+      } else if (msgNotify && connected) {
+        msgNotify();
+      }
+    });
     const lineNetStore = useLineNetStore();
     msgBroker.subscribe({
       destination: '/queue/xian/ncc/alert',

src/drawApp/lineNetApp.ts

@@ -34,6 +34,7 @@ import { toUint8Array } from 'js-base64';
 import { getWebsocketUrl } from 'src/configs/UrlManage';
 import { getJwtToken } from 'src/configs/TokenManage';
 import { alert } from 'src/protos/alertInfo';
+import { QNotifyUpdateOptions, Notify } from 'quasar';
 
 let lineNetApp: GraphicApp | null = null;
 let msgBroker: AppWsMsgBroker | null = null;
@@ -139,6 +140,19 @@ export async function loadLineNetDatas(app: GraphicApp) {
         lineNetStore.setAlarmInfo(storage.messages as []);
       },
     });
+    let msgNotify: null | ((props?: QNotifyUpdateOptions | undefined) => void) =
+      null;
+    app.on('websocket-connect-state-change', (connected) => {
+      if (!connected && !msgNotify) {
+        msgNotify = Notify.create({
+          type: 'negative',
+          timeout: 0,
+          message: '通信链接已断开！',
+        });
+      } else if (msgNotify && connected) {
+        msgNotify();
+      }
+    });
   } else {
     app.loadGraphic([]);
   }

src/jl-graphic/app/JlGraphicApp.ts

@@ -288,7 +288,7 @@ export interface GraphicAppEvents extends GlobalMixins.GraphicAppEvents {
   drag_op_end: [event: AppDragEvent];
   'pre-menu-handle': [menu: MenuItemOptions];
   'post-menu-handle': [menu: MenuItemOptions];
-  'websocket-state-change': [app: GraphicApp, connected: boolean];
+  'websocket-connect-state-change': [connected: boolean];
   destroy: [app: GraphicApp];
 }
 

src/jl-graphic/message/WsMsgBroker.ts

@@ -65,8 +65,7 @@ export class StompCli {
 
     StompCli.client.onConnect = () => {
       // console.log('websocket连接(重连),重新订阅', StompCli.appMsgBroker.length)
-      StompCli.connected = true;
-      StompCli.emitConnectStateChangeEvent();
+      StompCli.emitConnectStateChangeEvent(true);
       StompCli.appMsgBroker.forEach((broker) => {
         broker.resubscribe();
       });
@@ -87,13 +86,11 @@ export class StompCli {
 
     StompCli.client.onDisconnect = (frame: Frame) => {
       console.log('Stomp 断开连接', frame);
-      StompCli.connected = false;
-      StompCli.emitConnectStateChangeEvent();
+      StompCli.emitConnectStateChangeEvent(false);
     };
     StompCli.client.onWebSocketClose = (evt: CloseEvent) => {
       console.log('websocket 关闭', evt);
-      StompCli.connected = false;
-      StompCli.emitConnectStateChangeEvent();
+      StompCli.emitConnectStateChangeEvent(false);
     };
     // websocket错误处理
     StompCli.client.onWebSocketError = (err: Event) => {
@@ -103,9 +100,10 @@ export class StompCli {
     StompCli.client.activate();
   }
 
-  static emitConnectStateChangeEvent() {
+  static emitConnectStateChangeEvent(connected: boolean) {
+    StompCli.connected = connected;
     StompCli.appMsgBroker.forEach((broker) => {
-      broker.app.emit('websocket-state-change', broker.app, StompCli.connected);
+      broker.app.emit('websocket-connect-state-change', connected);
     });
   }
 

src/jl-graphic/plugins/CommonMousePlugin.ts

@@ -52,9 +52,6 @@ class CompleteMouseToolOptions implements IMouseToolOptions {
   }
 }
 
-const DefaultSelectToolOptions: CompleteMouseToolOptions =
-  new CompleteMouseToolOptions();
-
 /**
  * 通用交互工具
  */
@@ -72,7 +69,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
 
   constructor(graphicApp: GraphicApp) {
     super(CommonMouseTool.Name, graphicApp);
-    this.options = DefaultSelectToolOptions;
+    this.options = new CompleteMouseToolOptions();
 
     this.box = new Graphics();
     this.box.name = CommonMouseTool.SelectBox;

src/pages/LineMonitorPage.vue

@@ -87,7 +87,6 @@ watch(
 
 function onResize() {
   const dom = document.getElementById('line-app-container');
-  console.log(props.sizeWidth, props.sizeHeight, '===');
   if (dom) {
     dom.style.width = props.sizeWidth + 'px';
     dom.style.height = props.sizeHeight + 'px';