[完善]完善重点部位查看图片

src/app/key-unit/key-site/key-site.component.html

@@ -96,11 +96,11 @@
             </ng-container>
             <ng-container matColumnDef="img">
               <th mat-header-cell *matHeaderCellDef>图片</th>
-              <td mat-cell *matCellDef="let element">
-                <a href="javascript:void(0);" (click)='seeImg(element.imageUrls,key)' style="color: blue;">查看图片</a>
-                <div id="viewerjs{{key}}" style="display: none;" >
-                  <img *ngFor="let i of element.imageUrls" [src]="i" alt=""(click)="xxx()">
-                </div>
+              <td mat-cell *matCellDef="let element;let x = index">
+                <a href="javascript:void(0);" style="color: blue;" (click)='seeImg(element.imageUrls)'>查看图片</a>
+                <!-- <div id="viewerjs{{key}}" style="display: none;" >
+                  <img *ngFor="let i of element.imageUrls" [src]="i" alt="">
+                </div> -->
               </td>
             </ng-container>
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/key-unit/key-site/key-site.component.scss

@@ -42,8 +42,8 @@ table {
 .rotateC {transform: rotate(270deg) scale(0.75);}
 //预览图片
 .previewImgBox {
-  width: 800px;
-  height: 650px;
+  width: 6.835938rem;
+  height: 5.566406rem;
   text-align: center;
   img{
     width: auto;
@@ -51,12 +51,13 @@ table {
     max-width: 100%;
     max-height: 100%;}
 }
-.previewImgBottom {
-  text-align: center;
-  height: 30px;
-  margin: 20px auto;
-}
-.imgdialog{
-  width: 800px;
-  height: 650px;
-}
+  .previewImgBottom {
+    text-align: center;
+    height: 30px;
+    margin: 20px auto;
+  }
+  .imgdialog{
+    width: 6.835938rem;
+    height: 5.859375rem;
+    overflow-y: auto;
+  }

src/app/key-unit/key-site/key-site.component.ts

@@ -148,16 +148,15 @@ export class KeySiteComponent implements OnInit {
   }
 
   //查看图片
-  seeImg (e,key) {
+  seeImg (e) {
     if (e.length) {
-      // let data = e
-      // const dialogRef = this.dialog.open(KeySiteImgs, {//调用open方法打开对话框并且携带参数过去
-      //   width: '820px',
-      //   height:'670px',data});
-      // dialogRef.afterClosed().subscribe();
-      var image = new Viewer(document.getElementById(`viewerjs${key}`),{
-        url: 'data-original'
-      });
+      let data = e
+      const dialogRef = this.dialog.open(KeySiteImgs, {//调用open方法打开对话框并且携带参数过去
+       data});
+      dialogRef.afterClosed().subscribe();
+      // var image = new Viewer(document.getElementById(`viewerjs${key}`),{
+      //   url: 'data-original'
+      // });
       // document.getElementById('viewerjs').click();
       this.xxx()
     } else {