隐藏无数据的照片

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

@@ -19,9 +19,11 @@ export class CanvasPhotoEditor {
     this.pageWidth = options.pageWidth || 600
     this.pageHeight = options.pageHeight || 840
     this.pageMargin = options.pageMargin || 4
+    this.imgMargin = 10
+    this.titleHieght = 50
     this.canvasBgColor = options.canvasBgColor || '#efefef'
     this.pageBgColor = options.pageBgColor || '#ffffff'
-    this.selectedPageColor = options.selectedPageColor || '#3b82f6'
+    this.selectedPageColor = options.selectedPageColor || '#26559B'
     this.photos = options.photos || []
     this.show = options.show || false // true 纯显示，不编辑
 
@@ -649,6 +651,7 @@ export class CanvasPhotoEditor {
           this.selectedPageItem = {
             index: newindex != -1 && !!(this.pages[i].list[newindex]) ? newindex : -1,
             pageIndex: i,
+            // title:
             ...this.pages[i].coordinate[newindex]
           }
         }
@@ -1022,7 +1025,7 @@ export class CanvasPhotoEditor {
       const drawX = pageX + layout.x + offsetXInLayout;
       const drawY = itemY + offsetYInLayout;
       const textCenterX = scaledWidth; // 图片水平中点
-      const textCenterY = drawY + scaledHeight + 10; // 图片垂直中点
+      const textCenterY = drawY + scaledHeight + this.imgMargin; // 图片垂直中点
       ctx.drawImage(img, drawX, drawY, scaledWidth, scaledHeight);
     }
     // 【核心】严格隔离裁剪上下文
@@ -1037,9 +1040,9 @@ export class CanvasPhotoEditor {
     ctx.setLineDash([1, 1]);
     ctx.strokeRect(
       jxx,
-      itemY + layout.height + 10,
+      itemY + layout.height + this.imgMargin,
       layout.width,
-      50
+      this.titleHieght
     );
     ctx.setLineDash([]);
 
@@ -1070,8 +1073,8 @@ export class CanvasPhotoEditor {
           newPages.push({...currentPage, list: list, })
       }
     })
-    if(newPages.length > 0 && newPages.length != this._pages.length){//需要补位
-      newPages = newPages.concat(Array(4 - newPages.length).fill({...currentPage, list: []}));
+    if(newPages.length > 0 && newPages.length < this._pages.length){//需要补位
+      newPages = newPages.concat(Array(this._pages.length - newPages.length).fill({...currentPage, list: []}));
     }
     this.pages = newPages.length > 0 ? newPages : this._pages
     this.resetPosition()
@@ -1418,7 +1421,7 @@ export class CanvasPhotoEditor {
 
               // 虚线框
               ctx.setLineDash([1, 1]);
-              ctx.strokeRect(coord.x, coord.y + coord.height + 10, coord.width, 50);
+              ctx.strokeRect(coord.x, coord.y + coord.height + this.imgMargin, coord.width, this.titleHieght);
               ctx.setLineDash([]);
             }
           });
@@ -1456,13 +1459,13 @@ export class CanvasPhotoEditor {
             ctx.stroke();
 
             // 起点圆点（只在起点页画）
-            if (currentIsStart) {
-              const first = points[0];
-              const fx = first.x - pageOffsetX;
-              ctx.beginPath();
-              ctx.arc(fx, first.y, 4, 0, Math.PI * 2);
-              ctx.fill();
-            }
+            // if (currentIsStart) {
+            //   const first = points[0];
+            //   const fx = first.x - pageOffsetX;
+            //   ctx.beginPath();
+            //   ctx.arc(fx, first.y, 4, 0, Math.PI * 2);
+            //   ctx.fill();
+            // }
 
             // T型端线（只在终点页画）
             if (currentIsEnd) {
@@ -1610,7 +1613,7 @@ async exportPagesAsImages(paperType = "a4", name, fileType = 'pdf') {
             );
 
             ctx.setLineDash([1, 1]);
-            ctx.strokeRect(coord.x, coord.y + coord.height + 10, coord.width, 50);
+            ctx.strokeRect(coord.x, coord.y + coord.height + this.imgMargin, coord.width, this.titleHieght);
             ctx.setLineDash([]);
           }
         });
@@ -1648,13 +1651,13 @@ async exportPagesAsImages(paperType = "a4", name, fileType = 'pdf') {
             ctx.stroke();
 
             // 起点圆点（只在起点页画）
-            if (currentIsStart) {
-              const first = points[0];
-              const fx = first.x - pageOffsetX;
-              ctx.beginPath();
-              ctx.arc(fx, first.y, 4, 0, Math.PI * 2);
-              ctx.fill();
-            }
+            // if (currentIsStart) {
+            //   const first = points[0];
+            //   const fx = first.x - pageOffsetX;
+            //   ctx.beginPath();
+            //   ctx.arc(fx, first.y, 4, 0, Math.PI * 2);
+            //   ctx.fill();
+            // }
 
             // T型端线（只在终点页画）
             if (currentIsEnd) {
@@ -1745,9 +1748,9 @@ async checkIndexing(mes = '此操作将会清除所有标引是否继续？'){
 //绘制移动page的目的地提示
 drawPlusIcon = (pageIndex) => {
     const ctx = this.ctx;
-    const color = '#1677ff';
+    const color = this.selectedPageColor;
     const lineWidth = 2;
-    const size = 60 * this.scale;
+    const size = 40 * this.scale;
     const r = 24 * this.scale 
     // 1. 保存当前上下文状态（避免污染）
     ctx.save();

src/view/material/sceneImg.vue

@@ -817,12 +817,15 @@ const handleClick = (a) => {
       let indexshow1 = recursiveSearch(list.value[0].childrenList);
       let indexshow2 = recursiveSearch(list.value[2].childrenList);
       let indexshow3 = recursiveSearch([list.value[3]]);
+      let indexshow4 = casePhotoList.value.length;
       let tabsdom0 = document.getElementById("tab-现场图");
       let tabsdom1 = document.getElementById("tab-现场照片");
       let tabsdom2 = document.getElementById("tab-勘验笔录");
+      let tabsdom3 = document.getElementById("tab-照片卷");
       if (!indexshow1 && tabsdom0) tabsdom0.style.display = "none";
       if (!indexshow2 && tabsdom1) tabsdom1.style.display = "none";
       if (!indexshow3 && tabsdom2) tabsdom2.style.display = "none";
+      if (!indexshow4 && tabsdom3) tabsdom3.style.display = "none";
       if (indexshow1) {
       } else if (indexshow2) {
         active1.value = '现场照片';