From 59fed6579cec4db80e7e6a27d863ae145fa09576 Mon Sep 17 00:00:00 2001
From: fan <fanyuhong@joylink.club>
Date: Thu, 15 Jun 2023 14:20:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9A=82=E6=8F=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/drawApp/lineApp.ts      |  2 +-
 src/layouts/LineLayout.vue  | 58 +++++++++++++++++++++++++++++++++++++
 src/layouts/LineLoayout.vue | 12 --------
 src/pages/PublishManage.vue |  7 +++++
 src/router/routes.ts        |  5 ++++
 src/stores/line-store.ts    | 13 ++-------
 6 files changed, 74 insertions(+), 23 deletions(-)
 create mode 100644 src/layouts/LineLayout.vue
 delete mode 100644 src/layouts/LineLoayout.vue

diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index e56bc87..6a84e2a 100644
--- a/src/drawApp/lineApp.ts
+++ b/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) {
diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue
new file mode 100644
index 0000000..8029311
--- /dev/null
+++ b/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>
diff --git a/src/layouts/LineLoayout.vue b/src/layouts/LineLoayout.vue
deleted file mode 100644
index 1b27158..0000000
--- a/src/layouts/LineLoayout.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/PublishManage.vue b/src/pages/PublishManage.vue
index 5367708..1102de3 100644
--- a/src/pages/PublishManage.vue
+++ b/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({
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 1160494..7cddec6 100644
--- a/src/router/routes.ts
+++ b/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
diff --git a/src/stores/line-store.ts b/src/stores/line-store.ts
index 383611a..7d88c94 100644
--- a/src/stores/line-store.ts
+++ b/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;
     },
   },