ShangHaiYuan-AnXin/src/app/plan-audit/fire-facilities/imagesdata.component.ts

/*
 * @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}
  }

}