From 4cf1ac2faab06081fc1deb6c61e4cc443d576ce7 Mon Sep 17 00:00:00 2001
From: jxjgmj <1351094127@qq.com>
Date: Tue, 28 Jun 2022 15:40:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E6=94=AF=E6=A8=A1=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectFront/highModulus/planConfig.vue   | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/views/projectFront/highModulus/planConfig.vue b/src/views/projectFront/highModulus/planConfig.vue
index c53e1362..04dc31c8 100644
--- a/src/views/projectFront/highModulus/planConfig.vue
+++ b/src/views/projectFront/highModulus/planConfig.vue
@@ -48,8 +48,8 @@
             </div>
             <div style="height: 100%" ref="mapbox">
             <vue-scroll style="height:calc(100% - 30px);">
-              <div class="img-box" :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
-                <img ref="map" v-if="activeImgUrl" style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
+              <div class="img-box" @mousewheel.prevent="rollImg"  :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
+                <img ref="map"  v-if="activeImgUrl"  style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
                 <ul class="point-list" v-if="activeImgUrl">
                   <li v-for="(item,index) in pointList" :key="index" :ref="'point'+index" :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}" >
                     <div class="point-dialog" :class="{'right_detail': item.mapY < 251 || item.mapX < 107}" :style="{'display': item.showDetail ? 'block':'none'}">
@@ -447,13 +447,28 @@ export default {
         },
         changeImgSize(val){
              if(val == 1){
-                this.imgZoom = this.imgZoom + 0.5
+                this.imgZoom = this.imgZoom + 0.2
                 console.log(this.imgZoom)
             }else if(val == 2){
                 this.imgZoom = (this.imgZoom - 0.5) <= 0 ? this.imgZoom:this.imgZoom - 0.5
                 console.log(this.imgZoom)
             }
         },
+     
+
+         // 缩放图片
+        rollImg() { 
+        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
+        var zoom = parseInt(this.$refs.map.style.zoom) || 100; 
+        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
+        zoom += event.wheelDelta / 12;
+            /* 最小范围 和 最大范围 的图片缩放尺度 */ 
+            if (zoom >= 80 && zoom <500) { 
+            this.$refs.map.style.zoom = zoom + "%"; 
+            }
+            return false; 
+        },
+
         // 添加鼠标监听事件
         move(val,e){
             console.log(val,e.pageX,e.pageY)
@@ -737,4 +752,7 @@ export default {
 .pointFixed{
   position: fixed;
 }
+
+
+
 </style>
\ No newline at end of file