|
|
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('建筑'); |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
