[完善]油站信息查看图片

src/app/pages/oil-station-info/oil-station-info.component.html

@@ -205,7 +205,7 @@
               </td>
             </tr>
           </table>
-          <table class="imgtable">
+          <table class="imgtable" id="images">
             <tr>
               <td class="head">营业执照</td>
               <td colspan="3" class="imgbox">

src/app/pages/oil-station-info/oil-station-info.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import * as moment from 'moment';
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-oil-station-info',
   templateUrl: './oil-station-info.component.html',
@@ -49,12 +50,15 @@ export class OilStationInfoComponent implements OnInit {
 
     this.getInfo()
 
+
+
   }
 
 
   validityTime: any = []//营业执照有效期
 
   //获取油站信息
+  gallery
   getInfo() {
     this.http.get('/api/services/app/GasStation/Get', {
       params: {
@@ -72,6 +76,14 @@ export class OilStationInfoComponent implements OnInit {
       this.validityTime[1] = data.result.validityEndTime
       this.validityTime = [...this.validityTime]
       console.log(this.validityTime)
+      setTimeout(() => {
+        this.gallery = new Viewer(document.getElementById('images'), {
+          show: () => {  // 动态加载图片后，更新实例
+            this.gallery.update();
+          },
+        });
+      }, 0);
+
     }, err => {
       console.log('油站错误信息', err.error.error.message)
     })
@@ -181,17 +193,25 @@ export class OilStationInfoComponent implements OnInit {
   }
   //设置文件路径并上传
   postFilePath
-  openFileSelect(file: File, extensionPath: string) {
+  async openFileSelect(file: File, extensionPath: string) {
     this.postFilePath = extensionPath;
     let fileSize = file.size || null //上传文件的总大小
     let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
     if (fileSize >= shardSize) //  超过5MB要分块上传
     {
-      this.postFileByMul(file);
+      await this.postFileByMul(file);
+      setTimeout(() => {
+        this.gallery.destroy()
+        this.gallery = new Viewer(document.getElementById('images'));
+      }, 0);
     }
     else //普通上传
     {
-      this.postFile(file);
+      await this.postFile(file);
+      setTimeout(() => {
+        this.gallery.destroy()
+        this.gallery = new Viewer(document.getElementById('images'));
+      }, 0);
     }
   }
   //上传文件

src/app/ui/tabbar/tabbar.component.html

@@ -16,8 +16,8 @@
     </a>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
-        <li nz-menu-item (click)="navChange('/home/oliStationInfo')">基本信息</li>
-        <li nz-menu-item (click)="navChange('/home/equipmentInfo')">器材信息</li>
+        <li nz-menu-item (click)="navChange('/oliStationInfo')">基本信息</li>
+        <li nz-menu-item (click)="navChange('/equipmentInfo')">器材信息</li>
         <li nz-menu-item (click)="navChange('/system/organization')">系统管理</li>
         <li nz-menu-item (click)="signOut()">退出系统</li>
       </ul>