添加绘制

src/graphic/Controls/UIControl.js

@@ -165,6 +165,7 @@ export default class UIControl {
 
   menu_backgroundImg(value) {
     //
+    this.graphicStateUI.canSetBackImg = !value;
   }
 
   menu_clear() {

src/graphic/Load.js

@@ -17,4 +17,10 @@ export default class Load {
   save() {
     return dataService.vectorData;
   }
+
+  // 退出页面清除缓存及其他操作
+  clear() {
+    console.warn('clear')
+
+  }
 }

src/graphic/enum/UIEvents.js

@@ -16,6 +16,9 @@ const UIEvents = {
   // 放大镜
   Magnifier: "magnifier",
 
+  // 背景图开关切换
+  BackImageChange: "BackImageChange",
+
   // ----------道路------------
   // 单向单车道直路
   OneEdgeOneLanRoad: "OneEdgeOneLanRoad",

src/hook/useGraphic.ts

@@ -2,6 +2,8 @@ import {computed, reactive, Ref, ref, watch, watchEffect} from "vue";
 import { structureDraw } from "@/graphic";
 import VectorType from '@/graphic/enum/VectorType'
 import UIType from '@/graphic/enum/UIEvents'
+import type {RoadPhoto} from '@/store/roadPhotos'
+import type {AccidentPhoto} from '@/store/accidentPhotos'
 
 export type UITypeT = typeof UIType
 export type VectorTypeT = typeof VectorType
@@ -14,16 +16,27 @@ const newsletter = ref<{
 export const graphicState = ref({
   canRevoke: false,
   canRecovery: false,
-  showBgImage: false
+  canSetBackImg: false
 })
 
-export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<any>) => {
+export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<AccidentPhoto | RoadPhoto>) => {
   await import("../graphic/index.js").then((model) => {
     drawRef.value = model.structureDraw(canvas, newsletter, graphicState);
-
-    watchEffect(() => {
-      console.log(data.value)
-    })
+    watch(
+      () => data.value?.id,
+      (id, oldId) => {
+        if (data.value) {
+          oldId && drawRef.value.load.clear()
+          drawRef.value.load.load(data.value.data, {
+            ...data.value.sceneData,
+            backImage: data.value.photoUrl
+          })
+        } else {
+          drawRef.value.load.clear()
+        }
+      },
+      { immediate: true }
+    )
   });
 };
 

src/store/accidentPhotos.ts

@@ -1,11 +1,19 @@
 import {ref} from "vue";
+import type { PhotoRaw } from './photos'
+import {Pos} from "@/sdk";
 
 export type AccidentPhoto = {
   id: string
   photoUrl: string
   url: string
   time: number,
-  data: any
+  data: any,
+  sceneData: {
+    measures: PhotoRaw['measures'],
+    fixPoints: PhotoRaw['fixPoints'],
+    basePoints: PhotoRaw['basePoints']
+    baseLines: PhotoRaw['baseLines']
+  }
 }
 
 export const accidentPhotos = ref<AccidentPhoto[]>([])

src/store/photos.ts

@@ -1,9 +1,14 @@
 import {ref} from "vue";
+import {Pos} from "@/sdk";
 
 export type PhotoRaw = {
   id: string
   url: string
   time: number,
+  measures: Array<Pos[]>,
+  fixPoints: Array<Pos>,
+  basePoints: Array<Pos>
+  baseLines: Array<Pos[]>
 }
 
 export const photos = ref<PhotoRaw[]>([])

src/store/roadPhotos.ts

@@ -1,4 +1,5 @@
 import {ref} from "vue";
+import {PhotoRaw} from "@/store/photos";
 
 export type RoadPhoto = {
   id: string
@@ -6,6 +7,12 @@ export type RoadPhoto = {
   url: string
   time: number,
   data: any
+  sceneData: {
+    measures: PhotoRaw['measures'],
+    fixPoints: PhotoRaw['fixPoints'],
+    basePoints: PhotoRaw['basePoints']
+    baseLines: PhotoRaw['baseLines']
+  }
 }
 
 export const roadPhotos = ref<RoadPhoto[]>([])

src/views/graphic/container.vue

@@ -15,15 +15,6 @@ import {accidentPhotos} from "@/store/accidentPhotos";
 import {roadPhotos} from "@/store/roadPhotos";
 import { useData } from './data'
 
-const data = computed(() => {
-  const params = router.currentRoute.value.params
-  const mode = Number(params.mode) as Mode
-  if (mode === Mode.Photo) {
-    return accidentPhotos.value.find(data => data.id === params.id)
-  } else {
-    return roadPhotos.value.find(data => data.id === params.id)
-  }
-})
 const drawCanvasRef = ref<HTMLCanvasElement>();
 const setCanvasSize = () => {
   drawCanvasRef.value.width = drawCanvasRef.value.offsetWidth;

src/views/graphic/data.ts

@@ -1,35 +1,44 @@
-import {computed} from "vue";
+import {computed, ref, watch} from "vue";
 import {Mode} from "@/views/graphic/menus";
-import {accidentPhotos} from "@/store/accidentPhotos";
-import {roadPhotos} from "@/store/roadPhotos";
+import {accidentPhotos, AccidentPhoto} from "@/store/accidentPhotos";
+import {roadPhotos, RoadPhoto} from "@/store/roadPhotos";
 import {router} from '@/router'
 import {getId} from "@/utils";
 import {photos} from "@/store/photos";
-import {baseLines} from '@/store/baseLine'
-import {fixPoints} from '@/store/fixPoint'
-import {basePoints} from '@/store/basePoint'
 
-export const useData = () => computed(() => {
-  const params = router.currentRoute.value.params
-  if (params.action === 'add') {
-    return {
-      data: null,
-      sceneData: {
-        fixPoints: fixPoints.value,
-        baseLines: baseLines.value,
-        basePoints: basePoints.value
-      },
-      photoUrl: photos.value.find(data => data.id === params.id)?.url,
-      id: getId(),
-      url: null,
-      time: new Date().getTime()
-    }
-  } else {
-    const mode = Number(params.mode) as Mode
-    if (mode === Mode.Photo) {
-      return accidentPhotos.value.find(data => data.id === params.id)
-    } else {
-      return roadPhotos.value.find(data => data.id === params.id)
-    }
-  }
-})
+export const useData = () => {
+  const data = ref<AccidentPhoto | RoadPhoto>(null);
+  watch(
+    () => router.currentRoute.value.params,
+    (params) => {
+      if (!params.action) {
+        data.value = null
+      } else if (params.action === 'add') {
+        const photo = photos.value.find(data => data.id === params.id)
+        data.value = {
+          data: null,
+          sceneData: {
+            measures: photo.measures,
+            basePoints: photo.basePoints,
+            baseLines: photo.baseLines,
+            fixPoints: photo.fixPoints,
+          },
+          photoUrl: photo.url,
+          id: getId(),
+          url: null,
+          time: new Date().getTime()
+        }
+      } else {
+        const mode = Number(params.mode) as Mode
+        if (mode === Mode.Photo) {
+          return accidentPhotos.value.find(data => data.id === params.id)
+        } else {
+          return roadPhotos.value.find(data => data.id === params.id)
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  return data;
+}

src/views/graphic/header.vue

@@ -6,7 +6,13 @@
     </div>
 
     <div class="actions">
-      <div v-for="menu in menus" :key="menu.key" class="action fun-ctrl">
+      <div
+          v-for="menu in menus"
+          :key="menu.key"
+          class="action fun-ctrl"
+          :class="{disabled: !menu.enable}"
+          @click="uiType.change(menu.key as any)"
+      >
         <ui-icon type="close" />
         <p>{{ menu.text }}</p>
       </div>
@@ -20,19 +26,29 @@
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
-import {generateByMenus, headActionMenuRaw, Mode} from './menus'
-import {graphicState} from '@/hook/useGraphic'
+import {headActionMenuRaw, Mode} from './menus'
+import {graphicState, uiType, UIType} from '@/hook/useGraphic'
 import {computed} from "vue";
 import {router} from '@/router'
 
 
 const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)
-
-const menus = generateByMenus(
-  menu => ({...menu}),
-  headActionMenuRaw
+const menus = computed(() =>
+  headActionMenuRaw.map(data => {
+    const base = {
+      ...data,
+      enable: UIType.GoBack === data.key
+        ? graphicState.value.canRevoke
+        : UIType.GoAhead === data.key
+          ? graphicState.value.canRecovery
+          : true
+    }
+    if (base.key === UIType.BackImageChange) {
+      base.text = `底图${graphicState.value.canSetBackImg ? '开' : '关'}`
+    }
+    return base
+  })
 )
-
 </script>
 
 <style scoped lang="scss">

src/views/graphic/menus.ts

@@ -109,7 +109,7 @@ export const headActionMenuRaw = [
   { key: UIType.GoBack, text: "回退" },
   { key: UIType.GoAhead, text: "前进" },
   { key: UIType.Clear, text: "清除" },
-  { key: UITypeExtend.basemap, text: "底图开关" },
+  { key: UIType.BackImageChange, text: "底图开关" },
 ]
 
 export const focusMenuRaw : { [key in string]: MenusRaw } = {

src/views/scene/photo.vue

@@ -18,6 +18,10 @@
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
+import {list} from '@/store/measure'
+import {fixPoints} from '@/store/fixPoint'
+import {baseLines} from '@/store/baseLine'
+import {basePoints} from '@/store/basePoint'
 import {photos} from '@/store/photos'
 import { useSDK } from '@/hook/useLaser'
 import {genUseLoading} from "@/hook";
@@ -26,15 +30,28 @@ import {nextTick, ref} from "vue";
 import {getStaticFile} from '@/dbo/main'
 import {uploadImage} from "@/store/sync";
 import {router, writeRouteName} from "@/router";
+import {Pos, Pos3D} from "@/sdk";
 
 const showCoverUrl = ref<string>(
   photos.value[photos.value.length - 1]?.url && getStaticFile(photos.value[photos.value.length - 1]?.url)
 )
 const tempPhoto = ref<string>();
 const coverRef = ref<HTMLImageElement>()
+const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> => {
+  console.log(poss)
+  const sdk = useSDK()
+  return poss
+    .map(pos => {
+      const data = sdk.scene.getScreenByPoint(pos)
+      return data.trueSide ? data.pos : null
+    })
+    .filter(pos => !!pos);
+}
 const photo = genUseLoading(async () => {
   const sdk = useSDK()
   const dom = sdk.scene.el
+  dom.style.pointerEvents = "none"
+
   const {dataUrl: base64} = await sdk.scene.screenshot(dom.offsetWidth, dom.offsetHeight)
   const blob = base64ToBlob(base64)
   tempPhoto.value = URL.createObjectURL(blob)
@@ -45,13 +62,23 @@ const photo = genUseLoading(async () => {
     coverRef.value.removeEventListener("animationend", handler)
     showCoverUrl.value = tempPhoto.value
     tempPhoto.value = null
+
     upload.then(url => {
       photos.value.push({
         id: getId(),
         url: url,
-        time: new Date().getTime()
+        time: new Date().getTime(),
+        measures: list.value
+          .map(data => getCurrentScreens(data.points))
+          .filter(poss => poss.length),
+        baseLines: baseLines.value
+          .map(data => getCurrentScreens(data.points))
+          .filter(poss => poss.length),
+        fixPoints: getCurrentScreens(fixPoints.value.map(data => data.pos)),
+        basePoints: getCurrentScreens(basePoints.value.map(data => data.pos))
       })
       showCoverUrl.value = getStaticFile(url)
+      dom.style.pointerEvents = "all"
     })
   }
   coverRef.value.addEventListener("animationend", handler)