ShangHaiYuan-AnXin/src/app/ui/collection-tools-plan/leftFunctionalDomain.ts

import { Component, OnInit, Inject } 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 { CanvasShareDataService } from 'src/app/canvas-share-data.service';
import { EventManager } from '@angular/platform-browser';
import { MaskLayerService } from 'src/app/mask-layer.service';

@Component({
  selector: 'app-leftFunctionalDomain-plan',
  templateUrl: './addPlaneFigure.html',
  styleUrls: ['./panel.scss']
})
export class leftFunctionalDomainComponentPlan implements OnInit {

  constructor(
    private http: HttpClient,
    public dialog: MatDialog,
    public snackBar: MatSnackBar,
    public dialogRef: MatDialogRef<any>,
    @Inject(MAT_DIALOG_DATA) public data, public canvasData: CanvasShareDataService, private maskLayerService: MaskLayerService,) { }

  ngOnInit(): void {

  }

  params = { companyId: sessionStorage.getItem('companyId') }
  checked: boolean = false;//是否为避难层
  file: any = null; //上传的文件

  //选择文件
  selectFile(e) {
    if (e.target.files.length) {
      let maxSize = 100 * 1024 * 1024 //100MB限制
      if (e.target.files[0].size <= maxSize) {
        this.file = e.target.files[0]
        this.selectedType = 'image'
      } else {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传图片需小于100MB', '确定', config);
      }
    }
  }

  selectedType: String //新建平面图的底图类型 gis/image

  //导入GIS
  toGIS() {
    this.selectedType = 'gis';
    this.file = null;
    (<HTMLInputElement>document.getElementById('uploadFile')).value = null; //清空input框缓存
    // const config = new MatSnackBarConfig();
    // config.verticalPosition = 'top';
    // config.duration = 3000
    // this.snackBar.open('功能开发测试中,即将上线','确定',config);
  }

  //提交表单创建平面图
  onSubmit(e) {
    if (this.file && this.selectedType == 'image') {
      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);
        return
      }
      this.maskLayerService.sendMessage(true)
      if (this.file.size <= 5 * 1024 * 1024) { //小于5MB
        let formData = new FormData()
        formData.append("file", this.file)
        this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`, formData).subscribe((data: any) => {
          let imgURL = '/api/Objects/WebPlan2D/' + data.objectName
          let that = this
          let img = new Image()
          img.src = imgURL
          img.onload = function () {
            if (!that.data.isBuilding) { //总平面图 创建平面图
              let data = {
                companyId: sessionStorage.getItem('companyId'),
                name: e.name,
                order: that.data.order,
                area: Number(e.area),
                details: e.details,
                enabled: true,
                modifiedTime: new Date(),
                imageUrl: imgURL,
                imageWidth: img.width,
                imageHeight: img.height
              }
              that.http.post('/api/SitePlans', data).subscribe(data => {
                that.dialogRef.close('总平面图');
              })
            } else { //建筑 创建楼层/区域
              let data = {
                isRefugeStorey: e.isRefugeStorey,
                buildingId: that.data.Panel.id,
                name: e.name,
                order: that.data.order,
                area: Number(e.area),
                details: e.details,
                enabled: true,
                modifiedTime: new Date(),
                imageUrl: imgURL,
                imageWidth: img.width,
                imageHeight: img.height
              }
              that.http.post('/api/BuildingAreas', data, { params: that.params }).subscribe(data => {
                that.dialogRef.close('建筑');
              })
            }
          }
        }) //post
      } else if (this.file.size > 5 * 1024 * 1024 && this.file.size <= 100 * 1024 * 1024) { //大于5MB
        let upload = this.canvasData.sectionUpload(sessionStorage.getItem('companyId'), this.file)
        upload.then(res => {
          let imgURL = '/api/Objects/PlanPlatform/' + res
          let that = this
          let img = new Image()
          img.src = imgURL
          img.onload = function () {
            if (!that.data.isBuilding) { //总平面图 创建平面图
              let data = {
                companyId: sessionStorage.getItem('companyId'),
                name: e.name,
                order: that.data.order,
                area: Number(e.area),
                details: e.details,
                enabled: true,
                modifiedTime: new Date(),
                imageUrl: imgURL,
                imageWidth: img.width,
                imageHeight: img.height
              }
              that.http.post('/api/SitePlans', data).subscribe(data => {
                that.dialogRef.close('总平面图');
              })
            } else { //建筑 创建楼层/区域
              let data = {
                isRefugeStorey: e.isRefugeStorey,
                buildingId: that.data.Panel.id,
                name: e.name,
                order: that.data.order,
                area: Number(e.area),
                details: e.details,
                enabled: true,
                modifiedTime: new Date(),
                imageUrl: imgURL,
                imageWidth: img.width,
                imageHeight: img.height
              }
              that.http.post('/api/BuildingAreas', data, { params: that.params }).subscribe(data => {
                that.dialogRef.close('建筑');
              })
            }
          }
        })
      }
    } else if (this.selectedType == 'gis') {
      let data = {
        companyId: sessionStorage.getItem('companyId'),
        name: e.name,
        order: this.data.order,
        area: Number(e.area),
        details: e.details,
        enabled: true,
        modifiedTime: new Date(),
        imageUrl: 'null',
        imageWidth: 0,
        imageHeight: 0,
        isGis: true
      }
      this.http.post('/api/SitePlans', data).subscribe(data => {
        this.dialogRef.close('总平面图');
      })
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请上传图片', '确定', config);
    }
  }



}

//编辑平面图 楼层/区域
@Component({
  selector: 'app-editPlaneFigure-plan',
  templateUrl: './editPlaneFigure.html',
  styleUrls: ['./panel.scss']
})
export class editPlaneFigureComponentPlan implements OnInit {

  constructor(private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<any>, @Inject(MAT_DIALOG_DATA) public data, public canvasData: CanvasShareDataService, private eventManager: EventManager,) { }

  ngOnInit(): void {
    console.log(this.data.isGis)
    this.name = this.data.buildingData.name || ''
    this.checked = this.data.buildingData.isRefugeStorey || false
    this.area = this.data.buildingData.area || 0
    this.details = this.data.buildingData.details || ''
    this.imgWidth = this.data.buildingData.imageWidth || 0
    this.imgHeight = this.data.buildingData.imageHeight || 0
    this.oldWidth = JSON.parse(JSON.stringify(this.data.buildingData.imageWidth || 0))
    this.oldHeight = JSON.parse(JSON.stringify(this.data.buildingData.imageHeight || 0))
    if (this.imgWidth == 0 && this.imgHeight == 0 && this.data.buildingData.imageUrl) {
      let that = this
      let img = new Image()
      img.src = this.data.buildingData.imageUrl
      img.onload = function () {
        that.imgWidth = img.width
        that.imgHeight = img.height
        that.imgScale = Number((that.imgWidth / that.imgHeight))
      }
    } else {
      this.imgScale = Number((this.imgWidth / this.imgHeight))
    }

    this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
      if (event.keyCode === 13) {
        event.preventDefault();
      }
    });
  }

  oldWidth: number; //原图片宽
  oldHeight: number; //原图片高

  params = { companyId: sessionStorage.getItem('companyId') }
  name: any; //name
  checked: boolean = false;//是否为避难层
  area: number; //面积
  details: string; //详情

  imgWidth: number; //图片宽度
  imgHeight: number; //图片高度
  isItEqual: boolean = true; //是否等比
  imgScale: number; //图片 宽高比例

  //图片 宽高变化时
  inputChange(e) {
    if (this.isItEqual) {
      if (e == 0) { //需要改高度
        this.imgHeight = Math.round(this.imgWidth / this.imgScale)
        this.canvasData.selectStorey.imageWidth = this.imgWidth
        this.canvasData.selectStorey.imageHeight = this.imgHeight
      } else { //需要改宽度
        this.imgWidth = Math.round(this.imgHeight * this.imgScale)
        this.canvasData.selectStorey.imageWidth = this.imgWidth
        this.canvasData.selectStorey.imageHeight = this.imgHeight
      }
    } else {
      this.canvasData.selectStorey.imageWidth = this.imgWidth
      this.canvasData.selectStorey.imageHeight = this.imgHeight
    }
  }

  //重新计算 宽高比例
  setImgScale(e) {
    e.checked ? this.imgScale = Number((this.imgWidth / this.imgHeight)) : null
  }

  //关闭
  close() {
    if (this.oldWidth === this.imgWidth && this.oldHeight === this.imgHeight) {
      this.dialogRef.close()
    } else {
      this.canvasData.selectStorey.imageWidth = this.oldWidth
      this.canvasData.selectStorey.imageHeight = this.oldHeight
      this.dialogRef.close('更新背景图');
    }
  }

  //提交表单修改平面图
  onSubmit(e) {
    if (!this.data.isBuilding) { //总平面图 修改平面图
      let data = {
        companyId: sessionStorage.getItem('companyId'),
        id: this.data.buildingData.id,
        name: e.name,
        cadUrl: this.data.buildingData.cadUrl,
        imageUrl: this.data.buildingData.imageUrl,
        imageWidth: this.imgWidth,
        imageHeight: this.imgHeight,
        imageAngle: this.data.buildingData.imageAngle,
        order: this.data.buildingData.order,
        area: e.area,
        details: e.details,
        enabled: this.data.buildingData.enabled,
        modifiedTime: new Date(),
        isGis: this.data.isGis,
        zoomLevel: this.data.buildingData.zoomLevel,
        defaultCenter: this.data.buildingData.defaultCenter
      }
      this.http.put(`/api/SitePlans/${this.data.buildingData.id}`, data).subscribe(data => {
        this.dialogRef.close('总平面图');
      })
    } else { //建筑 修改楼层/区域
      let data = {
        isRefugeStorey: e.isRefugeStorey,
        buildingId: this.data.Panel.id,
        id: this.data.buildingData.id,
        name: e.name,
        cadUrl: this.data.buildingData.cadUrl,
        imageUrl: this.data.buildingData.imageUrl,
        imageWidth: this.imgWidth,
        imageHeight: this.imgHeight,
        imageAngle: this.data.buildingData.imageAngle,
        order: this.data.buildingData.order,
        area: e.area,
        details: e.details,
        enabled: this.data.buildingData.enabled,
        modifiedTime: new Date(),
      }
      this.http.put(`/api/BuildingAreas/${this.data.buildingData.id}`, data, { params: this.params }).subscribe(data => {
        this.dialogRef.close('建筑');
      })
    }
  }



}