浏览代码

fix: 修改bug

bill 1 年之前
父节点
当前提交
4aebaf43ab
共有 2 个文件被更改,包括 64 次插入52 次删除
  1. 2 1
      .vscode/settings.json
  2. 62 51
      src/views/scene/photo.vue

+ 2 - 1
.vscode/settings.json

@@ -24,5 +24,6 @@
     // "editor.defaultFormatter": "HookyQR.beautify"
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": true
 }

+ 62 - 51
src/views/scene/photo.vue

@@ -5,39 +5,45 @@
       <ui-icon type="photo" class="icon" />
     </ButtonPane>
 
-    <img v-if="showCoverUrl" :src="showCoverUrl.value" class="cover" :style="{ opacity: showCoverUrl ? '1' : 0 }" @click="router.push(writeRouteName.photos)" />
+    <img
+      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 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, formatDate, getId } from '@/utils';
-import { computed, nextTick, ref, watchEffect } 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';
-import { generateMixMenus, MenuRaw, menus, findMenuByKey } from './menus/menus';
+import { disabledMap } from "@/hook/custom";
+import { base64ToBlob, formatDate, getId } from "@/utils";
+import { computed, nextTick, ref, watchEffect } 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";
+import { generateMixMenus, MenuRaw, menus, findMenuByKey } from "./menus/menus";
 const menusMix = computed(() => menus);
-const store = generateMixMenus('children', (m) => m, menusMix.value);
+const store = generateMixMenus("children", (m) => m, menusMix.value);
 const showCoverUrl = computed(() => {
   if (photos.value[photos.value.length - 1]?.url) {
     return useStaticUrl(photos.value[photos.value.length - 1].url);
   }
 });
 
-import mp3url from './camera1.mp3';
+import mp3url from "./camera1.mp3";
 const tempPhoto = ref<string>();
 const coverRef = ref<HTMLImageElement>();
 const audio = new Audio(mp3url);
@@ -51,7 +57,7 @@ watchEffect(() => {
 });
 const screenshot = async (sdk: LaserSDK) => {
   const dom = sdk.scene.el;
-  dom.style.pointerEvents = 'none';
+  dom.style.pointerEvents = "none";
 
   const getScreenshot = async (down = false) => {
     const data = sdk.scene.screenshot(dom.offsetWidth, dom.offsetHeight);
@@ -59,7 +65,9 @@ const screenshot = async (sdk: LaserSDK) => {
     const blob = base64ToBlob(base64);
     let url: string;
     if (down) {
-      const filename = `img_${formatDate(new Date(), 'yyyyMMddhhmmss')}_${data.meterPerPixel || 1}_${new Date().getTime().toString().substring(8)}.jpg`;
+      const filename = `img_${formatDate(new Date(), "yyyyMMddhhmmss")}_${
+        data.meterPerPixel || 1
+      }_${new Date().getTime().toString().substring(8)}.jpg`;
       url = await uploadImage(blob, filename);
       await downloadImage(blob, filename);
     } else {
@@ -79,7 +87,7 @@ const screenshot = async (sdk: LaserSDK) => {
   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,
@@ -87,30 +95,30 @@ const screenshot = async (sdk: LaserSDK) => {
   };
 };
 
-const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> => poss.map(getCurrentScreen).filter((pos) => !!pos);
+const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> =>
+  poss.map(getCurrentScreen).filter((pos) => !!pos);
 
 const photo = async () => {
   Loading.show();
-  console.log('播放音频');
+  console.log("播放音频");
   try {
     await audio.play();
   } catch (e) {
-    console.error('播放音频错误', e);
+    console.error("播放音频错误", e);
   }
-  console.log('音频播放结束');
+  console.log("音频播放结束");
   const sdk = useSDK();
-  console.log('开始截图');
+  console.log("开始截图");
   const data = await screenshot(sdk);
-  console.log('截图完成');
+  console.log("截图完成");
   tempPhoto.value = await api.getFile(data.rawUrl);
-  console.log('获取到临时文件');
+  console.log("获取到临时文件");
   await nextTick();
 
   const handler = async () => {
-    coverRef.value.removeEventListener('animationend', handler);
+    coverRef.value.removeEventListener("animationend", handler);
     tempPhoto.value = null;
-
-    photos.value.push({
+    const photoData = {
       id: getId(),
       url: data.url,
       urlRaw: data.rawUrl,
@@ -126,14 +134,19 @@ const photo = async () => {
           }
         })
         .filter((poss) => poss?.pos.length === 2),
-      baseLines: baseLines.value.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),
+      baseLines: baseLines.value
+        .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)),
-    });
-
+    };
+    console.log(photoData);
+    photos.value.push(photoData);
     Loading.hide();
   };
-  coverRef.value.addEventListener('animationend', handler);
+  coverRef.value.addEventListener("animationend", handler);
 };
 </script>
 
@@ -172,16 +185,16 @@ const photo = async () => {
   overflow: hidden;
 }
 .face-animation {
-    pointer-events: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    animation: 1s linear 1 both small-photo-face;
-  }
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  animation: 1s linear 1 both small-photo-face;
+}
 .full {
   .face-animation {
     pointer-events: none;
@@ -253,8 +266,6 @@ const photo = async () => {
   70% {
     left: calc(70% - 60px);
     top: calc(calc(50% - 48px) / 1.5);
-
- 
   }
 
   to {