[修改]三四五级预案图片查看改为图片插件

4 years ago · 7972f15989
5 changed files with 136 additions and 5 deletions
--- a/src/app/plan-management/entry-plan-look/entry-plan-look.component.scss
+++ b/src/app/plan-management/entry-plan-look/entry-plan-look.component.scss
@ -124,4 +124,51 @@
  }
  .mat-dialog-container{
      padding: 0;
-  }
+  }
+  //预览图片旋转角度
+.rotateA {transform: rotate(90deg) scale(0.75);}
+.rotateB {transform: rotate(180deg)}
+.rotateC {transform: rotate(270deg) scale(0.75);}
+@media screen and (max-width:1200px){
+  .bigimgbox{
+    width: 880px;
+    height: 580px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 475px;
+      text-align: center;
+    }
+  }
+}
+@media screen and (min-width:1200px) and (max-width:1400px){
+  .bigimgbox{
+    width:880px;
+    height: 610px;
+    //预览图片
+    .previewImgBox {
+      width: 800px;
+      height: 500px;
+      text-align: center;
+    }
+  }
+  
+}
+@media screen and (min-width:1400px){
+  .bigimgbox{
+    width:1110px;
+    height: 860px;
+    //预览图片
+    .previewImgBox {
+      width: 900px;
+      height: 100%;
+      text-align: center;
+    }
+    .previewImgBottom {
+        text-align: center;
+        height: 30px;
+        margin: 20px auto;
+      }
+  }
+  
+}
--- a/src/app/plan-management/entry-plan-look/entry-plan-look.component.ts
+++ b/src/app/plan-management/entry-plan-look/entry-plan-look.component.ts
@ -13,6 +13,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import { async } from '@angular/core/testing';
 import { Viewer } from 'photo-sphere-viewer';
 import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
+import Swiper from 'swiper';
 declare var CryptoJS
@Component({
  selector: 'app-entry-plan-look',
@ -103,7 +104,7 @@ export class EntryPlanLookComponent implements OnInit {
  }
  //查看预案
  lookPlan(e){
-    if(e.planType == 16||e.planType == 4){ 
+    if(e.planType == 16||e.planType == 4||e.planType == 8){ 
      // console.log(e.attachmentUrls)
      var index=e.attachmentUrls[0].indexOf("\/")
      if(e.attachmentUrls[0].substr(0,index)=='psw'){
@ -112,6 +113,12 @@ export class EntryPlanLookComponent implements OnInit {
          height:'800px',
          data: e.attachmentUrls[0]
        });
+      }else if(e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='JPG'||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='png'||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='jpeg'){
+        let data = e
+      const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
+      data:data.attachmentUrls,
+      });
+      dialogRef.afterClosed().subscribe();
      }
      else /* if(e.attachmentUrls[0].substr(e.attachmentUrls[0].length-4,e.attachmentUrls[0].length-1)=='docx'||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='pdf'
      ||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='doc'||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='DOC'
@ -990,6 +997,8 @@ export class AddPlanone {



+
+
 //下载文件弹出框
@Component({
  selector: 'downloadfile',
@ -1111,4 +1120,49 @@ export class PsViewer{
      
    });
  }
+}
+
+//普通图片弹窗
+@Component({
+  selector: 'imgdetails',
+  templateUrl: './previewImg.html',
+  styleUrls: ['./entry-plan-look.component.scss']
+})
+export class ImgDetails{
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<ImgDetails>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+    testSwiper: Swiper;
+
+    ngOnInit(): void {
+      //console.log(this.data)
+      this.allImages = []
+      this.data.forEach(element => {
+        element = `/api/Objects/PlanPlatform/${element}?x-oss-process=image/auto-orient,1`
+        this.allImages.push(element)
+      });
+      //this.allImages.push(`${this.data.attachmentUrls[0]}?x-oss-process=image/auto-orient,1`)
+    }
+  
+    ngAfterViewInit() {
+      this.testSwiper = new Swiper('.swiper-container', {
+        lazy: true,
+        direction: 'horizontal',
+        loop: false,
+  
+        // 如果需要前进后退按钮
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        }
+      });
+    }
+  
+    allImages:any; //展示所有的图片
+    rotationAngle:number=0; //旋转角度
+  
+    //旋转图片
+    rotate () {
+      this.rotationAngle = this.rotationAngle+90
+      if (this.rotationAngle === 360) {this.rotationAngle = 0}
+    }
 }
--- a/src/app/plan-management/entry-plan-look/previewImg.html
+++ b/src/app/plan-management/entry-plan-look/previewImg.html
@ -0,0 +1,29 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2021-05-18 15:09:43
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-05-18 15:25:35
+-->
+
+<div class="bigimgbox">
+  <!-- <div mat-dialog-title>图片详情</div> -->
+  <div class="swiper-container">
+      <div class="swiper-wrapper">
+          <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
+            <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy"
+             [attr.data-src]="item">
+             <div class="swiper-lazy-preloader"></div>
+          </div>
+      </div>
+  
+      <!-- 如果需要导航按钮 -->
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+  </div>
+  
+  <div class="previewImgBottom">
+    <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
+  </div>
+</div>
--- a/src/app/plan-management/plan-management.module.ts
+++ b/src/app/plan-management/plan-management.module.ts
@ -64,13 +64,14 @@ import { MaintainUpComponent } from './maintain-up/maintain-up.component'
 import { GkPsViewer } from './pass-plan/pass-plan.component'
 import { GkhtmlPsViewer }from './open-plan/open-plan.component';
 import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component'
+import { ImgDetails } from './entry-plan-look/entry-plan-look.component'



@NgModule({
  declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent,AddPlanone,PlanType,AuditSatus,PlanLevel,DownloadFile,AuditResult,ChangeName, 
    WebLookComponent, OnetwoEntryPlanComponent,newunitComponent, MeetPlanComponent,newunitMeet, TypePlanComponent,newunitType,PsViewer,onetwoAuditResult,meetAuditResult,
-    typeAuditResult, MaintainUpComponent,GkPsViewer,GkhtmlPsViewer,UnitInfo, ReinforcePlanComponent, state],
+    typeAuditResult, MaintainUpComponent,GkPsViewer,GkhtmlPsViewer,UnitInfo, ReinforcePlanComponent, state,ImgDetails],
  imports: [
    CommonModule,
    PlanManagementRoutingModule,
--- a/src/app/statistic-analysis/all-plan/all-plan.component.ts
+++ b/src/app/statistic-analysis/all-plan/all-plan.component.ts
@ -4,7 +4,7 @@
 * @Author: sueRimn
 * @Date: 2021-03-15 11:32:30
 * @LastEditors: sueRimn
- * @LastEditTime: 2021-04-28 15:33:00
+ * @LastEditTime: 2021-05-17 17:19:25
 */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@ -82,7 +82,7 @@ export class AllPlanComponent implements OnInit {

  //查看详情
  lookPlan(e){
-    if(e.planType == 16||e.planType == 4){ 
+    if(e.planType == 16||e.planType == 4||e.planType == 8){ 
      var index=e.attachmentUrls[0].indexOf("\/")
      if(e.attachmentUrls[0].substr(0,index)=='psw'){
        const dialogRef = this.dialog.open(PsViewer, {