admin_front/assets/css/main.css

@@ -5,12 +5,21 @@
 
 @font-face {
     font-family: 'albertus';
-    src: url(
-        '../font/Albertus\ Extra\ Bold\ Regular.ttf'
+    src: url('../font/Albertus\ Extra\ Bold\ Regular.ttf'
         );
 }
 
-@layer components {}
+@layer components {
+    .bg-primary {
+        @apply bg-pink-300
+    }
+    .bg-primary-hover {
+        @apply bg-pink-400
+    }
+    .border-primary {
+        @apply border-pink-500
+    }
+}
 
 .header {
     @apply col-span-12 p-2 font-extrabold text-2xl flex align-middle justify-center;
@@ -36,3 +45,4 @@
 .router-link-active {
     @apply bg-slate-200 dark:bg-slate-700
 }
+

admin_front/nuxt.config.ts

@@ -13,6 +13,12 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css'],
   ssr: false,
   devServer: {
+    host: '0.0.0.0',
     port: 3011
   },
+  runtimeConfig: {
+    public: {
+      apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
+    }
+  },
 })

admin_front/pages/plan/mark.vue

@@ -1,30 +1,17 @@
 <script setup lang="ts">
-const testImg = '/_nuxt/assets/img/plan.svg'
 const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
 const context: Ref<CanvasRenderingContext2D | undefined> = ref();
-console.log(testImg)
 onMounted(async () => {
+    const plan = useState('plan')
+    console.log(plan)
     context.value = canvasElement.value?.getContext('2d') || undefined;
     if (context.value) {
-        const img = await new Promise((resolve, reject) => {
-            let img = new Image()
-            img.onload = () => resolve(img)
-            img.onerror = reject
-            img.src = testImg
-            return img
-        })
-        const sourceWidth = img.width
-        const sourceHeight = img.height
-
-        const canvasHeight = canvasElement.value?.height || 1
-        const canvasWidth = canvasElement.value?.width
-
-        const imgHeight = (sourceHeight / sourceWidth) * canvasHeight
-        context.value.drawImage(img, 0, 0, canvasWidth, imgHeight)
-        // context.value.scale(2,2)
+        plan.value.paths.forEach(path => {
+            context.value.stroke(new Path2D(path));
+        });
     }
 })
 </script>
 <template>
-    <canvas ref="canvasElement" width="1300" height="1000"></canvas>
+    <canvas ref="canvasElement" width="1200" height="1000"></canvas>
 </template>

admin_front/pages/plan/upload.vue

@@ -1,15 +1,54 @@
 <script setup lang="ts">
-const onAdvancedUpload = (event) => {
-    console.log(event)
+import type { FileUploadUploadEvent } from '~/node_modules/primevue/fileupload/FileUpload.d.ts'
+interface SvgContext {
+    paths: string[],
+    width: number,
+    height: number
+}
+const config = useRuntimeConfig()
+const plan: Ref<SvgContext | {}> = useState('plan', () => ({}));
+
+const loading = ref<boolean>(false)
+const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
+const context: Ref<CanvasRenderingContext2D | undefined> = ref();
+
+const beforeUpload = () => {
+    loading.value = true
+}
+
+const onUpload = (event: FileUploadUploadEvent) => {
+    loading.value = false
+    try {
+        const data = JSON.parse(event.xhr.response)
+        plan.value = data.response
+
+        context.value = canvasElement.value?.getContext('2d') || undefined;
+        if (canvasElement.value && context.value) {
+            context.value.clearRect(0, 0, canvasElement.value.width, canvasElement.value.height);
+            if (!plan.value.hasOwnProperty('paths')) return
+            plan.value.paths.forEach((path: string) => {
+                if (!context.value) return
+                context.value.fillStyle = 'rgba(255, 0, 0, 0.25)'
+                context.value.fill(new Path2D(path));
+
+                context.value.strokeStyle = 'blue'
+                context.value.stroke(new Path2D(path));
+            });
+        }
+    } catch (error) {
+        console.error(error)
+    }
 }
 </script>
 <template>
+    <div class="flex flex-col gap-4">
         <Panel>
-        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*"
-            :maxFileSize="1000000">
-            <template #empty>
-                <p>Перетащите сюда файлы для загрузки</p>
-            </template>
-        </FileUpload>
+            <FileUpload mode="basic" name="demo" :url="`${config.public.apiBase}/api/prepare_image`" accept="image/*"
+                :maxFileSize="10000000" @upload="onUpload" @before-upload="beforeUpload" :auto="true"
+                chooseLabel="Выберите файл" :disabled="loading" />
         </Panel>
+        <Panel v-if="plan && plan.paths">
+            <canvas ref="canvasElement" width="1200" height="1000"></canvas>
+        </Panel>
+    </div>
 </template>