AX.Angular9DataCollection/src/app/ui/collection-tools/collection-tools.component.ts

import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2 } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import {leftFunctionalDomainComponent,editPlaneFigureComponent} from './leftFunctionalDomain'
import Swiper from 'swiper';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree';
import {WorkingAreaComponent} from '../../working-area/working-area.component'
import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务
import Viewer from 'viewerjs';
@Component({
  selector: 'app-collection-tools',
  templateUrl: './collection-tools.component.html',
  styleUrls: ['./collection-tools.component.scss']
})
export class CollectionToolsComponent implements OnInit {

  @ViewChild('canvas') canvas:WorkingAreaComponent; //父组件中获得子组件的引用

  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { }
  // tree配置
  private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name || node.Name,
      level: level,
      id: node.id || node.Id,
      children:node.children,
      isTemplate:node.isTemplate,
      isNewElement:node.isNewElement,
      isLook:node.isLook,
      isLookPattern:node.isLookPattern || null
    };
  }
  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
  
  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  hasChild = (_: number, node: any) => node.expandable;

  colors = ['#076eec','#4dd0e1','#00ee76','#ffff00','#eeb422',
            '#FF6A6A','#ff0000','#ff6eb4','#00bfff','#54ff9f',
            '#009688','#836fff','#ff8c00','#ee00ee','#ffa07a',
            '#00C500','#00ffff','#6495ed','#ffdAb9','#AA00FF']
  selected = "1" //图标大小选择框
  
  allBuildings //该单位所有建筑
  beforeOneCheckedBuilding:any = {name:"总平面图"}; //当前点击选择的建筑
  checkedBuildingIndex:number = -1 //当前点击选择的建筑index
  isEditPat:boolean =  true //当前是否是编辑模式

  assetName:String//素材名称
  assetWidth:number//素材宽度
  assetHeight:number//素材高度
  sliderValue:number = 0//角度滑竿的值
  sliderValueThickness:number = 0//厚度滑竿的值
  isHighLight:boolean = false//是否高亮选择框
  PropertyInfos = [] //去除图片链接真正用于循环的内容
  imagesArrNum //素材属性图片数量上限
  imagesArr = [] //属性中的图片链接集合
  clickedIndex //点击图片时的索引值

  //传入素材对象，设置右侧属性栏内容
  canvasAssetObj //传入的素材属性对象
  isImgNumCss = false //控制上传文件input显隐
  mySwiper:any //轮播图实例

  gallery
  setAssetsProperty(obj){
    setTimeout(() => {
      obj.PropertyInfos.forEach(item => {
        if(item.PropertyType == 4){
          this.gallery = new Viewer(document.getElementById('viewerjs'),{
            url: 'data-original'
          });
        }
      })
    }, 0);
    
    //从颜色中取出透明度
    let color = obj.Color
    let strh = color.substring(color.length -2,color.length)
    let opacity = Math.round(parseInt(strh,16)/255 * 100) 
    this.colorDivSliderValue = opacity

    this.isShowProperty = true
    this.isShowAttribute = false
    let _this = this
    this.imagesArr = []
    this.imagesArrNum = ""

    this.canvasAssetObj = obj //将选中素材对象存到本地变量
    // console.log(666,this.canvasAssetObj)
    this.assetName = obj.Name
    this.assetWidth = obj.Width
    this.assetHeight = obj.Height
    this.sliderValue = obj.Angle
    this.selectedcolor = obj.Color
    this.PropertyInfos = obj.PropertyInfos
    this.sliderValueThickness = obj.Thickness
    this.PropertyInfos.forEach(item => {
      if(item.PropertyType == 3){ //如果是图片链接类型
        this.imagesArr.push(item)
      }
      if(item.PropertyType == 4){//图片数值上线
        this.imagesArrNum = item.PropertyValue
      }
    })

    //如果存在图片则加载轮播图
    if(this.imagesArr.length){
      setTimeout(() => {
        this.mySwiper = new Swiper('.swiper-container',{
          loop: false,
          // grabCursor: true,
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          on:{
            click: function(){
              _this.clickedIndex = this.clickedIndex
            },
          }
        });
      }, 0);
    }
    //判断此时图片数量是否达到上限
    if(this.imagesArr.length < this.imagesArrNum){//如果不超出
      this.isImgNumCss = true
    }else{
      this.isImgNumCss = false
    }
  }
  //右侧div边框宽度调节
  rightDivMouseDown(e){
    document.onmousemove = (ev) => {
      let bodyWidth = document.body.clientWidth //网页宽度
      let maxWidth = bodyWidth - 240 - this.element.nativeElement.querySelector('#leftDiv').clientWidth  //最大宽度
      if(bodyWidth - ev.clientX >= maxWidth){
        this.element.nativeElement.querySelector('#rightDiv').style.width = maxWidth + 'px'
      }else{
        this.element.nativeElement.querySelector('#rightDiv').style.width = bodyWidth - ev.clientX + 'px';
      }
    }
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }

  //消防要素div边框高度调节
  firecategoriesDivMouseDown(e){
    document.onmousemove = (ev) => {
      let bodyHeight = document.body.clientHeight //网页宽度
      let maxHeight = this.element.nativeElement.querySelector('#rightDiv').clientHeight - 35  //最大宽度
      if(bodyHeight - ev.clientY >= maxHeight){
        this.element.nativeElement.querySelector('#firecategories').style.height = maxHeight+ 'px' 
        this.element.nativeElement.querySelector('#property').style.height = 35+ 'px' 
      }else{
        this.element.nativeElement.querySelector('#firecategories').style.height = (bodyHeight - ev.clientY) + 'px'  ;
        this.element.nativeElement.querySelector('#property').style.height = (this.element.nativeElement.querySelector('#rightDiv').clientHeight - this.element.nativeElement.querySelector('#firecategories').clientHeight) + 'px' 
      }
    }
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  //左侧div边框宽度调节
  leftDivMouseDown(e){
    document.onmousemove = (ev) => {
      let bodyWidth = document.body.clientWidth //网页宽度
      let maxWidth = bodyWidth - 260 - this.element.nativeElement.querySelector('#rightDiv').clientWidth  //最大宽度
      if(ev.clientX - 240 >= maxWidth){
        this.element.nativeElement.querySelector('#leftDiv').style.width = maxWidth + 'px'
      }else{
        this.element.nativeElement.querySelector('#leftDiv').style.width = ev.clientX - 260 + 'px';
      }
    }
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  
  //放大图标
  iconScale(){
    let number = Number(this.selected)
    this.canvas.setIconScale(number)
  }
  //素材宽度输入框改变
  assetWidthIunput(){
    this.canvasAssetObj.Width = this.assetWidth
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }
  
  //素材高度输入框改变
  assetHeightIunput(){
    this.canvasAssetObj.Height = this.assetHeight
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }

  //素材角度输入框改变
  assetAngleIunput(){
    this.canvasAssetObj.Angle = this.sliderValue
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }

  //素材厚度输入框改变
  assetThicknessIunput(){
    this.canvasAssetObj.Thickness = this.sliderValueThickness
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }

  //素材是否高亮改变----->本地操作行为
  assetHighLightIunput(){
    
  }

  //动态属性素材input框值改变
  assetInputChange(i,e){
    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
      return i.PropertyName == item.PropertyName
    })
    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }

  //动态属性素材布尔值框改变radio
  assetRadioChange(i,boolean){
    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
      return i.PropertyName == item.PropertyName
    })
    this.canvasAssetObj.PropertyInfos[index].PropertyValue = boolean
    this.canvasData.isChange = true
  }

  colorIndex//默认素材颜色
  selectedcolor//点击选择的颜色
  //选择素材颜色
  selectcolor(item,key){
    //在当前透明度基础上改变颜色
    this.selectedcolor = item + this.selectedcolor.substring(this.selectedcolor.length-2)
    this.canvasAssetObj.Color = this.selectedcolor
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }

  //颜色选择滑竿的值
  colorDivSliderValue
  colorDivSliderChange(){
    let colorOpacity =  Math.round(255 * this.colorDivSliderValue * 0.01) 
    //根据滑竿值改变16进制颜色后两位
    function replacepos(text,start,stop,replacetext){
   	 let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1);
   	 return mystr;
    }
    this.selectedcolor = replacepos(this.selectedcolor,7,8,colorOpacity.toString(16))
    this.canvasAssetObj.Color = this.selectedcolor
    this.canvasData.isChange = true
    this.canvas.refreshIcon(this.canvasAssetObj.Id)
  }

  //查看图片详情
  lookImg(){
    const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
      data: {imagesArr:this.imagesArr,index:this.clickedIndex}
    });
    dialogRef.afterClosed().subscribe(data=>{ }); 
  }
  
  //上传素材图片
  selectFile(e){
    let imgFile = e.target.files[0] || null //上传的文件
    this.startUploading(imgFile)
  }
  objectName:any //上传对象名
  startUploading (imgFile) {
    let _this = this
    let file = imgFile || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片
    let companyId = sessionStorage.getItem("companyId")
    if (file && fileSize <= shardSize) { //上传文件<=5MB时
      let formData = new FormData()
      formData.append("file",file)
      this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
        this.objectName = data.objectName
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传成功','确定',config)

        //在原始素材对象和需要循环图片的对象中分别push最新上传的图片
        let imgObj = {
          "Tag": null,
          "Order": 0,
          "Enabled": false,
          "Visible": false,
          "Required": false,
          "RuleName": null,
          "RuleValue": null,
          "PhysicalUnit": null,
          "PropertyName": "图片",
          "PropertyType": 3,
          "PropertyValue": "/api/Objects/WebPlan2D/" + this.objectName
        }
        
        this.imagesArr.push(imgObj)
        this.canvasAssetObj.PropertyInfos.push(imgObj)

        setTimeout(() => {
          this.mySwiper = new Swiper('.swiper-container',{
            loop: false,
            // grabCursor: true,
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            on:{
              click: function(){
                _this.clickedIndex = this.clickedIndex
              },
            }
          });

          this.mySwiper.slideTo(this.imagesArr.length - 1)
          this.gallery.update()
        }, 0);
        
        //判断上传素材属性图片是否超出数量  超出数量则隐藏input框
        if(this.imagesArr.length < this.imagesArrNum){//不超出input才会显示
          this.isImgNumCss = true
        }else{
          this.isImgNumCss = false
        }
        
        this.canvasData.isChange = true
      })
    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('上传图片文件不允许大于5mb','确定',config);
    }

  }

  //不能上传图片提示
  imgNumBeyond(){
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('图片数量已达上限','确定',config);
  }

  //删除素材属性图片
  deleteImg(){
    if(this.imagesArr.length == 0){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('没有可删除的图片，请先上传','确定',config)
    }else{
      // 在素材原始对象中将删除的图片去掉
      this.canvasAssetObj.PropertyInfos = [...this.canvasAssetObj.PropertyInfos.filter((item)=>{
        return  item.PropertyValue != this.imagesArr[this.mySwiper.activeIndex].PropertyValue
      })]
      //在图片循环数组中将图片去掉
      this.imagesArr.splice(this.mySwiper.activeIndex, 1);
      //更新swiper视图
      setTimeout(() => {
        this.mySwiper.update();
        this.gallery.update()
      }, 0);
      this.canvasData.isChange = true;
      
      //将上传的input框显示出来
      this.isImgNumCss = true;
      //清除图片缓存
      if((<HTMLInputElement>document.getElementById('inputimg'))){
        (<HTMLInputElement>document.getElementById('inputimg')).value = null //清空input框缓存
      }
      
    }
  }

  //动态属性方向select选择框
  direction(i,e){
    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
      return i.PropertyName == item.PropertyName
    })
    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
    this.canvasData.isChange = true
  }

  //动态属性供给区域select选择框
  supplyArea(i,e){
    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
      return i.PropertyName == item.PropertyName
    })
    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
    this.canvasData.isChange = true
  }

  //动态属性供给类型select选择框
  supplyType(i,e){
    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
      return i.PropertyName == item.PropertyName
    })
    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
    this.canvasData.isChange = true
  }

  ngOnInit(): void {
    
    this.getAllLibrary()
    this.getAllBuildings()

    let that = this
    window.setTimeout(()=>{
      document.getElementById("functionalDomainContent").oncontextmenu = function (event) {
        // that.canvas.cancelPaint()
        that.selectImageIndex = -1
        event.preventDefault();
       };
    })
  
  }

  ngAfterViewInit(): void {
    this.getSitePlan()
    // 监听canvas组件选中素材事件
    this.canvas.on("select",obj=>{
      //选中素材属性注入函数
      this.setAssetsProperty(obj.assetData)
    })
    // 监听canvas组件取消选中素材事件
    this.canvas.on("deselect",obj=>{
      this.isShowProperty = false
    })
    // 监听canvas组件新增素材事件
    this.canvas.on("createIcon",obj=>{
      this.renovateTreeData(false)
    })
    // 监听canvas组件删除素材事件
    this.canvas.on("deleteIcon",obj=>{
      this.renovateTreeData(false)
    })
  }

  copyAssetData:any //存储用于复制的素材
  //复制素材
  copyAsset(){
    this.canvas.copy()
  }
  //粘贴素材
  pasteAsset(){
    let companyId = sessionStorage.getItem("companyId")
    let buildingId = this.beforeOneCheckedBuilding.id
    let floorId = this.selectingSitePlan.id

    this.canvas.paste(companyId,buildingId,floorId)
    this.canvasData.isChange = true
  }

  basicInfo:boolean = true //基本信息名称显隐
  wantToWork:boolean = true //想定作业名称显隐
  //点击基本信息名称
  basicInfoClick(){
    this.basicInfo = !this.basicInfo
    this.canvas.setNameVisible(this.basicInfo,0)
  }

  //点击想定作业名称
  wantToWorkClick(){
    this.wantToWork = !this.wantToWork
    this.canvas.setNameVisible(this.basicInfo,1)
  }

  isEditPattern:boolean = true //是否为编辑模式
  //进入编辑模式
  editpat(){
    let config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('进入编辑模式','确定',config);
    this.isEditPattern = true
  }

  //进入查看模式
  lookpat(){
    let config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('进入查看模式','确定',config);
    this.isEditPattern = false
  }

  //保存平面图
  saveNum :any = []
  saveSite(){
    if (this.selectingSitePlan && this.selectingSitePlan.id) {

      this.saveNum = []
      let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData));
      SitePlanData.data = JSON.stringify(SitePlanData.data)
      let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
      CompanyData.data = JSON.stringify(CompanyData.data)
  
      let object = this.canvasData.originalcompanyBuildingData.data
      let adjoinArr = [] //毗邻数组
  
      for (const key in object) {
        if (object[key].Name == "毗邻") {//如果是相同楼层，则筛选出毗邻
          
          object[key].PropertyInfos.forEach(element => {
            if(element.PropertyName == "方向"){
              adjoinArr.push(element.PropertyValue)
            }
          });
        }
      }
      
      if((new Set(adjoinArr)).size != adjoinArr.length){
        let config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('保存失败，毗邻存在相同方向','确定',config);
        return false
      }else{
        //如果是单位 总平面图
        if(this.checkedBuildingIndex==-1){
          //保存平面图数据
          this.http.post("/api/CompanyAccount/SitePlanData",SitePlanData).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('平面图数据保存失败','确定',config);
          })
  
          //保存建筑数据
          this.http.post("/api/CompanyAccount/CompanyData",CompanyData).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('单位数据保存失败','确定',config);
          })
  
          //批量保存单位毗邻
          let CompanyAdjoins = this.canvasData.getCompanyAdjoinInfo()
          this.http.post("/api/CompanyAccount/CompanyAdjoins/Batch",CompanyAdjoins).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('单位毗邻保存失败','确定',config);
          })
  
          //批量保存单位重点部位
          let CompanyImportantLocations = this.canvasData.getCompanyImportantLocations()
          this.http.post("/api/CompanyAccount/CompanyImportantLocations/Batch",CompanyImportantLocations).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('单位重点部位保存失败','确定',config);
          })
  
          //批量保存单位消防设施素材
          let CompanyFacilityAssets = this.canvasData.getAllCompanyFacilityAssetInfo()
          this.http.post("/api/CompanyAccount/CompanyFacilityAssets/Batch",CompanyFacilityAssets).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('单位消防设施素材保存失败','确定',config);
          })
  
        }else{ //如果是建筑
  
          //建筑平面图数据
          this.http.post("/api/CompanyAccount/BuildingAreaData",SitePlanData).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('平面图数据保存失败','确定',config);
          })
  
          //建筑数据
          this.http.post("/api/CompanyAccount/BuildingData",CompanyData).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('单位数据保存失败','确定',config);
          })
  
          //批量保存建筑毗邻
          let buildingAdjoins = this.canvasData.getBuildingAdjoinInfo()
          this.http.post(`/api/CompanyAccount/BuildingAdjoins/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingAdjoins).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('建筑毗邻保存失败','确定',config);
          })
  
          //批量保存建筑重点部位
          let buildingImportantLocations = this.canvasData.getBuildingImportantLocations()
          this.http.post(`/api/CompanyAccount/BuildingImportantLocations/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingImportantLocations).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('建筑重点部位保存失败','确定',config);
          })
  
          //批量保存建筑消防设施素材
          let buildingFacilityAssets = this.canvasData.getAllBuildingFacilityAssetInfo()
          this.http.post(`/api/CompanyAccount/BuildingFacilityAssets/Batch?buildingId=${this.canvasData.selectStorey.buildingId}&buildingAreaId=${this.canvasData.selectStorey.id}`,buildingFacilityAssets).subscribe(data => {
            this.saveNum.push("1")
            if(this.saveNum.length == 5){
              this.canvasData.isChange = false
              let config = new MatSnackBarConfig();
              config.verticalPosition = 'top';
              config.duration = 3000
              this.snackBar.open('保存成功','确定',config);
            }
          },err=>{
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.canvasData.isChange = true
            this.snackBar.open('建筑消防设施素材保存失败','确定',config);
          })
  
        }
      }

    } else { //if
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('暂无楼层数据','确定',config);
    } 
  }

  //获得所有的建筑物
  getAllBuildings(){
    this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
      this.allBuildings = data
    })
  }

  //创建建筑
  createBuilding(){
    let data = this.allBuildings
    let dialogRef = this.dialog.open(CreateBuilding,{data});
    dialogRef.afterClosed().subscribe(data=>{
      if (data == "创建成功") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('创建成功','确定',config);
        this.getAllBuildings()
      }else if (data == "创建失败") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('创建失败','确定',config);
      }
    });  
  }

  //选择建筑
  checkedBuilding(item,index){
    if (this.checkedBuildingIndex!=index) {
      
      if (this.canvasData.isChange) { //true 数据被改动
        let isTrue = confirm('是否保存当前编辑数据')
        if (isTrue) { //先保存数据 在切换
          let isSuccess = this.saveSite()//true的时候 先保存数据
          if (isSuccess != false) {
            this.beforeOneCheckedBuilding = item
            this.checkedBuildingIndex = index
            if (index==-1) { //总平面图数据
              this.getSitePlan()
            } else { //建筑楼层/区域数据
              this.getBuildingSitePlan(item)
            }
          }
        } else {
          this.beforeOneCheckedBuilding = item
          this.checkedBuildingIndex = index
          if (index==-1) { //总平面图数据
            this.getSitePlan()
          } else { //建筑楼层/区域数据
            this.getBuildingSitePlan(item)
          }
        }
      } else { //flase 数据未被改动
        this.beforeOneCheckedBuilding = item
        this.checkedBuildingIndex = index
        if (index==-1) { //总平面图数据
          this.getSitePlan()
        } else { //建筑楼层/区域数据
          this.getBuildingSitePlan(item)
        }
      } //if

    } //if
  }

  //编辑建筑
  editBuilding(e,item){
    e.stopPropagation();
    let dialogRef = this.dialog.open(EditBuilding,{data: {item:item}});
    dialogRef.afterClosed().subscribe(data=>{
      if (data == "修改成功") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('修改成功','确定',config);
        this.getAllBuildings()
      }else if (data == "修改失败") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('修改失败','确定',config);
      }
    });  
  }

  //删除建筑
  deleteBuilding(e,item){
    e.stopPropagation();
    if(confirm("是否删除该建筑") == true){
      this.http.delete(`/api/CompanyAccount/Buildings/${item.id}`).subscribe(data=>{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('删除成功','确定',config);
        this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
          this.allBuildings = data
          this.beforeOneCheckedBuilding = {name:"总平面图"}
          this.checkedBuildingIndex = -1
          this.getSitePlan()
        })
      },err=>{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('删除失败','确定',config);
        this.getAllBuildings()
      })
    }
  }

  storeyData //将建筑素材和当前楼层素材合二为一

  //处理 tree 数据结构
  handleTreeData (storeyData) {
    this.canvas.setNameVisible(this.basicInfo,0)
    
    this.storeyData = storeyData
    let data = this.allFireElements //所有消防要素模板
    let treeData = [] //tree型 处理完成后的数据
    data.forEach(element => {
      element.isTemplate = true //添加模板标识
      element.isLook = true //添加是否可见标识
      element.name!='其他'? element.children = [] : null

      if(storeyData){
        for(let key in storeyData.data){
          storeyData.data[key].isLookPattern = true
          if(element.id == storeyData.data[key].FireElementId){
            storeyData.data[key].isTemplate = false
            storeyData.data[key].isLook = true
            
            element.isNewElement = true //该节点children是否存在新添加的真实素材 标识

            //定义查看模式下能看到的元素
            element.isLookPattern = true
            if(element.parentId){
              data.forEach(i => {
                if(i.id == element.parentId){
                  i.isLookPattern = true
                }
              })
            }
            //

            element.children.push(storeyData.data[key])
          }
        }
      }
      data.forEach(item => { if (item.parentId == element.id) {element.children.push(item)} });
    });
    data.forEach(element => {
      if (!element.parentId) { treeData.push(element) }
    });
    this.dataSource.data = treeData
    this.treeControl.expandAll()
  }

  //点击树节点
  clickTreeNode(node){
    if(this.canvasData.originalcompanyBuildingData.data[node.id]){
      this.setAssetsProperty(this.canvasData.originalcompanyBuildingData.data[node.id])
    }else if(this.canvasData.originaleveryStoreyData.data[node.id]){
      this.setAssetsProperty(this.canvasData.originaleveryStoreyData.data[node.id])
    }

    //canvas上的素材高亮
    let iconHighLightArr:any = []
    if(node.isTemplate){//如果是模板,则开始向下找
      node.children.forEach(item => {
        if(item.isTemplate){//如果子节点依旧是模板,则继续开始向下找
          item.children.forEach(i => {
            iconHighLightArr.push(i.Id)
          })
        }else{
          iconHighLightArr.push(item.Id)
        }
      })
    }else{
      iconHighLightArr.push(node.id)
    }
    this.canvas.setHighlight(iconHighLightArr)
  }

  //点击数节点的显示隐藏icon
  clickLookItem(node){

    //修改真实素材islook属性
    for(let key in this.storeyData.data){
      if(key == node.id){
        this.storeyData.data[key].isLook = !this.storeyData.data[key].isLook
      }
    }
    
    //所有消防要素模板变化islook值
    if(node.isTemplate){
      this.allFireElements.forEach(item=>{
        if(item.id == node.id || item.name == "其他"){
          item.isLook = !item.isLook
        }
      })
    }

    //子节点跟随父节点的islook变化
    if(node.children && node.children.length != 0){
      node.children.forEach(item=>{
        item.isLook = !node.isLook 
        if(item.children && item.children.length != 0){
          item.children.forEach(i=>{
            i.isLook =  !node.isLook 
          })
        }
      })
     }

    const nodes = this.treeControl.dataNodes;
    const expandNodes = [];
    nodes.forEach((item) => {
      if(item.expandable && this.treeControl.isExpanded(item)){
        expandNodes.push(item.id);
      }
    });
    
    this.dataSource.data = [...this.dataSource.data]
    
    let newNodes = this.treeControl.dataNodes;
    newNodes = newNodes.filter(n => {
      return expandNodes.indexOf(n.id) >= 0;
    });
    newNodes.forEach(item => {
      this.treeControl.expand(item);
    });

    //canvas上的素材显隐
    let iconVisibleArr:any = []
    if(node.isTemplate){//如果是模板,则开始向下找
      node.children.forEach(item => {
        if(item.isTemplate){//如果子节点依旧是模板,则继续开始向下找
          item.children.forEach(i => {
            iconVisibleArr.push(i.Id)
          })
        }else{
          iconVisibleArr.push(item.Id)
        }
      })
    }else{
      iconVisibleArr.push(node.id)
    }
    this.canvas.setIconVisible(iconVisibleArr,!node.isLook)
  }

  //计算 可视区域内宽度, 是否缩放背景图
  backGroundScale () {
    let that = this
    let dad = document.querySelector('.functionalDomainContent').clientWidth
    let dadHeight = document.querySelector('.functionalDomainContent').clientHeight
    let left = document.querySelector('.functionalDomainLeft').clientWidth
    let right = document.querySelector('.functionalDomainRight').clientWidth
    let imgWidth = dad - left - right//可视区域内 宽度
    let img = new Image()
    img.src = this.selectingSitePlan.imageUrl;  
    img.onload = function(){
      if (img.height > dadHeight && img.width > imgWidth) {
        let width = imgWidth/img.width
        let height = dadHeight/img.height
        that.canvas.setBackgroundScale((width>height? height : width)-0.005)
        return
      } else if (img.height > dadHeight) {
        that.canvas.setBackgroundScale((dadHeight/img.height)-0.005)
        return
      } else if (img.width > imgWidth) {
        that.canvas.setBackgroundScale((imgWidth/img.width)-0.005)
        return
      }
    };
  }

  //封装 刷新 tree 数据
  renovateTreeData (isRefresh:boolean = true) {
    this.allFireElements[this.allFireElements.length-1].children = []
    isRefresh? this.canvas.refresh() : null
    isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
    isRefresh? this.isShowProperty = true : null
    isRefresh? this.isShowAttribute = true : null
    isRefresh && this.selectingSitePlan.imageUrl? this.backGroundScale() : null

    let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
    let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
    let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据

    for(let key in companyBuildingData.data){
      if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
        storeyData.data[key] = companyBuildingData.data[key]
      }
    }
    for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
      let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
      if (!noMatch) {
        this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
      }
    }
    this.handleTreeData(storeyData) //处理tree数据结构
  }



  //陈鹏飞↓↓↓
  //陈鹏飞↓↓↓
  //陈鹏飞↓↓↓
  allFireElements:any = []; //当前 单位/建筑 下的消防要素

  isShowAttribute:boolean = true; //属性栏 是否显示 默认数据
  isShowProperty:boolean = false //属性栏 是否有东西

  toggleExpandPanel:boolean = false; //可展开面板展开或关闭
  toggleExpandPanelRight:boolean = false; //可展开面板展开或关闭
  togglePlane:boolean = true; //可展开面板平面图 显隐
  toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
  //可展开面板展开或关闭
  toggle () {
    this.toggleExpandPanel = !this.toggleExpandPanel
  }
  //可展开面板展开或关闭
  toggle2 () {
    this.toggleExpandPanelRight = !this.toggleExpandPanelRight
  }
  //可展开面板 平面图 展开或关闭
  togglePlanarGraph () {
    this.togglePlane = !this.togglePlane
  }
  //可展开面板 素材库 展开或关闭
  toggleMaterial () {
    this.toggleMaterialBank = !this.toggleMaterialBank
  }

  sitePlanData:any = []; //总平面图 楼层/区域 数据
  selectingSitePlan:any; //选中的 平面图 楼层/区域
  selectSitePlanIndex:number; //选中的 平面图 楼层/区域 index

  //获取总平面图
  getSitePlan () {
    let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
    let planData = this.getSitePlanCompanyData() //获取 单位 数据
    this.http.get('/api/CompanyAccount/SitePlans').subscribe(data=>{
      this.sitePlanData = data
      this.selectingSitePlan = this.sitePlanData[0] || {}
      this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
      this.selectSitePlanIndex = 0

      Promise.all([fireData,planData]).then((res)=>{
        this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
      })

    })
  }

  //获取建筑 楼层/区域
  getBuildingSitePlan (item) {
    let params = {
      buildingId: item.id
    }
    let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素
    let planData = this.getBuildingData(params) //获取 建筑 数据
    this.http.get('/api/CompanyAccount/BuildingAreas',{params}).subscribe(data=>{
      this.sitePlanData = data
      this.selectingSitePlan = this.sitePlanData[0] || {}
      this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
      this.selectSitePlanIndex = 0

      Promise.all([fireData,planData]).then((res)=>{
        this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据
      })

    })
  }

  //根据单位类型获得所有的消防要素
   getFireElements (e) {
    let params = {ids:e}
    return new Promise ((resolve,reject)=>{
      this.http.get('/api/Companies/FireElements',{params}).subscribe((data:any)=>{
        this.allFireElements = data //所有消防要素
        let other = {
          children: [],
          computed: true,
          id: '',
          name: '其他',
          order: 999,
          parentId: null,
          tag: "INPUT",
          isLookPattern : true
        }
        this.allFireElements.push(other)
        resolve('success')
      })
    })
  }

  //获取 单位 数据
  getSitePlanCompanyData () {
    return new Promise ((resolve,reject)=>{
      this.http.get('/api/CompanyAccount/CompanyData').subscribe((data:any)=>{
        this.canvasData.originalcompanyBuildingData = data || {} // 单位原数据
        this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {}
        this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0"
        this.canvasData.originalcompanyBuildingData.companyId? null : this.canvasData.originalcompanyBuildingData.companyId = sessionStorage.getItem('companyId')
        resolve('success')
      })
    })
  }

  //获取 平面图 楼层数据
  getSitePlanStorey (e) {
    let params = {sitePlanId: e.id}
    this.http.get(`/api/CompanyAccount/SitePlanData`,{params}).subscribe((data:any)=>{
      this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据
      this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {}
      this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0"
      this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = e.id || null
      this.renovateTreeData()
    })
  }

  //获取 建筑 数据
  getBuildingData (e) {
    return new Promise ((resolve,reject)=>{
      this.http.get(`/api/CompanyAccount/BuildingData`,{params:e}).subscribe((data:any)=>{
        this.canvasData.originalcompanyBuildingData = data || {} // 建筑原数据
        this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {}
        this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0"
        this.canvasData.originalcompanyBuildingData.buildingId? null : this.canvasData.originalcompanyBuildingData.buildingId = e.buildingId
        resolve('success')
      })
    })
  }

  //获取 建筑 楼层数据
  getBuildingStorey (e) {
    let params = {buildingAreaId: e.id}
    this.http.get(`/api/CompanyAccount/BuildingAreaData`,{params}).subscribe((data:any)=>{
      this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据
      this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {}
      this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0"
      this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = e.id || null
      this.renovateTreeData()
    })
  }

  //点击选中 平面图 楼层/区域 时
  selectSitePlan (item,index) {
    if (this.selectSitePlanIndex != index) {

      if (this.canvasData.isChange) { //true 数据被改动
        let isTrue = confirm('是否保存当前编辑数据')
        if (isTrue) { //先保存数据 在切换
          let isSuccess = this.saveSite()//true的时候 先保存数据
          if (isSuccess != false) {
            this.selectingSitePlan = item
            this.selectSitePlanIndex = index
            this.canvasData.selectStorey = item //服务中 存一份数据
            if (this.checkedBuildingIndex==-1) {  //总平面图时
              this.getSitePlanStorey(item) //获取 平面图 楼层数据
            } else {  //楼层/区域时
              this.getBuildingStorey(item) //获取 建筑 楼层数据
            }
          }
        } else { //不保存数据 直接切换
          this.selectingSitePlan = item
          this.selectSitePlanIndex = index
          this.canvasData.selectStorey = item //服务中 存一份数据
          if (this.checkedBuildingIndex==-1) {  //总平面图时
            this.getSitePlanStorey(item) //获取 平面图 楼层数据
            this.getSitePlanCompanyData ()
          } else {  //楼层/区域时
            this.getBuildingStorey(item) //获取 建筑 楼层数据
            let params = { buildingId: this.beforeOneCheckedBuilding.id }
            this.getBuildingData(params)
          }
        }
  
      } else { //false 数据没被改动
        this.selectingSitePlan = item
        this.selectSitePlanIndex = index
        this.canvasData.selectStorey = item //服务中 存一份数据
        if (this.checkedBuildingIndex==-1) {  //总平面图时
          this.getSitePlanStorey(item) //获取 平面图 楼层数据
        } else {  //楼层/区域时
          this.getBuildingStorey(item) //获取 建筑 楼层数据
        }
      } //if

    }
  }

  //新增平面图 楼层/区域
  foundPanel (e) {
    e.stopPropagation()
    let data = {
      isBuilding: this.checkedBuildingIndex==-1? false:true,
      Panel: this.beforeOneCheckedBuilding,
      order: this.sitePlanData.length? this.sitePlanData[this.sitePlanData.length-1].order+1:0,
    }
    let dialogRef = this.dialog.open(leftFunctionalDomainComponent,{data});
    dialogRef.afterClosed().subscribe(data=>{
      if (data =='总平面图') {
        this.renovateSitePlan()
      } else if (data =='建筑') {
        this.renovateBuilding()
      }
    })
  }

  //编辑平面图 楼层/区域
  editPlaneData (e) {
    let data = {
      isBuilding: this.checkedBuildingIndex==-1? false:true,
      Panel: this.beforeOneCheckedBuilding,
      buildingData: e,
    }
    let dialogRef = this.dialog.open(editPlaneFigureComponent,{data});
    dialogRef.afterClosed().subscribe(data=>{
      if (data =='总平面图') {
        this.renovateSitePlan()
      } else if (data =='建筑') {
        this.renovateBuilding()
      }
    })
  }

  //平面图 楼层/区域 上移
  moveUp (item,index) {
    if (index != 0) {
      let replaceIndex = this.sitePlanData[index].order
      this.sitePlanData[index].order = this.sitePlanData[index-1].order
      this.sitePlanData[index-1].order = replaceIndex
      if (this.checkedBuildingIndex==-1) { //总平面图
        this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1]).subscribe(data=>{
          this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{
            this.selectSitePlanIndex = this.selectSitePlanIndex-1
            this.renovateSitePlan()
          })
        })
      } else { //楼层/区域
        this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1]).subscribe(data=>{
          this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{
            this.selectSitePlanIndex = this.selectSitePlanIndex-1
            this.renovateBuilding()
          })
        })
      }

    } //if index
  }

  //平面图 楼层/区域 下移
  moveDown (item,index) {
    if (index != this.sitePlanData.length-1) {
      let replaceIndex = this.sitePlanData[index].order
      this.sitePlanData[index].order = this.sitePlanData[index+1].order
      this.sitePlanData[index+1].order = replaceIndex
      if (this.checkedBuildingIndex==-1) { //总平面图
        this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1]).subscribe(data=>{
          this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{
            this.selectSitePlanIndex = this.selectSitePlanIndex+1
            this.renovateSitePlan()
          })
        })
      } else { //楼层/区域
        this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1]).subscribe(data=>{
          this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{
            this.selectSitePlanIndex = this.selectSitePlanIndex+1
            this.renovateBuilding()
          })
        })
      }

    } //if index
  }

  //旋转底图
  revolveImg (item) {
    item.imageAngle==270? item.imageAngle = 0 : item.imageAngle = item.imageAngle+90
    if (this.checkedBuildingIndex==-1) { //总平面图
      this.http.put(`/api/CompanyAccount/SitePlans/${item.id}`,item).subscribe(data=>{
        let isSuccess = this.renovateSitePlan()
        isSuccess.then(res=>{
          this.canvas.refreshBackgroundImage()
        })
      })
    } else { //楼层/区域
      this.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{
        let isSuccess = this.renovateBuilding()
        isSuccess.then(res=>{
          this.canvas.refreshBackgroundImage()
        })
      })
    }

  }

  //删除 平面图 楼层/区域
  deletePlaneData (item) {
    let isDelete = confirm('您确定要删除吗')
    if (isDelete) {
      if (this.checkedBuildingIndex==-1) { //总平面图
        this.http.delete(`/api/CompanyAccount/SitePlans/${item.id}`).subscribe(data=>{
          this.deleteShareData(item,-1)
        })
      } else { //楼层/区域
        this.http.delete(`/api/CompanyAccount/BuildingAreas/${item.id}`).subscribe(data=>{
          this.deleteShareData(item,1)
        })
      }
    }
  }

  //删除当前 单位/建筑的 共享数据中 已删除data
  deleteShareData (e,isCompany) {
    this.sitePlanData.forEach((element,index) => {
      if (element.id===e.id) {
        this.sitePlanData.splice(index,1)
        return
      }
    });
    let data = this.canvasData.originalcompanyBuildingData;
    for(let key in data.data){
      if (data.data[key].FloorId === e.id) { //处理 单位/建筑 数据是否归于当前楼层下
        delete data.data[key]
      }
    }
    let newData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
    newData.data = JSON.stringify(newData.data) // 转换JSON 数据格式
    this.selectingSitePlan = this.sitePlanData[0] || {}
    this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
    this.selectSitePlanIndex = 0
    this.canvasData.isChange = false
    if (isCompany===-1) {
      this.http.post("/api/CompanyAccount/CompanyData",newData).subscribe(data => {})
      this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
    } else {
      this.http.post("/api/CompanyAccount/BuildingData",newData).subscribe(data => {})
      this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据
    }
  }

  //复制图层 平面图 楼层/区域
  duplicateLayer (item) {
    if (this.checkedBuildingIndex==-1) { //总平面图
      item.id = ""
      item.modifiedTime = new Date()
      item.name = item.name + '(副本)'
      item.order = this.sitePlanData[this.sitePlanData.length-1].order+1
      this.http.post('/api/CompanyAccount/SitePlans',item).subscribe((data:any)=>{
        let newData = {
          version: this.canvasData.originaleveryStoreyData.version || "2.0",
          id: "",
          data: JSON.stringify( JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData.data)) ) || null,
          sitePlanId: data.id
        }
        this.http.post('/api/CompanyAccount/SitePlanData',newData).subscribe(data=>{
          this.renovateSitePlan()
        })

      })
    } else { //楼层/区域
      item.id = ""
      item.modifiedTime = new Date()
      item.name = item.name + '(副本)'
      item.order = this.sitePlanData[this.sitePlanData.length-1].order+1
      this.http.post('/api/CompanyAccount/BuildingAreas',item).subscribe((data:any)=>{
        let newData = {
          version: this.canvasData.originaleveryStoreyData.version || "2.0",
          id: "",
          data: JSON.stringify( JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData.data)) ) || null,
          buildingAreaId: data.id
        }
        this.http.post('/api/CompanyAccount/BuildingAreaData',newData).subscribe(data=>{
          this.renovateBuilding()
        })

      })
    }
  }

  //平面图 楼层/区域  替换底图
  replaceBaseMap (e,item) {
    e.stopPropagation();
    let file = e.target.files[0] || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let maxSize = 5 * 1024 * 1024 //5MB一个分片

    if (file && fileSize<=maxSize) { //上传文件<=5MB时
      let formData = new FormData()
      formData.append("file",file)
      this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
        this.renovateBaseMap(data.objectName,item)
      })
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('上传底图需小于5MB','确定',config);
    }
  }

  //封装 替换底图 function
  renovateBaseMap (e,item) {
    item.imageUrl = '/api/Objects/WebPlan2D/' + e
    if (this.checkedBuildingIndex ==-1) { //总平面图
      this.http.put(`/api/CompanyAccount/SitePlans/${item.id}`,item).subscribe(data=>{
        let isSuccess = this.renovateSitePlan()
        isSuccess.then(res=>{
          this.canvas.refreshBackgroundImage()
          this.backGroundScale()
        })
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传底图成功','确定',config);
      })
    } else { //楼层/区域
      this.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{
        let isSuccess = this.renovateBuilding()
        isSuccess.then(res=>{
          this.canvas.refreshBackgroundImage()
          this.backGroundScale()
        })
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传底图成功','确定',config);
      })
    }
  }

  //封装 刷新总平面图 数据
  renovateSitePlan () {
    return new Promise ((resolve,reject)=>{
      this.http.get('/api/CompanyAccount/SitePlans').subscribe(data=>{
        this.sitePlanData = data
        this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex]
        this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据
        this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = this.selectingSitePlan.id || null
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('数据更新成功','确定',config);
        resolve('success')
      })
    })
  }

  //封装 刷新 楼层/区域 数据
  renovateBuilding () {
    let params = {
      buildingId: this.beforeOneCheckedBuilding.id
    }
    return new Promise ((resolve,reject)=>{
      this.http.get('/api/CompanyAccount/BuildingAreas',{params}).subscribe(data=>{
        this.sitePlanData = data
        this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex]
        this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据
        this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = this.selectingSitePlan.id || null
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('数据更新成功','确定',config);
        resolve('success')
      })
    })
  }

  allLibrary:any = []; //所有素材库 + 素材
  selectLibrary:any; //选中的素材库
  selectImage:any; //选中的素材库图片
  selectImageIndex:number; //选中的素材库图片index

  //获取素材库
  getAllLibrary () {
    this.http.get('/api/AssetLibraries?tag=input').subscribe((data:any)=>{
      data.forEach(element => {
        element.images = []
      });
      this.allLibrary = data
    })
  }

  //素材库展开面板展开时
  opened (e) {
    if (!e.images.length) { //当前素材库没加载素材时
      this.http.get(`/api/Assets?libraryId=${e.id}`).subscribe((data:any)=>{
        e.images = data
      })
    }
  }

  //点击选中素材库图片时
  selectImg (item,items,index) {
    this.selectLibrary = item.name
    this.selectImage = items
    this.selectImageIndex = index
    this.canvasData.selectTemplateData = items
    this.canvas.beginPaint()
  }

}



//创建建筑
@Component({
  selector: 'app-createBuilding',
  templateUrl: './createBuilding.html',
  styleUrls: ['./collection-tools.component.scss']
})
export class CreateBuilding {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<CreateBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }

  allBuildingType:any//所有的建筑类型
  selected:any; //选中的建筑
  ngOnInit(): void {
    this.getAllBuildingType()
  }






  getAllBuildingType(){
    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
      this.allBuildingType = data
    })
  }

  //创建建筑功能分区
  onSubmit (e) {
    let companyId = sessionStorage.getItem("companyId")
    let lastBuildingOrder = this.data.length != 0 ? this.data[this.data.length - 1].order + 1 : 0
    let data = 
    {
      id: "",
      name: e.propertyName,
      order: lastBuildingOrder ,
      enabled: true,
      companyId: companyId,
      buildingTypes: [
        {
          id: e.buildingId,
          name: ""
        }
      ]
    }
    this.http.post("/api/CompanyAccount/Buildings",data).subscribe(data=>{
      this.dialogRef.close("创建成功");
    },err=>{
      this.dialogRef.close("创建失败");
    })
  }
}

//编辑建筑
@Component({
  selector: 'app-editBuilding',
  templateUrl: './editBuilding.html',
  styleUrls: ['./collection-tools.component.scss']
})
export class EditBuilding {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<EditBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }
  
  defaultName:String = this.data.item.name//默认建筑名称
  defaultBuildingType:String = this.data.item.buildingTypes[0].id//默认建筑类型
  allBuildingType:any//所有的建筑类型

  ngOnInit(): void {
    this.getAllBuildingType()
  }

  getAllBuildingType(){
    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
      this.allBuildingType = data
    })
  }

  //编辑建筑信息
  onSubmit (e) {
    let companyId = sessionStorage.getItem("companyId")
    let data = 
    {
      id: this.data.item.id,
      name: e.propertyName,
      order: this.data.item.order,
      enabled: true,
      companyId: companyId,
      buildingTypes: [
        {
          id: e.buildingId,
          name: ""
        }
      ]
    }
    this.http.put(`/api/CompanyAccount/Buildings/${this.data.item.id}`,data).subscribe(data=>{
      this.dialogRef.close("修改成功");
    },err=>{
      this.dialogRef.close("修改失败");
    })
  }
}

//查看图片大图
@Component({
  selector: 'viewdetails',
  templateUrl: './viewdetails.html',
  styleUrls: ['./collection-tools.component.scss']
})
export class ViewDetails {
  // myControl = new FormControl();
  //注入MatDialogRef，可以用来关闭对话框
  //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails>,@Inject(MAT_DIALOG_DATA) public data,private element: ElementRef) {}
  imagesArr = this.data.imagesArr
  onNoClick(): void {
    this.dialogRef.close();
  }
  ngOnInit(): void {
    setTimeout(() => {
      var mySwiper = new Swiper('.swiper-container',{
        loop: false,
        initialSlide :this.data.index,//默认索引
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      } 
        //其他设置
      });  
    }, 0);
  }
  closeDialog(){
    this.dialogRef.close();
  }
  count = 10
  zoomimg(e) {
    if(this.count != 1 || e.wheelDelta >= 120){
      if(e.wheelDelta >= 120){
        this.count++
      }else{
        this.count--
      }
    }
    e.srcElement.style.zoom = this.count + '0%'
    e.srcElement.style.maxWidth = null
    e.srcElement.style.maxHeight = null
  }

}