Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/ShangHaiYuan-AnXin

src/app/canvas-share-data.service.ts

@@ -294,7 +294,22 @@ export class CanvasShareDataService {
         facility.Id = '';
         facility.Name = this.facilityAssetsName.get(item.Name);
         facility.AssetName = item.Name;
-        facility.PropertyInfos = item.PropertyInfos;
+        facility.PropertyInfos = [];
+        item.PropertyInfos.forEach(e => {
+          var p: PropertyInfo = new PropertyInfo();
+          p.Enabled = e.Enabled;
+          p.Order = e.Order;
+          p.PhysicalUnit = e.PhysicalUnit;
+          p.PropertyName = e.PropertyName;
+          p.PropertyType = e.PropertyType;
+          p.PropertyValue = e.PropertyValue.toString();
+          p.Required = e.Required;
+          p.RuleName = e.RuleName;
+          p.RuleValue = e.RuleValue;
+          p.Tag = e.Tag;
+          p.Visible = e.Visible;
+          facility.PropertyInfos.push(p);
+        });
         facility.SitePlanId = item.FloorId;
         list.push(facility);
       }
@@ -315,7 +330,22 @@ export class CanvasShareDataService {
         facility.Id = '';
         facility.Name = this.facilityAssetsName.get(item.Name);
         facility.AssetName = item.Name;
-        facility.PropertyInfos = item.PropertyInfos;
+        facility.PropertyInfos = [];
+        item.PropertyInfos.forEach(e => {
+          var p: PropertyInfo = new PropertyInfo();
+          p.Enabled = e.Enabled;
+          p.Order = e.Order;
+          p.PhysicalUnit = e.PhysicalUnit;
+          p.PropertyName = e.PropertyName;
+          p.PropertyType = e.PropertyType;
+          p.PropertyValue = e.PropertyValue.toString();
+          p.Required = e.Required;
+          p.RuleName = e.RuleName;
+          p.RuleValue = e.RuleValue;
+          p.Tag = e.Tag;
+          p.Visible = e.Visible;
+          facility.PropertyInfos.push(p);
+        });
         facility.BuildingAreaId = item.FloorId;
         list.push(facility);
       }
@@ -406,7 +436,7 @@ export class CompanyFacilityAssetInfo {
   public Id: string;
   public Name: string;
   public AssetName: string;
-  public PropertyInfos: string;
+  public PropertyInfos: PropertyInfo[];
   public AssetId: string;
   public CompanyId: string;
   public SitePlanId: string;
@@ -418,7 +448,7 @@ export class BuildingFacilityAssetInfo {
   public Id: string;
   public Name: string;
   public AssetName: string;
-  public PropertyInfos: string;
+  public PropertyInfos: PropertyInfo[];
   public AssetId: string;
   public BuildingId: string;
   public BuildingAreaId: string;

src/app/key-unit/basicinfo/basicinfo.component.ts

@@ -2152,7 +2152,7 @@ export class BasicinfoComponent implements OnInit {
             this.snackBar.open('请检查输入数据是否有误','确定',config);
           })
         }
-        if(item.buildtype == "地铁类"){
+        if(item.buildtype.indexOf('地铁') != -1){
           let newObj = _.cloneDeep(item)
           delete newObj.username
           delete newObj.name

src/app/ui/collection-tools-building/collection-tools.component.html

@@ -13,13 +13,20 @@
       <mat-icon>visibility</mat-icon>
     </span>
 
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
+    </span>
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
+    </span>
+  
     <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
       复制<mat-icon>library_books</mat-icon>
     </button>
-
     <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
       粘贴<mat-icon>screen_share</mat-icon>
     </button>
+
     <span title="适应缩放" class="zoom" (click)="adaptZoom()">
       <img src="/assets/images/适应缩放.png" alt="">
       适应缩放

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

@@ -831,6 +831,11 @@ export class CollectionToolsBuildingComponent implements OnInit {
     this.renovateTreeData(false)
   }
 
+  isMultiSelect:boolean = false; // 多选/单选 切换
+  changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) }
+  isShowLegend:boolean = true; //图例是否显示
+  changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) }
+
   basicInfo:boolean = true //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
@@ -1478,6 +1483,7 @@ export class CollectionToolsBuildingComponent implements OnInit {
     isRefresh? await this.canvas.refresh() : null
     this.canvas.setNameVisible(this.basicInfo,0)
     this.canvas.setNameVisible(this.wantToWork,1)
+    this.canvas.setLegendVisible(this.isShowLegend) //图例显隐
     isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
@@ -1507,7 +1513,6 @@ export class CollectionToolsBuildingComponent implements OnInit {
   //陈鹏飞↓↓↓
   //陈鹏飞↓↓↓
   params = {companyId: sessionStorage.getItem('companyId')}
-  // params = {companyId: this.route.snapshot.queryParams.id}
   allFireElements:any = []; //当前 单位/建筑 下的消防要素
 
   isShowAttribute:boolean = true; //属性栏 是否显示 默认数据

src/app/ui/collection-tools-plan/collection-tools.component.html

@@ -8,18 +8,20 @@
       <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
     </button>
 
-    <!-- <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
+    <span class="marginLeftRight">
-      基本信息名称
+      <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
-      <mat-icon>visibility</mat-icon>
+    </span>
-    </span> -->
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
+    </span>
   
     <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
       复制<mat-icon>library_books</mat-icon>
     </button>
-
     <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
       粘贴<mat-icon>screen_share</mat-icon>
     </button>
+  
     <span title="适应缩放" class="zoom" (click)="adaptZoom()">
       <img src="/assets/images/适应缩放.png" alt="">
       适应缩放

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

@@ -834,6 +834,11 @@ export class CollectionToolsPlanComponent implements OnInit {
     // this.renovateTreeData(false)
   }
 
+  isMultiSelect:boolean = false; // 多选/单选 切换
+  changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) }
+  isShowLegend:boolean = true; //图例是否显示
+  changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) }
+
   basicInfo:boolean = true //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
@@ -1489,6 +1494,7 @@ export class CollectionToolsPlanComponent implements OnInit {
     isRefresh? await this.canvas.refresh() : null
     this.canvas.setNameVisible(this.basicInfo,0)
     this.canvas.setNameVisible(this.wantToWork,1)
+    this.canvas.setLegendVisible(this.isShowLegend) //图例显隐
     isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
@@ -1517,7 +1523,6 @@ export class CollectionToolsPlanComponent implements OnInit {
   //陈鹏飞↓↓↓
   //陈鹏飞↓↓↓
   params = {companyId: sessionStorage.getItem('companyId')}
-  // params = {companyId: this.route.snapshot.queryParams.id}
   allFireElements:any = []; //当前 单位/建筑 下的消防要素
 
   isShowAttribute:boolean = true; //属性栏 是否显示 默认数据

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

@@ -7,6 +7,7 @@
     <button mat-button (click)="toggle2()">
       <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
     </button>
+
     <span  [ngClass]="{'icongray': !basicInfo}" *ngIf="pattern" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
       基本信息名称<mat-icon>visibility</mat-icon>
     </span>
@@ -20,10 +21,10 @@
     <span class="marginLeftRight">
       <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
     </span>
+  
     <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" *ngIf="isEditPattern">
       复制<mat-icon>library_books</mat-icon>
     </button>
-
     <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
       粘贴<mat-icon>screen_share</mat-icon>
     </button>

src/app/working-area/model/axImageShape.ts

@@ -5,7 +5,7 @@ import { PaintMode } from './paintModel';
 import * as PIXI from 'pixi.js';
 import { PropertyInfo } from './PropertyInfo';
 import { AxShape } from './axShape';
-import { Sprite } from 'pixi.js';
+import { Sprite, Point, Rectangle } from 'pixi.js';
 import { AxArrowConnector } from './axArrowConnector';
 
 /**
@@ -31,6 +31,7 @@ export class AxImageShape extends AxShape {
         wordWrapWidth: 100,
     });
 
+
     text = new PIXI.Text(this.assetData.Name
         + '\r\n'
         + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
@@ -72,26 +73,74 @@ export class AxImageShape extends AxShape {
         this.addChild(this.selectionBox);
 
         ////
+        var leftUpPos = new Point(0, 0);
+        var upLeftDrag = false;
+        var leftDownPos = new Point(0, 0);
+        var rightUpPos = new Point(0, 0);
+        var rightDownPos = new Point(0, 0);
         // up-left
         this.upLeft = new PIXI.Sprite(this.pointTexture);
+        this.upLeft.cursor = 'nwse-resize';
         this.upLeft.anchor.set(0.5);
         this.addChild(this.upLeft);
         this.upLeft.interactive = true;
+        this.upLeft.on('pointerdown', event => {
+
+            upLeftDrag = true;
+            var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height);
+            console.log('图片的边界大小', imageRect);
+            rightDownPos = new Point(imageRect.right, imageRect.bottom);
+
+            this.image.anchor.set(1);
+            this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
+            event.stopPropagation();
+        });
+        this.upLeft.on('pointermove', event => {
+
+            // 移动时调整形状大小，然后重绘边框
+            // 检查右下角距离鼠标的位置，
+            if (upLeftDrag) {
+                leftUpPos = event.data.getLocalPosition(this.upLeft.parent);
+                console.log('鼠标点击位置的坐标', leftUpPos);
+
+                this.assetData.Width = Math.abs(leftUpPos.x);
+                this.assetData.Height = Math.abs(leftUpPos.x);
+                this.refresh();
+            }
+
+        });
+        this.upLeft.on('pointerup', event => {
+            if (upLeftDrag) {
+                upLeftDrag = false;
+                this.image.anchor.set(0.5);
+                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
+            }
+        });
+        this.upLeft.on('pointerupoutside', event => {
+            if (upLeftDrag) {
+                upLeftDrag = false;
+                this.image.anchor.set(0.5);
+                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
+            }
+        });
         this.upLeft.visible = false;
         // up-right
         this.upRight = new PIXI.Sprite(this.pointTexture);
+        this.upRight.cursor = 'nesw-resize';
         this.upRight.anchor.set(0.5);
         this.addChild(this.upRight);
         this.upRight.interactive = true;
         this.upRight.visible = false;
         // down-left
         this.downLeft = new PIXI.Sprite(this.pointTexture);
+        this.downLeft.cursor = 'nesw-resize';
         this.downLeft.anchor.set(0.5);
         this.addChild(this.downLeft);
         this.downLeft.interactive = true;
         this.downLeft.visible = false;
         // down-right
         this.downRight = new PIXI.Sprite(this.pointTexture);
+        this.downRight.cursor = 'nwse-resize';
         this.downRight.anchor.set(0.5);
         this.addChild(this.downRight);
         this.downRight.interactive = true;
@@ -193,71 +242,8 @@ export class AxImageShape extends AxShape {
             this.downRight.scale.set(scale);
         }
     }
-    // paintingPipeline(x: number, y: number) {
-    //     if (this.assetData.CanConnect) {
-    //                 if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
-    //                     if (this.workingArea.paintingShape === null) {
-    //                         this.workingArea.previewLineSegment.visible = true;
-    //                         this.workingArea.currentClickPoint.position =
-    //                             new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
-    //                         this.workingArea.paintPoints.push(new PIXI.Point(x, y));
-    //                         const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
-    //                         const list = [];
-    //                         json.forEach(element => {
-    //                             const property = new PropertyInfo(element);
-    //                             list.push(property);
-    //                         });
-    //                         const tempData =  {
-    //                             TemplateId: this.workingArea.canvasData.selectTemplateData.id,
-    //                             CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
-    //                             Pipelines: new Array(),
-    //                             FloorId: this.workingArea.canvasData.selectStorey.id,
-    //                             Angle: this.workingArea.canvasData.selectTemplateData.angle,
-    //                             Color: this.workingArea.canvasData.selectTemplateData.color,
-    //                             Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
-    //                             FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
-    //                             FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
-    //                             FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
-    //                             Height : 32,
-    //                             Width : 32,
-    //                             Id: ObjectID.default.generate(),
-    //                             ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
-    //                             InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
-    //                             MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
-    //                             Point: new PIXI.Point(0, 0),
-    //                             Name : this.workingArea.canvasData.selectTemplateData.name,
-    //                             PropertyInfos: list,
-    //                             Border : this.workingArea.canvasData.selectTemplateData.border,
-    //                             DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
-    //                             Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
-    //                             IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
-    //                             GameMode: this.workingArea.canvasData.gameMode,
-    //                             LinkedObjects: new Array(this.assetData.Id),
-    //                             Tag: this.workingArea.canvasData.selectTemplateData.tag
-    //                         };
-    //                         this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true);
-    //                         this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
-    //                         this.workingArea.emit('createIcon', this.workingArea.paintingShape);
-    //                     } else {
-    //                         this.workingArea.previewLineSegment.visible = false;
-    //                         this.workingArea.currentClickPoint.position =
-    //                             new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
-    //                         this.workingArea.paintPoints.push(new PIXI.Point(x, y));
-    //                         this.workingArea.paintingShape.assetData.MultiPoint =
-    //                             JSON.parse(JSON.stringify(this.workingArea.paintPoints));
-    //                         this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
-    //                         this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
-    //                         this.workingArea.paintingShape.redraw();
-    //                         this.workingArea.initPipelineData();
-    //                     }
-    //                 }
-    //             }
-    // }
     // 刷新
     public refresh() {
-        if (this.assetData.CanConnect) {
-
-        }
         this.image.width = this.assetData.Width;
         this.image.height = this.assetData.Height;
         this.image.angle = this.assetData.Angle;
@@ -267,5 +253,6 @@ export class AxImageShape extends AxShape {
         this.text.x = this.image.x;
         this.text.y = this.image.y - this.image.height / 2;
         this.angle = -this.workingArea.backgroundImage.angle;
+        this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
     }
 }

src/app/working-area/model/axShape.ts

@@ -32,7 +32,7 @@ export class AxShape extends Graphics {
         this.workingArea.backgroundImage.addChild(this);
         this.zIndex = 200;
         this.interactive = true;
-        this.buttonMode = true;
+        // this.buttonMode = true;
         this
             .on('pointerdown', event => {
                 event.stopPropagation();

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

@@ -90,7 +90,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public selection: AxSelection = new AxSelection();
   /**
-   * 当前鼠标的点
+   * 当前鼠标点击的点
    */
   public currentClickPoint: PIXI.Graphics = new PIXI.Graphics();
   /**
@@ -151,6 +151,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public animationTime;
   // 是否按下Ctrl键
   isCtrlKeyClicked = false;
+  // 是否开启多点连线垂直绘制
+  isDrawVerticalLine = false;
   /**
    * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
    * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@@ -162,7 +164,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 重大调整-主版本号增加
    * 日期变更-日期版本号增加
    */
-  public VERSION = '1.2.2.20210220_beta';
+  // todo  shift绘制垂直线段
+  public VERSION = '1.3.0.20210220_beta';
   /**
    * 数据初始化
    */
@@ -171,12 +174,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
-
+      // if (event.keyCode === 16) {
+      //   this.isDrawVerticalLine = true;
+      // }
+      switch (event.keyCode) {
+        case 16:
+          this.isDrawVerticalLine = true;
+          break;
+        default:
+          break;
+      }
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
-      // 按Del键删除选中的图标
+      // // 按Del键删除选中的图标
-      if (event.keyCode === 46) {
+      // if (event.keyCode === 46) {
+      //   this.deleteSelectedShape();
+      // }
+      switch (event.keyCode) {
+        case 16: // shift
+          this.isDrawVerticalLine = false;
+          break;
+        case 46: // delete
           this.deleteSelectedShape();
+          break;
+        default:
+          break;
       }
     });
   }
@@ -774,8 +796,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               break;
             case PaintMode.lineIcon:
               this.previewLineSegment.visible = true;
+
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
                 this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              }
+              // 添加数据
+              this.paintPoints.push(point);
 
               if (this.paintPoints.length >= 2) {
                 this.enterPaintEndButton.position = this.circleShadow.position;
@@ -832,8 +873,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               break;
             case PaintMode.polygonIcon:
               this.previewLineSegment.visible = true;
+              // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
                 this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              }
+              // 添加数据
+              this.paintPoints.push(point);
               if (this.paintPoints.length === 1) {
                 this.enterPaintEndButton.position = this.circleShadow.position;
               } else if (this.paintPoints.length >= 3) {
@@ -868,8 +929,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               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));
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
                 this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              }
+              // 添加数据
+              this.paintPoints.push(point);
               if (this.paintPoints.length < 2) {
                 return;
               }
@@ -1207,10 +1288,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param pointB 点B
    */
   private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
+    const ps: PIXI.Point = pointA;
+    let pe: PIXI.Point = pointB;
+    if (this.isDrawVerticalLine) {
+      // 起点距离终点水平距离
+      const dh = Math.abs(pointB.x - pointA.x);
+      // 起点距离终点垂直距离
+      const dv = Math.abs(pointB.y - pointA.y);
+      if (dh >= dv) {
+        // 绘制水平线
+        pe = new PIXI.Point(pointB.x, pointA.y);
+
+      } else {
+        // 绘制垂直线
+        pe = new PIXI.Point(pointA.x, pointB.y);
+      }
+    }
+
     this.previewLineSegment.clear();
     this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
-    this.previewLineSegment.moveTo(pointA.x, pointA.y);
+    // this.previewLineSegment.moveTo(pointA.y, pointA.y);
-    this.previewLineSegment.lineTo(pointB.x, pointB.y);
+    // this.previewLineSegment.lineTo(pointB.x, pointB.y);
+    this.previewLineSegment.moveTo(ps.x, ps.y);
+    this.previewLineSegment.lineTo(pe.x, pe.y);
   }
   /**
    * 创建半径图标影子