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 { 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 * 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';
import Viewer from 'viewerjs';
import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map';
import { MapFactory } from '@src/modules/map/declare/factory';

@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: IMap //地图实例
  isGisTopBox: boolean = false//点击位置按钮
  isGisTopBoxTwo: boolean = false//点击位置按钮
  oldPositionMarker: IMarker //旧位置marker实例
  newPositionMarker: IMarker //新位置marker实例

  newPositionMarkerContent: any =
    '<div class="custom-content-marker">' +
    '   <img class="positionimg" src="/assets/images/newposition.png">' +
    '   <div class="btnbox2"></div>' +
    '</div>'
  newPositionMarkerContentBtn: any =
    '<div class="custom-content-marker">' +
    '   <img class="positionimg" 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 class="positionimg" src="/assets/images/oldposition.png">' +
    '   <div class="btnbox2"></div>' +
    '</div>'
  //初始化地图
  searchTitle: any//搜索内容
  placeSearch: IPlaceSearch//地址搜索类
  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 = MapFactory.MapInstance('container', {
      zoom: 12
    })
    this.map.on('complete', () => {
      this.isGisTopBox = true
    });
    //输入提示
    var autoOptions = {
      input: "tipinput"
    };
    var auto = MapFactory.AutocompleteInstance(autoOptions,this);
    this.placeSearch = MapFactory.PlaceSearchInstance(this);  //构造地点查询类
    auto.on("select", (e) => {
      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 = MapFactory.MarkerInstance({
        position: [this.unitinfo.location.x, this.unitinfo.location.y],
        content: this.newPositionMarkerContent,
        offset: MapFactory.PixelInstance(-34, -36)
      })
      // 将 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 = MapFactory.MarkerInstance({
        draggable: true,
        position: [this.markerPosition.x, this.markerPosition.y],
        content: this.newPositionMarkerContentBtn,
        offset: MapFactory.PixelInstance(-34, -36)
      });
      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) => {
        let lnglat = this.map.containerToLngLat(e.pixel)
        this.markerPosition2 = { x: lnglat.KL, y: lnglat.kT }
        // console.log(`${lnglat.KL},${lnglat.kT}`);
      },this)
      this.newPositionMarker.on('dragging', (e) => {
        //console.log('dragging',e)
        let lnglat = this.map.containerToLngLat(e.pixel)
        this.newPositionMarker.setPosition(lnglat);
      },this)
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'), 'click', (event) => {
        this.map.clearMap();
        this.isGisTopBox = true
        this.isGisTopBoxTwo = false
        this.newPositionMarker = MapFactory.MarkerInstance({
          position: [this.markerPosition2.x, this.markerPosition2.y],
          content: this.newPositionMarkerContent,
          offset: MapFactory.PixelInstance(-34, -36)
        });
        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 = MapFactory.MarkerInstance({
          position: [this.markerPosition.x, this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: MapFactory.PixelInstance(-34, -36)
        });
        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 = MapFactory.MarkerInstance({
          position: [this.markerPosition2.x, this.markerPosition2.y],
          content: this.newPositionMarkerContent,
          offset: MapFactory.PixelInstance(-34, -36)
        });
        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 = MapFactory.MarkerInstance({
          position: [this.markerPosition.x, this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: MapFactory.PixelInstance(-34, -36)
        });
        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 = MapFactory.MarkerInstance({
        draggable: true,
        position: center,
        content: this.newPositionMarkerContentBtn,
        offset: MapFactory.PixelInstance(-34, -36)
      });
      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) => {
        let lnglat = this.map.containerToLngLat(e.pixel)
        this.markerPosition2 = { x: lnglat.KL, y: lnglat.kT }
        // console.log(`${lnglat.KL},${lnglat.kT}`);
      },this)
      this.newPositionMarker.on('dragging', (e) => {
        //console.log('dragging',e)
        let lnglat = this.map.containerToLngLat(e.pixel)
        this.newPositionMarker.setPosition(lnglat);
      },this)
      //点击确定
      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 = MapFactory.MarkerInstance({
          position: [this.markerPosition.x, this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: MapFactory.PixelInstance(-34, -36)
        });
        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 = MapFactory.MarkerInstance({
          position: [this.markerPosition.x, this.markerPosition.y],
          content: this.newPositionMarkerContent,
          offset: MapFactory.PixelInstance(-34, -36)
        });
        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 = MapFactory.MarkerInstance({
            position: [this.markerPosition.x, this.markerPosition.y],
            content: this.newPositionMarkerContent,
            offset: MapFactory.PixelInstance(-34, -36)
          });
          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 = MapFactory.MarkerInstance({
            position: [this.markerPosition.x, this.markerPosition.y],
            content: this.newPositionMarkerContent,
            offset: MapFactory.PixelInstance(-34, -36)
          });
          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: String(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 = []

}