[完善]熟悉路线页面增加查看大图

src/app/ui/know-route/know-route.component.html

@@ -19,8 +19,8 @@
     </div>
     <div class="bottomAll" >
         <div class="upload">
-            <div class="uploadingimg">
+            <div class="uploadingimg" id="viewerjs">
-                <img [src]="imgsrc" alt="" style="width: 299px; height: 170px;" >
+                <img [src]="imgsrc"  [attr.data-original]="imgsrc.split('?')[0]" alt="" style="width: 299px; height: 170px;" >
             </div>
         </div>
         <div class="image"  >

src/app/ui/know-route/know-route.component.ts

@@ -10,7 +10,7 @@ import { Component, OnInit } from '@angular/core';
 import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
 import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
 import { FileUploader, FileItem } from 'ng2-file-upload'
-
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-know-route',
   templateUrl: './know-route.component.html',
@@ -23,32 +23,9 @@ export class KnowRouteComponent implements OnInit {
   ngOnInit(): void {
     // this.uploadSucced = JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) || []
   }
-  unitinfo:any={
+ 
-    id: '',
+
-    name: '', //单位信息名字
+
-    usci: '', //单位信用代码
-    contacts: '', //联系人
-    phone: '', //联系电话
-    address: '', //单位地址
-    imageUrl: '', //图片地址
-    location: '', //单位地理位置
-    modifiedTime: '', //信息修改时间
-    organizationId: '', //所属组织机构
-    organizationName: '', //组织机构名称
-    buildingTypes: [
-      {
-        id:'',
-        name:''
-      }
-    ]
-  }
-  uploader:FileUploader = new FileUploader({    //初始化上传事件 ng2-upload
-    url: `/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,   
-    method: "POST",    
-    itemAlias: "uploadedfile",
-    autoUpload: false,
-    removeAfterUpload:true //上传之后是否在队列中移除，如果不移除就会出现无法上传第二次的情况
-  });
   //input框显隐
   inputShow=true
   //控制底部div显隐
@@ -157,6 +134,7 @@ export class KnowRouteComponent implements OnInit {
       }
     }
   }
+
   //完成分块上传
   endUploading() {
     let data = this.PartNumberETag
@@ -165,45 +143,41 @@ export class KnowRouteComponent implements OnInit {
       this.imgsrc = `/api/Objects/PlanPlatform/${this.objectName}?x-oss-process=image/resize,m_fill,h_170,w_299`
       this.isspinner = false
       this.PartNumberETag = []
-      this.uploader.clearQueue(); //清空input控件文件
     })
   }
+
   //熟悉部位点击事件
   addRoute(event,item){
-    //console.log(event.target.innerHTML)
-    //this.knowRoute+=event.target.innerHTML+"🠖"
     this.showorfalse = "show"
     this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"})
     this.uploadSucced.push({name:item.name,src:"",smark:""})
-    // console.log(this.chooseid)
     console.log(this.uploadSucced)
   }
+
   clickName
   savekey
   uploadSucced:any = JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) || []//上传成功暂存对象
+  gallery
   //熟悉路线点击事件
   knowroutwClick(event,key,item){
-    console.log(123,key)
+    setTimeout(() => {
-    //console.log(this.chooseid)
+      if(document.getElementById('viewerjs')){
+        this.gallery = new Viewer(document.getElementById('viewerjs'),{
+          url: 'data-original'
+        });
+      }
+      
+    }, 0);
     this.showorfalse="show"
     this.uploadSucced[key].smark = this.textareazhi
     this.chooseid=key
-    //event.target.style.border="1px solid #000000"
     this.clickName=item.name+key+sessionStorage.getItem("companyId")
     console.log(this.uploadSucced)
     if( JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) && JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src!=""){
       this.imgsrc=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src
       this.textareazhi=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].smark
       this.inputShow=false
-      //console.log(JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key])
     }else if(this.uploadSucced[key].src!=""){
-      //this.imgsrc=this.uploadSucced[0].src
-      /* for(var i=0;i<this.uploadSucced.length;i++){
-        if(this.uploadSucced[i].name==this.clickName){
-          console.log(this.uploadSucced[i].name)
-          this.imgsrc=this.uploadSucced[i].src
-        }else{this.imgsrc="../../../assets/images/upload.jpg"}
-      }  */
       this.imgsrc=this.uploadSucced[key].src
       this.inputShow=false
     }
@@ -215,14 +189,10 @@ export class KnowRouteComponent implements OnInit {
   }
   //保存点击事件
   savaClick(){
-   /*  for(var i=0;i<this.uploadSucced.length;i++){
-      localStorage.setItem(this.uploadSucced[i].name,this.uploadSucced[i].src)
-    } */
     this.uploadSucced[this.chooseid].smark=this.textareazhi
     localStorage.setItem(sessionStorage.getItem("companyId")+"xxx",JSON.stringify(this.uploadSucced))
     alert("保存成功")
     console.log(JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) )
-    //this.snackBar.open('上传成功','确定',config);
   }
 
 }

src/app/ui/training-recordinfo/training-recordinfo.component.html

@@ -21,7 +21,12 @@
                     </ng-template>
                     
                 </mat-tab>
-                <mat-tab label="熟悉路线"> <app-know-route></app-know-route> </mat-tab>
+                <mat-tab label="熟悉路线"> 
+                    <ng-template matTabContent>
+                        <app-know-route></app-know-route> 
+                    </ng-template>
+                    
+                </mat-tab>
                 <mat-tab label="单位基本情况">  
                     <ng-template matTabContent>
                         <app-basicinfo></app-basicinfo>