[新增]新增viewerjs图片查看插件

angular.json

@@ -29,7 +29,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "./node_modules/viewerjs/dist/viewer.css"
             ],
             "scripts": [
               "node_modules/echarts/dist/echarts.js",

package-lock.json

@@ -15838,6 +15838,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npm.taobao.org/viewerjs/download/viewerjs-1.8.0.tgz?cache=0&sync_timestamp=1604814503536&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fviewerjs%2Fdownload%2Fviewerjs-1.8.0.tgz",
+      "integrity": "sha1-jcYLVS0YwTZb7Gv+98IhqzBg8Yg="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",

package.json

@@ -34,6 +34,7 @@
     "ngx-perfect-scrollbar": "^8.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
+    "viewerjs": "^1.8.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

src/app/ui/all-file/all-file.component.html

@@ -149,7 +149,7 @@
     <a (click)="openlearn()" [href]='aHrefUnsafeLearnFun()'> <mat-icon style="vertical-align: middle; font-size: 24px;">account_balance</mat-icon> 战术学习<span>进入</span></a>
 </div>
 
-<div class="openSystem" *ngIf="!selectedDataBank.includes('/')">
+<div class="openSystem" *ngIf="!selectedDataBank.includes('/') && (roleType =='1' || roleType == '2')">
     <a (click)="openmultirole()" [href]='aHrefUnsafeLearnFun2()'> <mat-icon style="vertical-align: middle; font-size: 24px;">account_balance</mat-icon> 多人电子沙盘推演系统<span>进入</span></a>
 </div>
 <div class="fixedBox" [hidden]="!uploadisLoading2">
@@ -160,3 +160,7 @@
     <li *ngFor="let item of checkedAllFiles">{{item.key}}</li>
 </ul>
 
+
+<div id="viewerjs">
+    
+</div>

src/app/ui/all-file/all-file.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit,ViewChild ,Inject,NgZone } from '@angular/core';
+import { Component, OnInit,ViewChild ,Inject,NgZone, ElementRef } from '@angular/core';
 import { SelectionModel } from '@angular/cdk/collections';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
@@ -9,6 +9,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
 import {UploadFilesComponent} from '../upload-files/upload-files.component';
 import { ComponentServiceService } from '../../component-service.service';
 import { DomSanitizer } from "@angular/platform-browser";
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-all-file',
   templateUrl: './all-file.component.html',
@@ -18,7 +19,7 @@ export class AllFileComponent {
   displayedColumns: string[] = ['select', 'name', 'weight', 'time'];
   dataSource:any = new MatTableDataSource;
   
-  constructor(private sanitizer: DomSanitizer,public emitService: ComponentServiceService,private http: HttpClient,public snackBar: MatSnackBar,public downloadFile:IsLoginService,public dialog: MatDialog,private zone: NgZone) { }
+  constructor(private  elementRef: ElementRef,private sanitizer: DomSanitizer,public emitService: ComponentServiceService,private http: HttpClient,public snackBar: MatSnackBar,public downloadFile:IsLoginService,public dialog: MatDialog,private zone: NgZone) { }
   isCancel:boolean = false //搜索框的X是否显示
   searchData:any = "搜索您的文件" //搜索框内容
   isClickFile:boolean = false //是否点击过文件
@@ -330,12 +331,25 @@ export class AllFileComponent {
   //点击列表每一条的名字
   clickName(e,item){
     e.stopPropagation()
-    if(item.type == "jpg" || item.type == "png" || item.type == "bmp"|| item.type == "gif" || item.type == "jpeg"&& !item.isDir){
-      const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
-        data: {url:item.key,type:"img"}
+    if(item.type == "jpg" || item.type == "JPG" || item.type == "png" || item.type == "PNG" || item.type == "bmp"|| item.type == "gif" || item.type == "jpeg"&& !item.isDir){
+      
+      let dom =  document.getElementById(`viewerjs`)
+      let pObjs = dom.childNodes;
+      let node = document.createElement("img")
+      node.style.display = "none";
+      node.src = "/api/Objects/drives/" + item.key;
+      node.id = 'imgxxx'
+      dom.appendChild(node)
+      setTimeout(() => {
+        let viewer = new Viewer(document.getElementById(`viewerjs`), {
+          hidden:()=>{
+            dom.removeChild(pObjs[0]);
+            viewer.destroy();
+          }
         });
+        node.click();
+      }, 0);
       
-      this.downloadFile.handleData(item.key,"查看")
     }else if(item.type == "mp4" || item.type == "MP4" && !item.isDir){
       const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
         width: '1400px',