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-07-05 15:36:30
 */
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';
declare var $: any
@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) { }


  planLevel: string//预案级别
  ngOnInit(): void {
    this.planLevel = this.route.snapshot.queryParams.planCategory
    this.getUnitData()
    //this.getAllBuildings()
    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)
          this.getTemplateData()
        }
      });
    })
  }

  selectedItem: string = '封面'
  clickTitleItem(item) {
    this.addNumber = -1
    this.selectedItem = item.groupName
    if (this.selectedItem == '重点图示') {
      this.getAllBuildings()
      this.getSitePlan()
      this.getRealPicture()
    } else if (this.selectedItem == '单位概况') {
      this.getAllBuildings()
      
      this.planTemplateData[1].attribute[0].attinf[0].value=this.planTemplateData[1].attribute[0].attinf[0].olddata = this.unitData.usci
      this.planTemplateData[1].attribute[0].attinf[1].value=this.planTemplateData[1].attribute[0].attinf[1].olddata = this.unitData.buildingTypes[0].name
      this.planTemplateData[1].attribute[0].attinf[2].value=this.planTemplateData[1].attribute[0].attinf[2].olddata = this.unitData.contacts
      this.planTemplateData[1].attribute[0].attinf[3].value=this.planTemplateData[1].attribute[0].attinf[3].olddata = this.unitData.phone
      this.planTemplateData[1].attribute[0].attinf[4].value=this.planTemplateData[1].attribute[0].attinf[4].olddata = this.unitData.organizationName
      this.planTemplateData[1].attribute[0].attinf[5].value=this.planTemplateData[1].attribute[0].attinf[5].olddata = this.unitData.address
      console.log(this.planTemplateData)
    } /* else if (this.selectedItem == '单位概况') {
      //this.getAllBuildings()
    } */ else if (this.selectedItem == '预案附件') {
      this.getTwoDPlanList()
    }
  }

  //获取当前单位的二维预案
  TwoDPlanList: any
  getTwoDPlanList() {
    let paramsData = {
      companyId: this.route.snapshot.queryParams.companyId,
      pageSize: "999"
    }
    this.http.get("/api/PlanComponents", { params: paramsData }).subscribe((data: any) => {
      this.TwoDPlanList = data.items.filter((item) => {
        return item.planType == 1
      })
    })
  }





  //获取实景图
  allRealPicture
  getRealPicture() {
    let companyId = this.unitId
    this.http.get('/api/RealityImageGroups', {
      params: {
        companyId: this.route.snapshot.queryParams.companyId
      }
    }).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/PlanComponents/${this.route.snapshot.queryParams.planId}/WebText`).subscribe((data: any) => {
      // console.log('预案内容', data)
      this.planTemplateData = JSON.parse(data.webTextData).filter(item =>
        item.completed == true
      )
      // console.log(this.planTemplateData)
      if (this.planTemplateData[0].groupName != '封面') {
        let obj = {
          completed: true,
          groupName: "封面",
          attribute: {
            planNumber: '',
            planName: this.route.snapshot.queryParams.planName,
            objName: this.unitData.name,
            unitNature: this.unitData.buildingTypes[0].name,
            planLevel: '',
            disasterType: '火灾',
            fireproofingLevel: '',
            fireproofingAdminister: this.unitData.organizationName,
            putOutFireAdminister: '',
            producer: {
              name: '',
              duty: ''
            },
            verifier: {
              name: '',
              duty: ''
            },
            auditTime: ''
          }
        }
        this.planTemplateData.unshift(obj)
      }
      this.planTemplateData.forEach(element => {
        if (element.groupName == '重点图示') {
          if (!element.attribute) {
            element.attribute = [{ name: '', imgArr: [] }]
          }
        }
        if (element.groupName == '交通水源') {
          if (!element.attribute) {
            element.attribute = [{ name: '', imgArr: [] }]
          }
        }
        if (element.groupName == '预案附件') {
          if (!element.attribute) {
            element.attribute = [{ name: '', imgArr: [] }]
          }
        }
        if (element.groupName == '处置要点') {
          if (!element.attribute) {
            element.attribute = [{ name: '', content: '' }]
          }
        }
        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) {
    console.log(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) => {
        if(i.tableth!=undefined){
          i.tableth.json.push('/api/Objects/PlanPlatform/' + res.objectName)
        }else{
          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 => {
        if(i.tableth!=undefined){
          i.tableth.json.push('/api/Objects/PlanPlatform/' + res)
        }else{
          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
      if (this.planTemplateData[1].building == undefined) {
        this.planTemplateData[1].building = []
        for (var i = 0; i < this.allBuildings.length; i++) {
          if (i == 0) {
            this.planTemplateData[1].building.push({ name: this.allBuildings[i].name, body: this.planTemplateData[1].attribute, completed: true })
          } else {
            this.planTemplateData[1].building.push({ name: this.allBuildings[i].name, body: this.planTemplateData[1].attribute, completed: false })
          }

        }
      }

      console.log(this.planTemplateData)
      //this.buildingName=this.planTemplateData[1].building[0].name
      this.group = this.planTemplateData[1].building
      //delete this.planTemplateData[0].attribute

    })
  }
  //获取总平面图
  sitePlanItems: any
  getSitePlan() {
    let params = { companyId: this.unitId }
    this.http.get('/api/SitePlans', { params: params }).subscribe(data => {
      this.sitePlanItems = data
    })
  }
  //打开采集工具
  openPlan(item, index, type?: string) {
    sessionStorage.setItem("gisplan", 'look')
    sessionStorage.setItem("companyId", this.unitId)
    // console.log(item)
    if (type == '预案') {
      sessionStorage.setItem("planId", item.id)
      sessionStorage.setItem("companyId", this.route.snapshot.queryParams.companyId)
      sessionStorage.setItem("buildingTypeId", this.route.snapshot.queryParams.unitTypeId)
      sessionStorage.setItem("editable", "0")
      sessionStorage.setItem("planName", item.name)
      sessionStorage.setItem("orName", item.name)
      sessionStorage.setItem("orId", item.name)
    }
    let data = { select: item, key: index, allBuildings: this.allBuildings, type: type }
    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);
    }

  }
  //单位概况左侧建筑点击事件
  buildingName
  clicki = 0
  group
  clickBuilding(item, i) {
    this.buildingName = item.name
    this.clicki = i
    console.log(item, this.clicki)
    //this.group=this.planTemplateData[1].building[this.clicki].body

  }
  //单位概况增加一行
  unitadd(surveyName, attacki, i) {
    this.addNumber++
    if (surveyName == '进攻通道') {
      if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr == undefined) {
        this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr = []
      }
      this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.push({ tabletd: [] })
      for (var j = 0; j < this.planTemplateData[1].building[attacki].body[4].attinf[i].tableth.length; j++) {
        if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr != undefined) {
          this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr[this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.length - 1].tabletd.push('')
        }
        else {
          this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr[this.addNumber].tabletd.push('')
        }
      }

      // console.log(this.planTemplateData)
    }
    else if (surveyName == '功能分区') {
      console.log(attacki)
      this.planTemplateData[1].building[attacki].body[6].attinf.push({ name: '', value: '' })
    } else if (surveyName == '重点部位') {
      this.planTemplateData[1].building[attacki].body[5].attinf.push({ heafName: '', body: [{ name: '重点部位名称', value: '' }, { name: '重点部位所在位置', value: '' }, { name: '建筑结构', value: '' }, { name: '使用性质', value: '' }, { name: '主要危险性', value: '' }] })
    }
  }
  //单位概况删除一行
  unitDel(surveyName, attacki, i) {
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    let isTrue = confirm('您确定要删除该条信息吗')
    if (surveyName == '进攻通道') {
      if (isTrue) {
        if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr != undefined) {
          this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.splice(this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.length - 1, 1)
          this.addNumber--
          if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.length == 0) {
            this.addNumber = -1
          }
        } else {
          this.snackBar.open('请先增加一行!', '确定', config);
        }
      }
    } else if (surveyName == '功能分区') {
      if (isTrue) {
        this.planTemplateData[1].building[attacki].body[6].attinf.splice(i, 1)
      }
    } else if (surveyName == '重点部位') {
      if (isTrue) {
        this.planTemplateData[1].building[attacki].body[5].attinf.splice(i, 1)
      }
    }
  }

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

        //分块 处理
      })
    })
  }

  //预览
  pattern: string = 'edit'
  preview() {
    this.pattern = 'look'
  }
  quitPreview() {
    this.pattern = 'edit'
  }
  //提交
  submit() {
    console.log('提交信息', this.planTemplateData)
    let body = {
      webTextData: JSON.stringify(this.planTemplateData)
    }
    this.http.put(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}`, body).subscribe(data => {
      // console.log('提交成功',data)
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('提交成功', '确定', config);
    })
  }
  //返回顶部
  goBack() {
    document.querySelector('#mainbox').scrollIntoView(true)
  }
  //生成word
  generatingDoc() {
    console.log(666, $(".mainbox"))
    $(".mainbox").wordExport('word文档');
  }
  //原数据点击
  oldData=false
  clickoldData(){
    this.oldData=!this.oldData
  }
}



//查看预案
@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 //子组件

  type: any//打开的类型  是平面图还是水源
  ngOnInit() {
    this.type = this.data.type
  }

  ngAfterViewInit(): void {
    if (this.type != '水源' && this.type != '预案') {
      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()
  }

}