From 7972f15989bb8b06969f977aff015e2758bb8b6d Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Tue, 18 May 2021 16:41:06 +0800 Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=94=B9]=E4=B8=89=E5=9B=9B=E4=BA=94?= =?UTF-8?q?=E7=BA=A7=E9=A2=84=E6=A1=88=E5=9B=BE=E7=89=87=E6=9F=A5=E7=9C=8B?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=9B=BE=E7=89=87=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entry-plan-look.component.scss | 49 +++++++++++++++- .../entry-plan-look.component.ts | 56 ++++++++++++++++++- .../entry-plan-look/previewImg.html | 29 ++++++++++ .../plan-management/plan-management.module.ts | 3 +- .../all-plan/all-plan.component.ts | 4 +- 5 files changed, 136 insertions(+), 5 deletions(-) create mode 100644 src/app/plan-management/entry-plan-look/previewImg.html diff --git 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 index 59234db..2826925 100644 --- 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; - } \ No newline at end of file + } + //预览图片旋转角度 +.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; + } + } + +} \ No newline at end of file diff --git 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 index 0a8eddf..18116ec 100644 --- 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, + @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} + } } \ No newline at end of file diff --git a/src/app/plan-management/entry-plan-look/previewImg.html b/src/app/plan-management/entry-plan-look/previewImg.html new file mode 100644 index 0000000..2eb4a8a --- /dev/null +++ b/src/app/plan-management/entry-plan-look/previewImg.html @@ -0,0 +1,29 @@ + + +
+ +
+
+
+ +
+
+
+ + +
+
+
+ +
+ +
+
diff --git a/src/app/plan-management/plan-management.module.ts b/src/app/plan-management/plan-management.module.ts index 04b596f..0abed77 100644 --- 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, diff --git a/src/app/statistic-analysis/all-plan/all-plan.component.ts b/src/app/statistic-analysis/all-plan/all-plan.component.ts index 57eb55b..25ebff0 100644 --- 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, {