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,46 +1645,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,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,9 +205,9 @@ 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 !== '图例') {
+            && axShape.assetData.Name !== '图例') {
             const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
             temp.deleteItem(itemLegend);
           }
@@ -241,15 +245,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   sayHello() {
     let _a;
     if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
-        const args = [
-            '\n %c 版本号 - ' + this.VERSION + '\n',
-            'color: #ff66a5; background: #000000; padding:5px 0;',
-        ];
-        (_a = window.console).log.apply(_a, args);
+      const args = [
+        '\n %c 版本号 - ' + this.VERSION + '\n',
+        'color: #ff66a5; background: #000000; padding:5px 0;',
+      ];
+      (_a = window.console).log.apply(_a, args);
     } else if (window.console) {
-        window.console.log('\n %c 版本号 - ' + this.VERSION + '\n');
+      window.console.log('\n %c 版本号 - ' + this.VERSION + '\n');
     }
-}
+  }
   /**
    * 页面初始化
    */
@@ -305,8 +309,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public resizeItem(size: number) {
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape) {
-          item.setItemScale(size);
-          item.drawBorder(size);
+        item.setItemScale(size);
+        item.drawBorder(size);
       }
     });
   }
@@ -353,18 +357,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
     this.camera2D
       .clamp({
-          left: -10000,
-          right: 10000,
-          top: -10000,
-          bottom: 10000,
-        })
+        left: -10000,
+        right: 10000,
+        top: -10000,
+        bottom: 10000,
+      })
       .drag()
       .pinch()
       .wheel()
       .clampZoom({
-          minScale: 0.12,
-          maxScale: 16,
-        })
+        minScale: 0.12,
+        maxScale: 16,
+      })
       .decelerate();
 
     this.camera2D.on('wheel', event => {
@@ -373,7 +377,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
     this.camera2D.on('pointerdown', event => {
       if (this.isCtrlKeyClicked === true
-      && event.data.button === 0) {
+        && event.data.button === 0) {
         this.rectToolGraphics.visible = true;
         this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
         this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
@@ -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();
@@ -419,7 +423,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     });
     this.camera2D.on('pointermove', event => {
       if (this.isCtrlKeyClicked === true
-      && this.rectToolGraphics.visible === true) {
+        && this.rectToolGraphics.visible === true) {
         this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
 
         const init = this.initialScreenMousePos;
@@ -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,9 +565,9 @@ 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 !== '图例') {
+        && axShape.assetData.Name !== '图例') {
         const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
         temp.addItem(itemLegend);
       }
@@ -660,7 +664,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
             wall.allowEdit = this.allowEdit && this.canvasData.gameMode === wall.assetData.GameMode;
           }
           break;
-        }
+      }
     });
     // this.emit('backgroundScale', this.backgroundImage.scale.x);
   }
@@ -689,7 +693,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true);
               pipeline.allowEdit = this.allowEdit && this.canvasData.gameMode === pipeline.assetData.GameMode;
               break;
-        }
+          }
         });
       });
     }
@@ -701,7 +705,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.enterPaintEndButton.width = 60;
     this.enterPaintEndButton.height = 60;
     this.enterPaintEndButton.anchor.set(0.5);
-    this.enterPaintEndButton.position =  new PIXI.Point(0, 0);
+    this.enterPaintEndButton.position = new PIXI.Point(0, 0);
     this.enterPaintEndButton.interactive = true;
     this.enterPaintEndButton.buttonMode = true;
     this.enterPaintEndButton
@@ -737,7 +741,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
                 list.push(property);
               });
 
-              const assetData =  {
+              const assetData = {
                 TemplateId: this.canvasData.selectTemplateData.id,
                 CanConnect: this.canvasData.selectTemplateData.canConnect,
                 Pipelines: new Array(),
@@ -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
               };
@@ -860,61 +864,61 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               //     this.paintingShape.refresh();
               //   }
               // } else {
-                this.previewLineSegment.visible = true;
-                this.enterPaintEndButton.position = this.circleShadow.position;
-                this.enterPaintEndButton.visible = true;
-                this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
-                this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-                this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
-                if (this.paintPoints.length < 2) {
-                  return;
-                }
-                if (this.paintingShape === null) {
-                  const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
-                  const propertyList = [];
-                  jsonObject.forEach(element => {
-                    const property = new PropertyInfo(element);
-                    propertyList.push(property);
-                  });
-                  const assetData2 = {
-                    TemplateId: this.canvasData.selectTemplateData.id,
-                    FloorId: this.canvasData.selectStorey.id,
-                    Angle: this.canvasData.selectTemplateData.angle,
-                    Color: this.canvasData.selectTemplateData.color,
-                    Enabled: this.canvasData.selectTemplateData.enabled,
-                    FillMode: this.canvasData.selectTemplateData.fillMode,
-                    FireElementId: this.canvasData.selectTemplateData.fireElementId,
-                    FixedSize: this.canvasData.selectTemplateData.fixedSize,
-                    Height: 32,
-                    Width: 32,
-                    Id: ObjectID.default.generate(),
-                    ImageUrl: this.canvasData.selectTemplateData.imageUrl,
-                    InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
-                    MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
-                    Point: new PIXI.Point(0, 0),
-                    Name: this.canvasData.selectTemplateData.name,
-                    PropertyInfos: propertyList,
-                    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
-                  };
-                  if (this.canvasData.selectTemplateData.name === '距离') {
-                    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 === '水带' ) {
-                    this.paintingShape = new AxArrowConnector(assetData2, this, false, true);
-                  }
-                } else {
-                  this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
-                  this.paintingShape.redraw();
+              this.previewLineSegment.visible = true;
+              this.enterPaintEndButton.position = this.circleShadow.position;
+              this.enterPaintEndButton.visible = true;
+              this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
+              this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              if (this.paintPoints.length < 2) {
+                return;
+              }
+              if (this.paintingShape === null) {
+                const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
+                const propertyList = [];
+                jsonObject.forEach(element => {
+                  const property = new PropertyInfo(element);
+                  propertyList.push(property);
+                });
+                const assetData2 = {
+                  TemplateId: this.canvasData.selectTemplateData.id,
+                  FloorId: this.canvasData.selectStorey.id,
+                  Angle: this.canvasData.selectTemplateData.angle,
+                  Color: this.canvasData.selectTemplateData.color,
+                  Enabled: this.canvasData.selectTemplateData.enabled,
+                  FillMode: this.canvasData.selectTemplateData.fillMode,
+                  FireElementId: this.canvasData.selectTemplateData.fireElementId,
+                  FixedSize: this.canvasData.selectTemplateData.fixedSize,
+                  Height: 32,
+                  Width: 32,
+                  Id: ObjectID.default.generate(),
+                  ImageUrl: this.canvasData.selectTemplateData.imageUrl,
+                  InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
+                  MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
+                  Point: new PIXI.Point(0, 0),
+                  Name: this.canvasData.selectTemplateData.name,
+                  PropertyInfos: propertyList,
+                  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
+                };
+                if (this.canvasData.selectTemplateData.name === '距离') {
+                  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 === '水带') {
+                  this.paintingShape = new AxArrowConnector(assetData2, this, false, true);
                 }
+              } else {
+                this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
+                this.paintingShape.redraw();
+              }
               // }
               // this.emit('backgroundScale', this.backgroundImage.scale.x);
-                break;
+              break;
           }
         }
         // else if (this.isCtrlKeyClicked === true) {
@@ -934,13 +938,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       })
       .on('pointerover', (event) => {
         if (this.previewImage !== null
-        && this.paintMode === PaintMode.singlePointIcon) {
+          && this.paintMode === PaintMode.singlePointIcon) {
           this.previewImage.visible = true;
         }
       })
       .on('pointerout', (event) => {
         if (this.previewImage !== null
-        && this.paintMode === PaintMode.singlePointIcon) {
+          && this.paintMode === PaintMode.singlePointIcon) {
           this.previewImage.visible = false;
         }
       });
@@ -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();
-    //   }
-    // });
   }
   /**
    * 刷新
@@ -1007,7 +1045,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
-          itemList.push(item.name);
+        itemList.push(item.name);
       }
     });
 
@@ -1037,7 +1075,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
-          itemList.push(item.name);
+        itemList.push(item.name);
       }
     });
 
@@ -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,
@@ -1102,10 +1140,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       } else {
         if (item !== '图例') {
           shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend(
-          this.canvasData.originaleveryStoreyData.data[item].Name,
-          this.canvasData.originaleveryStoreyData.data[item].ImageUrl,
-          1
-        ));
+            this.canvasData.originaleveryStoreyData.data[item].Name,
+            this.canvasData.originaleveryStoreyData.data[item].ImageUrl,
+            1
+          ));
         } else {
           data = this.canvasData.originaleveryStoreyData.data[item];
         }
@@ -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);
         }
@@ -1333,9 +1371,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         }
         break;
       case PaintMode.Pipeline:
-          this.emit('createIcon', this.paintingShape);
-          this.paintingShape = null;
-          break;
+        this.emit('createIcon', this.paintingShape);
+        this.paintingShape = null;
+        break;
     }
     this.paintPoints.splice(0, this.paintPoints.length);
   }
@@ -1343,11 +1381,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 复制
    */
   public copy(): void {
-      this.copyData = [];
-      this.selection.all().forEach(item => {
-        const newData = JSON.parse(JSON.stringify(item.assetData));
-        this.copyData.push(newData);
-      });
+    this.copyData = [];
+    this.selection.all().forEach(item => {
+      const newData = JSON.parse(JSON.stringify(item.assetData));
+      this.copyData.push(newData);
+    });
   }
   /**
    * 粘贴
@@ -1359,7 +1397,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
         const newData = JSON.parse(JSON.stringify(item));
         newData.Id = ObjectID.default.generate(),
-        newData.CompanyId = companyId;
+          newData.CompanyId = companyId;
         newData.BuildingId = buildingId;
         newData.FloorId = floorId;
         newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
@@ -1417,7 +1455,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
-          itemList.push(item.name);
+        itemList.push(item.name);
       }
     });
 
@@ -1446,7 +1484,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
-          itemList.push(item.name);
+        itemList.push(item.name);
       }
     });
 
@@ -1474,7 +1512,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
-          itemList.push(item.name);
+        itemList.push(item.name);
       }
     });
 
@@ -1532,7 +1570,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       this.selection.addArray(shape);
       this.selection.all().forEach(item => {
         this.setSelectEffect(item);
-    });
+      });
       AxMessageSystem.send(EVENT_SELECTION_CHANGED);
     }
   }
@@ -1549,7 +1587,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     }
     this.selection.addArray(shape);
     this.selection.all().forEach(item => {
-        this.setSelectEffect(item);
+      this.setSelectEffect(item);
     });
     AxMessageSystem.send(EVENT_SELECTION_CHANGED);
   }