ShangHaiYuan-AnXin/src/app/plan-audit/realistic-picture-look/realistic-picture.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FileUploader } from 'ng2-file-upload';
import { MatPaginator } from '@angular/material/paginator';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import Swiper from 'swiper';
import { Router,ActivatedRoute } from '@angular/router'

@Component({
  selector: 'app-realistic-picture-look',
  templateUrl: './realistic-picture.component.html',
  styleUrls: ['./realistic-picture.component.scss']
})
export class RealisticPictureLookComponent implements OnInit {
  uploader:FileUploader = new FileUploader({ //初始化上传文件
    url: `/api/Objects/PlanPlatform/${this.route.snapshot.queryParams.id}/RealImgs`,  
    method: "POST",    
    itemAlias: "uploadedfile",
    autoUpload: false,
    removeAfterUpload:true,
  }); 

  constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }

  ngOnInit(): void {
    let companyId = this.unitId
    this.http.get('/api/RealityImageGroups',{params:{
      companyId : companyId
    }}).subscribe((data:any)=>{
      this.allRealPicture = data
      this.selectReal = data[0]
      this.getAllRealPicture()
    })
    
  }

  unitId:any = '5e9964caa760a059e84512e9'

  companyId:any; //单位编号
  allRealPicture:any=[]; //所有实景图文件
  selectReal:any; //选中的实景图文件
  selectRealIndex:number=0; //选中的实景图文件下标
  allImages:any=[]; //实景图文件对应所有的实景图
  isDownload:boolean = false; //是否批量下载
  downloadList:any = []; //选中需要下载的图片

  //分页
  @ViewChild(MatPaginator, {static: true}) 
  paginator: MatPaginator;
  length:any; //共多少条数据
  pageSize:any = '12'; //每页条数
  pageSizeOptions: number[] = [12] //设置每页条数
  PageNumber:any; //第几页

  //分页切换
  chagePage (e) {
    this.PageNumber = e.pageIndex+1
    this.getAllRealPicture()
  }

  //获取所有实景图分组
  getAllGrouping () {
    let companyId = this.unitId
    this.http.get('/api/RealityImageGroups',{params:{
      companyId : companyId 
    }}).subscribe((data:any)=>{
      this.allRealPicture = data
      this.selectReal = data[this.selectRealIndex]
    })
  }

  //获取实景图分组对应实景图
  getAllRealPicture () {
    if (this.selectReal) {
      let data ={
        groupId: this.selectReal.id,
        PageNumber: this.PageNumber || 1,
        pageSize: this.pageSize,
      }
      this.http.get('/api/RealityImages',{params:data}).subscribe((data:any)=>{
        this.allImages = data.items 
        // console.log(789,this.allImages)
        this.length = data.totalCount
        this.pageSize = data.pageSize
        this.downloadList = []
        //console.log(this.allImages)
        this.allImages.forEach(element => { //每张图片设置选中状态为false
          element.newImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` //处理图片URL地址
          element.checked = false //图片是否选中布尔值
          element.nameStart = element.name.substring(0,element.name.lastIndexOf(".")); //图片名称前缀
          element.nameEnd = element.name.substring(element.name.lastIndexOf("."),element.name.length); //图片名称后缀
        });

      })
    }
  }

  //切换左侧实景图文件
  changeReal (e,index) {
    //this.allImages=[]
    if (this.selectRealIndex != index) {
      this.selectReal = e
      this.selectRealIndex = index
      this.isDownload = false
      this.downloadList = []
      this.getAllRealPicture()
    }
    
  }

  //选择批量下载 
  download () {
    this.isDownload = !this.isDownload
    if (!this.isDownload) { //取消批量下载时数组清空
      this.allImages.forEach(element => {element.checked = false});
      this.downloadList = []
    }
  }
 
  // 预览图片---批量选择图片
  operation (e,index) {
    if (this.isDownload) { //批量选择图片
      e.checked = !e.checked
      if (e.checked==true) {this.downloadList.push(e)} 
      else {this.downloadList.splice(this.downloadList.findIndex(item => item.id === e.id), 1)}
    } else { //预览图片
      let data = {
        allImages:this.allImages,
        imgIndex: index}
      let dialogRef = this.dialog.open(previewImg3,
        {width: '1600px',
        height:'900px',data});
      dialogRef.afterClosed().subscribe();   
    }

  }

  //新建实景图文件
  addReal () {
    
  }

  //编辑实景图文件
  editReal () {

  }

  //删除实景图文件
  delete () {
    let companyId = this.unitId
    if (this.selectReal) {
      let isDelete = confirm('您确定要删除吗')
      if (isDelete) {
        this.http.delete(`/api/RealityImageGroups/${this.selectReal.id}`).subscribe(data=>{
          this.http.get('/api/RealityImageGroups',{params:{
            companyId : companyId
          }}).subscribe((data:any)=>{
            this.allRealPicture = data
            this.selectReal = data[this.selectRealIndex]
            this.allImages = []
            this.getAllRealPicture()
          })
        })
      }
    }
  }



  //实景图修改
  preservationImg (e) {
    let data = {
      id:e.id,
      name:e.nameStart+e.nameEnd,
      imageUrl:e.imageUrl,
      realityImageGroupId:e.realityImageGroupId
    }
    this.http.put(`/api/RealityImages/${e.id}`,data).subscribe(data=>{
      this.getAllRealPicture()
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('图片修改成功','确定',config);
    })
  }

  //实景图删除
  deleteImg (e) {
    let isDelete = confirm('您确定要删除吗')
    if (isDelete) {
      this.http.delete(`/api/RealityImages/${e.id}`).subscribe(data=>{
        this.getAllRealPicture()
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('图片删除成功','确定',config);
      })
      this.http.delete(`/api/Objects/PlanPlatform/${e.imageUrl}`).subscribe(data=>{})
    }
  }





  isLoading:boolean = false; //loading加载
  //上传文件↓
  file:any; //上传的文件
  objectName:any; //上传对象名
  uploadId:any; //上传分块上传事件编号

  //change选择文件
  uploadFile (e) {
    if (this.selectReal) {
      this.file = e.target.files[0] || null //上传的文件
      let URL = window.URL.createObjectURL(this.file)
      var img = new Image()
      img.src = URL
      let that = this
      img.onload = function () {
        if(img.width>=4096 || img.height>=5000 ){ 
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          that.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config);
          that.uploader.clearQueue(); //清空input控件文件
          (<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
        }else{ that.startUploading() }
      } //onload
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择或创建实景图文件夹','确定',config);
      this.uploader.clearQueue(); //清空input控件文件
      (<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
    }
  }

  //上传文件
  startUploading () {
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片
    let maxdSize = 20 * 1024 * 1024 //限制20MB

    if (file && fileSize<=shardSize) { //上传文件<=5MB时
      this.uploader.queue[0].upload();//开始上传
      this.uploader.queue[0].onSuccess = (response, status, headers) => {    
        if (status == 201) { // 上传文件成功,上传文件后获取服务器返回的数据
          let tempRes = JSON.parse(response);
          this.objectName = tempRes.objectName
          this.addRealImg()
        }else { // 上传文件后获取服务器返回的数据错误
          let tempRes = JSON.parse(response);  
        }};
    } else if (file && fileSize>shardSize && fileSize<maxdSize) { //上传文件>5MB时,分块上传
      let data = {filename: file.name}
      this.isLoading = true
      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.companyId}/RealImgs`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
        this.objectName = data.objectName
        this.uploadId = data.uploadId
        this.subsectionUploading()
      })
    }

  }

  PartNumberETag:any=[]; //每次返回需要保存的信息
  //开始分段上传
  async subsectionUploading () {
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段

    for (let i = 0;i < allSlice;i++) { //循环分段上传
        let start = i * shardSize //切割文件开始位置
        let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
        let formData = new FormData()
        formData.append("file",file.slice(start, end))

        //同步写法实现异步调用
        let result = await new Promise((resolve, reject) => {
          // await 需要后面返回一个 promise 对象
          this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
              let msg = {
                "partNumber":data.partNumber || null,
                "eTag": data.eTag || null}
              resolve(msg) // 调用 promise 内置方法处理成功
          })
        });
        this.PartNumberETag.push(result)
        if (this.PartNumberETag.length === allSlice) {this.endUploading()}
    }//for循环

  }

  //完成分块上传
  endUploading () {
    let data = this.PartNumberETag
    let paramsData = {uploadId:this.uploadId}
    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
      this.addRealImg() //上传完成后,发送请求创建实景图
      this.isLoading = false
      this.uploader.clearQueue(); //清空input控件文件
      this.PartNumberETag =[] //清空保存返回的信息
    })
  }

  //上传图片成功后获取url地址发送请求创建实景图
  addRealImg () {
    let data = {
      name: this.file.name,
      imageUrl:this.objectName,
      realityImageGroupId: this.selectReal.id,
    }
    this.http.post('/api/RealityImages',data).subscribe(data=>{
      (<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
      this.getAllRealPicture()
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('图片上传成功','确定',config);
    })
  }



  //批量下载↓
  //开始下载
  async batchDownload () {
    if (this.downloadList.length) { //开始批量循环下载
      this.isLoading = true
      for (let i=0;i<this.downloadList.length;i++) {
        let result =  await new Promise ((result,reject)=>{
          this.http.get(`/api/Objects/PlanPlatform/${this.downloadList[i].imageUrl}`,{responseType: 'blob'},).subscribe(data=>{ 
            let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", this.downloadList[i].name);
            document.body.appendChild(link);
            link.click();
            result('success')})
        })
        if(i == this.downloadList.length-1) { //判断是否下载完毕
          this.isLoading = false
          this.isDownload = false
          this.allImages.forEach(element => {element.checked = false});
          this.downloadList = []}

      } //for循环
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择图片','确定',config);}
  }





}



//预览图片组件
@Component({
  selector: 'app-previewImg',
  templateUrl: './previewImg.html',
  styleUrls: ['./realistic-picture.component.scss']
})
export class previewImg3 {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewImg3>,
    @Inject(MAT_DIALOG_DATA) public data) { }
    testSwiper: Swiper;

  ngOnInit(): void {
    this.allImages = this.data.allImages
    this.allImages.forEach(element => {
      element.previewImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?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}
  }

}