diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts
index fe62f82..aa7fc19 100644
--- a/src/app/canvas-share-data.service.ts
+++ b/src/app/canvas-share-data.service.ts
@@ -8,10 +8,11 @@ import { GameMode } from './working-area/model/gameMode';
 export class CanvasShareDataService {
   constructor() { }
   private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
+  GameMode: any;
 
   isChange = false; // 数据 是否改动
 
-  selectTemplateData: any; // 选择当前 素材库模板数据
+  selectTemplateData: any; // 选择当前 模板数据
 
   // 总平面图/建筑 楼层
   selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据
@@ -28,7 +29,7 @@ export class CanvasShareDataService {
   /**
   * 游戏模式
   */
-  gameMode: GameMode = GameMode.Assignment;
+  gameMode: GameMode = GameMode.BasicInformation;
 
   facilityAssetsName = new Map<string, string>([
     [ '消防水池', '消防水池'],
@@ -81,6 +82,23 @@ export class CanvasShareDataService {
       return returnData;
     }
   }
+  /**
+   * 更新建筑数据
+   */
+  public updateBuildingData() {
+    Object.keys(this.originaleveryStoreyData.data).forEach((key) => {
+      this.originalcompanyBuildingData.data[key] = this.originaleveryStoreyData.data[key];
+    });
+  }
+  /**
+   * 删除建筑数据中当前楼层的数据
+   */
+  public deleteBuildingDataByCurrentFloorData():void {
+    Object.keys(this.originaleveryStoreyData.data).forEach((key) => {
+      // 删除建筑数据
+      delete this.originalcompanyBuildingData.data[key];
+    });
+  }
   /**
    * 获取单位毗邻信息
    */
@@ -665,7 +683,7 @@ export class AssetData {
     /// <summary>
     /// 是否来自建筑
     /// </summary>
-    public IsFromBuilding: boolean;
+  public IsFromBuilding: boolean;
     /// <summary>
     /// 渲染方式。
     /// </summary>
diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html
index f15e4cf..c0e72cd 100644
--- a/src/app/ui/collection-tools/collection-tools.component.html
+++ b/src/app/ui/collection-tools/collection-tools.component.html
@@ -38,15 +38,14 @@
       <div id="leftDiv" class='functionalDomainLeft publicCss scenarioAssignment' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none;">
 
         <!-- 处置预案 -->
-        <div class="handlePlan" style="display: none;">
+        <div class="handlePlan">
           <div class="planarGraphHeader" (click)='toggleHandlePlan()'>
             <mat-icon *ngIf="toggleHandlePlans">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!toggleHandlePlans">keyboard_arrow_down</mat-icon>
             <label class="overflowText" style="font-weight: 550;">处置预案</label>
-            <!-- <label style="margin-left: 45px;" *ngIf="isEditPattern">
-              <mat-icon style="color: #c2a40ce8;" title="计算差异" (click)='countValue($event)'>flash_on</mat-icon>
-              <mat-icon style="margin-left: 3px;" title="新建空节点" (click)='addPanelPoint($event,null,treeData)'>add</mat-icon>
-            </label> -->
+            <label style="margin-left: 45px;">
+              <mat-icon title="选择考试节点" (click)='countValue($event)'>dashboard</mat-icon>
+            </label>
           </div>
           <div [hidden]="!toggleHandlePlans">
             
@@ -68,7 +67,7 @@
         <!-- 处置预案 -->
 
         <!-- 素材库 -->
-        <div id="materialBank" style="display: none;">
+        <div id="materialBank">
           <div class="planarGraphHeader" (click)='toggleMaterial()'>
             <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss
index ad57cdc..5c64711 100644
--- a/src/app/ui/collection-tools/collection-tools.component.scss
+++ b/src/app/ui/collection-tools/collection-tools.component.scss
@@ -124,7 +124,7 @@
     width: 400px;
     top: 40px;
     left: 240px;
-    z-index: 1111;
+    z-index: 119;
     display: flex;
   }
   .functionalDomainLeft {
diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts
index 8d84adb..955b7af 100644
--- a/src/app/ui/collection-tools/collection-tools.component.ts
+++ b/src/app/ui/collection-tools/collection-tools.component.ts
@@ -16,7 +16,7 @@ import { delay } from 'rxjs/operators';
 import { windows } from 'src/app/interface';
 import { GameMode } from 'src/app/working-area/model/gameMode';
 import { ActivatedRoute, Router } from '@angular/router';
-import { examinationQuestions,uploadQuestions } from './examinationQuestions'
+import { examinationQuestions,uploadDisposalNodes,uploadQuestions } from './examinationQuestions'
 
 
 
@@ -2074,17 +2074,13 @@ export class CollectionToolsComponent implements OnInit {
     });
   }
 
-  //计算差异
+  //选择 考试节点
   countValue (e) {
     e.stopPropagation()
-    let params = {disasterId: this.allFirePlan[0].id || ''}
-    this.http.get('/api/DisasterData/Diffs',{params:params}).subscribe(data=>{
-      this.canvasData.allNodeMarkers = data
-      this.mateFireForce()
-      const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('计算差异完成','确定',config);
+    let data = {treeData: JSON.parse( JSON.stringify(this.treeData) ), oldTreeData: JSON.parse( JSON.stringify(this.canvasData.allDisposalNode) )}
+    let dialogRef = this.dialog.open(uploadDisposalNodes,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+  
     })
   }
 
diff --git a/src/app/ui/collection-tools/examinationQuestions.ts b/src/app/ui/collection-tools/examinationQuestions.ts
index 3f50a0d..cd8956a 100644
--- a/src/app/ui/collection-tools/examinationQuestions.ts
+++ b/src/app/ui/collection-tools/examinationQuestions.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ViewChild } 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,DisposalNodeData} from '../../canvas-share-data.service' //引入服务
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { NzFormatBeforeDropEvent, NzFormatEmitEvent,NzTreeComponent } from 'ng-zorro-antd/tree';
 
 @Component({
   selector: 'dialog-examination-questions',
@@ -70,4 +71,32 @@ export class uploadQuestions {
       console.log(this.data.question)
     }
 
+}
+
+@Component({
+  selector: 'dialog-disposal-nodes',
+  templateUrl: './uploadDisposalNodes.html',
+  styleUrls: ['./collection-tools.component.scss',]
+})
+export class uploadDisposalNodes {
+
+  constructor(private http:HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<any>,
+  @Inject(MAT_DIALOG_DATA) public data) {}
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  
+  ngOnInit(): void {
+    this.treeData = [...this.data.treeData]
+  }
+  treeData:any = []; //tree
+
+  //提交 保存考试节点
+  submit () {
+    let checkList = []
+    this.data.oldTreeData.forEach(element => {
+      let isChecked = (this.nzTreeComponent.getTreeNodeByKey(element.id)).isChecked
+      isChecked? checkList.push(element) : null
+    });
+    console.log(checkList)
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/uploadDisposalNodes.html b/src/app/ui/collection-tools/uploadDisposalNodes.html
new file mode 100644
index 0000000..33bd90c
--- /dev/null
+++ b/src/app/ui/collection-tools/uploadDisposalNodes.html
@@ -0,0 +1,14 @@
+<div>
+  <div style="max-height: 500px;overflow-x: hidden;overflow-y: auto;margin-bottom: 25px;width: 330px;padding-right: 10px;">
+    <nz-tree #nzTreeComponent [nzData]="treeData" nzCheckable nzMultiple [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
+    <ng-template #nzTreeTemplate let-node let-origin="origin">
+      <div id="terrNodePublic">
+        <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
+      </div>
+    </ng-template>
+  </div>
+  <div style="text-align: center;">
+    <button mat-stroked-button style="margin-right: 15px;border: none;background: #07CDCF;color: #fff;" (click)='submit()'>确定</button>
+    <button mat-stroked-button style="margin-left: 15px;border: none;background: #dfe0e0;" mat-dialog-close>取消</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts
index be7bbbe..e2a3352 100644
--- a/src/app/ui/ui.module.ts
+++ b/src/app/ui/ui.module.ts
@@ -57,14 +57,13 @@ import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeCo
 import {saveOneDialog,saveTwoDialog} from './collection-tools/save'
 import {WorkingAreaComponent} from '../working-area/working-area.component'
 import { NzTreeModule } from 'ng-zorro-antd/tree';
-import { examinationQuestions,uploadQuestions } from './collection-tools/examinationQuestions'
+import { examinationQuestions,uploadQuestions,uploadDisposalNodes } from './collection-tools/examinationQuestions'
 import {AddEnterpriserUser} from './enterpriseuser/addenterpriseuser.component'
 import {EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser} from './enterpriseuser/enterpriseuser.component'
 import {AddTeacher} from './teacherManagement/addenterpriseuser.component'
 import {TeacherManagementComponent,editTeacher,seeTeacher} from './teacherManagement/enterpriseuser.component'
 @NgModule({
-  declarations: [ChangepasswordComponent,ConfirmpswDirective, ChangeuserdataComponent,testState,CollectionToolsComponent,CreateBuilding,EditBuilding,ViewDetailss,leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent,saveOneDialog,saveTwoDialog,WorkingAreaComponent,examinationQuestions,uploadQuestions,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,AddTeacher,TeacherManagementComponent,editTeacher,seeTeacher],
-
+  declarations: [ChangepasswordComponent,ConfirmpswDirective, ChangeuserdataComponent,testState,CollectionToolsComponent,CreateBuilding,EditBuilding,ViewDetailss,leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent,saveOneDialog,saveTwoDialog,WorkingAreaComponent,examinationQuestions,uploadQuestions,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,AddTeacher,TeacherManagementComponent,editTeacher,seeTeacher,uploadDisposalNodes],
   imports: [
     NzDatePickerModule,
     CommonModule,
diff --git a/src/app/working-area/model/wallSpace.ts b/src/app/working-area/model/axArrowConnector.ts
similarity index 83%
rename from src/app/working-area/model/wallSpace.ts
rename to src/app/working-area/model/axArrowConnector.ts
index 8cb8f1a..f6e1c17 100644
--- a/src/app/working-area/model/wallSpace.ts
+++ b/src/app/working-area/model/axArrowConnector.ts
@@ -1,10 +1,11 @@
 import { WorkingAreaComponent } from '../working-area.component';
 import * as PIXI from 'pixi.js';
+import { AxShape } from './axShape';
 
 /**
  * 墙面
  */
-export class WallSpace extends PIXI.Container {
+export class AxArrowConnector extends AxShape {
 
     line: PIXI.Graphics;
     text: PIXI.Text;
@@ -26,8 +27,9 @@ export class WallSpace extends PIXI.Container {
     });
     pts: PIXI.Point[];
 
-    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
-        super();
+    constructor(assetData: any, workingArea: WorkingAreaComponent) {
+        super(assetData, workingArea);
+        this.name = assetData.Id;
         this.text = new PIXI.Text(this.assetData.Name
         + '\r\n'
             + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) =>
@@ -44,22 +46,26 @@ export class WallSpace extends PIXI.Container {
      * 刷新形状
      */
     public refresh(c: PIXI.Graphics, pts: PIXI.Point[]): void {
+        if (pts.length < 2) {
+            return;
+        }
+        this.text.position = pts[0];
         const strokeWidth = 1;
         const startWidth = 30 + strokeWidth;
         const endWidth = 30 + strokeWidth;
-        const edgeWidth = 10;
+        const edgeWidth = this.assetData.Thickness === 0?10:this.assetData.Thickness;  // 宽度
         const openEnded = false;
-        const markerStart = false;
-        const markerEnd = true;
+        const markerStart = false;// 起始箭头
+        const markerEnd = false;// 结束箭头
         const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2;
         const startSize = 30 + strokeWidth;
         const endSize = 30 + strokeWidth;
         const isRounded = true;
+        const lineColor = 0x000000;
+        const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');;
 
-            // Base vector (between first points)
         const pe = pts[pts.length - 1];
 
-            // Finds first non-overlapping point
         let i0 = 1;
 
         while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
@@ -73,8 +79,6 @@ export class WallSpace extends PIXI.Container {
         if (dist === 0) {
             return;
             }
-
-        // Computes the norm and the inverse norm
         let nx = dx / dist;
         let nx1 = nx;
         let nx2 = nx;
@@ -84,7 +88,6 @@ export class WallSpace extends PIXI.Container {
         let orthx = edgeWidth * ny;
         let orthy = -edgeWidth * nx;
 
-        // Stores the inbound function calls in reverse order in fns
         const fns = [];
 
         // if (isRounded) {
@@ -96,9 +99,9 @@ export class WallSpace extends PIXI.Container {
         //     c.lineTextureStyle({ miterLimit: 1.42 });
         // }
         // c.lineStyle(1, 0x000000, 1);
-        c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND });
-        // c.begin();
-        c.beginFill(0xffffff);
+        c.clear();
+        c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND });
+        c.beginFill(fillColor);
         const startNx = nx;
         const startNy = ny;
 
@@ -125,7 +128,6 @@ export class WallSpace extends PIXI.Container {
         let dist1 = 0;
 
         for (let i = 0; i < pts.length - 2; i++) {
-        // Work out in which direction the line is bending
         const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y);
 
         dx1 = pts[i + 2].x - pts[i + 1].x;
@@ -140,7 +142,6 @@ export class WallSpace extends PIXI.Container {
             const tmp1 = nx * nx1 + ny * ny1;
             const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04);
 
-            // Work out the normal orthogonal to the line through the control point and the edge sides intersection
             nx2 = (nx + nx1);
             ny2 = (ny + ny1);
 
@@ -150,7 +151,6 @@ export class WallSpace extends PIXI.Container {
                 nx2 = nx2 / dist2;
                 ny2 = ny2 / dist2;
 
-                // Higher strokewidths require a larger minimum bend, 0.35 covers all but the most extreme cases
                 const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35));
                 const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06);
 
@@ -160,8 +160,6 @@ export class WallSpace extends PIXI.Container {
                 const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor;
 
                 if (pos === 0 || !isRounded) {
-                    // If the two segments are aligned, or if we're not drawing curved sections between segments
-                    // just draw straight to the intersection point
                     c.lineTo(outX, outY);
 
                     ((x, y) => {
@@ -250,10 +248,8 @@ export class WallSpace extends PIXI.Container {
         //     c.fillAndStroke();
         // }
 
-        // Workaround for shadow on top of base arrow
         // c.setShadow(false);
 
-        // Need to redraw the markers without the low miter limit
         // c.setMiterLimit(4);
 
         // if (isRounded)
@@ -263,8 +259,6 @@ export class WallSpace extends PIXI.Container {
 
         // if (pts.length > 2)
         // {
-        //     // Only to repaint markers if no waypoints
-        //     // Need to redraw the markers without the low miter limit
         //     c.setMiterLimit(4);
         //     if (markerStart && !openEnded)
         //     {
@@ -283,11 +277,6 @@ export class WallSpace extends PIXI.Container {
         //     }
         // }
     }
-    /**
-     * Function: paintMarker
-     *
-     * Paints the marker.
-     */
     paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
                 size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
         const widthArrowRatio = edgeWidth / arrowWidth;
@@ -307,21 +296,6 @@ export class WallSpace extends PIXI.Container {
         c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
         c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
     }
-    /**
-     * Function: relativeCcw
-     *
-     * Returns 1 if the given point on the right side of the segment, 0 if its
-     * on the segment, and -1 if the point is on the left side of the segment.
-     *
-     * Parameters:
-     *
-     * x1 - X-coordinate of the startpoint of the segment.
-     * y1 - Y-coordinate of the startpoint of the segment.
-     * x2 - X-coordinate of the endpoint of the segment.
-     * y2 - Y-coordinate of the endpoint of the segment.
-     * px - X-coordinate of the point.
-     * py - Y-coordinate of the point.
-     */
     relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
         x2 -= x1;
         y2 -= y1;
@@ -344,4 +318,8 @@ export class WallSpace extends PIXI.Container {
         }
         return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0);
     }
+
+    redraw(): void{
+        this.refresh(this.line, this.assetData.MultiPoint);
+    }
 }
diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts
index 99fca6c..e76728e 100644
--- a/src/app/working-area/model/axImageShape.ts
+++ b/src/app/working-area/model/axImageShape.ts
@@ -1,24 +1,443 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import * as ObjectID from 'bson-objectid';
+import { GameMode } from './gameMode';
+import { Pipeline } from './pipeline';
+import { PaintMode } from './paintModel';
 import * as PIXI from 'pixi.js';
-
+import { PropertyInfo } from './PropertyInfo';
+import { AxShape } from './axShape';
+import { Sprite } from 'pixi.js';
 
 /**
- * 安信形状
+ * 安信图片形状
+ * AxImageShape
  */
-export class AxImageShape extends PIXI.Container {
+export class AxImageShape extends AxShape {
+    style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        fill: ['#000000'],
+        stroke: '#ffffff',
+        strokeThickness: 3,
+        dropShadow: true,
+        dropShadowColor: '#000000',
+        dropShadowBlur: 3,
+        dropShadowAngle: Math.PI / 6,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 100,
+    });
+
+    text = new PIXI.Text(this.assetData.Name
+        + '\r\n'
+        + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+
+    /**
+     * 选中圆点
+     */
+
     image: PIXI.Sprite;
+    selectionBox = new PIXI.Graphics();
+    connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
+    connectPoint: Sprite;
+    // 可移动的
 
-    constructor() {
-        super();
+    // 可选中的
 
-    }
+    // up: PIXI.Sprite;
+    // down: PIXI.Sprite;
+    // left: PIXI.Sprite;
+    // right: PIXI.Sprite;
+    // upLeft: PIXI.Sprite;
+    // upRight: PIXI.Sprite;
+    // downLeft: PIXI.Sprite;
+    // downRight: PIXI.Sprite;
+    constructor(assetData: any, workingArea: WorkingAreaComponent) {
+        super(assetData, workingArea);
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.name = this.assetData.Id;
+        this.image = PIXI.Sprite.from(this.assetData.ImageUrl);
+        this.image.angle = this.assetData.Angle;
 
+        this.image.x = 0;
+        this.image.y = 0;
+        this.image.width = this.assetData.Width;
+        this.image.height = this.assetData.Height;
+        this.image.alpha = 1;
+        this.image.anchor.set(0.5);
+        // this.image.interactive = true;
+        // this.image.buttonMode = true;
+        // this.image
+        //     .on('mousedown', event => {
+        //         event.stopPropagation();
+        //         this.workingArea.selection.selectOne(this);
+        //         // this.paintingPipeline(this.x, this.y);
+        //         // 如果链接对象不为空,禁止移动
+        //         if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+        //             event.currentTarget.parent.data = event.data;
+        //             event.currentTarget.parent.alpha = 0.5;
+        //             event.currentTarget.parent.dragging = true;
+        //         }
+        //     })
+        //     .on('mouseup', event => {
+        //         if (event.currentTarget.parent.dragging) {
+        //             event.currentTarget.parent.alpha = 1;
+        //             event.currentTarget.parent.dragging = false;
+        //             event.currentTarget.parent.data = null;
+        //         }
+        //     })
+        //     .on('mouseupoutside', event => {
+        //         if (event.currentTarget.parent.dragging) {
+        //             event.currentTarget.parent.alpha = 1;
+        //             event.currentTarget.parent.dragging = false;
+        //             event.currentTarget.parent.data = null;
+        //         }
+        //     })
+        //     .on('mousemove', event => {
+        //         if (event.currentTarget.parent.dragging) {
+        //             // // 如果拖动过程中发现父对象不是背景图
+        //             // if (this.parent !== this.workingArea.backgroundImage) {
+        //             //     this.setParent(this.workingArea.backgroundImage);
+        //             //     if (this.assetData.FixedSize) {
+        //             //         const scale = 1 / this.workingArea.backgroundImage.scale.x;
+        //             //         this.scale.set(scale);
+        //             //     }
+        //             // }
+        //             const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+        //             event.currentTarget.parent.x = newPosition.x;
+        //             event.currentTarget.parent.y = newPosition.y;
+        //             this.assetData.Point = new PIXI.Point(this.x, this.y);
+        //             this.workingArea.canvasData.isChange = true;
+        //         }
+        //     })
+        //     .on('rightclick', event => {
 
-    paintVertexShape(rect: PIXI.Rectangle) {
+        //     })
+        //     .on('mouseover', event => {
+        //         event.stopPropagation();
+        //         if (this.workingArea.previewImage !== null
+        //         && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
+        //             this.workingArea.previewImage.visible = false;
+        //         }
+        //         // if (this.assetData.CanConnect) {
+        //         //     this.setSelectionBox(true, this.image);
+        //         // }
+        //     })
+        //     .on('mouseout', event => {
+        //         event.stopPropagation();
+        //         if (this.workingArea.previewImage !== null
+        //         && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
+        //             this.workingArea.previewImage.visible = true;
+        //         }
+        //         // if (this.assetData.CanConnect) {
+        //         //     this.setSelectionBox(false);
+        //         // }
+        //     });
+        this.text.x = this.image.x;
+        this.text.y = this.image.y - this.image.height / 2;
+        this.text.anchor.set(0.5, 1);
 
-    }
-    paintBackground(rect: PIXI.Rectangle) { }
+        if (this.assetData.GameMode === 2) {
+            this.text.visible = false;
+        }
+        this.addChild(this.text);
+        this.addChild(this.image);
+        this.addChild(this.selectionBox);
+
+        if (this.assetData.CanConnect) {
+            // connectPoint
+            this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
+            this.connectPoint.anchor.set(0.5);
+            this.connectPoint.x = this.image.x;
+            this.connectPoint.y = this.image.y;
+            this.addChild(this.connectPoint);
+            this.connectPoint.interactive = true;
+            this.connectPoint
+                .on('mousedown', event => {
+                    event.stopPropagation();
+                    this.paintingPipeline(this.x, this.y);
+                })
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.connectPoint);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // // up
+            // this.up = new PIXI.Sprite(this.selectedPointTexture);
+            // this.up.anchor.set(0.5);
+            // this.up.x = this.image.x;
+            // this.up.y = this.image.y - (this.image.height / 2);
+            // this.addChild(this.up);
+            // this.up.interactive = true;
+            // this.up
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.up);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
+            // // down
+            // this.down = new PIXI.Sprite(this.selectedPointTexture);
+            // this.down.anchor.set(0.5);
+            // this.down.x = this.image.x;
+            // this.down.y = this.image.y + (this.image.height / 2);
+            // this.addChild(this.down);
+            // this.down.interactive = true;
+            // this.down
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.down.x, this.down.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.down);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
+            // // left
+            // this.left = new PIXI.Sprite(this.selectedPointTexture);
+            // this.left.anchor.set(0.5);
+            // this.left.x = this.image.x - (this.image.width / 2);
+            // this.left.y = this.image.y;
+            // this.addChild(this.left);
+            // this.left.interactive = true;
+            // this.left
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.left.x, this.left.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.left);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
+            // // right
+            // this.right = new PIXI.Sprite(this.selectedPointTexture);
+            // this.right.anchor.set(0.5);
+            // this.right.x = this.image.x + (this.image.width / 2);
+            // this.right.y = this.image.y;
+            // this.addChild(this.right);
+            // this.right.interactive = true;
+            // this.right
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.right.x, this.right.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.right);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
+            // // up-left
+            // this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
+            // this.upLeft.anchor.set(0.5);
+            // this.upLeft.x = this.image.x - (this.image.width / 2);
+            // this.upLeft.y = this.image.y - (this.image.height / 2);
+            // this.addChild(this.upLeft);
+            // this.upLeft.interactive = true;
+            // this.upLeft
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.upLeft.x, this.upLeft.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.upLeft);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
+            // // up-right
+            // this.upRight = new PIXI.Sprite(this.selectedPointTexture);
+            // this.upRight.anchor.set(0.5);
+            // this.upRight.x = this.image.x + (this.image.width / 2);
+            // this.upRight.y = this.image.y - (this.image.height / 2);
+            // this.addChild(this.upRight);
+            // this.upRight.interactive = true;
+            // this.upRight
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.upRight.x, this.upRight.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.upRight);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
 
-    paintForeground(rect: PIXI.Rectangle) { }
+            // // down-left
+            // this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
+            // this.downLeft.anchor.set(0.5);
+            // this.downLeft.x = this.image.x - (this.image.width / 2);
+            // this.downLeft.y = this.image.y + (this.image.height / 2);
+            // this.addChild(this.downLeft);
+            // this.downLeft.interactive = true;
+            // this.downLeft
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.downLeft.x, this.downLeft.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.downLeft);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
+            // // down-right
+            // this.downRight = new PIXI.Sprite(this.selectedPointTexture);
+            // this.downRight.anchor.set(0.5);
+            // this.downRight.x = this.image.x + (this.image.width / 2);
+            // this.downRight.y = this.image.y + (this.image.height / 2);
+            // this.addChild(this.downRight);
+            // this.downRight.interactive = true;
+            // this.downRight
+            //     .on('mousedown', event => {
+            //         event.stopPropagation();
+            //         const pt = this.toGlobal(new PIXI.Point(this.downRight.x, this.downRight.y));
+            //         const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+            //         this.paintingPipeline(pt2.x, pt2.y);
+            //     })
+            //     .on('mouseover', event => {
+            //         this.setSelectionBox(true, this.downRight);
+            //     })
+            //     .on('mouseout', event => {
+            //         this.setSelectionBox(false);
+            //     });
 
-    paintEdgeShape(pts: Array<PIXI.Point>) { }
+            this.showConnectionPoint(false);
+        }
+    }
+    // 设置选择框
+    public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
+        if (b) {
+            this.selectionBox.lineStyle(2, 0x00EB00, 1);
+            this.selectionBox.position = sprite.position;
+            this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
+            // const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
+            // const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
+            // const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
+            // const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
+            // this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
+            // this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
+            // this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
+            // this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
+        } else {
+            this.selectionBox.clear();
+        }
+    }
+    // 设置名称
+    public setNameVisible(value: boolean, mode: GameMode) {
+        if (this.assetData.GameMode === mode) {
+            this.text.visible = value;
+        }
+    }
+    // 显示连接点
+    public showConnectionPoint(b: boolean) {
+        this.connectPoint.visible = b;
+        // this.up.visible = b;
+        // this.down.visible = b;
+        // this.left.visible = b;
+        // this.right.visible = b;
+        // this.upLeft.visible = b;
+        // this.downLeft.visible = b;
+        // this.upRight.visible = b;
+        // this.downRight.visible = b;
+    }
+    paintingPipeline(x: number, y: number) {
+        if (this.assetData.CanConnect) {
+                    if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
+                        if (this.workingArea.paintingPipeline === 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),
+                            };
+                            this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea);
+                            this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id);
+                            this.workingArea.emit('createIcon', this.workingArea.paintingPipeline);
+                        } 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.paintingPipeline.assetData.MultiPoint =
+                                JSON.parse(JSON.stringify(this.workingArea.paintPoints));
+                            this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this.assetData.Id);
+                            this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id);
+                            this.workingArea.paintingPipeline.refresh();
+                            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;
+        this.text.text = this.assetData.Name
+            + '\r\n'
+            + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+        this.text.x = this.image.x;
+        this.text.y = this.image.y - this.image.height / 2;
+    }
 }
diff --git a/src/app/working-area/model/axPreviewImageShape.ts b/src/app/working-area/model/axPreviewImageShape.ts
new file mode 100644
index 0000000..623b2d7
--- /dev/null
+++ b/src/app/working-area/model/axPreviewImageShape.ts
@@ -0,0 +1,27 @@
+import { Sprite, Texture } from 'pixi.js';
+import { WorkingAreaComponent } from '../working-area.component';
+import { AxShape } from './axShape';
+
+export class AxPreviewImageShape extends AxShape {
+    image: Sprite = null;
+    /**
+     *
+     */
+    constructor(workingArea: WorkingAreaComponent) {
+        super(null, workingArea);
+        this.image = new Sprite();
+        this.image.width = 32;
+        this.image.height = 32;
+        this.image.anchor.set(0.5);
+        this.interactive = false;
+        this.scale.set(1 / this.workingArea.backgroundImage.scale.x);
+        this.addChild(this.image);
+    }
+    /**
+     * 重新设置图片地址
+     * @param url 图片路径
+     */
+    setImageUrl(url: string) {
+        this.image.texture = Texture.from(url);
+    }
+}
diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts
index f285c24..bd82842 100644
--- a/src/app/working-area/model/axShape.ts
+++ b/src/app/working-area/model/axShape.ts
@@ -1,56 +1,76 @@
+import { Constructor } from '@angular/material/core/common-behaviors/constructor';
 import * as PIXI from 'pixi.js';
-// import { Point, Rectangle, Graphics } from 'pixi.js';
+import { Point, Rectangle, Graphics, Container } from 'pixi.js';
+import { WorkingAreaComponent } from '../working-area.component';
 
 /**
  * 安信形状
  */
-export class AxShape extends PIXI.Container {
+export class AxShape extends Container {
+    assetData: any;
+    workingArea: WorkingAreaComponent;
+    // 可以被移动的
+    moveable = true;
+    // 可以被选中的
+    selectable = true;
 
-    points: Array<PIXI.Point> = [];
-    title: string;
-    titleVisible: boolean;
-    g: PIXI.Graphics = new PIXI.Graphics();
-
-    constructor() {
+    constructor(assetData: any, workingArea: WorkingAreaComponent) {
         super();
-        this.addChild(this.g);
-        // this.drawDashedLine(this.g, new Point(0, 0), new Point(0, 200), 0xff0000);
-    }
-    // /**
-    //  * 绘制虚线
-    //  * @param g
-    //  * @param p0
-    //  * @param pe
-    //  * @param color
-    //  * @param width
-    //  * @param dashLen
-    //  */
-    // drawDashedLine(g: Graphics, p0: Point, pe: Point, color: number, width: number = 1, dashLen: number = 5) {
-    //         g.lineStyle(width, color);
-    //         const len = Math.sqrt(Math.pow(pe.x - p0.x, 2) + Math.pow(pe.y - p0.y, 2));
-    //         // tslint:disable-next-line: no-bitwise
-    //         const num = ~~(len / dashLen);
-    //         for (let i = 0; i < num; i++) {
-    //             const x = p0.x + (pe.x - p0.x) / num * i;
-    //             const y = p0.y + (pe.y - p0.y) / num * i;
-    //             // tslint:disable-next-line: no-bitwise
-    //             i & 1 ? g.lineTo(x, y) : g.moveTo(x, y);
-    //         }
-    // }
+        this.assetData = assetData;
+        this.workingArea = workingArea;
+        this.workingArea.backgroundImage.addChild(this);
+        this.interactive = true;
+        this.buttonMode = true;
+        this.on('mousedown', event => {
+            console.log(this.assetData);
+            event.stopPropagation();
+            if (this.selectable) {
+                this.workingArea.selection.selectOne(this);
+            }
+            if (this.moveable) {
+                event.currentTarget.data = event.data;
+                event.currentTarget.alpha = 0.5;
+                event.currentTarget.dragging = true;
 
-    paintVertexShape(rect: PIXI.Rectangle) {
-        // this.paintBackground(c, x, y, w, h);
+                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
+                event.currentTarget.dragPoint.x -= event.currentTarget.x;
+                event.currentTarget.dragPoint.y -= event.currentTarget.y;
+            }
+            })
+            .on('mouseup', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('mouseupoutside', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('mousemove', event => {
+                if (event.currentTarget.dragging) {
+                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                    event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
+                    event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
+                    this.assetData.Point = new PIXI.Point(this.x, this.y);
+                    this.workingArea.canvasData.isChange = true;
+                }
+            })
+            .on('rightclick', event => {
 
-        // if (!this.outline || this.style == null || mxUtils.getValue(
-        // 	this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0)
-        // {
-        // 	c.setShadow(false);
-        // 	this.paintForeground(c, x, y, w, h);
-        // }
+            })
+            .on('mouseover', event => {
+                event.stopPropagation();
+            })
+            .on('mouseout', event => {
+                event.stopPropagation();
+            });
+    }
+    redraw(): void {
+        
     }
-    paintBackground(rect: PIXI.Rectangle) { }
-
-    paintForeground(rect: PIXI.Rectangle) { }
-
-    paintEdgeShape(pts: Array<PIXI.Point>) { }
 }
diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts
index d5467a7..df2da6f 100644
--- a/src/app/working-area/model/multipointIcon.ts
+++ b/src/app/working-area/model/multipointIcon.ts
@@ -165,9 +165,6 @@ export class MultipointIcon extends PIXI.Container {
                     }
                 })
                 .on('rightclick', event => {
-                })
-                .on('mouseover', event => {
-
                 });
         });
         // // 缩放
@@ -178,6 +175,7 @@ export class MultipointIcon extends PIXI.Container {
         // 添加选中事件
         this.iconsTilingSprite.forEach((item, index, array) => {
             item.interactive = true;
+            item.buttonMode = true;
             item.on('mousedown', event => {
                 event.stopPropagation();
                 this.workingArea.selection.selectOne(this);
@@ -245,4 +243,4 @@ export class MultipointIcon extends PIXI.Container {
             + '\r\n'
             + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/working-area/model/paintModel.ts b/src/app/working-area/model/paintModel.ts
index dc0b031..39a06ce 100644
--- a/src/app/working-area/model/paintModel.ts
+++ b/src/app/working-area/model/paintModel.ts
@@ -18,6 +18,10 @@ export enum PaintMode {
      * 水带多边形
      */
     Pipeline,
+    /**
+     * 结束绘制
+     */
+    endPaint,
     /**
      * 暂无
      */
@@ -26,8 +30,4 @@ export enum PaintMode {
      * 暂无
      */
     Car,
-    /**
-     * 结束绘制
-     */
-    endPaint,
 }
diff --git a/src/app/working-area/model/pipeline.ts b/src/app/working-area/model/pipeline.ts
index 904732a..74045ad 100644
--- a/src/app/working-area/model/pipeline.ts
+++ b/src/app/working-area/model/pipeline.ts
@@ -1,14 +1,16 @@
 import { WorkingAreaComponent } from '../working-area.component';
 import * as PIXI from 'pixi.js';
+import { AxShape } from './axShape';
 
 /**
  * 管线
  */
-export class Pipeline extends PIXI.Container {
+export class Pipeline extends AxShape {
     public line: PIXI.Graphics = new PIXI.Graphics();
-    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
-        super();
+    constructor(assetData: any, workingArea: WorkingAreaComponent) {
+        super(assetData, workingArea);
         this.name = this.assetData.Id;
+        this.moveable = false;
         this.x = this.assetData.Point.x;
         this.y = this.assetData.Point.y;
         this.workingArea.backgroundImage.addChild(this);
@@ -269,9 +271,17 @@ export class Pipeline extends PIXI.Container {
         // }
     }
     /**
-     * Function: paintMarker
-     *
-     * Paints the marker.
+     * 画箭头
+     * @param c
+     * @param ptX
+     * @param ptY
+     * @param nx
+     * @param ny
+     * @param size
+     * @param arrowWidth
+     * @param edgeWidth
+     * @param spacing
+     * @param initialMove
      */
     paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
                 size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
@@ -292,21 +302,7 @@ export class Pipeline extends PIXI.Container {
         c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
         c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
     }
-    /**
-     * Function: relativeCcw
-     *
-     * Returns 1 if the given point on the right side of the segment, 0 if its
-     * on the segment, and -1 if the point is on the left side of the segment.
-     *
-     * Parameters:
-     *
-     * x1 - X-coordinate of the startpoint of the segment.
-     * y1 - Y-coordinate of the startpoint of the segment.
-     * x2 - X-coordinate of the endpoint of the segment.
-     * y2 - Y-coordinate of the endpoint of the segment.
-     * px - X-coordinate of the point.
-     * py - Y-coordinate of the point.
-     */
+
     relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
         x2 -= x1;
         y2 -= y1;
diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts
index 3c604df..a7d0eb9 100644
--- a/src/app/working-area/model/polygonIcon.ts
+++ b/src/app/working-area/model/polygonIcon.ts
@@ -1,6 +1,7 @@
 import { WorkingAreaComponent } from '../working-area.component';
 import { GameMode } from './gameMode';
 import * as PIXI from 'pixi.js';
+import { PaintMode } from './paintModel';
 
 /**
  * 多边形
@@ -76,6 +77,7 @@ export class PolygonIcon extends PIXI.Container {
         // 添加圆点事件
         this.pointsGraphics.forEach((item, index, array) => {
             item.interactive = true;
+            item.buttonMode = true;
             item.zIndex = 1;
             item.on('mousedown', event => {
                 event.stopPropagation();
@@ -123,10 +125,24 @@ export class PolygonIcon extends PIXI.Container {
                     }
                 })
                 .on('rightclick', event => {
-                });
+                })            .on('mouseover', event => {
+                event.stopPropagation();
+                if (this.workingArea.previewImage !== null
+                    && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
+                    this.workingArea.previewImage.visible = false;
+                }
+            })
+            .on('mouseout', event => {
+                event.stopPropagation();
+                if (this.workingArea.previewImage !== null
+                && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
+                    this.workingArea.previewImage.visible = true;
+                }
+            });
         });
         // 添加选中事件
         this.polygonGraphics.interactive = true;
+        this.polygonGraphics.buttonMode = true;
         this.polygonGraphics
             .on('mousedown', event => {
                 event.stopPropagation();
@@ -167,12 +183,21 @@ export class PolygonIcon extends PIXI.Container {
             })
             .on('rightclick', event => {
                 // this.workingArea.selection.deselectAll();
+            })
+            .on('mouseover', event => {
+                event.stopPropagation();
+                if (this.workingArea.previewImage !== null
+                && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
+                    this.workingArea.previewImage.visible = false;
+                }
+            })
+            .on('mouseout', event => {
+                event.stopPropagation();
+                if (this.workingArea.previewImage !== null
+                && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
+                    this.workingArea.previewImage.visible = true;
+                }
             });
-        // // 缩放
-        // this.workingArea.on('backgroundScale', data => {
-        //   const scale = 1 / data;
-        //   this.text.scale.set(scale);
-        // });
     }
     /**
      * 设置点显示状态
@@ -241,4 +266,4 @@ export class PolygonIcon extends PIXI.Container {
         this.polygonGraphics.drawPolygon(this.getPoints());
         this.polygonGraphics.endFill();
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/working-area/model/putCarArea.ts b/src/app/working-area/model/putCarArea.ts
index 7544d04..25480b2 100644
--- a/src/app/working-area/model/putCarArea.ts
+++ b/src/app/working-area/model/putCarArea.ts
@@ -1,59 +1,59 @@
-import { OldFilmFilter } from 'pixi-filters';
-import { WorkingAreaComponent } from '../working-area.component';
-import { PaintMode } from './paintModel';
-import { SinglePointIcon } from './singlePointIcon';
-import * as PIXI from 'pixi.js';
+// import { OldFilmFilter } from 'pixi-filters';
+// import { WorkingAreaComponent } from '../working-area.component';
+// import { PaintMode } from './paintModel';
+// import { SinglePointIcon } from './axImageShape';
+// import * as PIXI from 'pixi.js';
 
-/**
- * 汽车放置区域
- */
-export class PutCarArea extends PIXI.Container {
-    public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
-    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
-        super();
-        this.name = this.assetData.Id;
-        this.x = this.assetData.Point.x;
-        this.y = this.assetData.Point.y;
-        this.workingArea.backgroundImage.addChild(this);
-        this.sortableChildren = true;
+// /**
+//  * 汽车放置区域
+//  */
+// export class PutCarArea extends PIXI.Container {
+//     public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
+//     constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+//         super();
+//         this.name = this.assetData.Id;
+//         this.x = this.assetData.Point.x;
+//         this.y = this.assetData.Point.y;
+//         this.workingArea.backgroundImage.addChild(this);
+//         this.sortableChildren = true;
 
-        // 填充多边形
+//         // 填充多边形
 
-        const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
-        const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
-        this.polygonGraphics.beginFill(color, angle);
-        this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
-        this.polygonGraphics.endFill();
-        this.addChild(this.polygonGraphics);
-        // 添加选中事件
-        this.polygonGraphics.interactive = true;
-        this.polygonGraphics
-            .on('pointerdown', (event) => {
-                if (this.workingArea.getPaintMode() === PaintMode.Car) {
-                    this.workingArea.selectCar.Point =
-                        new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
-                    this.workingArea.selectCar.Angle = this.assetData.Direction;
-                    const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
-                    this.workingArea.setPaintMode(PaintMode.endPaint);
-                }
-            })
-            .on('pointerup', (event) => {
+//         const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
+//         const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
+//         this.polygonGraphics.beginFill(color, angle);
+//         this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
+//         this.polygonGraphics.endFill();
+//         this.addChild(this.polygonGraphics);
+//         // 添加选中事件
+//         this.polygonGraphics.interactive = true;
+//         this.polygonGraphics
+//             .on('pointerdown', (event) => {
+//                 if (this.workingArea.getPaintMode() === PaintMode.Car) {
+//                     this.workingArea.selectCar.Point =
+//                         new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
+//                     this.workingArea.selectCar.Angle = this.assetData.Direction;
+//                     const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
+//                     this.workingArea.setPaintMode(PaintMode.endPaint);
+//                 }
+//             })
+//             .on('pointerup', (event) => {
 
-            })
-            .on('pointerupoutside', (event) => {
+//             })
+//             .on('pointerupoutside', (event) => {
 
-            })
-            .on('pointerover', (event) => {
-                this.workingArea.previewSinglePointIcon.filters = null;
-                this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
-                // 设置车辆方向
-                this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
-                console.log(this.assetData.Name);
-            })
-            .on('pointerout', (event) => {
-                this.workingArea.previewSinglePointIcon.filters = [
-                    new OldFilmFilter()
-                ];
-            });
-    }
-}
\ No newline at end of file
+//             })
+//             .on('pointerover', (event) => {
+//                 this.workingArea.previewSinglePointIcon.filters = null;
+//                 this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
+//                 // 设置车辆方向
+//                 this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
+//                 console.log(this.assetData.Name);
+//             })
+//             .on('pointerout', (event) => {
+//                 this.workingArea.previewSinglePointIcon.filters = [
+//                     new OldFilmFilter()
+//                 ];
+//             });
+//     }
+// }
diff --git a/src/app/working-area/model/singlePointIcon.ts b/src/app/working-area/model/singlePointIcon.ts
deleted file mode 100644
index 935f5e5..0000000
--- a/src/app/working-area/model/singlePointIcon.ts
+++ /dev/null
@@ -1,373 +0,0 @@
-import { WorkingAreaComponent } from '../working-area.component';
-import * as ObjectID from 'bson-objectid';
-import { GameMode } from './gameMode';
-import { Pipeline } from './pipeline';
-import { PaintMode } from './paintModel';
-import * as PIXI from 'pixi.js';
-import { PropertyInfo } from './PropertyInfo';
-import { AxShape } from './axShape';
-
-/**
- * 单点图标
- */
-export class SinglePointIcon extends AxShape {
-    style = new PIXI.TextStyle({
-        fontFamily: 'Arial',
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        fill: ['#000000'],
-        stroke: '#ffffff',
-        strokeThickness: 3,
-        dropShadow: true,
-        dropShadowColor: '#000000',
-        dropShadowBlur: 3,
-        dropShadowAngle: Math.PI / 6,
-        dropShadowDistance: 1,
-        wordWrap: false,
-        wordWrapWidth: 100,
-    });
-
-    text = new PIXI.Text(this.assetData.Name
-        + '\r\n'
-        + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
-
-    /**
-     * 选中圆点
-     */
-    selectedPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
-    image = PIXI.Sprite.from(this.assetData.ImageUrl);
-    selectionBox = new PIXI.Graphics();
-    up: PIXI.Sprite;
-    down: PIXI.Sprite;
-    left: PIXI.Sprite;
-    right: PIXI.Sprite;
-    upLeft: PIXI.Sprite;
-    upRight: PIXI.Sprite;
-    downLeft: PIXI.Sprite;
-    downRight: PIXI.Sprite;
-    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
-        super();
-        this.workingArea.backgroundImage.addChild(this);
-        this.x = this.assetData.Point.x;
-        this.y = this.assetData.Point.y;
-        this.name = this.assetData.Id;
-
-        this.image.angle = this.assetData.Angle;
-
-        this.image.x = 0;
-        this.image.y = 0;
-        this.image.width = this.assetData.Width;
-        this.image.height = this.assetData.Height;
-        // console.log(this.getBounds());
-        this.image.alpha = 1;
-        this.image.anchor.set(0.5);
-        this.image.interactive = true;
-        this.image
-            .on('mousedown', event => {
-                event.stopPropagation();
-                this.workingArea.selection.selectOne(this);
-                this.paintingPipeline(this.x, this.y);
-                // 如果链接对象不为空,禁止移动
-                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
-                    event.currentTarget.parent.data = event.data;
-                    event.currentTarget.parent.alpha = 0.5;
-                    event.currentTarget.parent.dragging = true;
-                }
-            })
-            .on('mouseup', event => {
-                if (event.currentTarget.parent.dragging) {
-                    event.currentTarget.parent.alpha = 1;
-                    event.currentTarget.parent.dragging = false;
-                    event.currentTarget.parent.data = null;
-                }
-            })
-            .on('mouseupoutside', event => {
-                if (event.currentTarget.parent.dragging) {
-                    event.currentTarget.parent.alpha = 1;
-                    event.currentTarget.parent.dragging = false;
-                    event.currentTarget.parent.data = null;
-                }
-            })
-            .on('mousemove', event => {
-                if (event.currentTarget.parent.dragging) {
-                    // 如果拖动过程中发现父对象不是背景图
-                    if (this.parent !== this.workingArea.backgroundImage) {
-                        this.setParent(this.workingArea.backgroundImage);
-                        if (this.assetData.FixedSize) {
-                            const scale = 1 / this.workingArea.backgroundImage.scale.x;
-                            this.scale.set(scale);
-                        }
-                    }
-                    const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
-                    event.currentTarget.parent.x = newPosition.x;
-                    event.currentTarget.parent.y = newPosition.y;
-                    this.assetData.Point = new PIXI.Point(this.x, this.y);
-                    this.workingArea.canvasData.isChange = true;
-                }
-            })
-            .on('rightclick', event => {
-
-            })
-            .on('mouseover', event => {
-                // if (this.assetData.CanConnect) {
-                //     this.setSelectionBox(true, this.image);
-                // }
-            })
-            .on('mouseout', event => {
-                // if (this.assetData.CanConnect) {
-                //     this.setSelectionBox(false);
-                // }
-            });
-        this.text.x = this.image.x;
-        this.text.y = this.image.y - this.image.height / 2;
-        this.text.anchor.set(0.5, 1);
-
-        if (this.assetData.GameMode === 2) {
-            this.text.visible = false;
-        }
-        this.addChild(this.text);
-        this.addChild(this.image);
-        this.addChild(this.selectionBox);
-
-        if (this.assetData.CanConnect) {
-            // up
-            this.up = new PIXI.Sprite(this.selectedPointTexture);
-            this.up.anchor.set(0.5);
-            this.up.x = this.image.x;
-            this.up.y = this.image.y - (this.image.height / 2);
-            this.addChild(this.up);
-            this.up.interactive = true;
-            this.up
-                .on('mousedown', event => {
-                    event.stopPropagation();
-                    const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
-                    const pt2 = this.workingArea.backgroundImage.toLocal(pt);
-                    this.paintingPipeline(pt2.x, pt2.y);
-                })
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.up);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-            // down
-            this.down = new PIXI.Sprite(this.selectedPointTexture);
-            this.down.anchor.set(0.5);
-            this.down.x = this.image.x;
-            this.down.y = this.image.y + (this.image.height / 2);
-            this.addChild(this.down);
-            this.down.interactive = true;
-            this.down
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.down);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-            // left
-            this.left = new PIXI.Sprite(this.selectedPointTexture);
-            this.left.anchor.set(0.5);
-            this.left.x = this.image.x - (this.image.width / 2);
-            this.left.y = this.image.y;
-            this.addChild(this.left);
-            this.left.interactive = true;
-            this.left
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.left);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-            // right
-            this.right = new PIXI.Sprite(this.selectedPointTexture);
-            this.right.anchor.set(0.5);
-            this.right.x = this.image.x + (this.image.width / 2);
-            this.right.y = this.image.y;
-            this.addChild(this.right);
-            this.right.interactive = true;
-            this.right
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.right);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-            // up-left
-            this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
-            this.upLeft.anchor.set(0.5);
-            this.upLeft.x = this.image.x - (this.image.width / 2);
-            this.upLeft.y = this.image.y - (this.image.height / 2);
-            this.addChild(this.upLeft);
-            this.upLeft.interactive = true;
-            this.upLeft
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.upLeft);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-            // up-right
-            this.upRight = new PIXI.Sprite(this.selectedPointTexture);
-            this.upRight.anchor.set(0.5);
-            this.upRight.x = this.image.x + (this.image.width / 2);
-            this.upRight.y = this.image.y - (this.image.height / 2);
-            this.addChild(this.upRight);
-            this.upRight.interactive = true;
-            this.upRight
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.upRight);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-
-            // down-left
-            this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
-            this.downLeft.anchor.set(0.5);
-            this.downLeft.x = this.image.x - (this.image.width / 2);
-            this.downLeft.y = this.image.y + (this.image.height / 2);
-            this.addChild(this.downLeft);
-            this.downLeft.interactive = true;
-            this.downLeft
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.downLeft);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-            // down-right
-            this.downRight = new PIXI.Sprite(this.selectedPointTexture);
-            this.downRight.anchor.set(0.5);
-            this.downRight.x = this.image.x + (this.image.width / 2);
-            this.downRight.y = this.image.y + (this.image.height / 2);
-            this.addChild(this.downRight);
-            this.downRight.interactive = true;
-            this.downRight
-                .on('mouseover', event => {
-                    this.setSelectionBox(true, this.downRight);
-                })
-                .on('mouseout', event => {
-                    this.setSelectionBox(false);
-                });
-
-            this.showConnectionPoint(false);
-        }
-    }
-    // 设置选择框
-    public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
-        if (b) {
-            this.selectionBox.lineStyle(2, 0x00EB00, 1);
-            this.selectionBox.position = sprite.position;
-            this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
-            // const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
-            // const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
-            // const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
-            // const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
-            // this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
-            // this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
-            // this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
-            // this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
-        } else {
-            this.selectionBox.clear();
-        }
-    }
-    // 设置名称
-    public setNameVisible(value: boolean, mode: GameMode) {
-        if (this.assetData.GameMode === mode) {
-            this.text.visible = value;
-        }
-    }
-    // 显示连接点
-    public showConnectionPoint(b: boolean) {
-        this.up.visible = b;
-        this.down.visible = b;
-        this.left.visible = b;
-        this.right.visible = b;
-        this.upLeft.visible = b;
-        this.downLeft.visible = b;
-        this.upRight.visible = b;
-        this.downRight.visible = b;
-    }
-    paintingPipeline(x: number, y: number) {
-        if (this.assetData.CanConnect) {
-                    if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
-                        if (this.workingArea.paintingPipeline === 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 tempData = {
-                            //     Id: ObjectID.default.generate(),
-                            //     MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
-                            //     Point: new PIXI.Point(0, 0),
-                            //     Name: '管线',
-                            //     LinkedObjects: new Array(),
-                            // };
-                            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.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea);
-                            // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
-                            // this.assetData.Pipelines.push(this.workingArea.paintingPipeline.Id);
-                            this.workingArea.emit('createIcon', this.workingArea.paintingPipeline);
-                        } 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.paintingPipeline.assetData.MultiPoint =
-                                JSON.parse(JSON.stringify(this.workingArea.paintPoints));
-                            // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
-                            // this.assetData.Pipelines.push(this.workingArea.paintingPipeline);
-                            this.workingArea.paintingPipeline.refresh();
-                            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;
-        this.text.text = this.assetData.Name
-            + '\r\n'
-            + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
-        this.text.x = this.image.x;
-        this.text.y = this.image.y - this.image.height / 2;
-    }
-}
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index afda7c6..6fcb652 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -2,21 +2,20 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '
 import * as PIXI from 'pixi.js';
 import { EventEmitter } from 'events';
 import { EventManager } from '@angular/platform-browser';
-import { OutlineFilter, OldFilmFilter  } from 'pixi-filters';
+import { OutlineFilter } from 'pixi-filters';
 import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service';
 import * as ObjectID from 'bson-objectid';
 import { Charm } from './charm';
-import { SinglePointIcon } from './model/singlePointIcon';
+import { AxImageShape } from './model/axImageShape';
 import { GameMode } from './model/gameMode';
 import { MultipointIcon } from './model/multipointIcon';
 import { PolygonIcon } from './model/polygonIcon';
-import { PutCarArea } from './model/putCarArea';
-import { Arrows } from './model/arrows';
 import { Pipeline } from './model/pipeline';
 import { PaintMode } from './model/paintModel';
-import { WallSpace } from './model/wallSpace';
 import { AxShape } from './model/axShape';
 import { PropertyInfo } from './model/PropertyInfo';
+import { AxPreviewImageShape } from './model/axPreviewImageShape';
+import { AxArrowConnector } from './model/axArrowConnector';
 
 
 @Component({
@@ -50,11 +49,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 背景图
    */
-  public backgroundImage: PIXI.Sprite;
+  public backgroundImage: PIXI.Sprite = null;
   /**
-   * 预览单点图标
+   * 绘制图片形状时预览状态的图片
    */
-  public previewSinglePointIcon = new PIXI.Sprite();
+  public previewImage: AxPreviewImageShape = null;
   /**
    * 预览线段
    */
@@ -70,7 +69,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 绘画模式
    */
-  private paintMode: PaintMode;
+  private paintMode: PaintMode = PaintMode.endPaint;
   /**
    * 选择器
    */
@@ -82,20 +81,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 绘制点集合
    */
-  public paintPoints: PIXI.Point[];
+  public paintPoints: PIXI.Point[] = [];
   /**
    * 绘制中的管线
    */
-  public paintingPipeline: Pipeline;
-  /**
-   * 绘制中的箭头
-   */
-  public paintingArrows: Arrows = null;
+  public paintingPipeline: Pipeline = null;
   /**
    * 绘制中的多点图标
    */
   public paintingIcon: MultipointIcon;
-  public paintingWall: AxShape;
+  /**
+   * 绘制中的图形
+   */
+  public paintingShape: AxShape = null;
   /**
    * 绘制中的连线
    */
@@ -159,52 +157,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       // 按Del键删除选中的图标
       if (event.keyCode === 46) {
         this.selection.objects.forEach(item => {
-          delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id];
-          this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
-          this.canvasData.isChange = true;
+          if (this.allowEdit
+            && this.canvasData.gameMode === item.assetData.GameMode) {
+            switch (this.canvasData.gameMode) {
+              case 0:
+                // 删除楼层数据
+                delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id];
+                // 删除建筑数据
+                delete this.canvasData.originalcompanyBuildingData.data[item.assetData.Id];
+                // 取消渲染
+                this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
+                // 数据更改
+                this.canvasData.isChange = true;
+                break;
+              case 1:
+                delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[item.assetData.Id];
+                delete this.canvasData.selectPanelPoint.Data.Increment[item.assetData.Id];
+                delete this.canvasData.selectPanelPoint.Data.Stock[item.assetData.Id];
+                this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
+                this.canvasData.isChange = true;
+                break;
+            }
+          }
         });
+        this.selection.deselectAll();
         this.emit('deleteIcon');
       }
     });
-    // 打印当前工作区信息
-    this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => {
-      // console.log(event.keyCode);
-      if (event.keyCode === 32) {
-        switch (this.paintMode) {
-          case 0:
-            console.log(`当前的绘制模式是：单点图标`);
-            break;
-          case 1:
-            console.log(`当前的绘制模式是：线段图标`);
-            break;
-          case 2:
-            console.log(`当前的绘制模式是：自定义多边形`);
-            break;
-          case 3:
-            console.log(`当前的绘制模式是：水带多边形`);
-            break;
-          case 4:
-            console.log(`当前的绘制模式是：暂无`);
-            break;
-          case 5:
-            console.log(`当前的绘制模式是：暂无`);
-            break;
-          case 6:
-            console.log(`当前的绘制模式是：结束绘制`);
-            break;
-          default:
-            break;
-        }
-        console.log('当前楼层的数据：');
-        console.log(this.canvasData.originaleveryStoreyData.data);
-
-        console.log('绘制中的管线：');
-        console.log(this.paintingPipeline);
-
-        console.log('处置预案数据：');
-        console.log(this.canvasData.selectPanelPoint.Data);
-      }
-    });
   }
   /**
    * 页面初始化
@@ -298,11 +277,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.app.ticker.add((delta) => {
       this.animator.update();
       this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
-      if (this.backgroundImage !== undefined) {
-        this.previewSinglePointIcon.position = this.backgroundImage.toLocal(this.mousePosition);
+      // 预览图片
+      if (this.previewImage !== null) {
+        this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition);
+      }
+
+      if (this.backgroundImage !== null) {
         this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition);
         this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
       }
+      /**
+       * 显示框选
+       */
       if (this.rectToolGraphics.visible === true) {
 
         const init = this.initialScreenMousePos;
@@ -311,20 +297,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.rectToolGraphics.clear();
         this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
         this.rectToolGraphics.beginFill(0xccccf2, 0.25);
-        this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
+        if (final.x > init.x && final.y > init.y) {
+          this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
+        } else if (final.x > init.x && final.y < init.y) {
+          this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
+        } else if (final.x < init.x && final.y > init.y) {
+          this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
+        } else if (final.x < init.x && final.y < init.y) {
+          this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
+        }
         this.rectToolGraphics.endFill();
-        this.rectToolGraphics.closePath();
-      }
-      if (this.paintingArrows !== null) {
-        this.paintingArrows.assetData.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y);
-        this.paintingArrows.refresh();
       }
     });
     /**
      * 选中事件
      */
     this.on('select', obj => {
-      // this.moveIconToScreenCenter(obj);
       if (this.allowEdit) {
         if (obj instanceof MultipointIcon) {
           if (obj.assetData.GameMode === this.canvasData.gameMode) {
@@ -353,6 +341,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         if (obj instanceof MultipointIcon) {
           obj.setPointVisiable(false);
         } else if (obj instanceof PolygonIcon) {
+          obj.filters = [];
           obj.setPointVisiable(false);
         } else {
           obj.filters = [];
@@ -361,10 +350,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         obj.filters = [];
       }
     });
+    /**
+     * 根据背景缩放事件
+     */
     this.on('backgroundScale', scale => {
-      this.previewSinglePointIcon.scale.set((0.5 / scale));
-      this.backgroundImage.children.forEach(item => {
-        if (item instanceof SinglePointIcon) {
+      this.backgroundImage?.children.forEach(item => {
+        if (item instanceof AxImageShape) {
           if (item.assetData.FixedSize) {
             const data = 1 / scale;
             item.scale.set(data);
@@ -378,19 +369,26 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         } else if (item instanceof PolygonIcon) {
           const data = 1 / scale;
           item.text.scale.set(data);
+          item.pointsGraphics.forEach(point => {
+            point.scale.set(data);
+          });
+        } else if (item instanceof AxPreviewImageShape) {
+          const data = 1 / scale;
+          item.scale.set(data);
         }
       });
 
     });
+    /**
+     * 创建图标事件
+     */
     this.on('createIcon', obj => {
       if (obj.assetData.GameMode === GameMode.BasicInformation) {
-        // if (obj.assetData.IsFromBuilding) {
-        //   this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData;
-        // } else {
-          this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
-        // }
+        // 添加楼层数据
+        this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
+        // 添加建筑数据
+        this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData;
       } else {
-        // console.log();
         if (this.canvasData.selectPanelPoint.Data === undefined
         || this.canvasData.selectPanelPoint.Data === null) {
           this.canvasData.selectPanelPoint.Data = new FloorNodeData();
@@ -399,6 +397,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       }
       this.canvasData.isChange = true;
     });
+
+    // todo 创建一个无限大的grid
+    const cell = new PIXI.Graphics();
+    cell.lineStyle(1, 0xff0000);
+        cell.beginFill(0x0000ff);
+    cell.drawRect(0, 0, 500, 500);
+
+    cell.endFill();
+    this.app.stage.addChild(cell);
   }
   /**
    * 重置画布
@@ -413,7 +420,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public setNameVisible(value: boolean, mode: GameMode): void {
     this.backgroundImage?.children.forEach(item => {
-      if (item instanceof SinglePointIcon) {
+      if (item instanceof AxImageShape) {
         item.setNameVisible(value, mode);
       } else if (item instanceof MultipointIcon) {
         item.setNameVisible(value, mode);
@@ -428,12 +435,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public refreshIcon(id: string): void {
     const icon = this.backgroundImage.children.find(item => item.name === id);
-    if (icon instanceof SinglePointIcon) {
+    console.log(icon);
+    if (icon instanceof AxImageShape) {
       icon.refresh();
     } else if (icon instanceof MultipointIcon) {
       icon.refresh();
     } else if (icon instanceof PolygonIcon) {
       icon.refresh();
+    } else if (icon instanceof AxArrowConnector) {
+      icon.redraw();
     }
   }
   /**
@@ -442,8 +452,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public setIconScale(value: number): void {
     this.backgroundImage.children.forEach(item => {
-      if (item instanceof SinglePointIcon) {
-        item.scale.set(value);
+      if (item instanceof AxImageShape) {
+        console.log(item.image.scale);
+        item.image.scale.set(value);
       } else if (item instanceof MultipointIcon) {
 
       } else if (item instanceof PolygonIcon) {
@@ -471,46 +482,46 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.setPaintMode(PaintMode.endPaint);
     this.resetCanvas();
     this.destroyBackgroundImage();
-    await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl);
-
-    // this.refreshBackgroundImage();
-    // this.versionChecking();
-
+    if (!this.canvasData.selectStorey.imageUrl) {
+      return;
+    }
 
+    await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl);
+    this.createFloorShape();
+    if (this.canvasData.gameMode === GameMode.Assignment) {
+      this.createWorkNode();
+    }
+    this.emit('backgroundScale', this.backgroundImage.scale.x);
+  }
+  /**
+   * 创建楼层图形
+   */
+  private createFloorShape() {
     const floorData = this.canvasData.originaleveryStoreyData.data;
-    // const buildingData = this.canvasData.originalcompanyBuildingData.data;
-    // const floor = this.canvasData.selectStorey;
-    // // key=>属性名    data[key]=>属性值
     Object.keys(floorData).forEach((key) => {
-      // console.log(floorData[key]);
       switch (floorData[key].InteractiveMode) {
         case 0:
-          const singleIcon = new SinglePointIcon(floorData[key], this);
+          const singleIcon = new AxImageShape(floorData[key], this);
+          singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
           break;
-          case 1:
+        case 1:
           const icon = new MultipointIcon(floorData[key], this);
           break;
-          case 2:
+        case 2:
           const polygonIcon = new PolygonIcon(floorData[key], this);
           break;
+        case 3:
+          if (floorData[key].Name === '水带') {
+            const pipeline = new Pipeline(floorData[key], this);
+          } else {
+            const wall = new AxArrowConnector(floorData[key], this);
+          }
+          break;
         }
     });
-    // Object.keys(buildingData).forEach((key) => {
-    //   if (buildingData[key].FloorId === floor.id) {
-    //     switch (buildingData[key].InteractiveMode) {
-    //       case 0:
-    //         const singleIcon = new SinglePointIcon(buildingData[key], this);
-    //         break;
-    //       case 1:
-    //         const icon = new MultipointIcon(buildingData[key], this);
-    //         break;
-    //       case 2:
-    //         const polygonIcon = new PolygonIcon(buildingData[key], this);
-    //         break;
-    //     }
-    //   }
-    // });
+  }
 
+  private createWorkNode() {
     // 加载处置节点数据
     const nodeData = this.canvasData.selectPanelPoint.Data;
     if (nodeData !== undefined && nodeData !== null) {
@@ -518,23 +529,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         Object.keys(nodeData[key]).forEach((tempKey) => {
           switch (nodeData[key][tempKey].InteractiveMode) {
             case 0:
-              const singleIcon = new SinglePointIcon(nodeData[key][tempKey], this);
+              const singleIcon = new AxImageShape(nodeData[key][tempKey], this);
+              singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
               break;
             case 1:
-              if (nodeData[key][tempKey].Name === '水带') {
-                const pipeline = new Pipeline(nodeData[key][tempKey], this);
-              } else {
                 const icon = new MultipointIcon(nodeData[key][tempKey], this);
-              }
-              break;
-          case 2:
+                break;
+            case 2:
               const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
               break;
+            case 3:
+              const pipeline = new Pipeline(nodeData[key][tempKey], this);
+              break;
         }
         });
       });
     }
-    this.emit('backgroundScale', this.backgroundImage.scale.x);
   }
   /**
    *
@@ -614,7 +624,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.backgroundImage.y = this.app.view.height / 2;
     this.backgroundImage.interactive = true;
     this.backgroundImage.name = 'background';
-
+    this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
     // const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth;
     // const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth;
     const imageWidth = this.backgroundImage.texture.width;
@@ -667,7 +677,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
                 ImageUrl: this.canvasData.selectTemplateData.imageUrl,
                 InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
                 MultiPoint : null,
-                Point: new PIXI.Point(this.previewSinglePointIcon.x, this.previewSinglePointIcon.y),
+                Point: new PIXI.Point(this.previewImage.x, this.previewImage.y),
                 Name : this.canvasData.selectTemplateData.name,
                 PropertyInfos: list,
                 Border : this.canvasData.selectTemplateData.border,
@@ -676,7 +686,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
                 IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding,
                 GameMode : this.canvasData.gameMode
               };
-              const singleIcon = new SinglePointIcon(assetData, this);
+              const singleIcon = new AxImageShape(assetData, this);
               this.emit('createIcon', singleIcon);
               this.emit('backgroundScale', this.backgroundImage.scale.x);
               break;
@@ -761,78 +771,60 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               // this.paintingIcon = new PolygonIcon(this.paintPoints, this);
               break;
             case PaintMode.Pipeline:
-
-              if (this.paintingPipeline !== null) {
+              if (this.canvasData.selectTemplateData.name === '水带') {
+                if (this.paintingPipeline !== null) {
+                  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.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
+                  this.paintingPipeline.refresh();
+                }
+              } else {
+                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));
-                this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
-                this.paintingPipeline.refresh();
-              }
-              // this.emit('backgroundScale', this.backgroundImage.scale.x);
-              break;
-            case PaintMode.Arrows:
-              if (this.paintingArrows === null) {
-                const data = {
-                   Id: ObjectID.default.generate(),
-                   name: 'string',
-                   point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
-                   pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
-                   pointB: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
-                   source: 'assets/images/进攻方向.png',
-                };
-                this.paintingArrows = new Arrows(data, this);
-              } else {
-                this.paintingArrows.ready = true;
-                this.paintingArrows = null;
-                this.paintMode = PaintMode.endPaint;
-              }
-              break;
-            case PaintMode.Car:
-              // 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));
-
-              // if (this.paintPoints.length >= 2) {
-              //   this.enterPaintEndButton.position = this.circleShadow.position;
-              //   this.enterPaintEndButton.visible = true;
-              // }
-
-              // if (this.paintingWall !== null) {
-              //   this.backgroundImage.removeChild(this.paintingWall);
-              // }
-              // const jsonObject1 = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
-              // const propertyList1 = [];
-              // jsonObject1.forEach(element => {
-              //   const property = new PropertyInfo(element);
-              //   propertyList1.push(property);
-              // });
-              // const assetData11 = {
-              //   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: propertyList1,
-              //   Border: this.canvasData.selectTemplateData.border,
-              //   DrawMode: this.canvasData.selectTemplateData.drawMode,
-              //   Thickness: this.canvasData.selectTemplateData.thickness,
-              //   IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
-              //   GameMode: this.canvasData.gameMode
-              // };
 
-              // this.paintingWall = new WallSpace(assetData11, this);
-              // this.emit('backgroundScale', this.backgroundImage.scale.x);
+                if (this.paintPoints.length >= 2) {
+                  this.enterPaintEndButton.position = this.circleShadow.position;
+                  this.enterPaintEndButton.visible = true;
+                }
+                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
+                  };
+                  this.paintingShape = new AxArrowConnector(assetData2, this); 
+                } else {
+                  this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
+                  this.paintingShape.redraw();
+                }
+              }
+              this.emit('backgroundScale', this.backgroundImage.scale.x);
               break;
           }
         } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
@@ -849,11 +841,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         }
         if (this.rectToolGraphics.visible === true) {
           this.backgroundImage.children.forEach(item => {
-            if (item instanceof SinglePointIcon
+            if ( item instanceof AxImageShape
               || item instanceof MultipointIcon
-              || item instanceof PolygonIcon) {
-              if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) {
-                this.selection.select(item);
+              || item instanceof PolygonIcon
+              || item instanceof AxArrowConnector) {
+              // 判断2个矩形是否相交
+              const rect1 = this.rectToolGraphics.getBounds();
+              const rect2 = item.getBounds();
+              if (this.isOverlap(rect1, rect2)) {
+                this.selection.select(item);       
               }
             }
           });
@@ -884,19 +880,38 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.setPaintMode(PaintMode.endPaint);
       })
       .on('pointerover', (event) => {
-        this.previewSinglePointIcon.filters = null;
+        if (this.previewImage !== null
+        && this.paintMode === PaintMode.singlePointIcon) {
+          this.previewImage.visible = true;
+        }
       })
       .on('pointerout', (event) => {
-        this.previewSinglePointIcon.filters = null;
+        if (this.previewImage !== null
+        && this.paintMode === PaintMode.singlePointIcon) {
+          this.previewImage.visible = false;
+        }
       });
     this.app.stage.addChild(this.backgroundImage);
-    this.createPreviewSinglePointIcon();
+    this.createPreviewImage();
     this.createPreviewLineSegment();
     this.createCircleShadow();
     this.createEnterPaintEndButton();
     this.backgroundImage.addChild(this.paintingLine);
 
   }
+  public isOverlap(rect1, rect2):boolean {
+    const l1 = { x: rect1.x, y: rect1.y }
+    const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }
+    const l2 = { x: rect2.x, y: rect2.y }
+    const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }
+    if (
+      l1.x > r2.x ||
+      l2.x > r1.x ||
+      l1.y > r2.y ||
+      l2.y > r1.y
+    ) return false
+    return true
+  }
 
   /**
    * 刷新背景图
@@ -905,9 +920,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     if (!this.canvasData.selectStorey.imageUrl) {
       this.backgroundImage.visible = false;
     } else {
-      this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl);
-      this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
-      this.backgroundImage.visible = true;
+      // this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl);
+      // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
+      // this.backgroundImage.visible = true;
+      this.refresh();
     }
   }
   /**
@@ -921,8 +937,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param scale 缩放系数
    */
   public setBackgroundScale(scale: number): void {
-    this.backgroundImage.scale.set(scale);
-    this.emit('backgroundScale', this.backgroundImage.scale.x);
+    this.backgroundImage?.scale.set(scale);
+    this.emit('backgroundScale', this.backgroundImage?.scale.x);
   }
   /**
    * 设置背景图角度
@@ -934,22 +950,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 创建预览单点图标
    */
-  private createPreviewSinglePointIcon(): void {
-    this.previewSinglePointIcon = PIXI.Sprite.from('assets/images/noImg.png');
-    this.previewSinglePointIcon.width = 32;
-    this.previewSinglePointIcon.height = 32;
-    this.previewSinglePointIcon.alpha = 1;
-    this.previewSinglePointIcon.anchor.set(0.5);
-    this.previewSinglePointIcon.visible = false;
-    this.backgroundImage.addChild(this.previewSinglePointIcon);
-  }
-  /**
-   * 改变预览单点图标
-   * @param uri 图片地址
-   */
-  private changePreviewSinglePointIcon(uri: string): void {
-    this.previewSinglePointIcon.texture = PIXI.Texture.from(uri);
-    this.previewSinglePointIcon.visible = true;
+  private createPreviewImage(): void {
+    // if (this.previewSinglePointIcon === null) {
+    //   this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl);
+    //   this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width;
+    //   this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height;
+    //   this.previewSinglePointIcon.anchor.set(0.5);
+    //   this.previewSinglePointIcon.interactive = false;
+    //   this.backgroundImage.addChild(this.previewSinglePointIcon);
+    //   this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x);
+    // }
+    this.previewImage = new AxPreviewImageShape(this);
+    this.previewImage.visible = false;
   }
   /**
    * 创建预览线段
@@ -969,7 +981,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
     this.previewLineSegment.clear();
-    this.previewLineSegment.lineStyle(1, 0xffd900, 1);
+    this.previewLineSegment.lineStyle(5, 0x00ff00, 1);
     this.previewLineSegment.moveTo(pointA.x, pointA.y);
     this.previewLineSegment.lineTo(pointB.x, pointB.y );
   }
@@ -986,7 +998,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   }
   showConnectionPoint(b: boolean) {
     this.backgroundImage?.children.forEach(item => {
-        if (item instanceof SinglePointIcon) {
+        if (item instanceof AxImageShape) {
           if (item.assetData.CanConnect) {
             item.showConnectionPoint(b);
          }
@@ -997,27 +1009,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 开始绘制
    */
   public beginPaint() {
-    if (this.canvasData.selectTemplateData.name === '水带') {
-      this.showConnectionPoint(true);
-      this.setPaintMode(PaintMode.Pipeline);
-      return;
-    }
-    switch (this.canvasData.selectTemplateData.interactiveMode) {
-      case 0:
-        this.setPaintMode(PaintMode.singlePointIcon);
-        break;
-      case 1:
-        this.setPaintMode(PaintMode.lineIcon);
-        break;
-      case 2:
-        this.setPaintMode(PaintMode.polygonIcon);
-        break;
-      case 3:
-        if (this.canvasData.selectTemplateData.name) {
-          this.setPaintMode(PaintMode.Pipeline);
-        }
-        break;
-    }
+    this.selection.deselectAll();
+    this.setPaintMode(PaintMode.endPaint);
+    this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
   }
   /**
    * 初始化管线数据
@@ -1034,18 +1028,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param mode 状态
    */
   public setPaintMode(mode: PaintMode) {
-    if (this.paintMode === mode) { return; }
-    this.paintMode = mode;
-    if (this.paintMode !== PaintMode.Pipeline) {
-      this.showConnectionPoint(false);
+    if (this.paintMode === mode) {
+      return;
     }
+    this.paintMode = mode;
     switch (this.paintMode) {
-      case PaintMode.Pipeline:
-
-        break;
       case PaintMode.singlePointIcon:
-        this.previewSinglePointIcon.visible = false;
-        this.changePreviewSinglePointIcon(this.canvasData.selectTemplateData.imageUrl);
+        this.previewImage.visible = true;
+        this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl);
         break;
       case PaintMode.lineIcon:
         this.circleShadow.visible = false;
@@ -1054,7 +1044,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         if (this.paintingIcon !== null) {
           this.backgroundImage.removeChild(this.paintingIcon);
         }
-        this.previewSinglePointIcon.texture = PIXI.Texture.from(this.canvasData.selectTemplateData.imageUrl);
+        this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl);
         this.circleShadow.visible = true;
         break;
       case PaintMode.polygonIcon:
@@ -1065,7 +1055,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.paintingLine.clear();
         this.circleShadow.visible = true;
         break;
+      case PaintMode.Pipeline:
+        if (this.canvasData.selectTemplateData.name==='水带') {
+          this.showConnectionPoint(true);
+        } else {
+          
+        }
+        break;
       case PaintMode.endPaint:
+        this.showConnectionPoint(false);
+        if (this.previewImage !== null) {
+          this.previewImage.visible = false;
+        }
         // 重置组件状态
         if ( this.paintingIcon !== undefined
           && this.paintingIcon !== null) {
@@ -1076,6 +1077,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           && this.paintingPipeline !== null) {
           this.backgroundImage.removeChild(this.paintingPipeline);
         }
+        if (this.paintingShape !== null) {
+          this.backgroundImage.removeChild(this.paintingShape);
+          this.paintingShape = null;
+        }
+        this.enterPaintEndButton.visible = false;
         this.paintingLine.clear();
         this.resetData();
         break;
@@ -1093,10 +1099,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 重置
    */
   public resetData() {
-    this.previewSinglePointIcon.filters = null;
-    this.previewSinglePointIcon.visible = false;
-    this.previewSinglePointIcon.angle = 0;
-
     this.initPipelineData();
     //
     this.circleShadow.visible = false;
@@ -1108,7 +1110,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   private enterPaint(): void {
     this.previewLineSegment.visible = false;
     this.enterPaintEndButton.visible = false;
+    console.log(this.paintMode);
     switch (this.paintMode) {
+      case PaintMode.singlePointIcon:
+        break;
       case PaintMode.lineIcon:
         if (this.paintPoints.length >= 2) {
           this.emit('createIcon', this.paintingIcon);
@@ -1152,6 +1157,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           this.emit('createIcon', polygonIcon);
         }
         break;
+      case PaintMode.Pipeline:
+        if (this.canvasData.selectTemplateData.name !== '水带') {
+          this.emit('createIcon', this.paintingShape);
+          this.paintingShape = null;
+        }
+        break;
     }
     this.paintPoints.splice(0, this.paintPoints.length);
     this.emit('backgroundScale', this.backgroundImage.scale.x);
@@ -1185,7 +1196,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       // }
       switch (item.InteractiveMode) {
         case PaintMode.singlePointIcon:
-          const singleIcon = new SinglePointIcon(newData, this);
+          const singleIcon = new AxImageShape(newData, this);
           break;
         case PaintMode.lineIcon:
           const lineIcon = new MultipointIcon(newData, this);
@@ -1193,9 +1204,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         case PaintMode.polygonIcon:
           const polygonIcon = new PolygonIcon(newData, this);
           break;
+        case PaintMode.Pipeline:
+          if (item.Name !== '水带') {
+            const wall = new AxArrowConnector(newData, this);
+          }
+          break;
       }
       this.selection.select(this.backgroundImage.getChildByName(newData.Id));
     });
+    this.emit('backgroundScale', this.backgroundImage.scale.x);
   }
 
 }