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 17:05:09
 */
import { HttpClient } from '@angular/common/http';
import { Component, Inject, OnInit, Renderer2, ViewChild, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import Viewer from 'viewerjs';
@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, public snackBar: MatSnackBar, public dialog: MatDialog) { }


  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()
    this.tree = {
      json: this.treedate,
      config: this.treeConfig
    };
  }
  //树形结构数据
  treedate = [
    {
      "guid": "bc4c7a02-5379-4046-92be-12c67af4295a",
      "displayName": "Elentrix",
      "children": [
        /* "85d412c2-ebc1-4d56-96c9-7da433ac9bb2",
        "28aac445-83b1-464d-9695-a4157dab6eac" */
      ]
    }

  ]
  tree
  treeConfig = {
    nodeWidth: 90,
    nodeHeight: 60
  };

  //获得单位信息
  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) {
    this.addNumber = -1
    item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
    if (this.selectedItem == '重点图示') {
      this.getAllBuildings()
      this.getSitePlan()
      this.getRealPicture()
    }
  }

  //获取实景图
  allRealPicture
  getRealPicture() {
    let companyId = this.unitId
    this.http.get('/api/RealityImageGroups', {
      params: {
        companyId: '5e9964caa760a059e84512e9'
      }
    }).subscribe((data: any) => {
      this.allRealPicture = data
      this.getAllRealPicture().then(() => {
        console.log('实景图', this.allRealPicture)
      })
    })
  }
  async getAllRealPicture() {
    for (let index = 0; index < this.allRealPicture.length; index++) {
      const element = this.allRealPicture[index];
      let data = {
        groupId: element.id,
        pageSize: '999',
      }
      await new Promise((resolve, reject) => {
        this.http.get('/api/RealityImages', { params: data }).subscribe((data: any) => {
          element.realityImages = data.items
          element.realityImages.forEach(item => { //每张图片设置选中状态为false
            item.newImageUrl = `/api/Objects/PlanPlatform/${item.imageUrl}?x-oss-process=image/resize,m_fill,h_100,w_100` //处理图片URL地址
            item.nameStart = item.name.substring(0, item.name.lastIndexOf(".")); //图片名称前缀
            item.nameEnd = item.name.substring(item.name.lastIndexOf("."), item.name.length); //图片名称后缀
            resolve(data)
          });
        })
      })
    }

  }



  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: [] }]
          }
        }
        if (element.groupName == '处置要点') {
          if (!element.attribute) {
            element.attribute = [{ name: '', content: '' }]
          }
        }
      });
    })
  }


  //重点图示增加分组
  addkeyImgItem(item) {
    item.attribute.push({ name: '', imgArr: [] })
  }
  //处置要点增加分组
  addDisposalPointItem(item) {
    item.attribute.push({ name: '', content: '' })
  }
  //通过左侧查看实景图
  gallery
  lookkeyImgItemLeft(key1, key2,i) {
    let dom = document.getElementById(`viewerjs`)
    let pObjs = dom.childNodes;
    let node = document.createElement("img")
    node.style.display = "none";
    node.src = '/api/Objects/PlanPlatform/' + i.imageUrl;
    node.id = 'img'
    dom.appendChild(node)
    setTimeout(() => {
      let viewer = new Viewer(document.getElementById(`viewerjs`), {
        hidden: () => {
          dom.removeChild(pObjs[0]);
          viewer.destroy();
        }
      });
      node.click();
    }, 0);

  }
  //通过左侧实景图增加分组
  addkeyImgItemLeft(item, i) {
    this.planTemplateData.forEach(element => {
      if (element.groupName == '重点图示') {
        element.attribute.push({ name: item.name + '-' + i.name, imgArr: ['/api/Objects/PlanPlatform/' + i.imageUrl] })
      }
    });
  }
  //重点图示,处置要点删除指定分组
  deleteItem(item, key) {
    let isDelete = window.confirm('确定要删除该分组吗?分组下内容将一同被删除!')
    if (isDelete) {
      item.attribute.splice(key, 1)
    }
  }
  //重点图示删除指定分组里面的图片
  deleteImgItem(imgArr, imgkey) {
    let isDelete = window.confirm('确定要删除该图片吗?')
    if (isDelete) {
      imgArr.splice(imgkey, 1)
    }
  }
  //重点图示上传图片
  filechange(e, i) {
    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.planId, file)
      upload.then((res: any) => {
        i.imgArr.push('/api/Objects/PlanPlatform/' + res.objectName)
      })
    } else { //上传文件>5MB时
      let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file)
      upload.then(res => {
        i.imgArr.push('/api/Objects/PlanPlatform/' + res)
      })
    }
  }
  //单位相关数据
  unitId: any = this.route.snapshot.queryParams.companyId
  //获得所有的建筑物
  allBuildings: any
  getAllBuildings() {
    this.http.get("/api/Buildings", {
      params: {
        companyId: this.unitId
      }
    }).subscribe((data: any) => {
      data.forEach((item, index) => {
        let params = { buildingId: item.id }
        item.plandata = []
        this.http.get('/api/BuildingAreas', { params }).subscribe(data => {
          item.plandata = data
        })
      })
      this.allBuildings = data
    })
  }
  //获取总平面图
  sitePlanItems: any
  getSitePlan() {
    let params = { companyId: this.unitId }
    this.http.get('/api/SitePlans', { params: params }).subscribe(data => {
      this.sitePlanItems = data
    })
  }
  //打开采集工具
  openPlan(item, index) {
    sessionStorage.setItem("gisplan", 'look')
    sessionStorage.setItem("companyId", this.unitId)
    // console.log(item)
    let data = { select: item, key: index, allBuildings: this.allBuildings }
    let width = Math.round(document.body.clientWidth * 0.8) + 'px'
    let height = Math.round(document.body.clientHeight * 0.9) + 'px'
    // console.log('宽度',width)
    let dialogRef = this.dialog.open(OpenPlanToolDialog, {//调用open方法打开对话框并且携带参数过去
      id: 'openPlanToolDialog',
      data,
      width: width,
      height: height
    });
    dialogRef.afterClosed().subscribe((data) => { });
  }

  //正常上传
  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
  }
  //表格增加一行
  addNumber = -1
  addTd(key, i) {
    this.addNumber++
    //this.planTemplateData[key].attribute[i].push({tabletr:[]})
    if (this.planTemplateData[key].attribute[i].tabletr == undefined) {
      this.planTemplateData[key].attribute[i].tabletr = []
    }
    this.planTemplateData[key].attribute[i].tabletr.push({ tabletd: [] })
    for (var j = 0; j < this.planTemplateData[key].attribute[i].tableth.length; j++) {
      if (this.planTemplateData[key].attribute[i].tabletr != undefined) {
        this.planTemplateData[key].attribute[i].tabletr[this.planTemplateData[key].attribute[i].tabletr.length - 1].tabletd.push('')
      }
      else {
        this.planTemplateData[key].attribute[i].tabletr[this.addNumber].tabletd.push('')
      }
    }
    console.log(this.planTemplateData)
  }
  //表格删除一行
  delTd(key, i) {
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    if (this.planTemplateData[key].attribute[i].tabletr != undefined) {
      this.planTemplateData[key].attribute[i].tabletr.splice(this.planTemplateData[key].attribute[i].tabletr.length - 1, 1)
      this.addNumber--
      if (this.planTemplateData[key].attribute[i].tabletr.length == 0) {
        this.addNumber = -1
      }
    } else {
      this.snackBar.open('请先增加一行!', '确定', config);
    }

  }

  //分段上传
  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循环

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



//查看预案
@Component({
  selector: 'lookPlan-dialog',
  templateUrl: './openPlanTool.html',
  styleUrls: ['./openPlanTool.scss']
})
export class OpenPlanToolDialog {

  constructor(public http: HttpClient, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<OpenPlanToolDialog>,
    @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog, private route: ActivatedRoute) { }

  @ViewChild('plan') plan: any //子组件

  ngOnInit() {

  }

  ngAfterViewInit(): void {
    this.noticePlan()
  }

  //通知 子组件 传递参数
  noticePlan() {
    let parameter = { //查询 节点 对应 建筑/楼层 index,id
      buildingIndex: this.data.key, //总平面图/建筑 index
      storeyId: this.data.select.id
    }
    this.http.get("/api/Buildings", { params: { companyId: this.route.snapshot.queryParams.companyId } }).subscribe((data: any) => {
      this.plan.allBuildings = data
      this.plan.isGis = this.data.select.isGis
      this.plan.seekPanelPoint(parameter)
    })
  }

  //关闭弹窗
  closeDiv() {
    this.dialogRef.close()
  }

}