feat: save

.env.development

@@ -1,6 +1,6 @@
 VITE_APP_APP="fire"
-VITE_SEVER_URL="https://192.168.0.25"
-# VITE_SEVER_URL="https://xj-mix3d.4dkankan.com"
+# VITE_SEVER_URL="https://192.168.0.25"
+VITE_SEVER_URL="https://xj-mix3d.4dkankan.com"
 VITE_DEVCODE_URL="https://192.168.0.25/code"
 VITE_SWKK_URL="https://test.4dkankan.com"
 VITE_SERVICE_URL="https://test.4dkankan.com"

src/app/mirror/App.vue

@@ -284,12 +284,17 @@ const sortList = ref([0]);
 
 onMounted(async () => {
   caseId.value = GetRequest("caseId");
-  const caseInfo = await getCaseInfo(caseId.value!);
-  if (caseInfo && caseId.value) {
-    document.title = caseInfo.caseTitle + " | 分镜配置";
-  } else {
+  try {
+    const caseInfo = await getCaseInfo(caseId.value!);
+    if (caseInfo && caseId.value) {
+      document.title = caseInfo.caseTitle + " | 分镜配置";
+    } else {
+      isNotFound.value = true;
+    }
+  } catch (error) {
     isNotFound.value = true;
   }
+
   getCaseScriptList();
   console.log("caseId", caseId); //query传参
 });
@@ -377,7 +382,7 @@ async function handleUploadSuccess(response: any, uploadFile: UploadFile) {
   if (uploadFile.url!.includes(".mp4")) {
     const res = await CaseScriptGetCover(uploadFile.url!);
     (uploadFile as any).cover = res;
-  }else{
+  } else {
     (uploadFile as any).cover = uploadFile.url;
   }
 }

src/core/Scene.js

@@ -137,6 +137,9 @@ export default class Scene extends Mitt {
       }
     }
   }
+  deleteImageDataByIds(ids) {
+    this.player.deleteImageDataByIds(ids);
+  }
   loadLight = () => {
     const light = new THREE.AmbientLight(0xffffff, 1.5); // 柔和的白光
     this.scene.add(light);
@@ -258,6 +261,6 @@ export default class Scene extends Mitt {
   }
 
   onBindEvent = () => {
-    //window.addEventListener('resize', this.onResize)
+    window.addEventListener("resize", this.onResize);
   };
 }

src/core/box/VerticalBox.js

@@ -53,16 +53,18 @@ export default class VerticalBox extends THREE.Group {
         let planeRatio = 1.5 / 2;
         texture.matrixAutoUpdate = false;
         if (planeRatio < imgRatio) {
-          texture.matrix.setUvTransform(
-            0,
-            0,
-            planeRatio / imgRatio,
-            1,
-            0,
-            0.5,
-            0.5
-          );
+              //  debugger
+          // texture.matrix.setUvTransform(
+          //   0,
+          //   0,
+          //   planeRatio / imgRatio,
+          //   1,
+          //   0,
+          //   0.5,
+          //   0.5
+          // );
         } else {
+     
           texture.matrix.setUvTransform(
             0,
             0,

src/core/box/object/ImgLabel.js

@@ -28,6 +28,16 @@ export default class ImgLabel extends THREE.Mesh {
 
     const m = new THREE.MeshBasicMaterial({
       map: texture,
+      // needUpdate: true,
+      // side: THREE.DoubleSide,
+      // alphaTest: 0.5,
+      transparent: true,
+      // onBeforeCompile: (shader) => {
+      //   shader.fragmentShader = shader.fragmentShader.replace(
+      //     "#include <alphatest_fragment>",
+      //     "if ( diffuseColor.a > alphaTest ) diffuseColor = vec4(vec3(0,1,0.33), 1.0);"
+      //   );
+      // },
     });
     super(g, m);
 

src/core/player/Player.js

@@ -843,7 +843,25 @@ export default class Player {
     this.scene.clearDrawScene();
     this.syncDrawData();
   }
+  //单多张图片删除时要删除相关数据
+  deleteImageDataByIds(ids) {
+    ids.forEach((id) => {
+      const edgeIndex = this.activeEdges.findIndex((item) => item.id === id);
+      const makerIndex = this.renderMarkers.findIndex((item) => item.id === id);
+      const lineIndex = this.renderLines.findIndex((item) => item.imgId === id);
+      if (edgeIndex > -1) {
+        this.activeEdges.splice(edgeIndex, 1);
+      }
+      if (makerIndex > -1) {
+        this.renderMarkers.splice(edgeIndex, 1);
+      }
+      if (lineIndex > -1) {
+        this.renderLines.splice(lineIndex, 1);
+      }
+    });
 
+    console.log("deleteImageByIds", ids);
+  }
   update = () => {
     if (this.floorplanControls.enabled) {
       this.floorplanControls && this.floorplanControls.update();

src/view/case/photos/draggable.vue

@@ -1,14 +1,38 @@
 <template>
   <div class="VueDraggable">
-    <el-input @change="handleSearch" clearable size="medium" placeholder="请输入内容" suffix-icon="search" v-model="search" class="input-with-select"> </el-input>
-    <VueDraggable v-if="list.length" :move="search?false: null" class="draggable" ref="el" v-model="list" @sort="onChange">
-      <div class="item" v-for="(item, index) in search?searchList:list" :key="item.id" @click="handleItem(item.id)">
+    <el-input
+      @change="handleSearch"
+      clearable
+      size="medium"
+      placeholder="请输入内容"
+      suffix-icon="search"
+      v-model="search"
+      class="input-with-select"
+    >
+    </el-input>
+    <VueDraggable
+      v-if="list.length"
+      :move="search ? false : null"
+      class="draggable"
+      ref="el"
+      v-model="list"
+      @sort="onChange"
+    >
+      <div
+        class="item"
+        v-for="(item, index) in search ? searchList : list"
+        :key="item.id"
+        @click="handleItem(item.id)"
+      >
         <img class="itemImg" :src="item.imgUrl" alt="" />
         <div class="text">
-            <div :title="item.imgInfo">{{ item.imgInfo }}</div>
-           <EditPen @click.stop="handleEdit(item)" class="EditPen" />
+          <div :title="item.imgInfo">{{ item.imgInfo }}</div>
+          <EditPen @click.stop="handleEdit(item)" class="EditPen" />
         </div>
-        <CircleCloseFilled @click.stop="handleDet(index, item.id)" class="itemIcon" />
+        <CircleCloseFilled
+          @click.stop="handleDet(index, item.id)"
+          class="itemIcon"
+        />
       </div>
     </VueDraggable>
     <el-empty class="empty" v-else description="请上传现场照片" />
@@ -16,9 +40,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch, computed } from "vue";
 import { caseImgList, CaseImg, caseDel, caseUpdateSort } from "@/store/case";
-import { VueDraggable } from 'vue-draggable-plus'
+import { VueDraggable } from "vue-draggable-plus";
 import { openErrorMsg } from "@/request/errorMsg.js";
 import { addCaseImgFile } from "../quisk";
 // import { IconRabbish } from '@element-plus/icons-vue'
@@ -27,85 +51,95 @@ const emit = defineEmits<{
   (e: "changeList", value: CaseImg[] | null): void;
   (e: "handleItem", value: Number | null): void;
 }>();
-const list = ref<CaseImg[]>([])
-const search = ref('')
+const list = ref<CaseImg[]>([]);
+const search = ref("");
 const searchList = computed(() => {
   let searchText = search.value.toLowerCase();
-  return list.value.filter(item => {
+  return list.value.filter((item) => {
     return item.imgInfo?.toLowerCase().includes(searchText);
-  })
-})
+  });
+});
 
-watch(()=>props.sortType,(newValue, oldValue)=>{
+watch(
+  () => props.sortType,
+  (newValue, oldValue) => {
     emit("changeList", list.value);
-},{ deep: true, immediate:true})
+  },
+  { deep: true, immediate: true }
+);
 
-async function onChange() {
-  if(search.value) {
-    openErrorMsg('搜索状态禁止拖动')
-    return
-  };
+async function onChange({ newIndex, oldIndex }) {
+  if (search.value) {
+    openErrorMsg("搜索状态禁止拖动");
+    return;
+  }
+  const imageIDs = Array.from(list.value)
+    .filter((i, index) => index === newIndex || index === oldIndex)
+    .reduce((prev, current) => prev.concat(current["id"]), []);
+  console.log("draggable-imageIDs", imageIDs);
+  emit("delImage", imageIDs);
   setTimeout(async () => {
-  let apiList = searchList.value.map((item, index) => {
-    return {...item, sort: index + 1}
-  })
-  console.log(apiList)
-  await caseUpdateSort(apiList)
-  emit("changeList", apiList);
-  } , 500)
+    let apiList = searchList.value.map((item, index) => {
+      return { ...item, sort: index + 1 };
+    });
+    console.log(apiList);
+    await caseUpdateSort(apiList);
+    emit("changeList", apiList);
+  }, 500);
 }
 function handleItem(id) {
   setTimeout(() => {
-    let index = list.value.findIndex(item => item.id === id)
-    console.log(index, list.value)
+    let index = list.value.findIndex((item) => item.id === id);
+    console.log(index, list.value);
     emit("handleItem", index);
-  } , 500)
-  
+  }, 500);
 }
-function handleSearch(val:string) {
-  console.log('handleSearch', val, search.value);
+function handleSearch(val: string) {
+  console.log("handleSearch", val, search.value);
 }
-async function getList () {
-  let lists = await caseImgList(props.caseId, '')
-  list.value = lists.data
+async function getList() {
+  let lists = await caseImgList(props.caseId, "desc");
+  list.value = lists.data;
   emit("changeList", list.value);
-
 }
 function handleDet(index: Number, id: Number) {
-  caseDel(id).then(res=>{
-    list.value.splice(index, 1)
+  caseDel(id).then((res) => {
+    emit("delImage", [id]);
+    list.value.splice(index, 1);
     emit("changeList", list.value);
-  })
+  });
 }
 async function handleEdit(params) {
-  await addCaseImgFile({ caseId: props.caseId, data: {
-    ...params,
-  } });
-  getList()
+  await addCaseImgFile({
+    caseId: props.caseId,
+    data: {
+      ...params,
+    },
+  });
+  getList();
 }
 function filterItem() {
   let searchText = search.value.toLowerCase();
-  return list.value.filter(item => {
+  return list.value.filter((item) => {
     return item.imgInfo?.toLowerCase().includes(searchText);
-  })
+  });
 }
 onMounted(() => {
-  getList()
+  getList();
   // emit("update:list", props.list.value);
-})
+});
 defineExpose({
-  getList
+  getList,
 });
-
 </script>
 <style lang="scss" scoped>
-.empty{
+.empty {
   width: 200px;
 }
-.input-with-select{
+.input-with-select {
   margin-top: 16px;
 }
-.draggable{
+.draggable {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -114,37 +148,37 @@ defineExpose({
     // flex: 0 0 50%; /* 每个子元素占用50%的宽度 */
     width: calc(50% - 4px);
     margin-top: 16px;
-    .itemImg{
+    .itemImg {
       width: 100%;
       height: 62px;
       object-fit: cover;
     }
-    .text{
+    .text {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 20px;
-      div{
+      div {
         width: 100%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
       }
-      .EditPen{
+      .EditPen {
         width: 20px;
         height: 20px;
         display: none;
       }
-      &:hover{
-        div{
+      &:hover {
+        div {
           width: calc(100% - 20px);
         }
-        .EditPen{
+        .EditPen {
           display: block;
         }
       }
     }
-    .itemIcon{
+    .itemIcon {
       width: 20px;
       height: 20px;
       color: var(--el-color-primary);
@@ -153,11 +187,11 @@ defineExpose({
       top: -10px;
       display: none;
     }
-    &:hover{
-      .itemIcon{
-        display:block;
+    &:hover {
+      .itemIcon {
+        display: block;
       }
     }
   }
 }
-</style>
+</style>

src/view/case/photos/index.vue

@@ -30,6 +30,7 @@
         :sortType="sortType"
         @changeList="changeList"
         @handleItem="handleItem"
+        @delImage="handleImageDel"
       />
     </div>
     <div class="right">
@@ -134,7 +135,7 @@ const changeList = async (list) => {
         loadedDrawData.value = res.data.data;
       }
       if ("isHorizontal" in res.data) {
-        console.error("sortType.value", sortType.value, !res.data.isHorizontal);
+        // console.error("sortType.value", sortType.value, !res.data.isHorizontal);
         sortType.value = !res.data.isHorizontal;
       }
     } else {
@@ -249,6 +250,7 @@ const handleSwitchGrid = async () => {
   );
   if (res) {
     sortType.value = !sortType.value;
+    window.scene.clearScene();
     handleClear();
   }
 };
@@ -317,6 +319,13 @@ const handleEditingClose = () => {
   window.scene.setMode(0);
 };
 
+const handleImageDel = (ids) => {
+  t
+  // if (window.scene) {
+  //   window.scene.deleteImageDataByIds(ids);
+  // }
+};
+
 onMounted(() => {
   renderCanvas();
   console.warn("renderCanvas");