发布预览

src/api/PublishApi.ts

@@ -59,3 +59,11 @@ export async function pageQuery(
 export function deletePublish(id: number) {
   return api.delete(`${PublishUriBase}/${id}`);
 }
+/**
+ * 获取发布地图详细信息
+ * @param id 发布地图id
+ */
+export async function getPublishMapInfoById(id: number): Promise<Item> {
+  const response = await api.get(`${PublishUriBase}/${id}`);
+  return response.data;
+}

src/drawApp/lineApp.ts

@@ -11,7 +11,7 @@ import { TurnoutData } from './graphics/TurnoutInteraction';
 import { TurnoutTemplate } from 'src/graphics/turnout/Turnout';
 import { SectionData } from './graphics/SectionInteraction';
 import { SectionTemplate } from 'src/graphics/section/Section';
-import { getDraft } from 'src/api/DraftApi';
+import { getPublishMapInfoById } from 'src/api/PublishApi';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { useLineStore } from 'src/stores/line-store';
 import { toUint8Array } from 'js-base64';
@@ -51,7 +51,7 @@ export async function loadLineDatas(app: GraphicApp) {
   if (!id) {
     return;
   }
-  const { proto: base64 } = await getDraft(id);
+  const { proto: base64 } = await getPublishMapInfoById(id);
   if (base64) {
     const storage = graphicData.RtssGraphicStorage.deserialize(
       toUint8Array(base64)

src/drawApp/lineNetApp.ts

@@ -0,0 +1,77 @@
+import { GraphicApp, GraphicData } from 'src/jl-graphic';
+import { getPublishMapInfoById } from 'src/api/PublishApi';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+
+import { RunLineTemplate } from 'src/graphics/runLine/RunLine';
+import { RunLineData } from './graphics/RunLineInteraction';
+import { PathLineTemplate } from 'src/graphics/pathLine/PathLine';
+import { PathLineData } from './graphics/PathLineInteraction';
+import { StationLineTemplate } from 'src/graphics/stationLine/StationLine';
+import { StationLineData } from './graphics/StationLineInteraction';
+import { ItrainLineTemplate } from 'src/graphics/trainLine/TrainLine';
+import { TrainLineData } from './graphics/TrainLineInteraction';
+
+import { useLineNetStore } from 'src/stores/line-net-store';
+import { toUint8Array } from 'js-base64';
+
+let lineNetApp: GraphicApp | null = null;
+
+export function getLineNetApp(): GraphicApp | null {
+  return lineNetApp;
+}
+
+export function destroyLineNetApp(): void {
+  if (lineNetApp) {
+    lineNetApp.destroy();
+    lineNetApp = null;
+  }
+}
+
+export function initLineNetApp(dom: HTMLElement): GraphicApp {
+  lineNetApp = new GraphicApp(dom);
+  const graphicTemplate = [
+    new RunLineTemplate(),
+    new PathLineTemplate(),
+    new StationLineTemplate(),
+    new ItrainLineTemplate(),
+  ];
+  lineNetApp.registerGraphicTemplates(...graphicTemplate);
+  return lineNetApp;
+}
+
+export async function loadLineNetDatas(app: GraphicApp) {
+  const lineStore = useLineNetStore();
+  const id = lineStore.lineNetId;
+  if (!id) {
+    return;
+  }
+  const { proto: base64 } = await getPublishMapInfoById(id);
+  if (base64) {
+    const storage = graphicData.RtssGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    console.log('加载数据', storage);
+    app.updateCanvas(storage.canvas);
+    const datas: GraphicData[] = [];
+    storage.runLines.forEach((runLines) => {
+      const g = new RunLineData(runLines);
+      datas.push(g);
+    });
+    storage.pathLines.forEach((pathLine) => {
+      const g = new PathLineData(pathLine);
+      datas.push(g);
+    });
+    storage.stationLines.forEach((stationLine) => {
+      const g = new StationLineData(stationLine);
+      datas.push(g);
+    });
+    storage.trainLines.forEach((trainLine) => {
+      const g = new TrainLineData(trainLine);
+      datas.push(g);
+    });
+
+    app.loadGraphic(datas);
+  } else {
+    app.loadGraphic([]);
+  }
+}

src/graphics/signal/Signal.ts

@@ -73,7 +73,6 @@ export class Signal extends JlGraphic {
       if (mirror) {
         hmp = calculateMirrorPoint(new Point(0, 0), hmp);
       }
-      console.log(hmp, 'hmp');
       this.humanControl.drawRegularPolygon(
         hmp.x,
         hmp.y,
@@ -92,7 +91,6 @@ export class Signal extends JlGraphic {
     if (mirror) {
       lmp = calculateMirrorPoint(new Point(0, 0), lmp);
     }
-    console.log(lmp, 'hmp');
     drawArrow(
       this.fleetMode,
       lmp.x,

src/graphics/signal/SignalDrawAssistant.ts

@@ -159,7 +159,6 @@ export class signalInteraction extends GraphicInteractionPlugin<Signal> {
     this.app.updateSelected(signal);
     mirrorFlipConfig.handler = () => {
       signal.mirror = !signal.mirror;
-      // signal.doRepaint();
     };
     SignalEditMenu.open(e.global);
   }

src/layouts/LineLayout.vue

@@ -10,33 +10,35 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
+import { useLineNetStore } from 'src/stores/line-net-store';
 import { useRoute } from 'vue-router';
 import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
-
-const lineStore = useLineStore();
+import { loadLineNetDatas, getLineNetApp } from 'src/drawApp/lineNetApp';
 
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
 const headerHeight = ref(0);
-const leftWidth = ref(0);
-const rightWidth = ref(0);
-const leftDrawerOpen = ref(false);
-const rightDrawerOpen = ref(false);
+const route = useRoute();
+const mapType = ref(route.params.type as string);
+const lineStore = useLineStore();
+const lineNetStore = useLineNetStore();
 
 function onResize() {
   const clientWidth = document.body.clientWidth;
   const clientHeight = document.body.clientHeight;
-  canvasWidth.value =
-    clientWidth -
-    (leftDrawerOpen.value ? leftWidth.value : 0) -
-    (rightDrawerOpen.value ? rightWidth.value : 0);
+  canvasWidth.value = clientWidth;
   canvasHeight.value = clientHeight - headerHeight.value;
   const dom = document.getElementById('line-app-container');
   if (dom) {
     dom.style.width = canvasWidth.value + 'px';
     dom.style.height = canvasHeight.value + 'px';
   }
-  const lineApp = getLineApp();
+  let lineApp;
+  if (mapType.value === 'Line') {
+    lineApp = getLineApp();
+  } else if (mapType.value === 'LineNetwork') {
+    lineApp = getLineNetApp();
+  }
   if (lineApp) {
     lineApp.onDomResize(canvasWidth.value, canvasHeight.value);
   }
@@ -45,14 +47,19 @@ function onResize() {
 onMounted(() => {
   const dom = document.getElementById('line-app-container');
   if (dom) {
-    const route = useRoute();
-    lineStore.setLineId(+route.params.id as number);
-    const lineApp = lineStore.initLineApp(dom);
-    console.log('1111111111');
-    loadLineDatas(lineApp);
+    if (mapType.value === 'Line') {
+      lineStore.setLineId(+route.params.id as number);
+      const lineApp = lineStore.initLineApp(dom);
+      loadLineDatas(lineApp);
+    } else if (mapType.value === 'LineNetwork') {
+      lineNetStore.setLineNetId(+route.params.id as number);
+      const lineApp = lineNetStore.initLineNetApp(dom);
+      loadLineNetDatas(lineApp);
+    }
     onResize();
   } else {
     lineStore.setLineId(null);
+    lineNetStore.setLineNetId(null);
   }
 });
 </script>

src/pages/PublishManage.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="q-pa-md">
-    <!-- <q-btn @click="goMap">测试</q-btn> -->
     <q-table
       ref="tableRef"
       title="发布图"
@@ -28,6 +27,12 @@
       <template v-slot:body-cell-operations="props">
         <q-td :props="props">
           <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="预览"
+              :to="`/linemap/${props.row.id}/${props.row.type}`"
+            />
             <q-btn
               color="red"
               :disable="operateDisabled"
@@ -137,10 +142,6 @@ async function onRequest(props: any) {
   }
 }
 
-function goMap() {
-  router.push('/linemap/7');
-}
-
 async function deleteData(row: any) {
   operateDisabled.value = true;
   $q.dialog({

src/router/routes.ts

@@ -62,7 +62,7 @@ const routes: RouteRecordRaw[] = [
     component: () => import('layouts/DrawLayout.vue'),
   },
   {
-    path: '/linemap/:id',
+    path: '/linemap/:id/:type',
     name: 'linemap',
     component: () => import('layouts/LineLayout.vue'),
   },

src/stores/line-net-store.ts

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia';
+import { JlCanvas, JlGraphic, GraphicApp } from 'src/jl-graphic';
+import {
+  initLineNetApp,
+  getLineNetApp,
+  destroyLineNetApp,
+} from 'src/drawApp/lineNetApp';
+
+export const useLineNetStore = defineStore('lineNet', {
+  state: () => ({
+    selectedGraphics: null as JlGraphic[] | null,
+    lineNetId: null as number | null,
+  }),
+  getters: {
+    selectedGraphicType: (state) => {
+      if (state.selectedGraphics) {
+        if (state.selectedGraphics.length === 1) {
+          return state.selectedGraphics[0].type;
+        }
+      }
+    },
+  },
+  actions: {
+    getLineNetApp(): GraphicApp {
+      const app = getLineNetApp();
+      if (app == null) {
+        throw new Error('未初始化app');
+      }
+      return app;
+    },
+    getJlCanvas(): JlCanvas {
+      return this.getLineNetApp().canvas;
+    },
+    initLineNetApp(dom: HTMLElement) {
+      const app = initLineNetApp(dom);
+      app.on('graphicselectedchange', () => {
+        this.selectedGraphics = app.selectedGraphics;
+      });
+      this.selectedGraphics = [];
+      return app;
+    },
+    destroy() {
+      this.selectedGraphics = null;
+      destroyLineNetApp();
+    },
+    setLineNetId(id: number | null) {
+      this.lineNetId = id;
+    },
+  },
+});