修改页面连续

src/view/case/photos/canvas-photo-editor.js

@@ -28,6 +28,7 @@ export class CanvasPhotoEditor {
     this.selectedPageColor = options.selectedPageColor || '#26559B'
     this.photos = options.photos || []
     this.show = options.show || false // true 纯显示，不编辑
+    this.pageCount = options.pageCount || 0 // true 纯显示，不编辑
 
     // 响应式数据
     this._layoutMode = 'double'//全局的页面布局
@@ -938,7 +939,7 @@ export class CanvasPhotoEditor {
       ctx.font = `${16 * this.scale}px sans-serif`
       ctx.textAlign = 'right'
       ctx.fillText(
-        `第 ${pageIndex + 1} 页`,
+        `第 ${pageIndex + 1 + this.pageCount} 页`,
         pageX + this.pageWidth - (20*this.scale),
         this.pageHeight - (20*this.scale)
       )
@@ -1644,7 +1645,11 @@ export class CanvasPhotoEditor {
       return true
     } catch (err) {
       console.error(err);
-      ElMessage.error("导出失败");
+      if(err?.message === 'Invalid string length'){
+        alert("图片数量较多导致内存占用过高，建议分段制作再导出。");
+      }else{
+        ElMessage.error("导出失败");
+      }
       return false
     } finally {
       Object.assign(this, originalState);

src/view/case/photos/index.vue

@@ -24,7 +24,7 @@
           @click="backPageHandler"
           ><ArrowLeft
         /></el-icon>
-        <span>{{ title }}</span>
+        <span>{{ title|| '照片制卷' }}{{ pageCount }}</span>
       </div>
       <div class="header-main">
         <i
@@ -166,6 +166,7 @@
                 已导入
               </div>
             </div>
+            <div v-if="photos.length == 0" class="zwsj">暂无现场照片</div>
           </div>
         </div>
 
@@ -231,7 +232,9 @@ import {
 } from "@/store/case";
 let oldCanvas = null;
 const caseId = computed(() => router.currentRoute.value?.params?.caseId);
-const title = ref("照片制卷");
+const title = ref("");
+const pageCententList = ref([]);
+const pageCount = ref(0);
 
 // --- 响应式数据 ---
 const canvas = ref(null);
@@ -302,26 +305,36 @@ const getImgList = async () => {
     id: ele.filesId,
     name: ele.filesTitle,
   }));
+  let count = 0 
   let pageCentent = await getCasePhotoRollList(caseId.value);
   pageCentent.map((ele) => {
-    if (ele.content && ele.content != "[]" && ele.id != id) {
-      let content = JSON.parse(ele.content);
-      let listHiostry =
-        content.pages?.flatMap((item) => item.list.filter((i) => i)) || [];
-      historyPhotos.value.push(...listHiostry);
+    if (ele.content && ele.content != "[]") {
+    let content = JSON.parse(ele.content);
+      if( ele.id != id){
+        let listHiostry =
+          content.pages?.flatMap((item) => item.list.filter((i) => i)) || [];
+        historyPhotos.value.push(...listHiostry);
+      }else{
+        pageCount.value = count
+      }
+      count = count + content.pages?.length
     }
   });
+  pageCententList.value = pageCentent;
   let item = pageCentent.find((ele) => ele.id == id);
   if(id && !item){//已删除
     ElMessage.error('该段落已删除！')
-    backPageHandler()
+    setTimeout(()=>{
+      backPageHandler()
+    }, 500)
   }
-  title.value = item?.name || "照片制卷";
+  title.value = item?.name || "";
   let content = item && item.content && JSON.parse(item?.content);
   // editor.value.drawAllPages(photos.value);
   if (content) {
     // editor.value._layoutMode = content.pages.some(ele =>ele.layoutMode == 'double') ? "double" : "single";
     pages.value = content.pages;
+    editor.value.pageCount = pageCount.value;
     editor.value.pages = pages.value;
     editor.value.indexingLineList = content.indexingLineList || [];
   }
@@ -337,7 +350,7 @@ const handleSee = async () => {
   let { data } = await casePhotoUpdate({
     id,
     caseId: caseId.value,
-    name: "照片制卷",
+    name: title.value || `段落` + (pageCententList.value.length + 1) || "",
     content: content,
   });
   ElMessage({

src/view/case/photos/style.scss

@@ -89,6 +89,7 @@
     max-height: calc(100vh - 98px);
     overflow-y: scroll;
     scrollbar-width: none; /* Firefox */
+    min-height: calc(100vh - 270px);
     ::-webkit-scrollbar { display: none; }
   }
 }
@@ -98,7 +99,14 @@
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
 }
-
+.zwsj{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    width: 400px;
+    margin: 0 auto;
+}
 .photo-item {
   position: relative;
   border: 2px solid transparent;

src/view/material/sceneImg.vue

@@ -493,6 +493,7 @@
         ref="showPagesRef"
         :photos="photos"
         v-if="childrenList.src"
+        :pageCount="childrenList.item.pageCount"
         :content="childrenList.src"
       />
       <div v-else class="noView">
@@ -722,6 +723,16 @@ function getList(refresh = false) {
   //old  0 现场照片 1 现场图 2 勘验笔录
   getCasePhotoRollList(caseId.value).then((res) => {
     casePhotoList.value = res || [];
+    let count = 0;
+    casePhotoList.value = res.map(ele => {
+      let content = ele.content && JSON.parse(ele.content);
+      let number = content.pages?.length
+      count = count + number;
+      return {
+        ...ele,
+        pageCount: count - number,
+      }
+    })
     if (active1.value == "照片卷" && res && res.length && !refresh) {
       handlItem2(res[0]);
     }

src/view/material/showpages.vue

@@ -23,6 +23,9 @@ const props = defineProps({
   photos: {
     type: Array,
     required: true
+  },
+  pageCount: {
+    type: Number,
   }
 }); 
 // --- 响应式数据 ---
@@ -36,6 +39,7 @@ watch(() => props.content, ()=>{
         let content = typeof props.content === 'string'?JSON.parse(props.content):props.content
         console.log("newcontent", content);
         editor.value.pages = content.pages;
+        editor.value.pageCount = props.pageCount;
         editor.value.indexingLineList = content.indexingLineList;
         editor.value.drawAllPages(props.photos);
         editor.value.resetPosition(); // 移除scrollToCenter，用resetPosition