修改参数手机清单的催办

jero-web/src/views/projectManagement/projectNonConformance/moudles/addModel.vue

@@ -457,6 +457,7 @@
           </a-row>
         </a-form-model>
       </a-spin>
+      <viewImg ref="viewImgRef"/>
       <div class="drawer-bootom-button">
         <a-button style="margin-right:  8px" @click="handleCancel">{{$t('cancel')}}</a-button>
         <a-button @click="handleSubmit" v-if="!disabled" type="primary" :loading="confirmLoading">{{$t('submit')}}
@@ -1057,14 +1058,14 @@
       },
       progressTrackingOpenClick(e) {
         if (e.target.localName == 'img') {
-          ImagePreview(
-            {
-              images: [
-                e.target.currentSrc
-              ],
-              closeable: true
-            })
-          // this.$refs.viewImgRef.getData(e.target.currentSrc)
+          // ImagePreview(
+          //   {
+          //     images: [
+          //       e.target.currentSrc
+          //     ],
+          //     closeable: true
+          //   })
+          this.$refs.viewImgRef.getData(e.target.currentSrc)
         }
       }
     }

jero-web/src/views/projectManagement/projectNonConformance/moudles/detilModel.vue

@@ -229,11 +229,12 @@
           </a-row>
         </a-form-model>
       </a-spin>
+      <viewImg ref="viewImgRef"/>
       <div class="drawer-bootom-button">
         <a-button style="margin-right:  8px" @click="handleCancel">{{$t('close')}}</a-button>
       </div>
     </a-drawer>
-    <viewImg ref="viewImgRef"/>
+
   </div>
 </template>
 
@@ -427,14 +428,14 @@
       },
       progressTrackingOpenClick(e) {
         if (e.target.localName == 'img') {
-          ImagePreview(
-            {
-              images: [
-                e.target.currentSrc
-              ],
-              closeable: true
-            })
-          // this.$refs.viewImgRef.getData(e.target.currentSrc)
+          // ImagePreview(
+          //   {
+          //     images: [
+          //       e.target.currentSrc
+          //     ],
+          //     closeable: true
+          //   })
+          this.$refs.viewImgRef.getData(e.target.currentSrc)
         }
       },
       openClick(item) {

jero-web/src/views/projectManagement/projectNonConformance/moudles/viewImg.vue

@@ -1,17 +1,17 @@
 <template>
-  <a-modal
-    :title="$t('view')"
-    :width="800"
-    :visible="visible"
-    :maskClosable="false"
-    :footer="null"
-    @cancel="Cancel"
-  >
-    <div class="viewImgBox">
-      <img class="viewImg" :src="srcUrl" alt="">
-    </div>
 
-  </a-modal>
+  <div v-if="visible"
+       @mousewheel="rollImg($event)"
+       @mousedown="moveBox"
+       @mouseup="upBox"
+       class="imgBox left">
+    <div class="imgBoxBox"></div>
+    <img ref="bigImage"
+         id="pic"
+         @mousedown="move"
+         class="viewImg" src="../../../../assets/pdf4.jpg" alt="">
+  </div>
+
 </template>
 
 <script>
@@ -20,7 +20,16 @@
     data() {
       return {
         visible: false,
-        srcUrl: ''
+        srcUrl: '',
+        zoomD: 1,
+        x: 0,
+        y: 0,
+        startx: '',
+        starty: '',
+        endx: 0,
+        endy: 0,
+        firstTime: '',
+        lastTime: ''
       }
     },
     methods: {
@@ -28,8 +37,71 @@
         this.visible = false
       },
       getData(val) {
+        this.zoomD = 1
         this.srcUrl = val
         this.visible = true
+      },
+      //大
+      large() {
+        this.$nextTick(() => {
+          this.zoomD += 0.10
+          document.querySelector('.viewImg').style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`
+        })
+      },
+      // 小
+      Small() {
+        this.$nextTick(() => {
+          if (this.zoomD > 0.2) {
+            this.zoomD -= 0.10
+          }
+          document.querySelector('.viewImg').style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`
+        })
+      },
+
+      rollImg(e) {
+        let direction = e.deltaY > 0 ? 'down' : 'up'
+        if (direction === 'up') {
+          // 滑轮向上滚动
+          this.large()
+        } else {
+          // 滑轮向下滚动
+          this.Small()
+        }
+      },
+      //移动demo
+      move(e) {
+        e.preventDefault()
+        // 获取元素
+        var personBox = document.querySelector('.left')
+        var img = document.querySelector('.viewImg')
+        var x = e.pageX - img.offsetLeft
+        var y = e.pageY - img.offsetTop
+
+        // 添加鼠标移动事件
+        personBox.addEventListener('mousemove', move)
+
+        function move(e) {
+          img.style.left = e.pageX - x + 'px'
+          img.style.top = e.pageY - y + 'px'
+        }
+
+        // 添加鼠标抬起事件，鼠标抬起，将事件移除
+        img.addEventListener('mouseup', function() {
+          personBox.removeEventListener('mousemove', move)
+        })
+        // 鼠标离开父级元素，把事件移除
+        personBox.addEventListener('mouseout', function() {
+          personBox.removeEventListener('mousemove', move)
+        })
+      },
+      moveBox() {
+        this.firstTime = new Date().getTime()
+      },
+      upBox() {
+        this.lastTime = new Date().getTime()
+        if (this.lastTime - this.firstTime < 200) {
+          this.visible = false
+        }
       }
     }
   }
@@ -42,6 +114,39 @@
   }
 
   .viewImg {
+    width: auto;
+    z-index: 1000;
+    position: absolute;
+  }
+
+  .imgBox {
     width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+  }
+
+  ::v-deep .ant-modal-body {
+    padding: 0 !important;
+  }
+
+  ::v-deep .ant-modal-close {
+    display: none;
+  }
+
+  .imgBoxBox {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #000;
+    opacity: 0.5;
+    z-index: 1000;
   }
 </style>