From 6f50e97cbac0faab89fb5587a7d7f57cc8518479 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Thu, 9 Jan 2025 15:31:02 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=A2=9E=E5=8A=A0=E9=95=BF?=
 =?UTF-8?q?=E7=97=85=E5=AE=B3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../big-screen/components/img-dialog.vue      | 77 ++++++++++++++++---
 1 file changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/views/big-screen/components/img-dialog.vue b/src/views/big-screen/components/img-dialog.vue
index 246352b..2e4c13d 100644
--- a/src/views/big-screen/components/img-dialog.vue
+++ b/src/views/big-screen/components/img-dialog.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-22 15:30:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-08 16:11:18
+ * @LastEditTime: 2025-01-09 15:22:51
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -157,6 +157,17 @@
             ref="mainImage"
             @load="updateRects"
           />
+          <!-- 进度条 -->
+          <div class="image-progress" v-if="sliderLength">
+            <el-slider
+              v-model="progressIndex"
+              :step="1"
+              :show-tooltip="false"
+              :max="sliderLength"
+              show-stops
+            >
+            </el-slider>
+          </div>
         </div>
       </div>
       <!-- 小图展示 -->
@@ -242,6 +253,11 @@ export default {
       rectItem: [],
       // 图片病害框的颜色
       colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
+
+      // 进度条点击的index
+      progressIndex: 0,
+      // 进度条步长
+      sliderLength: null,
     };
   },
   computed: {
@@ -255,14 +271,45 @@ export default {
         this.defectData.length > 0 &&
         this.defectData.length > this.currentIndex
       ) {
-        // this.showImage(this.currentIndex);
         const index = this.defectData[this.currentIndex].items.length - 1;
         if (index !== this.selectedThumbnail) {
+          // 获取当前最大步长
+          this.sliderLength =
+            this.defectData[this.currentIndex]?.items[this.selectedThumbnail]
+              ?.children[0]?.children?.length - 1;
+          if (this.sliderLength && this.checkedRectList.length > 0) {
+            // 修改当前画框
+            this.checkedRectList[0].rectPosition = this.defectData[
+              this.currentIndex
+            ].items[index].children[0].children[this.progressIndex].rect
+              ?.split(",")
+              .map(Number);
+            // 当前展示的图片
+            return this.defectData[this.currentIndex].items[
+              this.selectedThumbnail
+            ].children[0].children[this.progressIndex].image;
+          }
           return this.defectData[this.currentIndex].items[
             this.selectedThumbnail
           ]?.img;
+        } else {
+          // 获取当前最大步长
+          this.sliderLength =
+            this.defectData[this.currentIndex]?.items[index]?.children[0]
+              ?.children?.length - 1;
+          if (this.sliderLength && this.checkedRectList.length > 0) {
+            // 修改当前画框
+            this.checkedRectList[0].rectPosition = this.defectData[
+              this.currentIndex
+            ].items[index].children[0].children[this.progressIndex].rect
+              ?.split(",")
+              .map(Number);
+            // 修改当前展示的图片
+            return this.defectData[this.currentIndex].items[index].children[0]
+              .children[this.progressIndex].image;
+          }
+          return this.defectData[this.currentIndex].items[index]?.img;
         }
-        return this.defectData[this.currentIndex].items[index]?.img;
       }
     },
 
@@ -348,7 +395,7 @@ export default {
             if (this.pageTip > 1) {
               this.loadMoreTopImages();
             }
-          }, 500);
+          }, 200);
         });
     },
 
@@ -360,6 +407,7 @@ export default {
     changeImgType(type) {
       if (this.labelCheck != type) {
         this.labelCheck = type;
+        this.progressIndex = 0;
         if (type === "aria") {
           this.defectData = this.ariaList;
           if (this.currentIndex > this.ariaList.length - 1) {
@@ -381,12 +429,12 @@ export default {
      */
     getList() {
       this.loading = true;
-      const data = {
+      const dataItem = {
         classType: this.bottomTipClick,
         ...this.imgForm,
         ...this.params,
       };
-      defeaseList(data)
+      defeaseList(dataItem)
         .then(({ code, data }) => {
           if (code === 200) {
             this.aimList.push(...data.aim);
@@ -514,6 +562,7 @@ export default {
      */
     showImage(index) {
       this.currentIndex = index;
+      this.progressIndex = 0;
       const indexInfo = this.defectData[this.currentIndex]?.items.length - 1;
       this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
       this.$nextTick(() => {
@@ -529,6 +578,7 @@ export default {
      */
     showThumbnailImage(index) {
       this.selectedThumbnail = index;
+      this.progressIndex = 0;
       this.updateRects();
     },
 
@@ -569,11 +619,6 @@ export default {
       ) {
         this.loadMoreBottomImages();
       }
-      // if (this.currentIndex === this.defectData.length - 1) {
-      //   this.loadMoreBottomImages();
-      // } else if (this.currentIndex === 0) {
-      //   this.loadMoreTopImages();
-      // }
     }, 100),
 
     /**
@@ -626,6 +671,7 @@ export default {
       if (event.key === "ArrowUp" && !this.loading) {
         event.preventDefault();
         if (this.currentIndex > 0) {
+          this.progressIndex = 0;
           this.currentIndex--;
           const index = this.defectData[this.currentIndex].items.length - 1;
           this.selectedThumbnail = index; // Reset when changing main images via keyboard
@@ -638,6 +684,7 @@ export default {
           this.currentIndex === this.defectData.length - 1
             ? this.currentIndex
             : this.currentIndex++;
+          this.progressIndex = 0;
           const index = this.defectData[this.currentIndex].items.length - 1;
           this.selectedThumbnail = index; // Reset when changing main images via keyboard
           this.scrollToCurrentImage();
@@ -907,6 +954,14 @@ export default {
       line-height: 1.1rem;
     }
   }
+
+  // 进度条样式
+  .image-progress {
+    width: 100%;
+    padding: 0 15rem;
+    position: absolute;
+    bottom: -0.5rem;
+  }
 }
 
 .image-container img {