[新增] 测试数据

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

@@ -1,23 +1,14 @@
 import { Injectable } from '@angular/core';
-import {ReplaySubject} from "rxjs";
-import { Observable } from "rxjs";
+import {ReplaySubject} from 'rxjs';
+import { Observable } from 'rxjs';
 @Injectable({
   providedIn: 'root'
 })
 export class CanvasShareDataService {
+  constructor() { }
   private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1); 
   GameMode: any;
 
-  /** * 向其他组件发送信息 * 
-  * @param message 需要发送的信息 * @returns {Observavle<any>} */ 
-  public sendMessage(message: any){ 
-    this._sendMessage.next(message); 
-  } 
-  public getMessage(): Observable <any>{
-    return this._sendMessage.asObservable(); 
-  }  
-  constructor() { }
-
   isChange = false; // 数据 是否改动
 
   selectTemplateData: any; // 选择当前 模板数据
@@ -39,17 +30,6 @@ export class CanvasShareDataService {
   */
   gameMode: GameMode = GameMode.BasicInformation;
 
-  // 处置节点 筛选出 匹配数据 匹配不到 return undefined
-  findDisposalNode (parentId:string=null, name:string=null) {
-    if (parentId && name) { //匹配 父id, name
-      let returnData = this.allDisposalNode.find(item=>{ return item.parentId === parentId && item.name === name })
-      return returnData
-    } else { //匹配 id
-      let returnData = this.allDisposalNode.find(item=>{ return item.id === parentId })
-      return returnData
-    }
-  }
-
   facilityAssetsName = new Map<string, string>([
     [ '消防水池', '消防水池'],
     [ '疏散楼梯', '疏散楼梯'],
@@ -81,6 +61,26 @@ export class CanvasShareDataService {
     [ '消防管网', '消防管网'],
     [ 'DCS控制室', 'DCS控制室']
   ]);
+
+  /** * 向其他组件发送信息 * 
+  * @param message 需要发送的信息 * @returns {Observavle<any>} */ 
+  public sendMessage(message: any){ 
+    this._sendMessage.next(message); 
+  } 
+  public getMessage(): Observable <any>{
+    return this._sendMessage.asObservable(); 
+  }  
+
+  // 处置节点 筛选出 匹配数据 匹配不到 return undefined
+  findDisposalNode (parentId:string=null, name:string=null) {
+    if (parentId && name) { //匹配 父id, name
+      let returnData = this.allDisposalNode.find(item=>{ return item.parentId === parentId && item.name === name })
+      return returnData
+    } else { //匹配 id
+      let returnData = this.allDisposalNode.find(item=>{ return item.id === parentId })
+      return returnData
+    }
+  }
   /**
    * 获取单位毗邻信息
    */
@@ -663,7 +663,8 @@ export class AssetData {
  */
 export enum GameMode {
   BasicInformation,
-  Assignment
+  Assignment,
+  Demo
 }
 /**
  * 填充模式

src/app/ui/plan-assistance/plan-assistance.component.ts

@@ -1366,6 +1366,47 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
     }
   ];
 
+  tempCarData = {
+    TemplateId: null,
+    FloorId: null,
+    Angle: 0,
+    Color: 0,
+    Enabled: true,
+    FillMode: 0,
+    FireElementId: 0,
+    FixedSize: true,
+    Height: 32,
+    Width: 32,
+    Id: '5f67f92238f13cd2048cae9d',
+    ImageUrl: './assets/images/泡沫消防车.png',
+    InteractiveMode: 0,
+    MultiPoint: null,
+    Point: {
+      x: 1295,
+      y: 1237
+    },
+    Name: '泡沫消防车',
+    PropertyInfos: [
+      {
+        Enabled: true,
+        Order: 0,
+        PhysicalUnit: '',
+        PropertyName: '名称/编号',
+        PropertyType: 0,
+        PropertyValue: '钦南区新兴消防',
+        Required: false,
+        RuleName: '',
+        RuleValue: '',
+        Tag: '',
+        Visible: true
+      }
+    ],
+    Border: null,
+    DrawMode: null,
+    Thickness: 0,
+    IsFromBuilding: false,
+    GameMode: 2
+  };
   ngOnInit(): void {
 
   }

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

@@ -116,17 +116,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const token = sessionStorage.getItem('token'); // 判断 是否登录状态
     if (token) {
       // this.init.getAllLibrary() //获取素材库
-      this.init.getAllBuildings() //获取所有建筑
-      this.init.getAllFirePlan() //获取所有灾情
-      this.init.getSitePlan() //调用父组件 初始化方法
+      this.init.getAllBuildings(); // 获取所有建筑
+      this.init.getAllFirePlan(); // 获取所有灾情
+      this.init.getSitePlan(); // 调用父组件 初始化方法
     } else {
-      this.token.login().then(res=>{
-        this.init.params.companyId = sessionStorage.getItem('companyId')
+      this.token.login().then(res => {
+        this.init.params.companyId = sessionStorage.getItem('companyId');
         // this.init.getAllLibrary() //获取素材库
-        this.init.getAllBuildings() //获取所有建筑
-        this.init.getAllFirePlan() //获取所有灾情
-        this.init.getSitePlan() //调用父组件 初始化方法
-      })
+        this.init.getAllBuildings(); // 获取所有建筑
+        this.init.getAllFirePlan(); // 获取所有灾情
+        this.init.getSitePlan(); // 调用父组件 初始化方法
+      });
     }
   }
   // 是否登录
@@ -403,7 +403,102 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       const single = new SinglePointIcon(element, this);
     });
     this.setNameVisible(false, GameMode.BasicInformation);
-    this.allowEdit = false;
+    this.allowEdit = true;
+
+
+    const tempData = {
+      TemplateId: null,
+      FloorId: null,
+      Angle: 0,
+      Color: 0,
+      Enabled: true,
+      FillMode: 0,
+      FireElementId: 0,
+      FixedSize: true,
+      Height: 32,
+      Width: 32,
+      Id: '5f67f92238f13cd2048cae9d',
+      ImageUrl: './assets/images/泡沫消防车.png',
+      InteractiveMode: 0,
+      MultiPoint: null,
+      Point: {
+        x: 1295,
+        y: 1237
+      },
+      Name: '泡沫消防车',
+      PropertyInfos: [
+        {
+          Enabled: true,
+          Order: 0,
+          PhysicalUnit: '',
+          PropertyName: '名称/编号',
+          PropertyType: 0,
+          PropertyValue: '钦南区新兴消防',
+          Required: false,
+          RuleName: '',
+          RuleValue: '',
+          Tag: '',
+          Visible: true
+        }
+      ],
+      Border: null,
+      DrawMode: null,
+      Thickness: 0,
+      IsFromBuilding: false,
+      GameMode: 2
+    };
+    const tempCar = new SinglePointIcon(tempData, this);
+    tempCar.setParent(this.app.stage);
+    tempCar.position.set(300, 66);
+
+    const tempData2 = {
+      TemplateId: null,
+      FloorId: null,
+      Angle: 0,
+      Color: 0,
+      Enabled: true,
+      FillMode: 0,
+      FireElementId: 0,
+      FixedSize: true,
+      Height: 32,
+      Width: 32,
+      Id: '5f67f92238f13cd2048cae9d',
+      ImageUrl: './assets/images/水罐消防车.png',
+      InteractiveMode: 0,
+      MultiPoint: null,
+      Point: {
+        x: 1295,
+        y: 1237
+      },
+      Name: '水罐消防车',
+      PropertyInfos: [
+        {
+          Enabled: true,
+          Order: 0,
+          PhysicalUnit: '',
+          PropertyName: '名称/编号',
+          PropertyType: 0,
+          PropertyValue: '钦南区新兴消防',
+          Required: false,
+          RuleName: '',
+          RuleValue: '',
+          Tag: '',
+          Visible: true
+        }
+      ],
+      Border: null,
+      DrawMode: null,
+      Thickness: 0,
+      IsFromBuilding: false,
+      GameMode: 2
+    };
+    const tempCar2 = new SinglePointIcon(tempData2, this);
+    tempCar2.setParent(this.app.stage);
+    tempCar2.position.set(300, 148);
+
+    this.cancelPaint();
+    this.paintMode = PaintMode.connection;
+    this.previewSinglePointIcon.texture = PIXI.Texture.from('./assets/images/水罐消防车.png');
   }
   /**
    *
@@ -611,6 +706,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               //   this.backgroundImage.removeChild(this.paintingIcon);
               // }
               // this.paintingIcon = new PolygonIcon(this.paintPoints, this);
+              break;
+            case PaintMode.connection:
+
               break;
           }
         } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
@@ -940,6 +1038,7 @@ enum PaintMode {
   polygonIcon,
   beginPainting,
   endPaint,
+  connection
 }
 /**
  * 单点图标
@@ -966,6 +1065,9 @@ export class SinglePointIcon extends PIXI.Container {
     + '\r\n'
     + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   private image = PIXI.Sprite.from(this.assetData.ImageUrl);
+  // 是否可以被链接
+  canConnection: boolean;
+
   constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
     super();
     this.workingArea.backgroundImage.addChild(this);
@@ -985,10 +1087,10 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.interactive = true;
     this.image
       .on('mousedown', event => {
-        console.log(this.assetData.Name);
+        console.log(this.assetData);
         event.stopPropagation();
         this.workingArea.selection.selectOne(this);
-        if (this.workingArea.allowEdit) {
+        if (this.workingArea.allowEdit || this.assetData.GameMode === 2) {
           event.currentTarget.parent.data = event.data;
           event.currentTarget.parent.alpha = 0.5;
           event.currentTarget.parent.dragging = true;
@@ -1010,6 +1112,14 @@ export class SinglePointIcon extends PIXI.Container {
      })
      .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;
@@ -1536,9 +1646,11 @@ export class PolygonIcon extends PIXI.Container {
   }
 }
 
-export class Line extends PIXI.Container {
+export class Conection extends PIXI.Container {
 
 }
+
+
 /**
  * 选择器
  */