You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.2 KiB
90 lines
2.2 KiB
4 years ago
|
/*
|
||
|
|
* @Descripttion:
|
||
|
|
* @version:
|
||
|
|
* @Author: sueRimn
|
||
|
|
* @Date: 2020-11-23 09:46:16
|
||
|
|
* @LastEditors: sueRimn
|
||
|
|
* @LastEditTime: 2020-11-23 09:53:45
|
||
|
|
*/
|
||
|
|
import { Component, OnInit, Inject } from '@angular/core';
|
||
|
|
import { HttpClient } from '@angular/common/http';
|
||
|
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
|
||
|
|
import Swiper from 'swiper';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'imagesdata',
|
||
|
|
templateUrl: './imagesdata.component.html',
|
||
|
|
styleUrls: ['./fire-facilities.component.scss']
|
||
|
|
})
|
||
|
|
export class ImagesData2 {
|
||
|
|
|
||
|
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImagesData2>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {}
|
||
|
|
|
||
|
|
ngOnInit(): void {
|
||
|
|
this.data.images.forEach(element => {
|
||
|
|
element.newImageUrl = `${element.propertyValue}?x-oss-process=image/resize,m_fill,h_170,w_299`
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//查看大图
|
||
|
|
seeImage (index) {
|
||
|
|
let data = {
|
||
|
|
allImages:this.data.images,
|
||
|
|
imgIndex: index}
|
||
|
|
let dialogRef = this.dialog.open(previewBigImg2,
|
||
|
|
{width: '1600px',
|
||
|
|
height:'900px',data});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'previewBigImg',
|
||
|
|
templateUrl: './previewImg.html',
|
||
|
|
styleUrls: ['./realistic-picture.component.scss']
|
||
|
|
})
|
||
|
|
export class previewBigImg2 {
|
||
|
|
|
||
|
|
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewBigImg2>,
|
||
|
|
@Inject(MAT_DIALOG_DATA) public data) { }
|
||
|
|
testSwiper: Swiper;
|
||
|
|
|
||
|
|
ngOnInit(): void {
|
||
|
|
this.allImages = this.data.allImages
|
||
|
|
this.allImages.forEach(element => {
|
||
|
|
element.previewImageUrl = `${element.propertyValue}?x-oss-process=image/auto-orient,1` //处理图片URL地址
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
this.testSwiper = new Swiper('.swiper-container', {
|
||
|
|
lazy: true,
|
||
|
|
initialSlide: this.data.imgIndex,
|
||
|
|
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}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|