diff --git a/angular.json b/angular.json index b7c2067..2c6e680 100644 --- a/angular.json +++ b/angular.json @@ -29,11 +29,12 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "./node_modules/viewerjs/dist/viewer.css" ], "scripts": [ "node_modules/echarts/dist/echarts.js", - "src/assets/echarts/echarts.common.min.js" + "src/assets/echarts/echarts.common.min.js" ] }, "configurations": { diff --git a/package-lock.json b/package-lock.json index d88c972..efba5d2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ad99b89..4181002 100644 --- a/package.json +++ b/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": { diff --git a/src/app/ui/all-file/all-file.component.html b/src/app/ui/all-file/all-file.component.html index e6c7659..6e29c5f 100644 --- a/src/app/ui/all-file/all-file.component.html +++ b/src/app/ui/all-file/all-file.component.html @@ -149,7 +149,7 @@ account_balance 战术学习进入 -
+
account_balance 多人电子沙盘推演系统进入
@@ -160,3 +160,7 @@
  • {{item.key}}
  • + +
    + +
    diff --git a/src/app/ui/all-file/all-file.component.ts b/src/app/ui/all-file/all-file.component.ts index 26771f7..d40ca9a 100644 --- a/src/app/ui/all-file/all-file.component.ts +++ b/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',