fix: 1

src/views/scene/photo.vue

@@ -1,5 +1,5 @@
 <template>
-  <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef">
+  <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef" />
 
   <div class="photo-layout" v-if="disabledMap.photo">
     <ButtonPane class="photo-btn fun-ctrl" :size="80" @click="photo">
@@ -7,93 +7,92 @@
     </ButtonPane>
 
     <img
-        v-if="showCoverUrl"
-        :src="showCoverUrl.value"
-        class="cover"
-        :style="{opacity: showCoverUrl ? '1' : 0}"
-        @click="router.push(writeRouteName.photos)"
-    >
+      v-if="showCoverUrl"
+      :src="showCoverUrl.value"
+      class="cover"
+      :style="{ opacity: showCoverUrl ? '1' : 0 }"
+      @click="router.push(writeRouteName.photos)"
+    />
   </div>
 </template>
 
 <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";
-import {disabledMap} from "@/hook/custom";
-import {base64ToBlob, getId} from "@/utils";
-import {computed, nextTick, ref} from "vue";
-import {api, downloadImage, uploadImage} from "@/store/sync";
-import {router, writeRouteName} from "@/router";
-import {LaserSDK, Pos, Pos3D} from "@/sdk";
-import {useStaticUrl} from "@/hook/useStaticUrl";
+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";
+import { disabledMap } from "@/hook/custom";
+import { base64ToBlob, getId } from "@/utils";
+import { computed, nextTick, ref } from "vue";
+import { api, downloadImage, uploadImage } from "@/store/sync";
+import { router, writeRouteName } from "@/router";
+import { LaserSDK, Pos, Pos3D } from "@/sdk";
+import { useStaticUrl } from "@/hook/useStaticUrl";
+import { Loading } from "@kankan/components/index";
 
 const showCoverUrl = computed(() => {
   if (photos.value[photos.value.length - 1]?.url) {
-    return useStaticUrl(photos.value[photos.value.length - 1].url)
+    return useStaticUrl(photos.value[photos.value.length - 1].url);
   }
-})
+});
 
 const tempPhoto = ref<string>();
-const coverRef = ref<HTMLImageElement>()
-const audio = new Audio("/camera1.mp3")
+const coverRef = ref<HTMLImageElement>();
+const audio = new Audio("/camera1.mp3");
 const getCurrentScreen = (pos: Pos3D): Pos => {
-  const sdk = useSDK()
-  const data = sdk.scene.getScreenByPoint(pos)
-  return data.trueSide ? data.pos : null
-}
+  const sdk = useSDK();
+  const data = sdk.scene.getScreenByPoint(pos);
+  return data.trueSide ? data.pos : null;
+};
 
 const screenshot = async (sdk: LaserSDK) => {
-  const dom = sdk.scene.el
-  dom.style.pointerEvents = "none"
+  const dom = sdk.scene.el;
+  dom.style.pointerEvents = "none";
 
   const getScreenshot = async () => {
-    const data = sdk.scene.screenshot(
-      dom.offsetWidth,
-      dom.offsetHeight
-    )
-    const {dataUrl: base64} = await data.finishPromise
-    const url = await uploadImage(base64ToBlob(base64))
+    const data = sdk.scene.screenshot(dom.offsetWidth, dom.offsetHeight);
+    const { dataUrl: base64 } = await data.finishPromise;
+    const url = await uploadImage(base64ToBlob(base64));
     return {
       url,
-      meterPerPixel: data.meterPerPixel
-    }
-  }
-  const screenshotRaw = await getScreenshot()
+      meterPerPixel: data.meterPerPixel,
+    };
+  };
+  const screenshotRaw = await getScreenshot();
 
-  baseLines.value.concat(list.value).forEach(item => item.show = false)
-  await nextTick()
-  const screenshot = await getScreenshot()
-  baseLines.value.concat(list.value).forEach(item => item.show = true)
-  await nextTick()
+  baseLines.value.concat(list.value).forEach((item) => (item.show = false));
+  await nextTick();
+  const screenshot = await getScreenshot();
+  baseLines.value.concat(list.value).forEach((item) => (item.show = true));
+  await nextTick();
 
-  dom.style.pointerEvents = "all"
+  dom.style.pointerEvents = "all";
   return {
     rawUrl: screenshotRaw.url,
     url: screenshot.url,
-    meterPerPixel: screenshot.meterPerPixel
-  }
-}
+    meterPerPixel: screenshot.meterPerPixel,
+  };
+};
 
 const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> =>
-  poss.map(getCurrentScreen).filter(pos => !!pos);
+  poss.map(getCurrentScreen).filter((pos) => !!pos);
 
-const photo = genUseLoading(async () => {
+const photo = async () => {
+  Loading.show();
   await audio.play();
-  const sdk = useSDK()
-  const data = await screenshot(sdk)
-  tempPhoto.value = await api.getFile(data.rawUrl)
-  await nextTick()
+  const sdk = useSDK();
+  const data = await screenshot(sdk);
+  tempPhoto.value = await api.getFile(data.rawUrl);
+  await nextTick();
 
   const handler = async () => {
-    coverRef.value.removeEventListener("animationend", handler)
-    tempPhoto.value = null
+    coverRef.value.removeEventListener("animationend", handler);
+    tempPhoto.value = null;
 
     photos.value.push({
       id: getId(),
@@ -102,26 +101,28 @@ const photo = genUseLoading(async () => {
       time: new Date().getTime(),
       meterPerPixel: data.meterPerPixel,
       measures: list.value
-        .map(data => {
-          const pos = getCurrentScreens(data.points)
+        .map((data) => {
+          const pos = getCurrentScreens(data.points);
           if (pos.length) {
-            return { pos, dis: sdk.carry.measureMap.get(data).getDistance().value }
+            return { pos, dis: sdk.carry.measureMap.get(data).getDistance().value };
           } else {
-            return null
+            return null;
           }
         })
-        .filter(poss => poss?.pos.length === 2),
+        .filter((poss) => poss?.pos.length === 2),
       baseLines: baseLines.value
-        .map(data => getCurrentScreens(data.points))
-        .filter(poss => poss.length === 2),
+        .map((data) => getCurrentScreens(data.points))
+        .filter((poss) => poss.length === 2),
       fixPoints: fixPoints.value
-        .map(data => ({ text: data.text, pos: getCurrentScreen(data.pos) }))
-        .filter(data => !!data.pos),
-      basePoints: getCurrentScreens(basePoints.value.map(data => data.pos))
-    })
-  }
-  coverRef.value.addEventListener("animationend", handler)
-})
+        .map((data) => ({ text: data.text, pos: getCurrentScreen(data.pos) }))
+        .filter((data) => !!data.pos),
+      basePoints: getCurrentScreens(basePoints.value.map((data) => data.pos)),
+    });
+
+    Loading.hide();
+  };
+  coverRef.value.addEventListener("animationend", handler);
+};
 </script>
 
 <style scoped lang="scss">
@@ -167,7 +168,6 @@ const photo = genUseLoading(async () => {
   top: 0;
   bottom: 0;
   animation: 1s linear 1 both photo-face;
-
 }
 .face-animation.start {
 }
@@ -191,7 +191,7 @@ const photo = genUseLoading(async () => {
     height: 48px;
     margin-left: -24px;
     border-radius: 50%;
-    z-index: 3
+    z-index: 3;
   }
 
   70% {
@@ -203,6 +203,5 @@ const photo = genUseLoading(async () => {
     left: calc(100vw - 63px);
     top: calc(calc(50%) + 20px);
   }
-
 }
 </style>