Merge branch 'develop' of http://39.106.78.171:3000/shaojiahao/AX.Angular9DataCollection into develop

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,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()
       }
     })
   }
@@ -1632,48 +1645,59 @@ 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()
+    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=>{
-          this.canvas.refreshBackgroundImage()
+            that.canvas.refreshBackgroundImage()
           })
           const config = new MatSnackBarConfig();
           config.verticalPosition = 'top';
           config.duration = 3000
-        this.snackBar.open('上传底图成功','确定',config);
+          that.snackBar.open('上传底图成功','确定',config);
         })
       } else { //楼层/区域
-      this.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{
-        let isSuccess = this.renovateBuilding()
+        that.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{
+          let isSuccess = that.renovateBuilding()
           isSuccess.then(res=>{
-          this.canvas.refreshBackgroundImage()
+            that.canvas.refreshBackgroundImage()
           })
           const config = new MatSnackBarConfig();
           config.verticalPosition = 'top';
           config.duration = 3000
-        this.snackBar.open('上传底图成功','确定',config);
+          that.snackBar.open('上传底图成功','确定',config);
         })
       }
     }
+  }
 
   //封装 刷新总平面图 数据
   renovateSitePlan () {

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,11 +27,22 @@
       <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">
           确定
       </button>
-      <button mat-raised-button mat-dialog-close>取消</button>
+      <button mat-raised-button (click)='close()' type="button">取消</button>
     </div>
 
   </form>

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,20 +64,84 @@ 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.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; //原图片高
+
   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) { //总平面图 修改平面图
@@ -85,6 +151,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 +171,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;

src/app/working-area/working-area.component.ts

@@ -157,8 +157,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。
    * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
    * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
+   * 修改-修订版本号增加
+   * 新增-子版本号增加
+   * 重大调整-主版本号增加
+   * 日期变更-日期版本号增加
    */
-  public VERSION = '1.0.18.20210205_beta';
+  public VERSION = '1.2.2.20210220_beta';
   /**
    * 数据初始化
    */
@@ -201,7 +205,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         if (this.allowEdit && this.canvasData.gameMode === axShape.assetData.GameMode) {
           // 删除图例对象
           const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
-          if ( temp !== undefined
+          if (temp !== undefined
             && temp !== null
             && axShape.assetData.Name !== '图例') {
             const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
@@ -249,7 +253,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     } else if (window.console) {
       window.console.log('\n %c 版本号 - ' + this.VERSION + '\n');
     }
-}
+  }
   /**
    * 页面初始化
    */
@@ -384,7 +388,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.rectToolGraphics.visible = false;
         const shapes: AxShape[] = [];
         this.backgroundImage.children.forEach(item => {
-          if ( item instanceof AxShape
+          if (item instanceof AxShape
             && item instanceof AxPreviewImageShape === false) {
             // 判断2个矩形是否相交
             const rect1 = this.rectToolGraphics.getBounds();
@@ -403,7 +407,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.rectToolGraphics.visible = false;
         const shapes: AxShape[] = [];
         this.backgroundImage.children.forEach(item => {
-          if ( item instanceof AxShape
+          if (item instanceof AxShape
             && item instanceof AxPreviewImageShape === false) {
             // 判断2个矩形是否相交
             const rect1 = this.rectToolGraphics.getBounds();
@@ -468,8 +472,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 缩放适应
    */
   public zoomFit() {
-    const imageWidth = this.backgroundImage.texture.width;
-    const imageHeight = this.backgroundImage.texture.height;
+    const imageWidth = this.backgroundImage.width;
+    const imageHeight = this.backgroundImage.height;
     const appWidth = this.app.view.width - 470;
     const appHeight = this.app.view.height;
     const wScale = appWidth / imageWidth;
@@ -561,7 +565,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         }
       }
       const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
-      if ( temp !== undefined
+      if (temp !== undefined
         && temp !== null
         && axShape.assetData.Name !== '图例') {
         const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
@@ -748,19 +752,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
                 FillMode: this.canvasData.selectTemplateData.fillMode,
                 FireElementId: this.canvasData.selectTemplateData.fireElementId,
                 FixedSize: this.canvasData.selectTemplateData.fixedSize,
-                Height : 32,
-                Width : 32,
+                Height: 32,
+                Width: 32,
                 Id: ObjectID.default.generate(),
                 ImageUrl: this.canvasData.selectTemplateData.imageUrl,
                 InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
-                MultiPoint : null,
+                MultiPoint: null,
                 Point: new PIXI.Point(this.previewImage.x, this.previewImage.y),
-                Name : this.canvasData.selectTemplateData.name,
+                Name: this.canvasData.selectTemplateData.name,
                 PropertyInfos: list,
-                Border : this.canvasData.selectTemplateData.border,
-                DrawMode : this.canvasData.selectTemplateData.drawMode,
-                Thickness : this.canvasData.selectTemplateData.thickness,
-                IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding,
+                Border: this.canvasData.selectTemplateData.border,
+                DrawMode: this.canvasData.selectTemplateData.drawMode,
+                Thickness: this.canvasData.selectTemplateData.thickness,
+                IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
                 GameMode: this.canvasData.gameMode,
                 Tag: this.canvasData.selectTemplateData.tag
               };
@@ -905,7 +909,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
                   this.paintingShape = new AxArrowConnector(assetData2, this, true, true);
                 } else if (this.canvasData.selectTemplateData.name === '普通墙' || this.canvasData.selectTemplateData.name === '承重墙') {
                   this.paintingShape = new AxArrowConnector(assetData2, this, false, false);
-                  } else if (this.canvasData.selectTemplateData.name === '水带' ) {
+                } else if (this.canvasData.selectTemplateData.name === '水带') {
                   this.paintingShape = new AxArrowConnector(assetData2, this, false, true);
                 }
               } else {
@@ -974,26 +978,60 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 刷新背景图
    */
-  public async refreshBackgroundImage(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
+  public async refreshBackgroundImage(
+    imageUrl: string = this.canvasData.selectStorey.imageUrl,
+    imageAngle: number = this.canvasData.selectStorey.imageAngle,
+    imageWidth: number = this.canvasData.selectStorey.imageWidth,
+    imageHeight: number = this.canvasData.selectStorey.imageHeight,
+  ): Promise<void> {
     if (imageAngle === undefined || imageAngle === null) {
       imageAngle = 0;
     }
     this.backgroundImage.scale.set(1);
+    // this.backgroundImage.pivot.set(0);
     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;
+    // }
+
     this.backgroundImage.x = this.backgroundImage.width / 2;
     this.backgroundImage.y = this.backgroundImage.height / 2;
-    this.backgroundImage.angle = imageAngle;
 
     this.resetCamera2D();
-    // this.backgroundImage.children.forEach((item) => {
-    //   if (item instanceof AxShape) {
-    //     item.refresh();
-    //   }
-    // });
   }
   /**
    * 刷新
@@ -1077,17 +1115,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       GameMode: this.canvasData.gameMode,
       PropertyInfos: [
         {
-          Tag : '',
-          Order : 0,
-          Enabled : true,
-          Visible : true,
-          Required : false,
-          RuleName : '',
-          RuleValue : '',
-          PhysicalUnit : '',
-          PropertyName : '列',
-          PropertyType : 2,
-          PropertyValue : 2,
+          Tag: '',
+          Order: 0,
+          Enabled: true,
+          Visible: true,
+          Required: false,
+          RuleName: '',
+          RuleValue: '',
+          PhysicalUnit: '',
+          PropertyName: '列',
+          PropertyType: 2,
+          PropertyValue: 2,
         },
       ],
       Scale: 1,
@@ -1172,7 +1210,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.previewLineSegment.clear();
     this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
     this.previewLineSegment.moveTo(pointA.x, pointA.y);
-    this.previewLineSegment.lineTo(pointB.x, pointB.y );
+    this.previewLineSegment.lineTo(pointB.x, pointB.y);
   }
   /**
    * 创建半径图标影子
@@ -1249,7 +1287,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           this.previewImage.visible = false;
         }
         // 重置组件状态
-        if ( this.paintingIcon !== undefined
+        if (this.paintingIcon !== undefined
           && this.paintingIcon !== null) {
           this.backgroundImage.removeChild(this.paintingIcon);
         }