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 70368b9..dc0e63c 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; @@ -273,6 +274,12 @@ width: 100%; } } +.image { + .mat-form-field { + margin-right: 15px; + width: 30%; + } +} .submitBottom { display: flex; flex-direction: row; diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index bee4eed..fae03ae 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -162,7 +162,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - public VERSION = '1.2.1.20210207_beta'; + public VERSION = '1.2.2.20210220_beta'; /** * 数据初始化 */ @@ -992,24 +992,41 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (imageUrl === undefined || imageUrl === null || imageUrl === '') { this.backgroundImage.texture = this.backgroundTexture; } else { - this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + if (imageWidth !== undefined + && imageWidth !== null + && imageWidth !== 0 + && imageHeight !== undefined + && imageHeight !== null + && imageHeight !== 0) { + // console.log(imageWidth, imageHeight); + // this.backgroundImage.width = imageWidth; + // this.backgroundImage.height = imageHeight; + this.backgroundImage.texture = + await PIXI.Texture.fromURL(imageUrl + '?x-oss-process=image/resize,m_fixed,h_' + imageHeight + ',w_' + imageWidth); // 图片处理 + } else { + // this.backgroundImage.width = this.backgroundImage.texture.width; + // this.backgroundImage.height = this.backgroundImage.texture.height; + this.backgroundImage.texture = + await PIXI.Texture.fromURL(imageUrl); // 请求原图 + } } this.backgroundImage.angle = imageAngle; - if (imageWidth !== undefined - && imageWidth !== null - && imageWidth !== 0 - && imageHeight !== undefined - && imageHeight !== null - && imageHeight !== 0) { - console.log(imageWidth, imageHeight); - this.backgroundImage.width = imageWidth; - this.backgroundImage.height = imageHeight; - } else { - this.backgroundImage.width = this.backgroundImage.texture.width; - this.backgroundImage.height = this.backgroundImage.texture.height; - } + // if (imageWidth !== undefined + // && imageWidth !== null + // && imageWidth !== 0 + // && imageHeight !== undefined + // && imageHeight !== null + // && imageHeight !== 0) { + // console.log(imageWidth, imageHeight); + // this.backgroundImage.width = imageWidth; + // this.backgroundImage.height = imageHeight; + // } else { + // this.backgroundImage.width = this.backgroundImage.texture.width; + // this.backgroundImage.height = this.backgroundImage.texture.height; + // } this.backgroundImage.x = this.backgroundImage.width / 2; this.backgroundImage.y = this.backgroundImage.height / 2;