同步调整

package.json

@@ -18,7 +18,7 @@
     "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
     "google-protobuf": "^3.21.4",
-    "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.15",
+    "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.17",
     "js-base64": "^3.7.5",
     "pinia": "^2.0.11",
     "quasar": "^2.16.0",
@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.0",
+    "@types/google-protobuf": "^3.15.6",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@types/google-protobuf": "^3.15.6",
     "autoprefixer": "^10.4.2",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",

rtss-proto-msg

@@ -1 +1 @@
-Subproject commit 3803c578876627b66110ad8748592aafddabfa03
+Subproject commit 49c235a66f0f6a89c68039bd904eadd9497f8219

src/api/UserApi.ts

@@ -81,3 +81,18 @@ export async function syncUsersInfo() {
   });
   return response.data.data;
 }
+
+/**
+ * 获取jwt令牌(mqtt验证)
+ */
+export async function getJwt() {
+  const query = `
+  query getJwt {
+    getJwt
+  }
+`;
+  const response = await api.post('', {
+    query: query,
+  });
+  return response.data.data;
+}

src/drawApp/commonApp.ts

@@ -22,6 +22,7 @@ import { RectData } from './graphics/RectInteraction';
 import { common } from 'src/protos/common';
 import { errorNotify, successNotify } from 'src/utils/CommonNotify';
 import { saveDraft } from 'src/api/DraftApi';
+import { sync_data_message } from 'src/protos/sync_data_message';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -142,3 +143,14 @@ export function setUniqueIdPrefix(
 ) {
   UniqueIdPrefix = newUniqueIdPrefix;
 }
+
+export function handlerCommonTypeData(data: sync_data_message.UpdataData) {
+  switch (data.type) {
+    case Rect.Type:
+      return new RectData(iscsGraphicData.Rect.deserialize(data.data));
+    case Arrow.Type:
+      return new ArrowData(iscsGraphicData.Arrow.deserialize(data.data));
+    case TextContent.Type:
+      return new IscsTextData(iscsGraphicData.IscsText.deserialize(data.data));
+  }
+}

src/drawApp/iscsApp.ts

@@ -5,9 +5,11 @@ import {
   JlGraphic,
   KeyListener,
   newDrawApp,
+  ClientEngine,
 } from 'jl-graphic';
 
 import {
+  handlerCommonTypeData,
   initCommonDrawApp,
   loadCommonDrawDatas,
   saveCommonDrawDatas,
@@ -19,7 +21,11 @@ import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { getDraft } from 'src/api/DraftApi';
+import { getJwt } from 'src/api/UserApi';
 import { fromUint8Array, toUint8Array } from 'js-base64';
+import { getWebsocketUrl } from 'src/configs/UrlManage';
+import { sync_data_message } from 'src/protos/sync_data_message';
+// import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
 
@@ -43,6 +49,14 @@ export function initIscsDrawApp(): IDrawApp {
     dataLoader: loadDrawDatas,
     isSupportDeletion: isSupportDeletion,
   });
+  getJwt().then((res) => {
+    drawApp.enableWsMassaging({
+      engine: ClientEngine.MQTT,
+      wsUrl: `${getWebsocketUrl()}`,
+      token: res.getJwt as string,
+    });
+  });
+
   const app = drawApp;
   initCommonDrawApp(app);
   new CCTVButtonDraw(app, new CCTVButtonTemplate(new CCTVButtonData()));
@@ -57,12 +71,74 @@ export function initIscsDrawApp(): IDrawApp {
       },
     })
   );
+  app.on('loadfinish', () => {
+    handleSubscribe(app);
+  });
   app.on('destroy', async () => {
     resetData();
   });
   return drawApp;
 }
 
+function handleSubscribe(app: IDrawApp) {
+  const drawStore = useDrawStore();
+
+  app.subscribe({
+    destination: `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+    messageHandle: (message: Uint8Array) => {
+      const syncData = sync_data_message.SyncData.deserialize(message);
+      if (
+        syncData.submenu === drawStore.selectSubmenuAndStation.submenu &&
+        syncData.station === drawStore.selectSubmenuAndStation.station
+      ) {
+        if (syncData.operationType === 'graphic-create') {
+          syncData.datas.forEach((data) => {
+            const proto = handlerTypeData(data);
+            const template = app.getGraphicTemplatesByType(proto.graphicType);
+            const g = template.new();
+            g.loadData(proto);
+            app.addGraphics(g);
+          });
+        } else if (syncData.operationType === 'graphic-drag') {
+          syncData.datas.forEach((data) => {
+            const g = app.queryStore.queryById(data.id);
+            const proto = handlerTypeData(data);
+            g.updateData(proto);
+          });
+        } else if (syncData.operationType === 'graphic-delete') {
+          const graphics: JlGraphic[] = [];
+          syncData.datas.forEach((data) => {
+            const g = app.queryStore.queryById(data.id);
+            graphics.push(g);
+          });
+          app.deleteGraphics(...graphics);
+        }
+      } else {
+      }
+    },
+    graphicQueryer: (state, store) => {
+      return store.queryById(+state.code);
+    },
+  });
+}
+
+function handlerTypeData(data: sync_data_message.UpdataData) {
+  const proto = handlerCommonTypeData(data);
+  if (proto) {
+    return proto;
+  } else {
+    throw new Error('获取数据异常：无法匹配到数据类型');
+  }
+  // switch (data.type) {
+  //   case Rect.Type:
+  //     return new RectData(iscsGraphicData.Rect.deserialize(data.data));
+  // }
+}
+
+export function handlerPublish(message: string) {
+  console.log(message);
+}
+
 let hasLoadData = false;
 let base64 = '';
 export async function loadDrawDatas(): Promise<IGraphicStorage> {

src/layouts/IscsDrawLayout.vue

@@ -169,6 +169,7 @@ import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { successNotify } from 'src/utils/CommonNotify';
 import { saveDrawDatas } from 'src/drawApp/iscsApp';
 import { saveDrawToServer } from 'src/drawApp/commonApp';
+import { sync_data_message } from 'src/protos/sync_data_message';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -252,6 +253,22 @@ onMounted(() => {
     const drawApp = drawStore.initDrawApp();
     drawApp.bindDom(dom);
     drawApp.reload();
+    const _record = drawApp.opRecord.record;
+    drawApp.opRecord.record = function (op) {
+      console.log(op, '---', drawApp);
+      handleRecordData(op);
+      _record.call(drawApp.opRecord, op);
+    };
+    const _undo = drawApp.opRecord.undo;
+    drawApp.opRecord.undo = function () {
+      _undo.call(drawApp.opRecord);
+      console.log('undo');
+    };
+    const _redo = drawApp.opRecord.redo;
+    drawApp.opRecord.redo = function () {
+      _redo.call(drawApp.opRecord);
+      console.log('redo');
+    };
     onResize();
   } else {
     drawStore.setDraftId(null);
@@ -395,6 +412,32 @@ function selectedStation(name: string) {
   forceReloadDate();
 }
 
+function handleRecordData(op) {
+  console.log('handleRecordData', op, op.type);
+  const drawApp = drawStore.getDrawApp();
+  const syncData = {
+    operationType: op.type,
+    datas: [],
+    submenu: drawStore.selectSubmenuAndStation.submenu,
+    station: drawStore.selectSubmenuAndStation.station,
+  };
+  op.obj.forEach((g) => {
+    const gData = g.saveData();
+    syncData.datas.push(
+      new sync_data_message.UpdataData({
+        id: g.id,
+        type: g.type,
+        data: gData.data.serialize(),
+      })
+    );
+  });
+  drawApp.publishMessage(
+    '/rtss_simulation/draft/iscs/7',
+    new sync_data_message.SyncData({ ...syncData }).serialize()
+  );
+  console.log(syncData, 'syncData');
+}
+
 onUnmounted(() => {
   drawStore.destroy();
 });