From c7e62c5796e8ed34f58374625930b3cd406ffa12 Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Fri, 19 Feb 2021 15:55:06 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E5=8E=BB=E9=99=A4?= =?UTF-8?q?=E9=9D=A2=E7=A7=AF=E5=BF=85=E5=A1=AB=E9=A1=B9,=20=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E5=BA=95=E5=9B=BE10MB=E9=99=90=E5=88=B6,=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=BA=95=E5=9B=BE=E5=AE=BD=E9=AB=98=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addPlaneFigure.html | 2 +- .../collection-tools.component.ts | 80 ++++++++++++------- .../editPlaneFigure.html | 15 +++- .../leftFunctionalDomain.ts | 76 +++++++++++++++++- .../ui/collection-tools-building/panel.scss | 11 ++- .../collection-tools-plan/addPlaneFigure.html | 2 +- .../collection-tools.component.ts | 80 ++++++++++++------- .../editPlaneFigure.html | 15 +++- .../leftFunctionalDomain.ts | 76 +++++++++++++++++- src/app/ui/collection-tools-plan/panel.scss | 11 ++- .../ui/collection-tools/addPlaneFigure.html | 2 +- .../collection-tools.component.ts | 80 ++++++++++++------- .../ui/collection-tools/editPlaneFigure.html | 15 +++- .../collection-tools/leftFunctionalDomain.ts | 76 +++++++++++++++++- src/app/ui/collection-tools/panel.scss | 11 ++- 15 files changed, 444 insertions(+), 108 deletions(-) diff --git a/src/app/ui/collection-tools-building/addPlaneFigure.html b/src/app/ui/collection-tools-building/addPlaneFigure.html index 930bf81..75e4722 100644 --- a/src/app/ui/collection-tools-building/addPlaneFigure.html +++ b/src/app/ui/collection-tools-building/addPlaneFigure.html @@ -18,7 +18,7 @@
- +
diff --git a/src/app/ui/collection-tools-building/collection-tools.component.ts b/src/app/ui/collection-tools-building/collection-tools.component.ts index 44c36d1..071ddff 100644 --- a/src/app/ui/collection-tools-building/collection-tools.component.ts +++ b/src/app/ui/collection-tools-building/collection-tools.component.ts @@ -1220,7 +1220,7 @@ export class CollectionToolsBuildingComponent implements OnInit { //选择建筑 checkedBuilding(item,index){ if (this.checkedBuildingIndex!=index) { - + this.canvasData.selectPanelPoint = new DisposalNodeData(); if (this.canvasData.isChange) { //true 数据被改动 let isTrue = confirm('是否保存当前编辑数据') if (isTrue) { //先保存数据 在切换 @@ -1721,12 +1721,25 @@ export class CollectionToolsBuildingComponent implements OnInit { Panel: this.beforeOneCheckedBuilding, buildingData: e, } - let dialogRef = this.dialog.open(editPlaneFigureBuildingComponent,{data}); + let dialogRef = this.dialog.open(editPlaneFigureBuildingComponent,{disableClose: true,hasBackdrop: false,position: {left:'150px',top:'200px'},data}); + dialogRef.keydownEvents().subscribe(data=>{ + if (data.key === 'Enter') { + this.canvas.refreshBackgroundImage() + } + }) dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { - this.renovateSitePlan() + let isSuccess = this.renovateSitePlan() + isSuccess.then(res=>{ + this.canvas.refreshBackgroundImage() + }) } else if (data =='建筑') { - this.renovateBuilding() + let isSuccess= this.renovateBuilding() + isSuccess.then(res=>{ + this.canvas.refreshBackgroundImage() + }) + } else if (data == '更新背景图') { + this.canvas.refreshBackgroundImage() } }) } @@ -1917,47 +1930,58 @@ export class CollectionToolsBuildingComponent implements OnInit { let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let maxSize = 5 * 1024 * 1024 //5MB一个分片 + let tenSize = 10 * 1024 * 1024 //10MB限制 if (file && fileSize<=maxSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ - this.renovateBaseMap(data.objectName,item) + this.renovateBaseMap('/api/Objects/WebPlan2D/' + data.objectName,item) }) + } else if (file && fileSize>maxSize && fileSize10MB时 + let upload = this.canvasData.sectionUpload(sessionStorage.getItem('companyId'),file) + upload.then(res=>{ this.renovateBaseMap('/api/Objects/PlanPlatform/' + res,item) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 - this.snackBar.open('上传底图需小于5MB','确定',config); + this.snackBar.open('上传底图需小于10MB','确定',config); } } //封装 替换底图 function renovateBaseMap (e,item) { - item.imageUrl = '/api/Objects/WebPlan2D/' + e - if (this.checkedBuildingIndex ==-1) { //总平面图 - this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ - let isSuccess = this.renovateSitePlan() - isSuccess.then(res=>{ - this.canvas.refreshBackgroundImage(item.imageUrl,item.imageAngle) + let that = this + let img = new Image() + img.src = e + img.onload = function () { + item.imageUrl = e + item.imageWidth = img.width + item.imageHeight = img.height + if (that.checkedBuildingIndex ==-1) { //总平面图 + that.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ + let isSuccess = that.renovateSitePlan() + isSuccess.then(res=>{ + that.canvas.refreshBackgroundImage() + }) + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + that.snackBar.open('上传底图成功','确定',config); }) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传底图成功','确定',config); - }) - } else { //楼层/区域 - this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{ - let isSuccess = this.renovateBuilding() - isSuccess.then(res=>{ - this.canvas.refreshBackgroundImage(item.imageUrl,item.imageAngle) + } else { //楼层/区域 + that.http.put(`/api/BuildingAreas/${item.id}`,item,{params:that.params}).subscribe(data=>{ + let isSuccess = that.renovateBuilding() + isSuccess.then(res=>{ + that.canvas.refreshBackgroundImage() + }) + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + that.snackBar.open('上传底图成功','确定',config); }) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传底图成功','确定',config); - }) - } + } //else + } //onload } //封装 刷新总平面图 数据 diff --git a/src/app/ui/collection-tools-building/editPlaneFigure.html b/src/app/ui/collection-tools-building/editPlaneFigure.html index a0f8016..e847c2a 100644 --- a/src/app/ui/collection-tools-building/editPlaneFigure.html +++ b/src/app/ui/collection-tools-building/editPlaneFigure.html @@ -19,7 +19,7 @@
- +
@@ -27,11 +27,22 @@ +
+ + + + + + + +

按Enter键可浏览图片效果

+
+
- +
diff --git a/src/app/ui/collection-tools-building/leftFunctionalDomain.ts b/src/app/ui/collection-tools-building/leftFunctionalDomain.ts index 1190a74..8046b6f 100644 --- a/src/app/ui/collection-tools-building/leftFunctionalDomain.ts +++ b/src/app/ui/collection-tools-building/leftFunctionalDomain.ts @@ -2,6 +2,8 @@ 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'; @Component({ selector: 'app-leftFunctionalDomain-building', @@ -31,7 +33,7 @@ export class leftFunctionalDomainBuildingComponent implements OnInit { companyId: sessionStorage.getItem('companyId'), name: e.name, order: this.data.order, - area:e.area, + area:Number(e.area), details:e.details, enabled: true, modifiedTime: new Date(), @@ -45,7 +47,7 @@ export class leftFunctionalDomainBuildingComponent implements OnInit { buildingId: this.data.Panel.id, name: e.name, order: this.data.order, - area:e.area, + area:Number(e.area), details:e.details, enabled: true, modifiedTime: new Date(), @@ -68,20 +70,84 @@ export class leftFunctionalDomainBuildingComponent implements OnInit { }) export class editPlaneFigureBuildingComponent implements OnInit { - constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) { } + constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public canvasData: CanvasShareDataService,private eventManager: EventManager,) { } ngOnInit(): void { 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) { @@ -92,6 +158,8 @@ export class editPlaneFigureBuildingComponent implements OnInit { 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, @@ -110,6 +178,8 @@ export class editPlaneFigureBuildingComponent implements OnInit { 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, diff --git a/src/app/ui/collection-tools-building/panel.scss b/src/app/ui/collection-tools-building/panel.scss index f0ae073..fe2f0b7 100644 --- a/src/app/ui/collection-tools-building/panel.scss +++ b/src/app/ui/collection-tools-building/panel.scss @@ -120,7 +120,7 @@ //hover时显示右边操作栏 .sitePlanContent:hover { #rightOperate { - display: block; + opacity: 1; } } //右边操作栏 @@ -134,7 +134,8 @@ border-radius: 0 100px 100px 0; background-color: #F0F4F7; // #F0F4F7 cdced1 - display: none; + opacity: 0; + transition: opacity 0.5s ease-out; .functionButton { height: 25%; line-height: 25px; @@ -272,6 +273,12 @@ width: 100%; } } +.image { + .mat-form-field { + margin-right: 15px; + width: 30%; + } +} .submitBottom { display: flex; flex-direction: row; diff --git a/src/app/ui/collection-tools-plan/addPlaneFigure.html b/src/app/ui/collection-tools-plan/addPlaneFigure.html index 605e5e5..5fd4ff9 100644 --- a/src/app/ui/collection-tools-plan/addPlaneFigure.html +++ b/src/app/ui/collection-tools-plan/addPlaneFigure.html @@ -29,7 +29,7 @@
- +
diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.ts b/src/app/ui/collection-tools-plan/collection-tools.component.ts index e23c11c..1baff01 100644 --- a/src/app/ui/collection-tools-plan/collection-tools.component.ts +++ b/src/app/ui/collection-tools-plan/collection-tools.component.ts @@ -1221,7 +1221,7 @@ export class CollectionToolsPlanComponent implements OnInit { //选择建筑 checkedBuilding(item,index){ if (this.checkedBuildingIndex!=index) { - + this.canvasData.selectPanelPoint = new DisposalNodeData(); if (this.canvasData.isChange) { //true 数据被改动 let isTrue = confirm('是否保存当前编辑数据') if (isTrue) { //先保存数据 在切换 @@ -1731,12 +1731,25 @@ export class CollectionToolsPlanComponent implements OnInit { Panel: this.beforeOneCheckedBuilding, buildingData: e, } - let dialogRef = this.dialog.open(editPlaneFigureComponentPlan,{data}); + let dialogRef = this.dialog.open(editPlaneFigureComponentPlan,{disableClose: true,hasBackdrop: false,position: {left:'150px',top:'200px'},data}); + dialogRef.keydownEvents().subscribe(data=>{ + if (data.key === 'Enter') { + this.canvas.refreshBackgroundImage() + } + }) dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { - this.renovateSitePlan() + let isSuccess = this.renovateSitePlan() + isSuccess.then(res=>{ + this.canvas.refreshBackgroundImage() + }) } else if (data =='建筑') { - this.renovateBuilding() + let isSuccess= this.renovateBuilding() + isSuccess.then(res=>{ + this.canvas.refreshBackgroundImage() + }) + } else if (data == '更新背景图') { + this.canvas.refreshBackgroundImage() } }) } @@ -1927,47 +1940,58 @@ export class CollectionToolsPlanComponent implements OnInit { let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let maxSize = 5 * 1024 * 1024 //5MB一个分片 + let tenSize = 10 * 1024 * 1024 //10MB限制 if (file && fileSize<=maxSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ - this.renovateBaseMap(data.objectName,item) + this.renovateBaseMap('/api/Objects/WebPlan2D/' + data.objectName,item) }) + } else if (file && fileSize>maxSize && fileSize10MB时 + let upload = this.canvasData.sectionUpload(sessionStorage.getItem('companyId'),file) + upload.then(res=>{ this.renovateBaseMap('/api/Objects/PlanPlatform/' + res,item) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 - this.snackBar.open('上传底图需小于5MB','确定',config); + this.snackBar.open('上传底图需小于10MB','确定',config); } } //封装 替换底图 function renovateBaseMap (e,item) { - item.imageUrl = '/api/Objects/WebPlan2D/' + e - if (this.checkedBuildingIndex ==-1) { //总平面图 - this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ - let isSuccess = this.renovateSitePlan() - isSuccess.then(res=>{ - this.canvas.refreshBackgroundImage(item.imageUrl,item.imageAngle) + let that = this + let img = new Image() + img.src = e + img.onload = function () { + item.imageUrl = e + item.imageWidth = img.width + item.imageHeight = img.height + if (that.checkedBuildingIndex ==-1) { //总平面图 + that.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ + let isSuccess = that.renovateSitePlan() + isSuccess.then(res=>{ + that.canvas.refreshBackgroundImage() + }) + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + that.snackBar.open('上传底图成功','确定',config); }) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传底图成功','确定',config); - }) - } else { //楼层/区域 - this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{ - let isSuccess = this.renovateBuilding() - isSuccess.then(res=>{ - this.canvas.refreshBackgroundImage(item.imageUrl,item.imageAngle) + } else { //楼层/区域 + that.http.put(`/api/BuildingAreas/${item.id}`,item,{params:that.params}).subscribe(data=>{ + let isSuccess = that.renovateBuilding() + isSuccess.then(res=>{ + that.canvas.refreshBackgroundImage() + }) + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + that.snackBar.open('上传底图成功','确定',config); }) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传底图成功','确定',config); - }) - } + } //else + } //onload } //封装 刷新总平面图 数据 diff --git a/src/app/ui/collection-tools-plan/editPlaneFigure.html b/src/app/ui/collection-tools-plan/editPlaneFigure.html index a0f8016..e847c2a 100644 --- a/src/app/ui/collection-tools-plan/editPlaneFigure.html +++ b/src/app/ui/collection-tools-plan/editPlaneFigure.html @@ -19,7 +19,7 @@
- +
@@ -27,11 +27,22 @@ +
+ + + + + + + +

按Enter键可浏览图片效果

+
+
- +
diff --git a/src/app/ui/collection-tools-plan/leftFunctionalDomain.ts b/src/app/ui/collection-tools-plan/leftFunctionalDomain.ts index bce9606..c8e18ea 100644 --- a/src/app/ui/collection-tools-plan/leftFunctionalDomain.ts +++ b/src/app/ui/collection-tools-plan/leftFunctionalDomain.ts @@ -2,6 +2,8 @@ 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'; @Component({ selector: 'app-leftFunctionalDomain-plan', @@ -60,7 +62,7 @@ export class leftFunctionalDomainComponentPlan implements OnInit { companyId: sessionStorage.getItem('companyId'), name: e.name, order: this.data.order, - area:e.area, + area:Number(e.area), details:e.details, enabled: true, modifiedTime: new Date(), @@ -75,7 +77,7 @@ export class leftFunctionalDomainComponentPlan implements OnInit { buildingId: this.data.Panel.id, name: e.name, order: this.data.order, - area:e.area, + area:Number(e.area), details:e.details, enabled: true, modifiedTime: new Date(), @@ -106,21 +108,85 @@ export class leftFunctionalDomainComponentPlan implements OnInit { }) export class editPlaneFigureComponentPlan implements OnInit { - constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) { } + constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public canvasData: CanvasShareDataService,private eventManager: EventManager,) { } ngOnInit(): void { 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) { //总平面图 修改平面图 @@ -130,6 +196,8 @@ export class editPlaneFigureComponentPlan implements OnInit { 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, @@ -148,6 +216,8 @@ export class editPlaneFigureComponentPlan implements OnInit { 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, diff --git a/src/app/ui/collection-tools-plan/panel.scss b/src/app/ui/collection-tools-plan/panel.scss index 11200e8..6cf4814 100644 --- a/src/app/ui/collection-tools-plan/panel.scss +++ b/src/app/ui/collection-tools-plan/panel.scss @@ -120,7 +120,7 @@ //hover时显示右边操作栏 .sitePlanContent:hover { #rightOperate { - display: block; + opacity: 1; } } //右边操作栏 @@ -134,7 +134,8 @@ border-radius: 0 100px 100px 0; background-color: #F0F4F7; // #F0F4F7 cdced1 - display: none; + opacity: 0; + transition: opacity 0.5s ease-out; .functionButton { height: 25%; line-height: 25px; @@ -297,6 +298,12 @@ cursor: pointer } } +.image { + .mat-form-field { + margin-right: 15px; + width: 30%; + } +} .submitBottom { display: flex; flex-direction: row; diff --git a/src/app/ui/collection-tools/addPlaneFigure.html b/src/app/ui/collection-tools/addPlaneFigure.html index 930bf81..75e4722 100644 --- a/src/app/ui/collection-tools/addPlaneFigure.html +++ b/src/app/ui/collection-tools/addPlaneFigure.html @@ -18,7 +18,7 @@
- +
diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index 204c9eb..b7d32ae 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -1229,7 +1229,7 @@ export class CollectionToolsComponent implements OnInit { //选择建筑 checkedBuilding(item,index){ if (this.checkedBuildingIndex!=index) { - + this.canvasData.selectPanelPoint = new DisposalNodeData(); if (this.canvasData.isChange) { //true 数据被改动 let isTrue = confirm('是否保存当前编辑数据') if (isTrue) { //先保存数据 在切换 @@ -1785,12 +1785,25 @@ export class CollectionToolsComponent implements OnInit { Panel: this.beforeOneCheckedBuilding, buildingData: e, } - let dialogRef = this.dialog.open(editPlaneFigureComponent,{data}); + let dialogRef = this.dialog.open(editPlaneFigureComponent,{disableClose: true,hasBackdrop: false,position: {left:'150px',top:'200px'},data}); + dialogRef.keydownEvents().subscribe(data=>{ + if (data.key === 'Enter') { + this.canvas.refreshBackgroundImage() + } + }) dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { - this.renovateSitePlan() + let isSuccess = this.renovateSitePlan() + isSuccess.then(res=>{ + this.canvas.refreshBackgroundImage() + }) } else if (data =='建筑') { - this.renovateBuilding() + let isSuccess= this.renovateBuilding() + isSuccess.then(res=>{ + this.canvas.refreshBackgroundImage() + }) + } else if (data == '更新背景图') { + this.canvas.refreshBackgroundImage() } }) } @@ -1981,47 +1994,58 @@ export class CollectionToolsComponent implements OnInit { let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let maxSize = 5 * 1024 * 1024 //5MB一个分片 + let tenSize = 10 * 1024 * 1024 //10MB限制 if (file && fileSize<=maxSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ - this.renovateBaseMap(data.objectName,item) + this.renovateBaseMap('/api/Objects/WebPlan2D/' + data.objectName,item) }) + } else if (file && fileSize>maxSize && fileSize10MB时 + let upload = this.canvasData.sectionUpload(sessionStorage.getItem('companyId'),file) + upload.then(res=>{ this.renovateBaseMap('/api/Objects/PlanPlatform/' + res,item) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 - this.snackBar.open('上传底图需小于5MB','确定',config); + this.snackBar.open('上传底图需小于10MB','确定',config); } } //封装 替换底图 function renovateBaseMap (e,item) { - item.imageUrl = '/api/Objects/WebPlan2D/' + e - if (this.checkedBuildingIndex ==-1) { //总平面图 - this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ - let isSuccess = this.renovateSitePlan() - isSuccess.then(res=>{ - this.canvas.refreshBackgroundImage(item.imageUrl,item.imageAngle) + let that = this + let img = new Image() + img.src = e + img.onload = function () { + item.imageUrl = e + item.imageWidth = img.width + item.imageHeight = img.height + if (that.checkedBuildingIndex ==-1) { //总平面图 + that.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ + let isSuccess = that.renovateSitePlan() + isSuccess.then(res=>{ + that.canvas.refreshBackgroundImage() + }) + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + that.snackBar.open('上传底图成功','确定',config); }) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传底图成功','确定',config); - }) - } else { //楼层/区域 - this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{ - let isSuccess = this.renovateBuilding() - isSuccess.then(res=>{ - this.canvas.refreshBackgroundImage(item.imageUrl,item.imageAngle) + } else { //楼层/区域 + that.http.put(`/api/BuildingAreas/${item.id}`,item,{params:that.params}).subscribe(data=>{ + let isSuccess = that.renovateBuilding() + isSuccess.then(res=>{ + that.canvas.refreshBackgroundImage() + }) + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + that.snackBar.open('上传底图成功','确定',config); }) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传底图成功','确定',config); - }) - } + } //else + } //onload } //封装 刷新总平面图 数据 diff --git a/src/app/ui/collection-tools/editPlaneFigure.html b/src/app/ui/collection-tools/editPlaneFigure.html index a0f8016..e847c2a 100644 --- a/src/app/ui/collection-tools/editPlaneFigure.html +++ b/src/app/ui/collection-tools/editPlaneFigure.html @@ -19,7 +19,7 @@
- +
@@ -27,11 +27,22 @@ +
+ + + + + + + +

按Enter键可浏览图片效果

+
+
- +
diff --git a/src/app/ui/collection-tools/leftFunctionalDomain.ts b/src/app/ui/collection-tools/leftFunctionalDomain.ts index 6323465..b13a965 100644 --- a/src/app/ui/collection-tools/leftFunctionalDomain.ts +++ b/src/app/ui/collection-tools/leftFunctionalDomain.ts @@ -2,6 +2,8 @@ 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 { EventManager } from '@angular/platform-browser'; +import { CanvasShareDataService } from 'src/app/canvas-share-data.service'; @Component({ selector: 'app-leftFunctionalDomain', @@ -31,7 +33,7 @@ export class leftFunctionalDomainComponent implements OnInit { companyId: sessionStorage.getItem('companyId'), name: e.name, order: this.data.order, - area:e.area, + area:Number(e.area), details:e.details, enabled: true, modifiedTime: new Date(), @@ -45,7 +47,7 @@ export class leftFunctionalDomainComponent implements OnInit { buildingId: this.data.Panel.id, name: e.name, order: this.data.order, - area:e.area, + area:Number(e.area), details:e.details, enabled: true, modifiedTime: new Date(), @@ -68,21 +70,85 @@ export class leftFunctionalDomainComponent implements OnInit { }) export class editPlaneFigureComponent implements OnInit { - constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) { } + constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public canvasData: CanvasShareDataService,private eventManager: EventManager,) { } ngOnInit(): void { 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) { //总平面图 修改平面图 @@ -92,6 +158,8 @@ export class editPlaneFigureComponent implements OnInit { 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, @@ -110,6 +178,8 @@ export class editPlaneFigureComponent implements OnInit { 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, diff --git a/src/app/ui/collection-tools/panel.scss b/src/app/ui/collection-tools/panel.scss index a127a5b..c62bc35 100644 --- a/src/app/ui/collection-tools/panel.scss +++ b/src/app/ui/collection-tools/panel.scss @@ -120,7 +120,7 @@ //hover时显示右边操作栏 .sitePlanContent:hover { #rightOperate { - display: block; + opacity: 1; } } //右边操作栏 @@ -134,7 +134,8 @@ border-radius: 0 100px 100px 0; background-color: #F0F4F7; // #F0F4F7 cdced1 - display: none; + opacity: 0; + transition: opacity 0.5s ease-out; .functionButton { height: 25%; line-height: 25px; @@ -276,6 +277,12 @@ width: 100%; } } +.image { + .mat-form-field { + margin-right: 15px; + width: 30%; + } +} .submitBottom { display: flex; flex-direction: row;