From 01a518f3e752f5cedca2e299a219fc6017d06155 Mon Sep 17 00:00:00 2001
From: fan <fanyuhong@joylink.club>
Date: Mon, 9 Oct 2023 17:31:40 +0800
Subject: [PATCH] =?UTF-8?q?psl=E6=9A=82=E6=8F=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/drawApp/graphics/ArrowInteraction.ts    |  47 +++++++++
 src/drawApp/graphics/IbpAlarmInteraction.ts |  38 ++++++++
 src/drawApp/graphics/IbpKeyInteraction.ts   |  38 ++++++++
 src/drawApp/pslScene.ts                     |   8 +-
 src/layouts/LineLayout.vue                  |  47 ++++++++-
 src/stores/psl-store.ts                     | 102 ++++++++++++++++++++
 6 files changed, 275 insertions(+), 5 deletions(-)
 create mode 100644 src/drawApp/graphics/ArrowInteraction.ts
 create mode 100644 src/drawApp/graphics/IbpAlarmInteraction.ts
 create mode 100644 src/drawApp/graphics/IbpKeyInteraction.ts
 create mode 100644 src/stores/psl-store.ts

diff --git a/src/drawApp/graphics/ArrowInteraction.ts b/src/drawApp/graphics/ArrowInteraction.ts
new file mode 100644
index 0000000..37a1f70
--- /dev/null
+++ b/src/drawApp/graphics/ArrowInteraction.ts
@@ -0,0 +1,47 @@
+import * as pb_1 from 'google-protobuf';
+import { IArrowData, Arrow } from 'src/graphics/arrow/Arrow';
+import { pslGraphicData } from 'src/protos/pslGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+import { IPointData } from 'pixi.js';
+
+export class ArrowData extends GraphicDataBase implements IArrowData {
+  constructor(data?: pslGraphicData.PslKey) {
+    let arrow;
+    if (data) {
+      arrow = data;
+    } else {
+      arrow = new pslGraphicData.PslKey({
+        common: GraphicDataBase.defaultCommonInfo(Arrow.Type),
+      });
+    }
+    super(arrow);
+  }
+
+  public get data(): pslGraphicData.PslKey {
+    return this.getData<pslGraphicData.PslKey>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.map(
+      (p) => new pslGraphicData.Point({ x: p.x, y: p.y })
+    );
+  }
+  clone(): ArrowData {
+    return new ArrowData(this.data.cloneMessage());
+  }
+  copyFrom(data: ArrowData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: ArrowData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
diff --git a/src/drawApp/graphics/IbpAlarmInteraction.ts b/src/drawApp/graphics/IbpAlarmInteraction.ts
new file mode 100644
index 0000000..e90336b
--- /dev/null
+++ b/src/drawApp/graphics/IbpAlarmInteraction.ts
@@ -0,0 +1,38 @@
+import * as pb_1 from 'google-protobuf';
+import { IIbpAlarmData, IbpAlarm } from 'src/graphics/ibpAlarm/IbpAlarm';
+import { pslGraphicData } from 'src/protos/pslGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class IbpAlarmData extends GraphicDataBase implements IIbpAlarmData {
+  constructor(data?: pslGraphicData.PslKey) {
+    let ibpAlram;
+    if (data) {
+      ibpAlram = data;
+    } else {
+      ibpAlram = new pslGraphicData.PslKey({
+        common: GraphicDataBase.defaultCommonInfo(IbpAlarm.Type),
+      });
+    }
+    super(ibpAlram);
+  }
+
+  public get data(): pslGraphicData.PslKey {
+    return this.getData<pslGraphicData.PslKey>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): IbpAlarmData {
+    return new IbpAlarmData(this.data.cloneMessage());
+  }
+  copyFrom(data: IbpAlarmData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: IbpAlarmData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
diff --git a/src/drawApp/graphics/IbpKeyInteraction.ts b/src/drawApp/graphics/IbpKeyInteraction.ts
new file mode 100644
index 0000000..b5392e0
--- /dev/null
+++ b/src/drawApp/graphics/IbpKeyInteraction.ts
@@ -0,0 +1,38 @@
+import * as pb_1 from 'google-protobuf';
+import { IIbpKeyData, IbpKey } from 'src/graphics/ibpKey/IbpKey';
+import { pslGraphicData } from 'src/protos/pslGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class IbpKeyData extends GraphicDataBase implements IIbpKeyData {
+  constructor(data?: pslGraphicData.PslKey) {
+    let ibpKey;
+    if (data) {
+      ibpKey = data;
+    } else {
+      ibpKey = new pslGraphicData.PslKey({
+        common: GraphicDataBase.defaultCommonInfo(IbpKey.Type),
+      });
+    }
+    super(ibpKey);
+  }
+
+  public get data(): pslGraphicData.PslKey {
+    return this.getData<pslGraphicData.PslKey>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): IbpKeyData {
+    return new IbpKeyData(this.data.cloneMessage());
+  }
+  copyFrom(data: IbpKeyData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: IbpKeyData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
diff --git a/src/drawApp/pslScene.ts b/src/drawApp/pslScene.ts
index 8e944c4..898104a 100644
--- a/src/drawApp/pslScene.ts
+++ b/src/drawApp/pslScene.ts
@@ -1,6 +1,6 @@
 import { GraphicData, IGraphicApp, IGraphicStorage } from 'src/jl-graphic';
 import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
-import { useLineStore } from 'src/stores/line-store';
+import { usePslStore } from 'src/stores/psl-store';
 import { toUint8Array } from 'js-base64';
 import { PslKeyTemplate } from 'src/graphics/pslKey/pslKey';
 import { PslKeyData } from './graphics/PslKeyInteraction';
@@ -33,9 +33,9 @@ export function initPslScene(lineApp: IGraphicApp, sceneName: string) {
 }
 
 async function loadPslDatas(): Promise<IGraphicStorage> {
-  const lineStore = useLineStore();
-  const mapId = lineStore.mapId;
-  const simulationId = lineStore.simulationId;
+  const pslStore = usePslStore();
+  const mapId = pslStore.mapId;
+  const simulationId = pslStore.simulationId;
   if (!mapId || !simulationId) {
     throw new Error('获取数据异常：未获取到地图ID或仿真ID');
   }
diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue
index 5b83978..b39f21c 100644
--- a/src/layouts/LineLayout.vue
+++ b/src/layouts/LineLayout.vue
@@ -43,12 +43,26 @@
     <q-page-container>
       <div id="line-app-container" class="overflow-hidden"></div>
     </q-page-container>
+    <q-dialog v-model="pslDialog">
+      <q-page-container style="width: 510px; height: 650px; background: #fff">
+        <div id="psl-app-container" class="overflow-hidden"></div>
+      </q-page-container>
+    </q-dialog>
   </q-layout>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed, onUnmounted, watch, reactive } from 'vue';
+import {
+  onMounted,
+  ref,
+  computed,
+  onUnmounted,
+  watch,
+  reactive,
+  nextTick,
+} from 'vue';
 import { useLineStore } from 'src/stores/line-store';
+import { usePslStore } from 'src/stores/psl-store.ts';
 import { useRoute, useRouter } from 'vue-router';
 import { destroySimulation } from 'src/api/Simulation';
 import StateProperties from 'src/components/line-app/StateProperties.vue';
@@ -67,6 +81,7 @@ const headerHeight = ref(0);
 const route = useRoute();
 const router = useRouter();
 const lineStore = useLineStore();
+const pslDialog = ref(false);
 const simulationId = (route.query.simulationId as string) || '';
 const projectId = (route.query.projectId as string) || '';
 const defaultMapId = (route.query.defaultMapId as string) || '';
@@ -107,6 +122,7 @@ onMounted(async () => {
     try {
       if (projectId) {
         const res = await getProjectLinkInfo(+projectId);
+        console.log(res, '====');
         projectInfo.name = res.name;
         projectInfo.pid = res.pid + '';
         projectInfo.mapInfoLinks = res.mapInfoLinks;
@@ -136,6 +152,9 @@ onMounted(async () => {
     lineStore.setSimulationId(null);
   }
   drawerRight.value = false;
+  // setTimeout(() => {
+  //   pslShow();
+  // }, 5000);
 });
 onUnmounted(() => {
   if (dialogInstance.value && lineStore.showLayerDialog) {
@@ -198,6 +217,32 @@ function switchScene(val: MapInfo) {
   }
 }
 
+function pslShow() {
+  pslDialog.value = true;
+  nextTick(() => {
+    const dom = document.getElementById('psl-app-container');
+    if (dom) {
+      const pslApp = usePslStore().initLineApp();
+      usePslStore().addAllScene([{ type: 1, id: 145 }]);
+      pslApp.bindDom(dom);
+      usePslStore().setMapId(145);
+      usePslStore().setSimulationId(simulationId);
+      sceneName = getSceneNameFn({ type: 1, id: 145 });
+      usePslStore().setSceneName(sceneName);
+      scene = pslApp.getScene(sceneName);
+      scene.reload();
+      dom.style.width = '500px';
+      dom.style.height = '600px';
+    }
+  });
+}
+
+function pslHide() {
+  pslApp.unbindDom();
+  pslApp.destroy();
+  pslDialog.value = false;
+}
+
 interface LinkParams extends Omit<LinkInfo, 'pid' | 'code'> {
   name: string;
   pid: string;
diff --git a/src/stores/psl-store.ts b/src/stores/psl-store.ts
new file mode 100644
index 0000000..045ea49
--- /dev/null
+++ b/src/stores/psl-store.ts
@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia';
+import {
+  IJlCanvas,
+  JlGraphic,
+  IGraphicApp,
+  GraphicState,
+} from 'src/jl-graphic';
+import {
+  initLineApp,
+  getLineApp,
+  destroyLineApp,
+  addSceneList,
+  ISceneName,
+} from 'src/drawApp/lineApp';
+import { markRaw } from 'vue';
+import { MapInfo } from 'src/api/ProjectLinkApi';
+
+export const usePslStore = defineStore('psl', {
+  state: () => ({
+    selectedGraphics: null as JlGraphic[] | null,
+    lineId: null as number | null,
+    lineName: null as string | null,
+    simulationId: null as string | null,
+    socketStates: null as GraphicState[] | null,
+    stateProCount: 0,
+    showLayer: [] as string[], // 显示的图层（草稿和发布图公用）
+    showLayerDialog: false, // 显示图层控制弹窗（草稿和发布图公用）
+    mapId: null as number | null,
+    sceneName: '', // 场景名称
+  }),
+  getters: {
+    selectedGraphicType: (state) => {
+      if (state.selectedGraphics) {
+        if (state.selectedGraphics.length === 1) {
+          return state.selectedGraphics[0].type;
+        }
+      }
+    },
+  },
+  actions: {
+    getLineApp(): IGraphicApp {
+      const app = getLineApp();
+      if (app == null) {
+        throw new Error('未初始化app');
+      }
+      return app;
+    },
+    getJlCanvas(): IJlCanvas {
+      return this.getLineApp().canvas;
+    },
+    initLineApp() {
+      const app = initLineApp();
+      app.on('graphicselected', () => {
+        this.selectedGraphics = markRaw(
+          app.getScene(this.sceneName).selectedGraphics
+        );
+      });
+      this.selectedGraphics = [];
+      return app;
+    },
+    addAllScene(list: MapInfo[]) {
+      const arr: ISceneName[] = list.map((item) => {
+        return { type: item.type, id: item.id };
+      });
+      addSceneList(arr);
+    },
+    appCurrentScene() {
+      return this.getLineApp().getScene(this.sceneName);
+    },
+    destroy() {
+      this.selectedGraphics = null;
+      destroyLineApp();
+    },
+    setLineId(id: number | null) {
+      this.lineId = id;
+    },
+    setLineName(name: string | null) {
+      this.lineName = name;
+    },
+    setSimulationId(id: string | null) {
+      this.simulationId = id;
+    },
+    setSocketStates(v: GraphicState[] | null) {
+      this.socketStates = v;
+    },
+    stateProCountIncrease() {
+      this.stateProCount++;
+    },
+    setShowLayer(v: string[]) {
+      this.showLayer = v;
+    },
+    setShowLayerDialog(v: boolean) {
+      this.showLayerDialog = v;
+    },
+    setMapId(id: number | null) {
+      this.mapId = id;
+    },
+    setSceneName(sceneName: string) {
+      this.sceneName = sceneName;
+    },
+  },
+});