[完善] 上传底图10MB限制, 新增底图宽高功能

src/app/ui/collection-tools/addPlaneFigure.html

@@ -18,7 +18,7 @@
 
     <div class="keyMargin">
       <mat-form-field>
-        <input matInput name="area" type="number" required ngModel placeholder="面积 (平方米)">
+        <input matInput name="area" type="number" ngModel placeholder="面积 (平方米)">
       </mat-form-field>
     </div>
 

src/app/ui/collection-tools/collection-tools.component.ts

@@ -1434,12 +1434,23 @@ 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()
+        })
       }
     })
   }
@@ -1632,46 +1643,57 @@ 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 && fileSize<tenSize) { //上传文件>10MB时
+      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/CompanyAccount/SitePlans/${item.id}`,item).subscribe(data=>{
-        let isSuccess = this.renovateSitePlan()
-        isSuccess.then(res=>{
-          this.canvas.refreshBackgroundImage()
+    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/CompanyAccount/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/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{
-        let isSuccess = this.renovateBuilding()
-        isSuccess.then(res=>{
-          this.canvas.refreshBackgroundImage()
+      } else { //楼层/区域
+        that.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).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);
-      })
+      }
     }
   }
 

src/app/ui/collection-tools/editPlaneFigure.html

@@ -19,7 +19,7 @@
 
     <div class="keyMargin">
       <mat-form-field>
-        <input matInput name="area" type="number" required [(ngModel)]="area" placeholder="面积 (平方米)">
+        <input matInput name="area" type="number" [(ngModel)]="area" placeholder="面积 (平方米)">
       </mat-form-field>
     </div>
 
@@ -27,6 +27,17 @@
       <textarea name="details" [(ngModel)]="details" placeholder="详情"></textarea>
     </div>
 
+    <div class="keyMargin image">
+      <mat-form-field>
+        <input matInput name="imageWidth" type="number" [(ngModel)]="imgWidth" placeholder="宽" (input)='inputChange(0)'>
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput name="imageHeight" type="number" [(ngModel)]="imgHeight" placeholder="高" (input)='inputChange(1)'>
+      </mat-form-field>
+      <label><mat-checkbox color="primary" [(ngModel)]="isItEqual" name="isItEqual" (change)='setImgScale($event)'></mat-checkbox>长宽等比</label>
+      <p style="font-size: 12px; margin-bottom: 25px;">按Enter键可浏览图片效果</p>
+    </div>
+
     <div class="submitBottom">
       <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">
           确定

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 { CanvasShareDataService } from 'src/app/canvas-share-data.service';
+import { EventManager } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-leftFunctionalDomain',
@@ -25,7 +27,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(),
@@ -39,7 +41,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(),
@@ -62,13 +64,22 @@ export class leftFunctionalDomainComponent implements OnInit {
 })
 export class editPlaneFigureComponent implements OnInit {
 
-  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+  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 {
     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.imgScale = Number((this.imgWidth/this.imgHeight))
+
+    this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
+      if (event.keyCode === 13) {
+        event.preventDefault();
+      }
+    });
   }
 
   name:any; //name
@@ -76,6 +87,34 @@ export class editPlaneFigureComponent implements OnInit {
   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
+  }
+
   //提交表单修改平面图
   onSubmit (e) {
     if (!this.data.isBuilding) { //总平面图 修改平面图
@@ -85,6 +124,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,
@@ -103,6 +144,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,

src/app/ui/collection-tools/panel.scss

@@ -107,7 +107,7 @@
 //hover时显示右边操作栏
 .sitePlanContent:hover {
   #rightOperate {
-    display: block;
+    opacity: 1;
   }
 }
 //右边操作栏
@@ -121,7 +121,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;
@@ -211,6 +212,12 @@
     width: 100%;
   }
 }
+.image {
+  .mat-form-field {
+    margin-right: 15px;
+    width: 30%;
+  }
+}
 .submitBottom {
   display: flex;
   flex-direction: row;