代码暂提

src/drawApp/lineApp.ts

@@ -44,7 +44,7 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
   return lineApp;
 }
 
-export async function loadDrawDatas(app: GraphicApp) {
+export async function loadLineDatas(app: GraphicApp) {
   const drawStore = useDrawStore();
   const id = drawStore.draftId;
   if (!id) {

src/layouts/LineLayout.vue

@@ -0,0 +1,58 @@
+<template>
+  <q-layout view="hHh LpR fFf">
+    <q-header reveal class="bg-primary text-white"></q-header>
+    <q-page-container>
+      <div id="line-app-container"></div>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useLineStore } from 'src/stores/line-store';
+import { useRoute, useRouter } from 'vue-router';
+import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
+
+const lineStore = useLineStore();
+const route = useRoute();
+const router = useRouter();
+
+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);
+
+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);
+  canvasHeight.value = clientHeight - headerHeight.value;
+  const dom = document.getElementById('draw-app-container');
+  if (dom) {
+    dom.style.width = canvasWidth.value + 'px';
+    dom.style.height = canvasHeight.value + 'px';
+  }
+  const drawApp = getLineApp();
+  if (drawApp) {
+    drawApp.onDomResize(canvasWidth.value, canvasHeight.value);
+  }
+}
+
+onMounted(() => {
+  const dom = document.getElementById('draw-app-container');
+  if (dom) {
+    lineStore.setLineId(+route.params.id as number);
+    const lineApp = lineStore.initLineApp(dom);
+    loadLineDatas(lineApp);
+    onResize();
+  } else {
+    lineStore.setLineId(null);
+  }
+});
+</script>

src/layouts/LineLoayout.vue

@@ -1,12 +0,0 @@
-<template>
-  <q-page-container>
-    <div id="line-app-container"></div>
-  </q-page-container>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-onMounted(() => {
-  const dom = document.getElementById('draw-app-container');
-});
-</script>

src/pages/PublishManage.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="q-pa-md">
+    <!-- <q-btn @click="goMap">测试</q-btn> -->
     <q-table
       ref="tableRef"
       title="发布图"
@@ -44,6 +45,8 @@
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useQuasar, type QTableColumn, QForm } from 'quasar';
 import { pageQuery, deletePublish } from '../api/PublishApi';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const $q = useQuasar();
 
@@ -134,6 +137,10 @@ 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

@@ -61,6 +61,11 @@ const routes: RouteRecordRaw[] = [
     name: 'painting',
     component: () => import('layouts/DrawLayout.vue'),
   },
+  {
+    path: '/linemap/:id',
+    name: 'linemap',
+    component: () => import('layouts/LineLayout.vue'),
+  },
 
   // Always leave this as last one,
   // but you can also remove it

src/stores/line-store.ts

@@ -1,11 +1,5 @@
 import { defineStore } from 'pinia';
-import {
-  DrawAssistant,
-  JlCanvas,
-  JlDrawApp,
-  JlGraphic,
-  GraphicApp,
-} from 'src/jl-graphic';
+import { JlCanvas, JlGraphic, GraphicApp } from 'src/jl-graphic';
 import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp';
 
 export const useLineStore = defineStore('line', {
@@ -33,7 +27,7 @@ export const useLineStore = defineStore('line', {
     getJlCanvas(): JlCanvas {
       return this.getLineApp().canvas;
     },
-    initDrawApp(dom: HTMLElement) {
+    initLineApp(dom: HTMLElement) {
       const app = initLineApp(dom);
       app.on('graphicselectedchange', () => {
         this.selectedGraphics = app.selectedGraphics;
@@ -42,11 +36,10 @@ export const useLineStore = defineStore('line', {
       return app;
     },
     destroy() {
-      // console.log('绘制状态清空，绘制应用销毁');
       this.selectedGraphics = null;
       destroyLineApp();
     },
-    setDraftId(id: number | null) {
+    setLineId(id: number | null) {
       this.lineId = id;
     },
   },