ShangHaiYuan-AnXin/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-06-16 13:56:54
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-06-17 10:01:26
 */
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-create-plan-online-five',
  templateUrl: './create-plan-online-five.component.html',
  styleUrls: ['./create-plan-online-five.component.scss']
})
export class CreatePlanOnlineFiveComponent implements OnInit {

  constructor(private http: HttpClient, private route: ActivatedRoute) { }


  planName: string //预案名称
  planLevel: string//预案级别
  ngOnInit(): void {
    this.planName = this.route.snapshot.queryParams.planName
    this.planLevel = this.route.snapshot.queryParams.planCategory
    console.log('级别', this.planLevel)
    this.getTemplateData()
    this.getUnitData()
  }


  //获得单位信息
  unitData: any
  getUnitData() {
    let paramsdata: any = {
      Name: this.route.snapshot.queryParams.unitName || '',
    }
    this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => {
      data.items.forEach(element => {
        if (element.id == this.route.snapshot.queryParams.companyId) {
          this.unitData = element
          console.log('单位列表信息', this.unitData)
        }
      });
    })
  }




  selectedItem: string = '封面'
  clickTitleItem(item) {
    item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
  }
  planTemplateData: any
  //获得模板信息
  getTemplateData() {
    this.http.get('/api/PlanTemplate').subscribe(data => {
      this.planTemplateData = JSON.parse(data[2].data).filter(item =>
        item.completed == true
      )
      console.log(this.planTemplateData)
      this.planTemplateData.forEach(element => {
        if (element.groupName == '重点图示') {
          if (!element.attribute) {
            element.attribute = [{ name: '', imgArr: [] }]
          }
        }
      });
    })
  }


  //重点图示增加分组
  addkeyImgItem() {
    this.planTemplateData.forEach(element => {
      if (element.groupName == '重点图示') {
        element.attribute.push({ name: '', imgArr: [] })
      }
    });
  }
  //重点图示删除指定分组
  deleteItem(key) {
    let isDelete = window.confirm('确定要删除该分组吗?分组下上传的图片将一同被删除!')
    if (isDelete) {
      this.planTemplateData.forEach(element => {
        if (element.groupName == '重点图示') {
          element.attribute.splice(key, 1)
        }
      });
    }
  }

  //重点图示上传图片
  file: any
  filechange(e) {
    this.file = e.target.files[0] || null //上传的文件
    let file = e.target.files[0] || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let maxSize = 5 * 1024 * 1024 //5MB一个分片
    let tenSize = 100 * 1024 * 1024 //100MB限制
    if (file && fileSize <= maxSize) { //上传文件<=5MB时
      let upload = this.uploadFile(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.companyId, file)
      upload.then(res => {
        console.log('小于5M', res)
        //图片地址 /api/Objects/PlanPlatform/res.objectName
      })
    } else { //上传文件>5MB时
      let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.companyId, file)
      upload.then(res => {
        // this.renovateBaseMap('/api/Objects/PlanPlatform/' + res, item)
        console.log('大于5M', res)
      })
    }
    // else {
    //   const config = new MatSnackBarConfig();
    //   config.verticalPosition = 'top';
    //   config.duration = 3000
    //   this.snackBar.open('上传底图需小于100MB', '确定', config);
    // }
  }




  async uploadFile(companyId: string, planId: string, file) {
    let formData = new FormData()
    formData.append("file", file)
    return new Promise((resolve, reject) => {
      this.http.post(`/api/Objects/PlanPlatform/${companyId}/${planId}`, formData).subscribe((data: any) => {
        resolve(data)
      })
    })
  }
  //input key值，一个字符焦点消失问题
  trackByFn(index){
    return index
  }

  //分段上传
  sectionUpload(companyId: string, planId: string, file) {
    let data = { filename: file.name }
    return new Promise((resolve, reject) => {
      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/${planId}`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
        let objectName = data.objectName
        let uploadId = data.uploadId
        let PartNumberETag = []; //每次返回需要保存的信息
        //分块 处理
        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/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
              let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null }
              resolve(msg) // 调用 promise 内置方法处理成功
            })
          });
          PartNumberETag.push(result)

          if (PartNumberETag.length === allSlice) { //分块上传完成
            let data = PartNumberETag
            let paramsData = { uploadId: uploadId }
            this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`, data, { params: paramsData }).subscribe(data => {
              resolve(objectName)
            })
          }
        }//for循环

        //分块 处理
      })
    })
  }
}


export interface unitData {
  name: string,
  organizationName: number,
  buildingTypes: buildingTypes[]
}
export interface buildingTypes {
  id: string,
  name: string,
}