[完善]预警弹窗查看

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

@@ -17,7 +17,12 @@
     </div>
     <div class="content">
         <div *ngIf="selectedType == 'img'" class="imgbox">
+            <ng-container *ngIf="isImage; else elseTemplate">
                 <img [src]="imgUrl" alt="">
+            </ng-container>
+            <ng-template #elseTemplate>
+                <iframe width="100%" height="100%" [src]="fileUrl" frameborder="0"></iframe>
+            </ng-template>
         </div>
         <div *ngIf="selectedType == 'video'" class="vediobox">
             <video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
@@ -32,8 +37,8 @@
             </ng-container>
             <ng-template #elseTemplate>
                 <div class="btn">
-                    <span *ngIf="!data.handleTime && isMisinformation" style="color: #FF4B65;cursor: pointer;margin-right: 20px;"
-                        (click)="misinformation()">误报</span>
+                    <span *ngIf="!data.handleTime && isMisinformation"
+                        style="color: #FF4B65;cursor: pointer;margin-right: 20px;" (click)="misinformation()">误报</span>
                     <span *ngIf="!data.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="submit()">提交</span>
                     <span *ngIf="data.handleTime" style="color: #4BFFD4;cursor: default;">已处置</span>
                 </div>

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 @Component({
@@ -11,7 +12,7 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 export class GetOutOfLineDetailsComponent implements OnInit {
   @Input() data: any
 
-  constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService, private modal: NzModalService, private initialModal: NzModalRef) { }
+  constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService, private modal: NzModalService, private initialModal: NzModalRef, private sanitizer: DomSanitizer) { }
 
 
   imgUrl: string
@@ -21,12 +22,35 @@ export class GetOutOfLineDetailsComponent implements OnInit {
 
 
   isMisinformation: boolean = false//误报按钮的显隐
+
+
+  isImage //传过来的文件是否是图片
+  fileUrl
   ngOnInit(): void {
     console.log(this.data)
     this.details = this.data.content1
-    this.imgUrl = this.data.violateImage
     this.vedioUrl = this.data.violateVideo
     this.content = this.data.handleRecord
+    this.imgUrl = this.data.violateImage
+
+
+    if (this.getFileType(this.imgUrl) == 'img') {
+      this.isImage = true
+    } else {
+      this.isImage = false
+
+      if (this.getFileType(this.imgUrl) == 'word') {
+        let arr = this.imgUrl.split('.')
+        arr[arr.length - 1] = 'pdf'
+        this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(arr.join('.'));
+      } else if (this.getFileType(this.imgUrl) == 'pdf') {
+        this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.imgUrl);
+      }
+
+    }
+
+
+
 
     let loginUserInfo
     if (sessionStorage.getItem('isGasStation') == 'true') {
@@ -45,6 +69,23 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   }
 
 
+  //获取文件格式
+  getFileType(name: string): string {
+    let suffix
+    if (name.substring(name.length - 4).includes('png') || name.substring(name.length - 4).includes('jpg') || name.substring(name.length - 4).includes('jpeg') || name.substring(name.length - 4).includes('webp')) {
+      suffix = 'img'
+    } else if (name.substring(name.length - 4).includes('doc') || name.substring(name.length - 4).includes('docx')) {
+      suffix = 'word'
+    } else if (name.substring(name.length - 4).includes('pdf')) {
+      suffix = 'pdf'
+    }
+    return suffix
+  }
+
+
+
+
+
   selectedType: string = 'img'
   contentType(type) {
     this.selectedType = type