pad-Sixfamiliar/src/app/ui/know-route/know-route.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-05 15:27:58
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-06 14:10:39
 */
import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
import { FileUploader, FileItem } from 'ng2-file-upload'

@Component({
  selector: 'app-know-route',
  templateUrl: './know-route.component.html',
  styleUrls: ['./know-route.component.scss']
})
export class KnowRouteComponent implements OnInit {

  constructor(public snackBar: MatSnackBar,private http: HttpClient) { }

  ngOnInit(): void {
  }
  unitinfo:any={
    id: '',
    name: '', //单位信息名字
    usci: '', //单位信用代码
    contacts: '', //联系人
    phone: '', //联系电话
    address: '', //单位地址
    imageUrl: '', //图片地址
    location: '', //单位地理位置
    modifiedTime: '', //信息修改时间
    organizationId: '', //所属组织机构
    organizationName: '', //组织机构名称
    buildingTypes: [
      {
        id:'',
        name:''
      }
    ]
  }
  uploader:FileUploader = new FileUploader({    //初始化上传事件 ng2-upload
    url: `/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,   
    method: "POST",    
    itemAlias: "uploadedfile",
    autoUpload: false,
    removeAfterUpload:true //上传之后是否在队列中移除，如果不移除就会出现无法上传第二次的情况
  });
  //控制底部div显隐
  showorfalse="www"
  //判断选中路线的值
  chooseid=-1
  //熟悉路线对象
  knowRoute=[{name:``,idnum:""}]
  //熟悉部位对象
  knowBw=[{name:"消控室"},{name:"水泵房"},{name:"疏散楼梯"},{name:"各楼层"},{name:"楼层消火栓"},{name:"水泵结合器"},{name:"室外消防水源"}]

  imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
  imgUrl = ""//返回来的图片地址后缀
  file: any; //上传的文件
  objectName: any; //上传对象名
  uploadId: any; //上传分块上传事件编号
  isspinner:boolean=false //控制进度圈的显示隐藏
  PartNumberETag: any = []; //分块上传每次返回需要保存的信息
  //上传文件
  startUploading() {
    this.isspinner = true
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片

    if (file && fileSize <= shardSize) { //上传文件<=5MB时
      // this.upload()
      let formData = new FormData()
      formData.append("file",file)
      this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
        this.isspinner = false
        this.imgUrl = data.objectName
        this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传成功','确定',config);
      })
    } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传

      let data = { filename: file.name }
      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.unitinfo.id}`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传
        this.objectName = data.objectName
        this.uploadId = data.uploadId
        this.subsectionUploading()
      })
    }
  }
  //开始分块上传
  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()
      }
    }
  }
  //完成分块上传
  endUploading() {
    let data = this.PartNumberETag
    let paramsData = { uploadId: this.uploadId }
    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`, data, { params: paramsData }).subscribe(data => {
      this.imgsrc = `/api/Objects/PlanPlatform/${this.objectName}?x-oss-process=image/resize,m_fill,h_170,w_299`
      this.isspinner = false
      this.PartNumberETag = []
      this.uploader.clearQueue(); //清空input控件文件
    })
  }
  //熟悉部位点击事件
  addRoute(event){
    //console.log(event.target.innerHTML)
    //this.knowRoute+=event.target.innerHTML+"🠖"
    this.showorfalse="show"
    this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"})
  }
  //熟悉路线点击事件
  knowroutwClick(event,key){
    console.log(event)
    this.chooseid=key
    //event.target.style.border="1px solid #000000"
  }

}