评卷区相邻合并,自动扩展

card/assets/styles/card-preview.scss

@@ -472,7 +472,7 @@
         text-align: center;
       }
       .stdno-fill {
-        min-height: 284px;
+        min-height: 240px;
         height: 100%;
         position: relative;
 
@@ -502,7 +502,7 @@
           > h5 {
             border-bottom: 1px solid #000;
             line-height: 24px;
-            font-size: 16px;
+            font-size: 14px;
             font-weight: bold;
             text-align: center;
           }
@@ -523,10 +523,10 @@
         }
         &-option {
           margin: 8px auto;
-          width: 20px;
-          height: 14px;
+          width: 18px;
+          height: 10px;
           font-size: 12px;
-          line-height: 1;
+          line-height: 8px;
           text-align: center;
           color: #000;
           // border-rect

card/assets/styles/card-temp.css

@@ -403,7 +403,7 @@
   text-align: center;
 }
 .card-head-body .head-stdno .stdno-fill {
-  min-height: 284px;
+  min-height: 240px;
   height: 100%;
   position: relative;
 }
@@ -432,7 +432,7 @@
 .card-head-body .head-stdno .stdno-fill-head > h5 {
   border-bottom: 1px solid #000;
   line-height: 24px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
   text-align: center;
 }
@@ -451,10 +451,10 @@
 }
 .card-head-body .head-stdno .stdno-fill-option {
   margin: 8px auto;
-  width: 20px;
-  height: 14px;
+  width: 18px;
+  height: 10px;
   font-size: 12px;
-  line-height: 1;
+  line-height: 8px;
   text-align: center;
   color: #000;
   border: 1px solid #000;

src/modules/stmms/components/markParam/MarkPaperMarker.vue

@@ -335,7 +335,46 @@ export default {
       pictureConfigList.forEach((item) => {
         delete item.qStruct;
       });
-      return pictureConfigList;
+
+      // 合并相邻区域
+      pictureConfigList.sort((a, b) => {
+        return a.i - b.i || a.x - b.x || a.y - b.y;
+      });
+      let combinePictureConfigList = [];
+      let prevConfig = null;
+      pictureConfigList.forEach((item, index) => {
+        if (!index) {
+          prevConfig = { ...item };
+          combinePictureConfigList.push(prevConfig);
+          return;
+        }
+
+        if (
+          prevConfig.i === item.i &&
+          prevConfig.y + prevConfig.h >= item.y &&
+          prevConfig.w === item.w &&
+          prevConfig.x === item.x
+        ) {
+          prevConfig.h = item.y + item.h - prevConfig.y;
+        } else {
+          prevConfig = { ...item };
+          combinePictureConfigList.push(prevConfig);
+        }
+      });
+      // console.log(combinePictureConfigList);
+      // 自动扩展区域。
+      let scaleRate = 0.002;
+      combinePictureConfigList = combinePictureConfigList.map((item) => {
+        return {
+          i: item.i,
+          x: item.x - scaleRate,
+          y: item.y - scaleRate,
+          w: item.w + 2 * scaleRate,
+          h: item.h + 2 * scaleRate,
+        };
+      });
+
+      return combinePictureConfigList;
     },
     async updateGroupMarker(group) {
       console.log(group);

src/modules/stmms/components/markParam/ModifyMarkArea.vue

@@ -24,12 +24,14 @@
     <div v-if="modalIsShow" class="area-container">
       <area-cropper
         v-for="(paper, index) in papers"
+        :id="`area-cropper-${index}`"
         :imgUrl="paper.imgUrl"
         ref="AreaCropper"
         :key="paper.imgUrl"
         :paper="paper"
         @curarea-change="cropperCurareaChange"
         @change="(areas) => areaChange(index, areas)"
+        @paper-load="() => areaPaperLoaded(index)"
       ></area-cropper>
     </div>
 
@@ -67,10 +69,12 @@ export default {
     return {
       modalIsShow: false,
       papers: [],
+      paperLoadedList: [],
     };
   },
   methods: {
     visibleChange() {
+      this.paperLoadedList = [];
       this.papers = this.paperList.map((paper) => {
         let npaper = { ...paper };
         npaper.areas = [];
@@ -81,6 +85,39 @@ export default {
         this.papers[index].areas.push({ ...config });
       });
     },
+    areaPaperLoaded(paperIndex) {
+      if (this.paperLoadedList.includes(paperIndex)) return;
+      this.paperLoadedList.push(paperIndex);
+      if (this.paperLoadedList.length === this.paperList.length) {
+        this.scrollToFirstArea();
+      }
+    },
+    scrollToFirstArea() {
+      if (!this.group.pictureConfigList.length) return;
+      let paperIndexs = this.group.pictureConfigList.map((item) => item.i - 1);
+      paperIndexs.sort((a, b) => a - b);
+      const firstPaperIndex = paperIndexs[0];
+
+      this.$nextTick(() => {
+        const areaCropperDom = document.getElementById(
+          `area-cropper-${firstPaperIndex}`
+        );
+        let areaItems = areaCropperDom.querySelectorAll(".element-resize");
+        let firstAreaItem = null;
+        let topNum = 9999;
+        for (let i = 0; i < areaItems.length; i++) {
+          const element = areaItems[i];
+          if (element.offsetTop < topNum) {
+            topNum = element.offsetTop;
+            firstAreaItem = element;
+          }
+        }
+        // console.log(firstAreaItem);
+        const scrollTop =
+          areaCropperDom.offsetTop + firstAreaItem.offsetTop - 100;
+        this.$el.querySelector(".el-dialog").scrollTop = scrollTop;
+      });
+    },
     cancel() {
       this.modalIsShow = false;
     },

src/modules/stmms/components/markParam/areaCropper/AreaCropper.vue

@@ -91,6 +91,7 @@ export default {
     },
     imgLoad() {
       this.transformPicConfig(this.paper.areas);
+      this.$emit("paper-load");
     },
     windowResizeEvent() {
       const { clientWidth, clientHeight } = this.$refs.imgDom;