feat: save

src/core/Scene.js

@@ -141,10 +141,12 @@ export default class Scene extends Mitt {
   toVertical = () => {};
 
   lockView(open) {
-    if (open) {
+    if (!open) {
       this.player.floorplanControls.enablePan = true;
+      this.player.floorplanControls.enableZoom = true;
     } else {
       this.player.floorplanControls.enablePan = false;
+      this.player.floorplanControls.enableZoom = false;
     }
   }
   setMode(mode) {
@@ -187,6 +189,7 @@ export default class Scene extends Mitt {
     this.player.editing(item);
   }
   endScreenshot() {
+    this.lockView(false);
     this.blobScreens = [];
     this.player.floorplanControls.reset();
     this.onResize();
@@ -212,13 +215,18 @@ export default class Scene extends Mitt {
     this.onResize(this.width, this.height);
   }
 
-  test() {
+  exportScreenshot() {
     this.player.floorplanControls.reset();
+    this.lockView(true);
+    this.setMode(0);
     // await sleep(500);
     this.orthCamera.zoom = this.defaultZoom;
     const object = this.boxManager.model;
-    let total;
-    total = object.children.length;
+    const total = object.children.length;
+    if (total === 0) {
+      return;
+      console.error("没数据");
+    }
 
     object.updateMatrixWorld();
     this.orthCamera.updateProjectionMatrix();
@@ -227,8 +235,9 @@ export default class Scene extends Mitt {
     const width = boundingBox.max.x - boundingBox.min.x;
     const one = width / total;
     let slides = Math.floor(total / 3);
+    // debugger;
     console.log("slides", slides);
-    if (slides > 1) {
+    if (slides >= 1) {
       for (var i = 0; i <= slides; i++) {
         (function (index, that) {
           setTimeout(function () {
@@ -246,7 +255,7 @@ export default class Scene extends Mitt {
       }
     } else {
       // 只有一个或0个
-      if (total > 1 && total <= 3) {
+      if (total >= 1 && total <= 3) {
         console.log("total", total);
         this.player.floorplanControls.reset();
         this.screenshot(-0.3, 227);
@@ -255,14 +264,6 @@ export default class Scene extends Mitt {
     }
   }
 
-  test1() {
-    const object = this.boxManager.model;
-    for (var i = 0; i <= object.children.length; i++) {
-      console.log(object.children[i]);
-      this.scene.lookAt(this.boxManager.model);
-    }
-  }
-
   onBindEvent = () => {
     window.addEventListener("resize", this.onResize);
   };

src/core/box/object/ImgLabelBox.js

@@ -99,7 +99,7 @@ export default class ImgLabel extends THREE.Mesh {
 
     const im = new THREE.MeshBasicMaterial({
       map: texture,
-      transparent: false,
+      transparent: true,
     });
     const imageMesh = new THREE.Mesh(imageG, im);
 

src/core/box/object/marker.js

@@ -7,7 +7,7 @@ const m = new THREE.MeshBasicMaterial({
 });
 
 export default class Marker extends THREE.Mesh {
-  constructor(startPoint) {
+  constructor(startPoint, imageId) {
     const g = new THREE.PlaneGeometry(0.15, 0.15);
     g.rotateX(-Math.PI / 2);
     super(g, m);
@@ -17,7 +17,10 @@ export default class Marker extends THREE.Mesh {
     this.rotation.y = 0;
     this.position.y = 5;
     this.position.z -= 0.02;
-    this.userData = a.toArray();
+    this.userData = {
+      imageId: imageId || null,
+      point: a.toArray(),
+    };
     this.visible = true;
     this.scale.set(1, 1, 1);
     this.position.y += 0.5;

src/core/player/Player.js

@@ -11,7 +11,6 @@ import CircleTextLabel from "../box/object/CircleTextLabel.js";
 import PureTextLabel from "../box/object/PureTextLabel.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
-
 const convertScreenToNDC = function (event, domElement) {
   let x = (event.offsetX / domElement.clientWidth) * 2 - 1;
   let y = -(event.offsetY / domElement.clientHeight) * 2 + 1;
@@ -314,7 +313,7 @@ export default class Player {
           );
           lasPos.unproject(this.orthCamera);
           lasPos.y = 5;
-          const marker = new Marker(lasPos);
+          const marker = new Marker(lasPos, imageId);
 
           const activeMarkeritem = {
             id: imageId,
@@ -543,14 +542,14 @@ export default class Player {
     }
   }
 
-  insertActiveMarker(item) {
-    const exist = this.activeEdges.find((s) => item.id === s.id);
-    if (exist) {
-      exist.dir = [...new Set([...exist.dir, ...item.dir])];
-    } else {
-      this.activeEdges.push(item);
-    }
-  }
+  // insertActiveMarker(item) {
+  //   const exist = this.activeEdges.find((s) => item.id === s.id);
+  //   if (exist) {
+  //     exist.dir = [...new Set([...exist.dir, ...item.dir])];
+  //   } else {
+  //     this.activeEdges.push(item);
+  //   }
+  // }
 
   insertrenderTexts(item) {
     const index = this.renderTexts.findIndex((s) => item.id === s.id);
@@ -727,7 +726,7 @@ export default class Player {
         hor_markers.forEach((pos) => {
           console.log("pos");
           const p = new THREE.Vector3().fromArray(pos.point);
-          const marker = new Marker(p);
+          const marker = new Marker(p, pos.id);
           this.scene.scene.add(marker);
         });
       }
@@ -852,9 +851,10 @@ export default class Player {
   //单多张图片删除时要删除相关数据
   deleteImageDataByIds(ids) {
     setTimeout(() => {
-      console.warn("单多张图片删除时要删除相关数据");
-      // this.clear();
-      this.t_deleteImageDataByIds(ids);
+      console.warn("单多张图片删除时要删除相关数据", ids);
+      this.clear();
+      this.scene.emit("autoSave");
+      // this.t_deleteImageDataByIds(ids);
     }, 500);
   }
   t_deleteImageDataByIds(ids) {
@@ -902,6 +902,37 @@ export default class Player {
       this.scene.emit("autoSave");
     }, 2500);
   }
+
+  checkDeleteing() {
+    const makers = this.scene.scene.children.filter((obj) =>
+      String(obj.name).includes("marker_")
+    );
+    Array.from(makers).forEach((marker) => {
+      const { imageId, point } = marker.userData;
+      const image = this.scene.boxManager.imgList.find(
+        (item) => item.userData === imageId
+      );
+      if (image) {
+        const nPoint = new THREE.Vector3().fromArray(point);
+        nPoint.project(this.orthCamera);
+        console.log("nPoint", nPoint, point);
+
+        this.raycaster.setFromCamera(nPoint, this.orthCamera);
+        const intersects = this.raycaster.intersectObjects(
+          this.scene.boxManager.imgList,
+          false
+        );
+
+        if (image.userData !== intersects[0].object.userData) {
+          console.log("相交不正确");
+          this.scene.scene.remove(marker);
+        }
+      }
+
+      // const
+    });
+  }
+
   update = () => {
     if (this.floorplanControls.enabled) {
       this.floorplanControls && this.floorplanControls.update();

src/request/urls.ts

@@ -269,4 +269,4 @@ export const cameraVersionAppDelete = `/fusion-xj/cameraVersionApp/delete`;
 export const cameraVersionAppList = `/fusion-xj/cameraVersionApp/list`;
 
 //相片合成
-export const ffmpegMergeImage = `fusion-xj/caseImg/ffmpegImage`;
+export const ffmpegMergeImage = `/fusion-xj/caseImg/ffmpegImage`;

src/store/case.ts

@@ -155,6 +155,4 @@ export const getCaseImgTagData = (caseId: number) =>
   axios.get(getCaseImgTag, { params: { caseId } });
 
 
-export const submitMergePhotos = (data) => {
-  axios.post(ffmpegMergeImage, { ...data });
-}
+export const submitMergePhotos = (data) => axios.post(ffmpegMergeImage, { ...data })

src/view/case/photos/draggable.vue

@@ -104,22 +104,22 @@ async function getList() {
   emit("changeList", list.value);
 }
 async function handleDet(index: Number, id: Number) {
-  // const res = await ElMessageBox.confirm(
-  //   "删除图像影响排图会重置标记数据，是否继续?",
-  //   "温馨提示",
-  //   {
-  //     confirmButtonText: "确定",
-  //     cancelButtonText: "取消",
-  //     type: "default",
-  //   }
-  // );
-  // if (res) {
-  caseDel(id).then((res) => {
-    emit("delImage", [id]);
-    list.value.splice(index, 1);
-    emit("changeList", list.value);
-  });
-  // }
+  const res = await ElMessageBox.confirm(
+    "删除图像后会重新排版并重置标记数据，是否继续?",
+    "温馨提示",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "default",
+    }
+  );
+  if (res) {
+    caseDel(id).then((res) => {
+      emit("delImage", [id]);
+      list.value.splice(index, 1);
+      emit("changeList", list.value);
+    });
+  }
 }
 async function handleEdit(params) {
   await addCaseImgFile({

src/view/case/photos/index.vue

@@ -40,6 +40,7 @@
         <el-button @click="handleSymbol">符号</el-button>
         <el-button @click="handleText">文本</el-button>
         <el-button @click="handleSave" type="success">保存</el-button>
+        <el-button @click="handleExport" type="success">导出</el-button>
 
         <el-button @click="handleClear" v-if="hasDrawData" type="warning"
           >清空</el-button
@@ -76,7 +77,7 @@ import {
 import Scene from "@/core/Scene.js";
 import draggable from "./draggable.vue";
 import edit from "./edit.vue";
-
+import saveAs from "@/util/file-serve";
 import { ElMessage, ElMessageBox } from "element-plus";
 
 const props = defineProps({ caseId: Number });
@@ -203,6 +204,8 @@ const renderCanvas = () => {
     });
     hasDrawData.value = hasData;
     console.log("sync", data, hasData);
+    // editing.value.data = data;
+    loadedDrawData.value = data;
   });
   scene.on("edit", (editData) => {
     console.log("editData", editData);
@@ -216,20 +219,25 @@ const renderCanvas = () => {
   });
   scene.on("submitScreenshot", () => {
     if (window.scene) {
-      // const data = new FormData();
-      // window.scene.blobScreens.forEach((b, index) => {
-      //   data.append("files", b, index);
-      // });
-      const data = {
+      const params = {
         files: window.scene.blobScreens.map(
           (b, index) => new File([b], `${Date.now()}-${index}.jpg`)
         ),
         caseId: caseId.value,
       };
 
-      setTimeout(() => {
-        submitMergePhotos(data);
-        window.scene.endScreenshot();
+      setTimeout(async () => {
+        try {
+          const res = await submitMergePhotos(params);
+          console.log("res", res);
+          const { data, code } = res;
+          if (data && data.imgUrl) {
+            saveAs(data.imgUrl, `${props.caseId}.jpg`);
+          }
+          window.scene.endScreenshot();
+        } catch (error) {
+          window.scene.endScreenshot();
+        }
       }, 500);
     }
   });
@@ -365,6 +373,11 @@ const handleImageDel = (ids) => {
     window.scene.deleteImageDataByIds(ids);
   }
 };
+const handleExport = () => {
+  if (window.scene) {
+    window.scene.exportScreenshot();
+  }
+};
 
 onMounted(() => {
   renderCanvas();