ShangHaiYuan-AnXin/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import Viewer from 'viewerjs'
import { ViewDetailsComponent } from '../view-details/view-details.component';
declare var CryptoJS
declare var AMap: any;
@Component({
  selector: 'app-fireforce-audit',
  templateUrl: './fireforce-audit.component.html',
  styleUrls: ['./fireforce-audit.component.scss']
})
export class FireforceAuditComponent implements OnInit {
  @Input() public FireForceDetailInfo: any;//data名字根据引用场景自定义
  @Input() public level: any;//data名字根据引用场景自定义
  constructor(public snackBar: MatSnackBar,private http:HttpClient,public dialog: MatDialog) { }
  selectedFireForceLevel:any
  ZongpersonCountData
  ZongcontactData
  ZhicontactData
  DaZhongpersonCountData
  DaZhongcontactData
  othercontactData
  otherpersonCountData
  AttachmentArr
  ngOnInit(): void {
    // console.log(12345,this.FireForceDetailInfo)
    this.selectedFireForceLevel = this.level
    this.FireForceDetailInfo.personCountData ? this.ZongpersonCountData = JSON.parse(this.FireForceDetailInfo.personCountData): null
    this.FireForceDetailInfo.contactData ? this.ZongcontactData = JSON.parse(this.FireForceDetailInfo.contactData): null
    this.FireForceDetailInfo.contactData ? this.ZhicontactData = JSON.parse(this.FireForceDetailInfo.contactData): null
    this.FireForceDetailInfo.personCountData ? this.DaZhongpersonCountData = JSON.parse(this.FireForceDetailInfo.personCountData): null
    this.FireForceDetailInfo.contactData ? this.DaZhongcontactData = JSON.parse(this.FireForceDetailInfo.contactData): null
    this.FireForceDetailInfo.contactData ? this.othercontactData = JSON.parse(this.FireForceDetailInfo.contactData): null
    this.FireForceDetailInfo.personCountData ? this.otherpersonCountData = JSON.parse(this.FireForceDetailInfo.personCountData): null
    this.FireForceDetailInfo.RelevantInfomationData ?  this.AttachmentArr = JSON.parse(this.FireForceDetailInfo.RelevantInfomationData) : null
    console.log(789,this.ZongcontactData)
    setTimeout(() => {
      this.map = new AMap.Map('container', {
        zoom:18
      })
      
      if(this.FireForceDetailInfo.location && this.FireForceDetailInfo.location.x){
        this.map.setCenter([this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y]);
        this.newPositionMarker = new AMap.Marker({
          position: [this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-10, -12)
        })
        // 将 markers 添加到地图
        this.map.add(this.newPositionMarker);
      }else{
        this.map.setCity('上海市');
      }
      
    }, 0);
  }
  map:any
  newPositionMarker:any
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' +
  '</div>'
  //当前点击tab页面第几个
  tabIndex:any = 1
  selectedTab(index){
    this.tabIndex = index
  }
  

  //上传附件
  objectName:any
  isMasklayer:boolean = false//圆圈遮罩层是否打开
  isMasklayerDownload:boolean = false//下载进度条遮罩层是否打开
  progressBarValue:any = 0//分块上传进度

  //下载
  download (e) {
    this.isMasklayerDownload = true //开启下载进度条
    let file = e //传递过来的文件元数据
    let fileSize = file.fileLength //下载文件的总大小
    let shardSize = 3 * 1024 * 1024 //文件大小是否大于10MB
    if (file && fileSize<=shardSize) { //<=3MB时直接下载
      this.progressBarValue = 60
      this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{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;
        let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1]
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        this.isMasklayerDownload = false //关闭下载进度条
        this.progressBarValue = 0 //初始化进度条
      })
    } else if (file && fileSize>shardSize) { //>3MB时分块下载
      this.blockingDownload(e) //分段下载
    }

  }

  //分段下载并合并
  async blockingDownload (e) {
    let file = e //传递过来的文件元数据
    let fileSize = file.fileLength //下载文件的总大小
    let shardSize = 3 * 1024 * 1024 //3MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
    let allFile:any = [] //所有的file分段

    for (let i=0;i<allSlice;i++) {
      let start = i * shardSize //每次下载文件开始位置
      let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止

      let result =  await new Promise ((result,reject)=>{
        this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
          result(data) }) 
      })
      allFile.push(result)
      // this.progressBarValue = Number((i/allSlice).toFixed(2))*100 //文件进度数
      this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0)
      if (allFile.length === allSlice) { //合并文件输出给浏览器
        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1]
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        this.isMasklayerDownload = false //关闭下载进度条
        this.progressBarValue = 0 //初始化进度条
      }

    } //for循环结束

  }


  //点击文件
  clickFile(item){
    let suffix = item.fileName.split('.')[item.fileName.split('.').length-1]
    if(suffix == 'png' || suffix == 'jpg' || suffix == 'JPG'){
      let dom =  document.getElementById(`viewerjs`)
      let pObjs = dom.childNodes;
      let node = document.createElement("img")
      node.style.display = "none";
      node.src = "/api/Objects/PlanPlatform/" + item.objectName;
      node.id = 'img'
      dom.appendChild(node)
      setTimeout(() => {
        let viewer = new Viewer(document.getElementById(`viewerjs`), {
          hidden:()=>{
            dom.removeChild(pObjs[0]);
            viewer.destroy();
          }
        });
        node.click();
      }, 0);
    }
    if(suffix == 'docx' || suffix == 'doc' || suffix == 'pdf'){
      let fetchUrl = item.objectName
      if (suffix == 'docx' || suffix == 'doc') {
        let arr = fetchUrl.split('.')
        arr[arr.length - 1] = 'pdf'
        window.open(`/api/Objects/PlanPlatform/` + arr.join('.'))
      }else if (suffix == 'pdf') {
        window.open(`/api/Objects/PlanPlatform/` + fetchUrl)
      }
    }
    if(suffix == 'mp4'){
      const dialogRef = this.dialog.open(ViewDetailsComponent, {//调用open方法打开对话框并且携带参数过去
        data: {item:item,type:"video"},
        id:'videodialog'
      });
      dialogRef.afterClosed().subscribe();
    }
  }

  //js乘法
  accMul(arg1,arg2,fix) { 
    if(!parseInt(fix)==fix)
    {
        return;
    }
     var m=0,s1=arg1.toString(),s2=arg2.toString(); 
     try{m+=s1.split(".")[1].length}catch(e){} 
     try{m+=s2.split(".")[1].length}catch(e){}
     if(m>fix){
        return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix));
     }else if(m<=fix){
         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix);
     }else{
        return (arg1*arg2).toFixed(fix).toString();
     }
  } 
}