ShangHaiYuan-AnXin/src/app/key-unit/basicinfo/basicinfo.component.ts

import { Component, OnInit, Inject ,ViewChild, Renderer2, ElementRef, Directive, forwardRef} from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms';
import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
import format from 'date-fns/format';
import { TreeService } from '../../http-interceptors/tree.service'
import { FileUploader, FileItem } from 'ng2-file-upload'
import { AddHouseInfo } from './addhouseinfo.component'
import { DomSanitizer } from '@angular/platform-browser'
import { Injectable } from "@angular/core"
import { filter } from 'rxjs/operators';
import { async } from '@angular/core/testing';
import { MatTableDataSource } from '@angular/material/table';
import { isNgTemplate } from '@angular/compiler';
import * as _ from 'lodash';
import Swiper from 'swiper';
import { LookMaster } from './lookmaster.component'
import { ActivatedRoute } from '@angular/router';
import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service';
declare var AMap: any;
import Viewer from 'viewerjs';
@Component({
  selector: 'app-basicinfo',
  templateUrl: './basicinfo.component.html',
  styleUrls: ['./basicinfo.component.scss']
})
export class BasicinfoComponent implements OnInit {

  //查看消防设施统计
  seeFirfightingDevice (e) {
    e.stopPropagation()
    let dialogRef = this.dialog.open(StatisticsOfFireFightingFacilities,{hasBackdrop: false,position: {right:'55px',top:'165px'}});
    dialogRef.afterClosed().subscribe();   
  }

  unitinfo:any={
    id: '',
    name: '', //单位信息名字
    usci: '', //单位信用代码
    contacts: '', //联系人
    phone: '', //联系电话
    address: '', //单位地址
    imageUrl: '', //图片地址
    location: '', //单位地理位置
    modifiedTime: '', //信息修改时间
    organizationId: '', //所属组织机构
    organizationName: '', //组织机构名称
    buildingTypes: [
      {
        id:'',
        name:''
      }
    ]
  }
  
  uploader:FileUploader = new FileUploader({    //初始化上传事件 ng2-upload
    url: `/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,   
    method: "POST",    
    itemAlias: "uploadedfile",
    autoUpload: false,
    removeAfterUpload:true //上传之后是否在队列中移除，如果不移除就会出现无法上传第二次的情况
  });
    
  private _transformer = (node, level: number) => {   //初始化tree
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      children: node.children
    };
  }
  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);
  
  myControl = new FormControl();

  isorganizationbox = false//控制辖区中队框的显示隐藏
  selectedorganization: any//所选的辖区中队
  selectedorganizationid:any //所选的辖区中队的id
  highhouse = false//控制高层表单的显示
  
  defaultbuildingTypes :any  //存储当前建筑的默认类型的id
  buildingTypesname:any//存储当前建筑的默认类型name
  buildingCustomData:any //存储当前建筑的自定义信息
  allunittype: any //所有单位类型
  allorganizing:any = [] //所有组织机构
  constructor(private tabbarService: TabbarAndScoreService,private route:ActivatedRoute,private  elementRef: ElementRef,public renderer2: Renderer2,private http: HttpClient, private tree: TreeService, private sanitizer: DomSanitizer, public dialog: MatDialog,public snackBar: MatSnackBar) { }

  houses: any = [] //存储当前单位的建筑信息
  unitId : any //当前单位id
  gallery : any //Viewer实例
  ngOnInit(): void {
    this.getallunittype()
    this.getorganization()
    this.getUnitAllBuildings()//获得单位下所有建筑
    this.unitId = this.route.snapshot.queryParams.id
    setTimeout(() => {
      this.gallery = new Viewer(document.getElementById('viewerjs'),{
        url: 'data-original'
      });
    },0);
  }
  //获得单位下所有建筑
  getUnitAllBuildings(){
    this.unitId = this.route.snapshot.queryParams.id
    this.http.get("/api/Buildings",{
      params:{
        companyId:this.unitId
      }
    }).subscribe(async (data:any)=>{ // 获得当前单位所有的建筑
      data.forEach(element => {
        element.data = []
      });
      this.houses = data
      if(this.houses.length != 0){
        this.getBuildingInfo()
      } 
    })
  }



  isMapLabel:boolean
  //地图标注位置
  markerPosition:any = {x: 0, y: 0}//单位坐标
  map:any //地图实例
  isGisTopBox:boolean = false//点击位置按钮
  isGisTopBoxTwo:boolean = false//点击位置按钮
  oldPositionMarker:any //旧位置marker实例
  newPositionMarker:any //新位置marker实例

  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/newposition.png">' +
  '</div>'
  newPositionMarkerContentBtn:any = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/newposition.png">' +
  '   <div  class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
  '</div>'
  oldPositionMarkerContent:any = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/oldposition.png">' +
  '</div>'
  //初始化地图
  searchTitle:any//搜索内容
  placeSearch:any//地址搜索类
  search(){
    this.placeSearch.search(this.searchTitle, (status, result) => {
      // 搜索成功时，result即是对应的匹配数据
      if(result.info == "OK"){
        this.newPositionMarker.setPosition([result.poiList.pois[0].location.lng,result.poiList.pois[0].location.lat])
        this.markerPosition2 = {x: result.poiList.pois[0].location.lng, y: result.poiList.pois[0].location.lat}
        this.map.setCenter([result.poiList.pois[0].location.lng,result.poiList.pois[0].location.lat]); //设置地图中心点
      }else{
        alert('查询不到输入地址信息')
      }
      
    })
      
  }
  //初始化地图
  labelGis(){
    this.map = new AMap.Map('container', {
      zoom:12
    })
    this.map.on('complete', () => {
      this.isGisTopBox = true
    });
  //输入提示
  var autoOptions = {
    input: "tipinput"
  };
  AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
    var auto = new AMap.AutoComplete(autoOptions);
    this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
    auto.on("select", (e)=>{
          // console.log(e)
          // console.log( this.newPositionMarker)
          this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
          this.markerPosition2 = {x: e.poi.location.lng, y: e.poi.location.lat}
          this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点
    });//注册监听，当选中某条记录时会触发

  });

  if(this.isMapLabel){//如果已经标注单位坐标
    // console.log('已标注单位位置')
    this.map.setCenter([this.unitinfo.location.x,this.unitinfo.location.y]);
    this.oldPositionMarker = new AMap.Marker({
      position: [this.unitinfo.location.x,this.unitinfo.location.y],
      content: this.newPositionMarkerContent,
      offset: new AMap.Pixel(-15, -18)
    })
    // 将 markers 添加到地图
    this.map.add(this.oldPositionMarker);
  }else{
    // console.log('未标注单位位置')
    this.map.setCity('上海');
  }
  }
  markerPosition2
  //点击位置按钮
  setPosition(){
    this.isGisTopBox = false
    this.isGisTopBoxTwo = true
    if(this.isMapLabel){//如果已经标注单位坐标
      // console.log('已标注单位位置')

      if(this.oldPositionMarker){
        this.oldPositionMarker.setContent(this.oldPositionMarkerContent)
      }
      if(this.newPositionMarker){
        this.newPositionMarker.setContent(this.oldPositionMarkerContent)
      }

      this.newPositionMarker = new AMap.Marker({
          draggable: true,
          position: [this.markerPosition.x,this.markerPosition.y],
          content: this.newPositionMarkerContentBtn,
          offset: new AMap.Pixel(-15, -18)
      });
      this.map.add(this.newPositionMarker);


      if(this.markerPosition.x && this.markerPosition.x != 0){
        this.markerPosition2 = {x: this.markerPosition.x,y: this.markerPosition.y}
      }else{
        this.markerPosition2 = {x: this.map.getCenter().lng,y: this.map.getCenter().lat}  //获取当前地图中心位置
      }
      this.newPositionMarker.on('dragend', (e)=>{
        // console.log(1111)
        this.markerPosition2 = {x: e.lnglat.lng, y: e.lnglat.lat}
      })
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ 
        this.map.clearMap();
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.newPositionMarker = new AMap.Marker({
          position: [this.markerPosition2.x,this.markerPosition2.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.markerPosition = this.markerPosition2
        this.map.add(this.newPositionMarker);
      })
      //点击取消
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ 
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.map.clearMap();
        this.newPositionMarker = new AMap.Marker({
          position: [this.markerPosition.x,this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.map.setCenter([this.markerPosition.x,this.markerPosition.y]); //设置地图中心点
        this.map.add(this.newPositionMarker);  
      })
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ 
        this.map.clearMap();
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.newPositionMarker = new AMap.Marker({
          position: [this.markerPosition2.x,this.markerPosition2.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.markerPosition = this.markerPosition2
        this.map.add(this.newPositionMarker);
      })
      //点击取消
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'touchstart',(event)=>{ 
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.map.clearMap();
        this.newPositionMarker = new AMap.Marker({
          position: [this.markerPosition.x,this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.map.setCenter([this.markerPosition.x,this.markerPosition.y]); //设置地图中心点
        this.map.add(this.newPositionMarker);  
      })
    }else{
      // console.log('未标注单位位置')
      if(this.newPositionMarker){
        this.newPositionMarker.setContent(this.oldPositionMarkerContent)
      }
      let center
      if(this.markerPosition.x && this.markerPosition.x != 0){
        center = [this.markerPosition.x,this.markerPosition.y]
      }else{
        center = this.map.getCenter(); //获取当前地图中心位置
        this.map.setCenter(center);
      }
      
      this.newPositionMarker = new AMap.Marker({
          draggable: true,
          position: center,
          content: this.newPositionMarkerContentBtn,
          offset: new AMap.Pixel(-15, -18)
      });
      this.map.add(this.newPositionMarker);

      // let markerPosition 
      if(this.markerPosition.x && this.markerPosition.x != 0){
        this.markerPosition2 = {x: this.markerPosition.x,y: this.markerPosition.y}
      }else{
        this.markerPosition2 = {x: this.map.getCenter().lng,y: this.map.getCenter().lat}  //获取当前地图中心位置
      }
      this.newPositionMarker.on('dragend', (e)=>{
        this.markerPosition2 = {x: e.lnglat.lng, y: e.lnglat.lat}
       
      })
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ 
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.markerPosition = this.markerPosition2
        this.map.clearMap();
        this.newPositionMarker = new AMap.Marker({
          position: [this.markerPosition.x,this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.map.add(this.newPositionMarker);
      })
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ 
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.markerPosition = this.markerPosition2
        this.map.clearMap();
        this.newPositionMarker = new AMap.Marker({
          position: [this.markerPosition.x,this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.map.add(this.newPositionMarker);
      })
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ 
        this.map.clearMap();
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        if(this.markerPosition.x && this.markerPosition.x != 0){//说明之前标过点
          this.newPositionMarker = new AMap.Marker({
            position: [this.markerPosition.x,this.markerPosition.y],
            content: this.newPositionMarkerContent,
            offset: new AMap.Pixel(-15, -18)
          });
          this.map.setCenter([this.markerPosition.x,this.markerPosition.y]); //设置地图中心点
          this.map.add(this.newPositionMarker);
        }
      })//取消
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'touchstart',(event)=>{ 
        this.map.clearMap();
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        if(this.markerPosition.x && this.markerPosition.x != 0){//说明之前标过点
          this.newPositionMarker = new AMap.Marker({
            position: [this.markerPosition.x,this.markerPosition.y],
            content: this.newPositionMarkerContent,
            offset: new AMap.Pixel(-15, -18)
          });
          this.map.setCenter([this.markerPosition.x,this.markerPosition.y]); //设置地图中心点
          this.map.add(this.newPositionMarker);
        }
      })//取消
    }
    


    
  }



  //获得所有单位类型
  getallunittype() {
    this.http.get("/api/BuildingTypes/Simple").subscribe(data => {
      this.allunittype = data
    })
  }
  //获得所有组织机构
  getorganization() {
    this.http.get('/api/Organizations').subscribe(
      (data: any) => {
        this.allorganizing = data
        this.dataSource.data = this.tree.toTree(data);
        let _this = this
        this.getunitinfo().then((e)=>{
          if(this.unitinfo.location && (this.unitinfo.location.x != 0 && this.unitinfo.location.y != 0) ){//已标注
            _this.isMapLabel = true
            _this.markerPosition = _this.unitinfo.location
          }else{//未标注
            _this.isMapLabel = false
          }
          this.labelGis()
        })
      }
    )
  }
  //获得当前单位的基本信息
  async getunitinfo(){
    let result = await new Promise((resolve, reject) => {
      this.http.get(`/api/Companies/${this.unitId}`).subscribe((data:any)=>{
        if(data.buildingTypes.length){
          sessionStorage.setItem('buildingTypeId',data.buildingTypes[0].id)
        }else{
          sessionStorage.setItem('buildingTypeId',"")
        }
        let node
        this.allorganizing.forEach(item => {
          if(item.id == data.organizationId){
            node = item
          }
        });
        if(node){
          if(!node.parentId){
            this.selectedorganization = node.name
          }else{
            let namearr = [node.name]
            let targetId = node.parentId; // 临时变量
            for(let i = 0; i < node.level ; i++){
              this.allorganizing.forEach(item => {
                if(item.id == targetId ){
                  namearr.push(item.name) 
                  targetId = item.parentId; // 临时变量更新没有副作用
                }
              });
            }
            namearr.reverse()
            let str = ''
            namearr.forEach(item=>{
              str += '/' + item
            })
            this.selectedorganization = str.substr(1)
          }
        }
        this.unitinfo = data
        resolve(this.unitinfo)
        this.selectedorganizationid = data.organizationId
        if(data.imageUrl){
          this.imgsrc = data.imageUrl
        }
        if(data.buildingTypes[0]){
          this.defaultbuildingTypes = data.buildingTypes[0].id
          this.buildingTypesname = data.buildingTypes[0].name
        }
      }) 
    })
    
  }
  //获得建筑自定义信息
  getbuildingCustomData(){
    this.http.get("/api/BuildingCustomData",{params:{
      buildingId:this.houses[this.selectedBuildingIndex].id
    }}).subscribe(data=>{
      this.buildingCustomData = data
    })
  }

  //点击+号 增加建筑
  addhouseinfo() {
    const dialogRef = this.dialog.open(AddHouseInfo, {//调用open方法打开对话框并且携带参数过去
      width: '260px',
      data: {unitinfo:this.unitinfo,unitId:this.unitId}
    });
    dialogRef.afterClosed().subscribe(
    async data => {
        if(data){
          this.houses.push(data)
          this.tabbarService.sendMessage('changeScore');//通知服务改变分数
        }
      }
    );
  }
  //获得建筑的全部信息放到对应houses数组的建筑中
  selectedBuildingIndex:number = 0
  getBuildingInfo(){
    this.unitId = this.route.snapshot.queryParams.id
    this.http.get("/api/BuildingBasicInfos",{ // 循环请求当前单位建筑每一个建筑的信息保存到数组中
      params:{
        companyId :this.unitId,
        buildingId:this.houses[this.selectedBuildingIndex].id,
        buildingType:this.houses[this.selectedBuildingIndex].buildingTypes[0].id
      }
    }).subscribe((data)=>{
      // console.log('当前选择建筑的基础信息',data)
      //需要处理一下表格信息
      data[0].buildingBasicGroups.forEach(element => {
         //需要处理一下表格信息
        if(element.type == 1){
          let afterData = []
          let tempArr = [];
          for (let i = 0; i < element.propertyInfos.length; i++) {
            element.propertyInfos[i].tag == '' ? element.propertyInfos[i].tag = 1 : null
            if (tempArr.indexOf(element.propertyInfos[i].tag) === -1) {
              afterData.push({
                tag: element.propertyInfos[i].tag,
                origin: [element.propertyInfos[i]]
              });
              tempArr.push(element.propertyInfos[i].tag);
            } else {
              for (let j = 0; j < afterData.length; j++) {
                if (afterData[j].tag == element.propertyInfos[i].tag) {
                  afterData[j].origin.push(element.propertyInfos[i]);
                  break;
                }
              }
            }
          }
          function compare(property){
            return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
            }
          }
          afterData.forEach(item =>{
            item.origin = item.origin.sort(compare('order'))
          })
          element.propertyInfos = afterData.sort(compare('tag'))
          // console.log(afterData,888);
        }
      });
      let guanquIndex = data[0].buildingBasicGroups.findIndex(item => item.name.indexOf('罐区')>=0); // 找到第一个灌区的索引
      function transferFn(arr) {
        const guanquIndex = arr.findIndex(item => item.name.indexOf('罐区')>=0); // 找到第一个灌区的索引
        
        const guanquList = arr.slice(guanquIndex); // 灌区的列表
        const baseList = arr.slice(0, guanquIndex); // 前面的数据
        const len = guanquList.length;
        const num = len/2; // 计算一共有多少对，这里的前提是数据本身必须成对出现
        // 灌区切割出来的数据，分别存放，最后做一下合并
        const array1 = [];
        const array2 = [];
        for(let i = 0; i<num; i++) {
            array1.push(guanquList[i]); // 灌区x
            array2.push(guanquList[i + num]); // 灌区x/储罐信息
        }
        // 拼接最后的数据
        const result = [...baseList];
        for(let i = 0, ll = array1.length; i < ll; i++){
            result.push(array1[i]);
            if (array2[i]) {
                result.push(array2[i]);
            }
        }
        return result;
      }
      if(guanquIndex != -1 && data[0].buildingBasicGroups[guanquIndex + 1].name.indexOf(data[0].buildingBasicGroups[guanquIndex].name) == -1){
        data[0].buildingBasicGroups = transferFn(data[0].buildingBasicGroups)
      }
      this.houses[this.selectedBuildingIndex].data = data
      //获得自定义信息
      this.http.get("/api/BuildingCustomData",{params:{ //-----处理建筑自定义属性部分
        buildingId:this.houses[this.selectedBuildingIndex].id
        }}).subscribe((data:any)=>{
        if(data && data.customProperties.length != 0){
          this.houses[this.selectedBuildingIndex].customData = data 
          this.houses[this.selectedBuildingIndex].isCustomData = true
        }else{
          this.houses[this.selectedBuildingIndex].isCustomData = false
          this.houses[this.selectedBuildingIndex].customData = {
            id: "",
            customProperties: [{name:'',value:''}],
            buildingId: this.houses[this.selectedBuildingIndex].id
          }
        }
      })
    })
  }
  //点击选项卡
  selectedTabChange(e){
    // console.log(e)
    this.selectedBuildingIndex = e.index
    if(this.houses.length != 0){
      if((this.houses[this.selectedBuildingIndex].data && !this.houses[this.selectedBuildingIndex].data.length) || !this.houses[this.selectedBuildingIndex].data){
        this.getBuildingInfo()
      }
    }
    
  }
  //表格加一行
  addline(ele){
    let newObj = JSON.parse(JSON.stringify(ele[0]))
    for (let index = 0; index < newObj.origin.length; index++) {
      const element = newObj.origin[index];
      element.propertyValue = ""
      element.tag = Number(ele[ele.length - 1].tag) + 1
    }
    newObj.tag = Number(ele[ele.length - 1].tag) + 1
    ele.push(newObj)
  }
  //表格减一行
  removeline(ele){
    if(ele.length>1){
      ele.pop()
    }else{
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('只剩一行，无法删除','确定',config);
    }
  }
  //建筑自定义信息加一行
  addCustomData(item){
    item.customData.customProperties.push({
      name:'',
      value:''
    })
  }
  //建筑自定义信息减一行
  popCustomData(item){
    item.customData.customProperties.pop()
  }
  //储罐加一组
  addTankBox(item,groupsIndex){
    //取出现在最后一个罐区的数字
    let num = (item.data[0].buildingBasicGroups[item.data[0].buildingBasicGroups.length - 1].name).replace(/[^0-9]/ig,"")
    let obj1 = JSON.parse(JSON.stringify(item.data[0].buildingBasicGroups[groupsIndex]))
    let obj2 = JSON.parse(JSON.stringify(item.data[0].buildingBasicGroups[groupsIndex + 1]))
    obj1.name = '罐区' + (Number(num) + 1)
    obj2.name = '罐区' + (Number(num) + 1) + '/储罐信息'
    // console.log(obj2)
    obj1.propertyInfos.forEach(element => {
      element.propertyValue = ''
    });
    let newArr = [obj2.propertyInfos[0]]
    obj2.propertyInfos = newArr
    obj2.propertyInfos[0].origin.forEach(element => {
      element.propertyValue = ''
    });
    item.data[0].buildingBasicGroups.push(obj1)
    item.data[0].buildingBasicGroups.push(obj2)
    // console.log(item.data[0].buildingBasicGroups)
  }
  //储罐减一组
  removeTankBox(item,groupsIndex){
    let num = (item.data[0].buildingBasicGroups[item.data[0].buildingBasicGroups.length - 1].name).replace(/[^0-9]/ig,"")
    if(num != 1){
      var isdeleted = confirm("确定要删除末尾储罐分组吗？")
      if(isdeleted){
        item.data[0].buildingBasicGroups.pop()
        item.data[0].buildingBasicGroups.pop()
      } 
    }else{
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('只剩唯一储罐，无法删除','确定',config);
    }
  }
  FunData(e){//切割数组
    let proportion = 2; //按照比例切割
    let num = 0;
    let _data =[];
    for(let i=0;i<e.length;i++){
        if(i % proportion == 0 && i != 0){
            _data.push(e.slice(num,i));
            num = i;
        }
        if((i+1)==e.length){
            _data.push(e.slice(num,(i+1)));
        }
    }
    return _data;
  }


  //点击辖区中队树，将选择的辖区中队添加到变量
  add(node) {
    this.selectedorganizationid = node.id
    this.isorganizationbox = false

    if(!node.parentId){
      this.selectedorganization = node.name
    }else{
      let namearr = [node.name]
      let targetId = node.parentId; // 临时变量
      for(let i = 0; i < node.level ; i++){
        this.allorganizing.forEach(item => {
          if(item.id == targetId ){
            namearr.push(item.name) 
            targetId = item.parentId; // 临时变量更新没有副作用
          }
        });
      }
      namearr.reverse()
      let str = ''
      namearr.forEach(item=>{
        str += '/' + item
      })
      
      this.selectedorganization = str.substr(1)
    }
  }
  //关闭辖区中队隐藏框
  closeorganizationbox() {
    this.isorganizationbox = false
  }
  //打开辖区中队隐藏框
  openorganizationbox() {
    this.isorganizationbox = true
  }

  hasChild = (_: number, node: any) => node.expandable;
  
  imgsrc = "" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
  noImg = '../../../assets/images/upload.jpg'
  imgUrl = ""//返回来的图片地址后缀
  file: any; //上传的文件
  objectName: any; //上传对象名
  uploadId: any; //上传分块上传事件编号
  isspinner:boolean=false //控制进度圈的显示隐藏
  PartNumberETag: any = []; //分块上传每次返回需要保存的信息
  //change选择文件
  filechange(e) {
    this.file = e.target.files[0] || null //上传的文件
    var reader = new FileReader();
    reader.readAsDataURL(this.file);
    var image:any = new Image();
    reader.onload = function(){
      image.src = reader.result
    }
    setTimeout(() => {
      if(this.file.type.indexOf('image') == -1){
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('请上传图片','确定',config);
        if((<HTMLInputElement>document.getElementById('selectedfile'))){
          (<HTMLInputElement>document.getElementById('selectedfile')).value = null //清空input框缓存
        }
      }else if(this.file.name.toLowerCase().indexOf('png') == -1 && this.file.name.toLowerCase().indexOf('jpg') == -1 && this.file.name.toLowerCase().indexOf('jpeg') == -1){
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('请上传图片后缀为png,jpg,jpeg的文件','确定',config);
        if((<HTMLInputElement>document.getElementById('selectedfile'))){
          (<HTMLInputElement>document.getElementById('selectedfile')).value = null //清空input框缓存
        } 
      }else if(image.width>=4096 || image.height>=5000 ){ 
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config);
        if((<HTMLInputElement>document.getElementById('selectedfile'))){
          (<HTMLInputElement>document.getElementById('selectedfile')).value = null //清空input框缓存
        }
      }else{
        if(this.file){
          this.startUploading()
        }
      }
    
    }, 500);
  } 
  //查看单位大图
  lookmaster(){
    const dialogRef = this.dialog.open(LookMaster, {//调用open方法打开对话框并且携带参数过去
      width: '1600px',
      height:'900px',
      data: {img:this.imgsrc}
    });
    dialogRef.afterClosed().subscribe(
    
    );
  }
  //上传文件
  startUploading() {
    this.isspinner = true
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片

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

      let data = { filename: file.name }
      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.unitinfo.id}`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传
        this.objectName = data.objectName
        this.uploadId = data.uploadId
        this.subsectionUploading()
      })
    }
  }

  //小于5MB不需要分块上传
  upload(){
    this.uploader.queue[0].upload();//开始上传
    this.uploader.queue[0].onSuccess = (response, status, headers) => {    
      // 上传文件成功   
      if (status == 201) {
          // 上传文件后获取服务器返回的数据
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传成功','确定',config);
        this.isspinner = false
        let tempRes = JSON.parse(response);
        this.imgUrl = tempRes.objectName  
        this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
      }else {            
          // 上传文件后获取服务器返回的数据错误        
      }
    };
    this.uploader.queue[0].onError = (response, status, headers) => {    
      if (status == 401) {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传失败','确定',config);
      }
    };
  }

  //开始分块上传
  async subsectionUploading () {
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段

    for (let i = 0;i < allSlice;i++) { //循环分段上传
      let start = i * shardSize //切割文件开始位置
      let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
      let formData = new FormData()
      formData.append("file",file.slice(start, end))

      // 同步写法实现异步调用
      let result = await new Promise((resolve, reject) => {
          // await 需要后面返回一个 promise 对象
          this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
              let msg = {
                  "partNumber":data.partNumber || null,
                  "eTag": data.eTag || null
              }
              resolve(msg) // 调用 promise 内置方法处理成功
          })
      });
      this.PartNumberETag.push(result)
      if (this.PartNumberETag.length === allSlice) {
          this.endUploading()
      }
    }
  }
  //完成分块上传
  endUploading() {
    let data = this.PartNumberETag
    let paramsData = { uploadId: this.uploadId }
    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`, data, { params: paramsData }).subscribe(data => {
      this.imgsrc = `/api/Objects/PlanPlatform/${this.objectName}?x-oss-process=image/resize,m_fill,h_170,w_299`
      this.isspinner = false
      this.PartNumberETag = []
      this.uploader.clearQueue(); //清空input控件文件
    })
  }
  //删除具体建筑
  selectedIndex
  deletedbuilding(item,key){
    // console.log(item)
    var isdeleted = confirm("确定要删除此建筑吗？")
    if(isdeleted){
      // console.log(key)
      // 请求删除接口
      this.http.delete(`/api/Buildings/${item.id}`).subscribe(data=>{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('删除成功','确定',config);
        this.houses.splice(this.houses.findIndex(items=>items==item),1) 
        let obj ={index:key}
        this.selectedTabChange(obj)
        this.tabbarService.sendMessage('changeScore');//通知服务改变分数
      })
    }
  }

  //提交单位基本信息
  onSubmit(value,invalid,form) {
    if(invalid){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请填写必填项','确定',config);
    }else{
      sessionStorage.setItem('buildingTypeId',value.unittype)
      let time =new Date()
      let body = {
        id: this.unitinfo.id,
        name: this.unitinfo.name,
        usci: value.creditcode,
        contacts: value.linkman,
        phone: value.linkphone,
        address: value.unitaddress,
        imageUrl: this.imgsrc,
        location: this.markerPosition,
        modifiedTime: time,
        organizationId: this.selectedorganizationid,
        organizationName: null,
        buildingTypes: [
          {
            id: value.unittype,
            name: this.buildingTypesname
          }
        ]
      }
      this.http.put(`/api/Companies/${this.unitId}`,body).subscribe((data:any)=>{ //修改单位基本信息
        // this.getunitinfo()
        if(!this.houses.length){
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('单位基本信息保存成功，请填写单位建筑模板信息','确定',config);
          // alert("单位基本信息保存成功，请填写单位建筑模板信息")
          let addbody = {             //请求创建单位基本信息成功后  直接创建出一个主体建筑模板
            id: "",//即将要生成具体建筑的id
            name: "主体建筑",
            order: 0,
            enabled: true,
            companyId: this.unitinfo.id,
            buildingTypes: [
              {
                id: value.unittype,
                name: ""
              }
            ]
          }
          this.http.post("/api/Buildings",addbody,{params:{
            companyId : this.unitId
          }}).subscribe(data=>{//首先创建建筑成功了，需要刷出当前建筑类型的模板
            // alert('创建主体建筑成功')
            this.tabbarService.sendMessage('changeScore');//通知服务改变分数
            this.getUnitAllBuildings()
          })
          this.tabbarService.sendMessage('changeScore');//通知服务改变分数
        }else{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('保存成功','确定',config);
          this.tabbarService.sendMessage('changeScore');//通知服务改变分数
        }
      }),
        err=>{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请填写正确信息','确定',config);
        }
      }

    
  }
  selected:any

  isshowrule:boolean = false
  rulevalue:any
  inputchange(e,name,value,item){
    if(name == "≥"){
      if(Number(e.target.value)< Number(value)){
        item.isshowrule = true
        item.rulevalue = `请输入≥${value}的值`
      }else{
        item.isshowrule = false
      }
    }
    if(name == "≤"){
      if(Number(e.target.value) > Number(value)){
        item.isshowrule = true
        item.rulevalue = `请输入≤${value}的值`
      }else{
        item.isshowrule = false
      }
    }
    if(name == "Range"){
      let rangenum = value.split(",")
      // console.log(rangenum)
      if(Number(e.target.value) < Number(rangenum[0]) ||  Number(e.target.value) >= Number(rangenum[1])){
        item.isshowrule = true
        item.rulevalue = `请输入位于${Number(rangenum[0])}和${Number(rangenum[1])-1}之间的值`
      }else{
        item.isshowrule = false
      }
    }
  }

  //可选按钮
  checkboxChange(item,$event,buildingData){
    // console.log(item)
    if(item.name == '罐区1'){
      // console.log(buildingData)
      buildingData.data[0].buildingBasicGroups.forEach(element => {
        if(element.name.indexOf('罐区') != -1){
          element.submitted = item.submitted
        }
      });
    }
  }

  //建筑自定义信息按钮
  checkCustomData($event){

  }

  
  //提交建筑信息
  onSubmitBuildingInfo(value,item,key,invalid){
    // console.log(1,item)
    // console.log(2,invalid)
    // console.log(3,value)
    // console.log(4,this.allunittype)
    if(invalid){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请填写必填项','确定',config);
    }else {
      //先把名称和建筑类型单独修改
      let buildingTypeId
      this.allunittype.forEach(element => {
        element.name == item.buildingTypes[0].name ? buildingTypeId = element.id : null
      });
      this.http.put(`/api/Buildings/${item.id}`,{         //(通用)只修改建筑名称和建筑类型
        id: item.id,
        name: value.buildingName,
        order: this.houses[key].order,
        enabled: true,
        companyId: this.unitinfo.id,
        buildingTypes: [
          {
            id: buildingTypeId,
            name: item.buildingTypes[0].name
          }
        ]
      },{
        params:{
          companyId : this.unitId
        }
      }).subscribe((data:any)=>{    
        // alert("名称和类型保存成功")
      },
      err=>{
        alert("名称和类型保存失败")
      })

      let newbody = JSON.parse(JSON.stringify(item.data))  //把数据深拷贝取出来进行操作
      for (let index = 0; index < newbody[0].buildingBasicGroups.length; index++) {
        let element = newbody[0].buildingBasicGroups[index];
        element.propertyInfos.forEach(item => {
          if(!element.isOptional){
            item.propertyValue ? element.submitted = true : null
          }
          //删除规则验证标识
          item.isshowrule ? delete item.isshowrule : null
          item.rulevalue ? delete item.rulevalue : null
          if(item.propertyValue || item.propertyValue == 0){
            item.propertyValue = String(item.propertyValue) 
          }
        });
        //如果是表格需要转换为一维数组
        if(element.type == 1){
          let arr = []
          for (let index = 0; index < element.propertyInfos.length; index++) {
            const ele = element.propertyInfos[index];
            
            for (let index = 0; index < ele.origin.length; index++) {
              const i = ele.origin[index];
              i.tag = String(i.tag) 
              
              if(!element.isOptional){
                i.propertyValue ? element.submitted = true : null
              }
              arr.push(i)
            }
          }
          for (let index = 0; index < arr.length; index++) {
            const i = arr[index];
            i.order = index
          }
          element.propertyInfos = arr
        }
        //如果当前分组没勾选 则需先去重然后重置每一个value为空  （基本信息默认都是不可选的 所以不需要清空值）
        if(!element.submitted && element.name != '基本信息'){
          const res = new Map();
          element.propertyInfos = element.propertyInfos.filter((a) => !res.has(a.propertyName) && res.set(a.propertyName, 1))
          element.propertyInfos.forEach(ele => {
            ele.propertyValue = ""
          })
        }
        //如果灌区没勾选  并且包含罐区且不包含罐区1的清除  需要把多余罐区2 3 4清除掉再提交
        if(!element.submitted && element.name.indexOf('罐区1') == -1 && element.name.indexOf('罐区') != -1){
          newbody[0].buildingBasicGroups.splice(index--, 1); 
        }
      }
      // console.log('newbody',newbody)
      this.http.post("/api/BuildingBasicInfos",newbody,{
        params:{
          companyId : this.unitId,
          buildingId :newbody[0].buildingId
        }
      }).subscribe((data:any)=>{
        // this.houses[key].id = data[0].id
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('建筑信息保存成功','确定',config);
        this.tabbarService.sendMessage('changeScore');//通知服务改变分数
      },
      err=>{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('建筑信息保存失败','确定',config);
        this.tabbarService.sendMessage('changeScore');//通知服务改变分数
      })
      
      //保存建筑自定义信息
      if(item.isCustomData){
        this.http.post("/api/BuildingCustomData",item.customData,{params:{
          companyId :this.unitId,
          buildingId:item.id
        }}).subscribe(data=>{
          this.tabbarService.sendMessage('changeScore');//通知服务改变分数
        })
      }else{
        item.customData.customProperties = []
        this.http.post("/api/BuildingCustomData",item.customData,{params:{
          companyId :this.unitId,
          buildingId:item.id
        }}).subscribe(data=>{
          this.tabbarService.sendMessage('changeScore');//通知服务改变分数
        })
      }
      
    }
  }
  //更改模板类型
  templateBuildtype(n,item,key){
    this.http.get("/api/BuildingBasicInfos",{//请求当前建筑类型的模板信息保存到数组中
      params:{
        companyId :this.unitId,
        buildingId:item.id,
        buildingType:n.id
      }
    }).subscribe(data=>{
      data[0].buildingBasicGroups.forEach(element => {
        //需要处理一下表格信息
       if(element.type == 1){
         let afterData = []
         let tempArr = [];
         for (let i = 0; i < element.propertyInfos.length; i++) {
           element.propertyInfos[i].tag == '' ? element.propertyInfos[i].tag = 1 : null
           if (tempArr.indexOf(element.propertyInfos[i].tag) === -1) {
             afterData.push({
               tag: element.propertyInfos[i].tag,
               origin: [element.propertyInfos[i]]
             });
             tempArr.push(element.propertyInfos[i].tag);
           } else {
             for (let j = 0; j < afterData.length; j++) {
               if (afterData[j].tag == element.propertyInfos[i].tag) {
                 afterData[j].origin.push(element.propertyInfos[i]);
                 break;
               }
             }
           }
         }
         element.propertyInfos = afterData
       }
      });
      let guanquIndex = data[0].buildingBasicGroups.findIndex(item => item.name.indexOf('罐区')>=0); // 找到第一个灌区的索引
      function transferFn(arr) {
        const guanquIndex = arr.findIndex(item => item.name.indexOf('罐区')>=0); // 找到第一个灌区的索引
        const guanquList = arr.slice(guanquIndex); // 灌区的列表
        const baseList = arr.slice(0, guanquIndex); // 前面的数据
        const len = guanquList.length;
        const num = len/2; // 计算一共有多少对，这里的前提是数据本身必须成对出现
        // 灌区切割出来的数据，分别存放，最后做一下合并
        const array1 = [];
        const array2 = [];
        for(let i = 0; i<num; i++) {
            array1.push(guanquList[i]); // 灌区x
            array2.push(guanquList[i + num]); // 灌区x/储罐信息
        }
        // 拼接最后的数据
        const result = [...baseList];
        for(let i = 0, ll = array1.length; i < ll; i++){
            result.push(array1[i]);
            if (array2[i]) {
                result.push(array2[i]);
            }
        }
        return result;
      }
      if(guanquIndex != -1 && data[0].buildingBasicGroups[guanquIndex + 1].name.indexOf(data[0].buildingBasicGroups[guanquIndex].name) == -1){
        data[0].buildingBasicGroups = transferFn(data[0].buildingBasicGroups)
      }
      this.houses[key].data = data
    })
  }
}



//消防设施统计
@Component({
  selector: 'app-StatisticsOfFireFightingFacilities',
  templateUrl: './statisticsOfFireFightingFacilities.html',
  styleUrls: ['./basicinfo.component.scss']
})
export class StatisticsOfFireFightingFacilities implements OnInit {

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

  ngOnInit(): void {
    let params = { companyId: sessionStorage.getItem('companyId'),buildingType: sessionStorage.getItem('buildingTypeId') }
    this.http.get(`/api/CompanyFacilities/GetAllFacilities`,{params}).subscribe(data=>{
      Object.keys(data).forEach(key => { this.allFireList.push(`${key}   ${data[key]}`) })
    })
  }
  allFireList = []

}