fix：修改大屏总览左下角name长度，修改病害确认弹窗

src/views/big-screen/overview-components/disease-current.vue

@@ -462,7 +462,7 @@ export default {
       }
 
       .name {
-        width: 4.5rem;
+        width: 3.5rem;
         padding-left: 0.3rem;
         color: #aac6c7;
         font-size: 0.7rem;
@@ -472,7 +472,7 @@ export default {
       }
 
       .rate {
-        width: 2rem;
+        width: 2.5rem;
         color: #808c9f;
         font-size: 0.65rem;
       }

src/views/xj/inspection/confirmation-management/components/image-dialog.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 17:25:06
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-09 16:36:36
+ * @LastEditTime: 2024-12-12 16:30:36
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\components\image-dialog.vue
  * @Description: 病害确认-影像模式弹窗
 -->
@@ -12,32 +12,77 @@
     <div class="image-content">
       <!-- 图片展示 -->
       <div class="sidebar" ref="sidebar" @scroll="handleScroll">
-        <img v-for="(item, index) in defectData" :key="item.id" :src="item.media[0].img" :alt="'Image ' + (index + 1)"
-          @click="showImage(index)" :class="{ selected: currentIndex === index }" />
+        <img
+          v-for="(item, index) in defectData"
+          :key="item.id"
+          :src="item.media[0].img"
+          :alt="'Image ' + (index + 1)"
+          @click="showImage(index)"
+          :class="{ selected: currentIndex === index }"
+        />
       </div>
       <!-- 右侧区域 -->
       <div class="main-content">
         <div class="image-form">
-          <el-form :model="imgForm" ref="imgForm" size="small" :inline="true" label-width="5rem">
+          <el-form
+            :model="imgForm"
+            ref="imgForm"
+            size="small"
+            :inline="true"
+            label-width="5rem"
+          >
             <el-form-item label="路段名称">
-              <el-select v-model="imgForm.segmentId" placeholder="请选择路段名称" :style="{ width: '8rem' }" clearable>
-                <el-option v-for="item in roadTypeList" :key="item.value" :label="item.label" :value="item.value" />
+              <el-select
+                v-model="imgForm.segmentId"
+                placeholder="请选择路段名称"
+                :style="{ width: '8rem' }"
+                clearable
+              >
+                <el-option
+                  v-for="item in roadTypeList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
             <el-form-item label-width="3rem" label="类型">
-              <el-cascader v-model="imgForm.defectType" :options="tableDefect" :props="{
-                checkStrictly: false,
-                emitPath: false,
-                children: 'subTypes',
-              }" clearable></el-cascader>
+              <el-cascader
+                v-model="imgForm.defectType"
+                :options="tableDefect"
+                :props="{
+                  checkStrictly: false,
+                  emitPath: false,
+                  children: 'subTypes',
+                }"
+                clearable
+              ></el-cascader>
             </el-form-item>
             <el-form-item label="公里桩">
-              <el-input v-model="imgForm.stakeStart" placeholder="起始公里桩" style="width: 7rem" clearable />
+              <el-input
+                v-model="imgForm.stakeStart"
+                placeholder="起始公里桩"
+                style="width: 7rem"
+                clearable
+              />
               <span style="margin: 0 5px">-</span>
-              <el-input v-model="imgForm.stakeEnd" placeholder="终止公里桩" style="width: 7rem" clearable />
+              <el-input
+                v-model="imgForm.stakeEnd"
+                placeholder="终止公里桩"
+                style="width: 7rem"
+                clearable
+              />
             </el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+              >重置</el-button
+            >
             <!-- <el-row :gutter="24">
               <el-col :span="6">
                 <el-button
@@ -58,30 +103,63 @@
           </el-form>
         </div>
         <!-- 图片展示 -->
-        <div class="image-view">
-          <div class="view-content" ref="imageContainer">
-            <img :src="currentImage" alt="Main Image" ref="mainImage" @load="updateRects" />
-            <div class="rect-overlay" v-for="(rect, index) in rects" :key="index" :style="getRectStyle(rect)"></div>
-            <div class="view-info">
+        <div class="image-view" ref="imageView">
+          <div class="view-info">
+            采集时间:
+            {{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
+            {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
+            {{ rectsItem.stakeEnd || "暂无数据" }}
+            病害类型：{{ rectsItem.defectTypeName || "暂无数据" }} 路产状态:
+            {{ filterState(rectsItem.state) }}
+          </div>
+          <div
+            class="view-content"
+            ref="imageContainer"
+            @mousewheel="handleWeel"
+            :style="`width:${elWidth}rem;height:${elHeight}rem;`"
+          >
+            <img
+              :src="currentImage"
+              alt="Main Image"
+              :draggable="false"
+              ref="mainImage"
+              @load="updateRects"
+            />
+            <div
+              class="rect-overlay"
+              v-for="(rect, index) in rects"
+              :key="index"
+              :style="getRectStyle(rect)"
+            ></div>
+            <!-- <div class="view-info">
               采集时间:
               {{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
               {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
               {{ rectsItem.stakeEnd || "暂无数据" }}
-              病害类型：{{ rectsItem.defectTypeName || "暂无数据" }}
-              路产状态: {{ filterState(rectsItem.state) }}
-            </div>
+              病害类型：{{ rectsItem.defectTypeName || "暂无数据" }} 路产状态:
+              {{ filterState(rectsItem.state) }}
+            </div> -->
           </div>
         </div>
         <div class="image-bottom">
-          <img v-for="(mediaItem, index) in currentThumbnails" :key="'thumb-' + index" :src="mediaItem.img"
-            :alt="'Thumb ' + (index + 1)" @click="showThumbnailImage(index)"
-            :class="{ selected: selectedThumbnail === index }" />
+          <img
+            v-for="(mediaItem, index) in currentThumbnails"
+            :key="'thumb-' + index"
+            :src="mediaItem.img"
+            :alt="'Thumb ' + (index + 1)"
+            @click="showThumbnailImage(index)"
+            :class="{ selected: selectedThumbnail === index }"
+          />
         </div>
       </div>
     </div>
     <div class="footer">
-      <el-button type="success" size="mini" @click="changeDefect(2)">是病害(Y)</el-button>
-      <el-button type="warning" size="mini" @click="changeDefect(3)">不是病害(N)</el-button>
+      <el-button type="success" size="mini" @click="changeDefect(2)"
+        >是病害(Y)</el-button
+      >
+      <el-button type="warning" size="mini" @click="changeDefect(3)"
+        >不是病害(N)</el-button
+      >
     </div>
   </div>
 </template>
@@ -132,6 +210,17 @@ export default {
       selectedThumbnail: null,
       // 图片下方数据
       rectsItem: {},
+
+      initWidth: 0, // 父元素的宽-自适应值
+      initHeight: 0, // 父元素的高-自适应值
+      // 缩放比例
+      zoom: 1,
+      // 容器宽
+      elWidth: 0, // 元素宽
+      // 容器高
+      elHeight: 0, // 元素高
+      elLeft: 0, // 元素的左偏移量
+      elTop: 0, // 元素的右偏移量
     };
   },
   computed: {
@@ -152,10 +241,90 @@ export default {
   mounted() {
     this.getList();
     this.showImage(0);
+    this.scrollInit();
+    this.initBodySize();
     window.addEventListener("keydown", this.handleKeydown);
     window.addEventListener("resize", this.updateRects);
   },
   methods: {
+    // 页面初始化
+    initBodySize() {
+      this.initWidth = this.$refs.imageView.clientWidth; // 拿到父元素宽
+      this.initHeight = this.initWidth * ((1080 * 0.31) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应
+      this.elWidth = this.initWidth * (100 / (1920 / 1.2));
+      this.elHeight = this.initHeight * (100 / (1080 / 2.08));
+    },
+    // 初始化与绑定监听事件方法
+    scrollInit() {
+      // 获取要绑定事件的元素
+      const nav = this.$refs.imageView;
+
+      let flag; // 鼠标按下
+      let downX; // 鼠标点击的x下标
+      let downY;
+      let scrollLeft; // 当前元素滚动条的偏移量
+      let scrollTop; // 当前元素滚动条的偏移量
+      nav.addEventListener("mousedown", function (event) {
+        flag = true;
+        downX = event.clientX; // 获取到点击的x下标
+        downY = event.clientY;
+        scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
+        scrollTop = this.scrollTop;
+      });
+      nav.addEventListener("mousemove", function (event) {
+        if (flag) {
+          // 判断是否是鼠标按下滚动元素区域
+          let moveX = event.clientX; // 获取移动的x轴
+          let moveY = event.clientY;
+          let scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
+          let scrollY = moveY - downY; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
+          this.scrollLeft = scrollLeft - scrollX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
+          this.scrollTop = scrollTop - scrollY;
+        }
+      });
+      // 鼠标抬起停止拖动
+      nav.addEventListener("mouseup", function () {
+        flag = false;
+      });
+      // 鼠标离开元素停止拖动
+      nav.addEventListener("mouseleave", function (event) {
+        flag = false;
+      });
+    },
+    // 拖拽开始事件
+    dragstart(e) {
+      this.startclientX = e.clientX; // 记录拖拽元素初始位置
+      this.startclientY = e.clientY;
+    },
+    // 拖拽完成事件
+    dragend(e) {
+      let x = e.clientX - this.startclientX; // 计算偏移量
+      let y = e.clientY - this.startclientY;
+      this.elLeft += x; // 实现拖拽元素随偏移量移动
+      this.elTop += y;
+    },
+    // 滚轮放大缩小事件
+    handleWeel(e) {
+      if (e.wheelDelta < 0) {
+        this.zoom -= 0.25;
+      } else {
+        this.zoom += 0.25;
+      }
+      if (this.zoom >= 5.5) {
+        this.zoom = 5.5;
+        return;
+      }
+      if (this.zoom <= 0.75) {
+        this.zoom = 0.75;
+        this.elLeft = 0;
+        this.elTop = 0;
+        return;
+      }
+
+      this.elWidth = this.initWidth * (100 / (1920 / 1.2)) * this.zoom;
+      this.elHeight = this.initHeight * (100 / (1080 / 2)) * this.zoom;
+    },
+
     /* 获取路段下拉数据 */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
@@ -261,6 +430,8 @@ export default {
 
     /* 左侧点击图片事件 */
     showImage(index) {
+      this.initBodySize();
+      this.zoom = 1;
       this.currentIndex = index;
       this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
       this.scrollToCurrentImage();
@@ -285,7 +456,7 @@ export default {
 
     /* 图片位置信息获取 */
     updateRects() {
-      this.rects = [];
+      // this.rects = [];
       this.rectsItem = {};
       if (this.defectData.length > 0) {
         const image = this.$refs.mainImage;
@@ -313,22 +484,23 @@ export default {
       const container = this.$refs.imageContainer;
       if (!image || !container) return {};
 
-      const scaleX = container.clientWidth / image.naturalWidth;
-      const scaleY = container.clientHeight / image.naturalHeight;
+      const scaleX = (this.elWidth * 16) / image.naturalWidth;
+      const scaleY = (this.elHeight * 16) / image.naturalHeight;
       const scale = Math.min(scaleX, scaleY);
 
       const renderedWidth = image.naturalWidth * scale;
       const renderedHeight = image.naturalHeight * scale;
 
-      const offsetX = (container.clientWidth - renderedWidth) / 2;
-      const offsetY = (container.clientHeight - renderedHeight) / 2;
+      const offsetX = (this.elWidth * 16 - renderedWidth) / 2;
+      const offsetY = (this.elHeight * 16 - renderedHeight) / 2;
+
       return {
         position: "absolute",
         left: `${left * scale + offsetX}px`,
         top: `${top * scale + offsetY}px`,
         width: `${width * scale}px`,
         height: `${height * scale}px`,
-        border: "2px solid #FF0000",
+        border: "2px solid #ffffff",
         boxSizing: "border-box",
       };
     },
@@ -377,6 +549,8 @@ export default {
       if (event.key === "ArrowUp") {
         event.preventDefault();
         if (this.currentIndex > 0) {
+          this.initBodySize();
+          this.zoom = 1;
           this.currentIndex--;
           this.selectedThumbnail = 0; // Reset when changing main images via keyboard
           this.scrollToCurrentImage();
@@ -385,6 +559,8 @@ export default {
       } else if (event.key === "ArrowDown") {
         event.preventDefault();
         if (this.currentIndex <= this.defectData.length - 1) {
+          this.initBodySize();
+          this.zoom = 1;
           this.currentIndex === this.defectData.length - 1
             ? this.currentIndex
             : this.currentIndex++;
@@ -413,7 +589,7 @@ export default {
 <style lang="scss" scoped>
 .content {
   width: 100%;
-  height: 45rem;
+  height: 46rem;
 }
 
 .image-content {
@@ -462,6 +638,11 @@ export default {
   height: 78%;
   width: 100%;
   background-color: rgb(228, 247, 248);
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   .view-content {
     width: 100%;
@@ -480,14 +661,17 @@ export default {
   .rect-overlay {
     position: absolute;
     pointer-events: none;
-    border: 2px solid red;
+    border: 2px solid #ffffff;
   }
 
   .view-info {
+    width: 60%;
     position: absolute;
-    left: 10%;
-    top: 0;
-    color: red;
+    left: 30%;
+    top: 17%;
+    z-index: 1;
+    color: #ffffff;
+    background-color: rgba(13, 49, 126, 0.486);
   }
 }
 

src/views/xj/inspection/confirmation-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 13:17:41
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-09 10:33:28
+ * @LastEditTime: 2024-12-12 10:06:52
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
  * @Description: 巡检信息-病害确认
 -->
@@ -259,11 +259,10 @@
       title="查看图片"
       :visible.sync="showImageDialog"
       width="75rem"
-      append-to-body
       destroy-on-close
       @close="imgCancel"
     >
-      <div class="image-container" ref="imageContainer">
+      <div class="image-container" v-if="showImageDialog" ref="imageContainer">
         <img
           :src="currentImageItem.mediaUrl"
           alt="Main Image"
@@ -284,8 +283,8 @@
       title="影像模式"
       :visible.sync="showCheckImg"
       width="85rem"
-      append-to-body
       destroy-on-close
+      :close-on-click-modal="false"
       @close="checkCancel"
     >
       <image-dialog