[完善] 编制工具UI修改

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

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import {ReplaySubject} from 'rxjs';
 import { Observable } from 'rxjs';
 import { GameMode } from './working-area/model/gameMode';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -11,32 +12,29 @@ export class CanvasShareDataService {
 
   examDisposalNodesData; // 考生进入时获取当前试卷的处置节点
   examFacilityAssetsData; // 考生进入时获取当前试卷要考察的消防设施  
+  examOriginaleveryStoreyData: any; // 考生答卷 总平面图/楼层/区域 楼层数据
+  hiddenBasicInfoFacilities: any = []; // 考生答卷 当前楼层需要隐藏的基本信息素材
+
 
-  isChange = false; // 数据 是否改动
+
+  isChange:boolean = false; // 数据 是否改动
 
   selectTemplateData:any; // 选择当前 模板数据
 
   // 总平面图/建筑 楼层
   selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据
-
   originalcompanyBuildingData: any; // 单位/建筑 数据
-
   originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据
-
-
-  examOriginaleveryStoreyData: any; // 考生答卷 总平面图/楼层/区域 楼层数据
-
-  hiddenBasicInfoFacilities: any = []; // 考生答卷 当前楼层需要隐藏的基本信息素材
   // 总平面图/建筑 楼层
 
   // 处置 节点
   allDisposalNode: any = []; // 所有 处置节点
   allNodeMarkers: any; // 灾情 标签信息
-  
+  selectPanelPoint: DisposalNodeData = new DisposalNodeData(); // 当前数据节点
-  selectPanelPoint: DisposalNodeData = new DisposalNodeData();
-
   selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 所对应的 天气,详情 数据节点
+  customizeDisposalNode:any; // 新建 自定义数据节点 底图+名称
   // 处置 节点
+
   /**
   * 游戏模式
   */

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

@@ -7,27 +7,20 @@
     <button mat-button (click)="toggle2()">
       <mat-icon style="vertical-align: middle;">list</mat-icon>
     </button>
-    <button (click)="copyAsset()" class="copytobutn" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
-      <mat-icon style="padding-bottom: 7px;">library_books</mat-icon>
-    </button>
-
-    <button (click)="pasteAsset()" class="copytobutn" mat-button title="粘贴" *ngIf="isEditPattern">
-      <mat-icon style="padding-bottom: 7px;">screen_share</mat-icon>
-    </button>
 
-    <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" style="margin-right:20px;user-select: none;margin-left: 22px;" class="nameShow" (click)="basicInfoClick()">
+    <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
       基本信息名称
       <mat-icon>visibility</mat-icon>
     </span>
-    <span [ngClass]="{'icongray': !wantToWork}" *ngIf="!pattern" title="想定作业名称显示/隐藏" style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
+  
-      想定作业名称
+    <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
-      <mat-icon>visibility</mat-icon>
+      复制<mat-icon>library_books</mat-icon>
-    </span>
+    </button>
-    <div class="patternSwitch">
+
-      <span (click)="baseInfo()" [ngClass]="{'selectedPattern': pattern}">
+    <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
-        基本信息编辑
+      粘贴<mat-icon>screen_share</mat-icon>
-      </span>
+    </button>
-    </div>
+
     <span style="position: absolute;right: 60px;cursor: pointer;">
       <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
       <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern && isediticon">create</mat-icon>

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

@@ -25,21 +25,19 @@
   align-items:center;
   min-height: 40px;
   background-color: #fff;
-  .nameShow{
+  .marginLeftRight {
-    cursor: pointer;
+    margin: 0 8px;
+    font-size: 16px;
     user-select: none;
+    cursor: pointer;
+    .mat-icon { vertical-align: middle; font-size: 24px; }
   }
   .copytobutn{
-    width: 33px;
+    width: 60px;
-    min-width: 33px;
+    min-width: 60px;
     display: flex;
     justify-content: center;
   }
-  font-size: 18px;
-  mat-icon{
-    font-size: 26px;
-    vertical-align: text-top;
-  }
   span{
     height: 24px;
     line-height: 24px;

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

@@ -0,0 +1,24 @@
+<div class="leftAddBGC">
+  <div mat-dialog-title><label>编辑</label></div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+
+    <div>
+      <input type="text" name="name" required ngModel placeholder="名称">
+    </div>
+
+    <div style="margin: 30px 0;">
+      <a href="javascript:;" class="uploadFile">
+        <input type="file" (change)='selectFile($event)' accept="image/*">↑点击这里上传文件
+      </a>
+      <p *ngIf="file">{{file.name}}</p>
+    </div>
+
+    <div class="submitBottom">
+      <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button>
+      <button mat-raised-button mat-dialog-close>取消</button>
+    </div>
+
+  </form>
+
+</div>

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

@@ -7,22 +7,27 @@
     <button mat-button (click)="toggle2()">
       <mat-icon style="vertical-align: middle;">list</mat-icon>
     </button>
-    <button (click)="copyAsset()" class="copytobutn" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
+    <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
-      <mat-icon style="padding-bottom: 7px;">library_books</mat-icon>
+      基本信息名称<mat-icon>visibility</mat-icon>
+    </span>
+    <span [ngClass]="{'icongray': !wantToWork}" *ngIf="!pattern" title="想定作业名称显示/隐藏" class="marginLeftRight" (click)="wantToWorkClick()">
+      想定作业名称<mat-icon>visibility</mat-icon>
+    </span>
+
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary"></mat-checkbox> 多选
+    </span>
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary"></mat-checkbox> 显示图例
+    </span>
+    <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" *ngIf="isEditPattern">
+      复制<mat-icon>library_books</mat-icon>
     </button>
 
-    <button (click)="pasteAsset()" class="copytobutn" mat-button title="粘贴" *ngIf="isEditPattern">
+    <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
-      <mat-icon style="padding-bottom: 7px;">screen_share</mat-icon>
+      粘贴<mat-icon>screen_share</mat-icon>
     </button>
 
-    <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" style="margin-right:20px;user-select: none;margin-left: 22px;" class="nameShow" (click)="basicInfoClick()">
-      基本信息名称
-      <mat-icon>visibility</mat-icon>
-    </span>
-    <span [ngClass]="{'icongray': !wantToWork}" *ngIf="!pattern" title="想定作业名称显示/隐藏" style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
-      想定作业名称
-      <mat-icon>visibility</mat-icon>
-    </span>
     <div class="patternSwitch">
       <span (click)="baseInfo()" [ngClass]="{'selectedPattern': pattern}">
         基本信息编辑
@@ -40,32 +45,18 @@
 
   <!-- 头部操作栏 -->
   <div class="headerOperate">
-    <button mat-button (click)="checkedBuilding({name:'总平面图'},-1)"
+    <ng-container *ngIf="pattern">
-      [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
+      <button mat-button (click)="checkedBuilding({name:'总平面图'},-1)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
       <span>总平面图</span>
-      <span *ngIf="isEditPattern && !pattern">
-        <img src="../../../assets/images/fire.png" *ngIf="sitePlanIcon.fire==2">
-        <img src="../../../assets/images/noFire.png" *ngIf="sitePlanIcon.fire==1">
-        <img src="../../../assets/images/force.png" *ngIf="sitePlanIcon.force==2">
-        <img src="../../../assets/images/noForce.png" *ngIf="sitePlanIcon.force==1">
-      </span>
     </button>
-    <button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn"
+    <button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
-      [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
       <span>{{item.name}}</span>
-      <span *ngIf="isEditPattern && !pattern">
-        <img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
-        <img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
-        <img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
-        <img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
-      </span>
       <span class="editdeletebtn" *ngIf="isEditPattern && pattern">
-        <mat-icon (click)="editBuilding($event,item)"
+        <mat-icon (click)="editBuilding($event,item)" style="font-size: 23px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
-          style="font-size: 23px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
+        <mat-icon (click)="deleteBuilding($event,item)" style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
-        <mat-icon (click)="deleteBuilding($event,item)"
-          style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
       </span>
     </button>
+    </ng-container>
     <button mat-button (click)="createBuilding()" *ngIf="isEditPattern && pattern">
       <span style="font-size: 24px;">+</span>
     </button>
@@ -112,10 +103,79 @@
       <!-- H5Canvas -->
       <app-working-area #canvas [init]='this'></app-working-area>
       <!-- H5Canvas -->
+      <!-- 中间建筑+楼层 -->
+      <div class="centerBuildingDiv" style="user-select: none;" cdkDrag *ngIf="!pattern">
+        <div class="centerTotal">
+          <div class="centerTotalHeader">
+            <mat-icon cdkDragHandle matTooltip="可移动窗口" matTooltipPosition="above" class="move">open_with</mat-icon>
+            <label (click)='togglebeforeOneCheckedBuilding()' class="centerTotalTitle">
+              <label class="overflowText">{{beforeOneCheckedBuilding.name}}</label>
+              <mat-icon *ngIf="beforeOneCheckedBuildingIsShow">keyboard_arrow_up</mat-icon>
+              <mat-icon *ngIf="!beforeOneCheckedBuildingIsShow">keyboard_arrow_down</mat-icon>
+            </label>
+            <a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">
+              <img src="../../../assets/images/fire.png" *ngIf="beforeOneCheckedBuilding.fire && beforeOneCheckedBuilding.fire==2">
+              <img src="../../../assets/images/noFire.png" *ngIf="beforeOneCheckedBuilding.fire && beforeOneCheckedBuilding.fire==1">
+              <img src="../../../assets/images/force.png" *ngIf="beforeOneCheckedBuilding.force && beforeOneCheckedBuilding.force==2">
+              <img src="../../../assets/images/noForce.png" *ngIf="beforeOneCheckedBuilding.force && beforeOneCheckedBuilding.force==1">
+            </a>
+          </div>
+          <div class="everyTotal overflowText" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
+            {{item.name}}
+            <a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">
+              <img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
+              <img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
+              <img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
+              <img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
+            </a>
+          </div>
+        </div>
+        <div style="width: 5px;height: 100%;opacity: 0;" [hidden]="!beforeOneCheckedBuildingIsShow"></div>
+        <div class="centerTotal" [hidden]="!beforeOneCheckedBuildingIsShow">
+          <div class="everyTotal" (click)="checkedBuilding({name:'总平面图'},-1)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">总平面图</div>
+          <div class="everyTotal overflowText" *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)"[ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
+            {{item.name}}
+          </div>
+        </div>
+      </div>
+      <!-- 中间建筑+楼层 -->
+      <!-- 左侧操作栏 -->
       <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;">
         <div class="leftDragDiv"  (mousedown)="leftDivMouseDown($event)"></div>
+        <!-- 处置预案 -->
+        <div class="handlePlan" *ngIf="!pattern">
+          <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: 20px;" *ngIf="isEditPattern">
+              <mat-icon style="color: #c2a40ce8;" title="计算差异" (click)='countValue($event)'>flash_on</mat-icon>
+              <mat-icon style="margin: 0 3px;" title="新建空节点" (click)='addPanelPoint($event,null,treeData)'>add</mat-icon>
+              <mat-icon class="matIcons" (click)='addBGCPanelPoint($event)'>photo_size_select_actual</mat-icon>
+            </label>
+          </div>
+          <div [hidden]="!toggleHandlePlans">
+            
+            <nz-tree #nzTreeComponent [nzData]="treeData" nzBlockNode nzDraggable (nzOnDrop)="nzEvent($event)" [nzTreeTemplate]="nzTreeTemplate" [nzBeforeDrop]="beforeDrop" [nzExpandedKeys]="defaultExpandedKeys"></nz-tree>
+            <ng-template #nzTreeTemplate let-node let-origin="origin">
+              <div id="terrNodePublic" (click)='selectanelPoint(node.origin)'
+               [ngClass]="{'selectanelPoint': selectDisposalNode==node.origin.id,'selectanelPointData': canvasData.selectPanelPoint.DisposalNodeId==node.origin.id}">
+                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
+                <div class="scoreDiv" *ngIf="isEditPattern">
+                  <mat-icon  *ngIf="!node.origin.sitePlanId && !node.origin.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon>
+                  <mat-icon *ngIf="node.level===0" (click)='addPanelPoint($event,node.origin,null)'>add</mat-icon>
+                  <mat-icon  *ngIf="!node.origin.sitePlanId && !node.origin.buildingAreaId" (click)='copyPanelPoint($event,node,treeData)'>library_books</mat-icon>
+                  <mat-icon (click)='deletePanelPoint($event,node.origin)'>delete_forever</mat-icon>
+                </div>
+              </div>
+            </ng-template>
+
+          </div>
+        </div>
+        <!-- 处置预案 -->
+
         <!-- 平面图 -->
-        <div class="planarGraph">
+        <div class="planarGraph" *ngIf="pattern">
           <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
             <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
@@ -127,12 +187,6 @@
           <div [hidden]="!togglePlane" >
               <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
               <label class="overflowText" [title]="item.name" style="display:inline-block; max-width: 145px;"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label>
-              <a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">
-                <img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
-                <img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
-                <img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
-                <img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
-              </a>
               <a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern && pattern" title="替换底图" >
                 <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
                 <mat-icon class="matIcons">photo_size_select_actual</mat-icon>
@@ -191,37 +245,8 @@
           </div>
         </div>
         <!-- 素材库 -->
-        <!-- 处置预案 -->
-        <div class="handlePlan" *ngIf="!pattern">
-          <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>
-          </div>
-          <div [hidden]="!toggleHandlePlans">
-            
-            <nz-tree #nzTreeComponent [nzData]="treeData" nzBlockNode nzDraggable (nzOnDrop)="nzEvent($event)" [nzTreeTemplate]="nzTreeTemplate" [nzBeforeDrop]="beforeDrop" [nzExpandedKeys]="defaultExpandedKeys"></nz-tree>
-            <ng-template #nzTreeTemplate let-node let-origin="origin">
-              <div id="terrNodePublic" (click)='selectanelPoint(node.origin)' [ngClass]="{'selectanelPoint': selectDisposalNode==node.origin.id}">
-                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
-                <div class="scoreDiv" *ngIf="isEditPattern">
-                  <mat-icon  *ngIf="!node.origin.sitePlanId && !node.origin.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon>
-                  <mat-icon *ngIf="node.level===0" (click)='addPanelPoint($event,node.origin,null)'>add</mat-icon>
-                  <mat-icon  *ngIf="!node.origin.sitePlanId && !node.origin.buildingAreaId" (click)='copyPanelPoint($event,node,treeData)'>library_books</mat-icon>
-                  <mat-icon (click)='deletePanelPoint($event,node.origin)'>delete_forever</mat-icon>
-                </div>
-              </div>
-            </ng-template>
-
-          </div>
-        </div>
-        <!-- 处置预案 -->
-
       </div>
+      <!-- 左侧操作栏 -->
 
       <div id="rightDiv" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none;">
         <!-- 右侧div鼠标拖动div -->

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

@@ -25,21 +25,19 @@
   align-items:center;
   min-height: 40px;
   background-color: #fff;
-  .nameShow{
+  .marginLeftRight {
-    cursor: pointer;
+    margin: 0 8px;
+    font-size: 16px;
     user-select: none;
+    cursor: pointer;
+    .mat-icon { vertical-align: middle; font-size: 24px; }
   }
   .copytobutn{
-    width: 33px;
+    width: 60px;
-    min-width: 33px;
+    min-width: 60px;
     display: flex;
     justify-content: center;
   }
-  font-size: 18px;
-  mat-icon{
-    font-size: 26px;
-    vertical-align: text-top;
-  }
   span{
     height: 24px;
     line-height: 24px;
@@ -116,6 +114,14 @@
     width: 100%;
     height: 100%;
   }
+  .centerBuildingDiv {
+    position: absolute;
+    max-width: 400px;
+    top: 40px;
+    left: 240px;
+    z-index: 150;
+    display: flex;
+  }
   .functionalDomainLeft {
     background-color: #fff;
     display: flex;
@@ -137,7 +143,7 @@
     }
   }
   .functionalDomainRight {
-    z-index: 1001;
+    z-index: 111;
     margin-right: 0px;
     transition:  margin-right 0.5s;
     border: 1px solid #464646;
@@ -158,6 +164,41 @@
 
 }
 
+//中间建筑/楼层
+.centerTotal {
+  width: 197px;
+  background-color: #fff;
+  box-shadow: 0px 0px 5px 3px rgb(165, 163, 163);
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding: 5px 0;
+  .centerTotalHeader {
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box;
+    padding-right: 5px;
+    font-size: 14px;
+    .centerTotalTitle { >label{ display: inline-block; vertical-align: middle; max-width: 90px; } }
+    .move{margin: 0 5px;}
+    .move:hover {cursor: move;}
+    .mat-icon {
+      font-size: 24px;
+      color: rgb(175, 164, 164);
+    }
+  }
+  .everyTotal {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box;
+    padding: 0 5px;
+    margin: 3px 0;
+    cursor:pointer;
+    font-size: 16px;
+  }
+}
+//中间建筑/楼层
+
 //右边操作栏
 .title{
   width: 100%;

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

@@ -2,7 +2,7 @@ import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2, ViewContaine
 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 {leftFunctionalDomainComponent,editPlaneFigureComponent,editDisposalNodeComponent,addDisposalNodeComponent} from './leftFunctionalDomain'
+import {leftFunctionalDomainComponent,editPlaneFigureComponent,editDisposalNodeComponent,addDisposalNodeComponent, addBGCDisposalNodeComponent} from './leftFunctionalDomain'
 import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {WorkingAreaComponent} from '../../working-area/working-area.component'
@@ -1379,6 +1379,7 @@ export class CollectionToolsComponent implements OnInit {
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
     !this.pattern? this.mateFireForce() : null //刷新 建筑楼层 火源/力量图标
+    this.beforeOneCheckedBuildingIsShow = false
 
     let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
     let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
@@ -1423,6 +1424,9 @@ export class CollectionToolsComponent implements OnInit {
   togglePlane:boolean = true; //可展开面板平面图 显隐
   toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
   toggleHandlePlans:boolean = true; //可展开面板处置预案 显隐
+
+  beforeOneCheckedBuildingIsShow:boolean = false; //想定作业下 建筑是否显示
+  togglebeforeOneCheckedBuilding () { this.beforeOneCheckedBuildingIsShow = !this.beforeOneCheckedBuildingIsShow }
   //可展开面板展开或关闭
   toggle () {
     this.toggleExpandPanel = !this.toggleExpandPanel
@@ -2126,6 +2130,19 @@ export class CollectionToolsComponent implements OnInit {
     })
   }
 
+  //新建 底图数据节点
+  addBGCPanelPoint (e) {
+    e.stopPropagation()
+    let dialogRef = this.dialog.open(addBGCDisposalNodeComponent);
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data) { 
+        this.canvasData.customizeDisposalNode = data
+        let imgURL = window.URL.createObjectURL(data.file) //将图片生成 url地址
+        console.log(imgURL,this.canvasData.customizeDisposalNode)
+      }
+    })
+  }
+
   //新建 处置预案 节点
   addPanelPoint (e,item,treeData) {
     e.stopPropagation()

src/app/ui/collection-tools/leftFunctionalDomain.ts

@@ -129,6 +129,51 @@ export class editPlaneFigureComponent implements OnInit {
 
 
 
+//新建 底图数据节点
+@Component({
+  selector: 'app-addBGCDisposalNode',
+  templateUrl: './addBGCDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class addBGCDisposalNodeComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {  }
+
+  file:any = null; //文件
+  //上传图片
+  selectFile (e) {
+    if (e.target.files.length ) {
+      let maxSize = 5*1024*1024 
+      if (e.target.files[0].size <= maxSize) {
+        this.file = e.target.files[0]
+      } else {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传图片需小于5MB','确定',config);
+      }
+    }
+  }
+
+  //提交表单
+  onSubmit (e) {
+    if (e.name && this.file) {
+      e.file = this.file
+      this.dialogRef.close(e);
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请上传图片','确定',config);
+    }
+  }
+
+}
+
+
+
 //创建 处置预案 节点
 @Component({
   selector: 'app-addDisposalNode',

src/app/ui/collection-tools/panel.scss

@@ -50,8 +50,8 @@
 //火源/力量 图标
 .fireForce {
   display: block;
+  margin-top: 5px;
   float: right;
-  margin: 8px 5px 0 0;
   width: 40px;
   height: 20px;
   line-height: 20px;
@@ -261,6 +261,10 @@
 .selectanelPoint {
   background-color: #F4C235;
 }
+//选中 数据节点时
+.selectanelPointData {
+  background-color: #f8da88;
+}
 
 
 
@@ -289,3 +293,39 @@
     resize:none;
   }
 }
+
+.leftAddBGC {
+  div{ text-align: center; }
+  input {
+    width: 190px;
+    height: 30px;
+    padding-left: 5px;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: #EEF1F5;
+  }
+}
+//上传CAD弹窗 inputfile
+.uploadFile {
+  padding: 3px 10px;
+  height: 20px;
+  line-height: 20px;
+  position: relative;
+  cursor: pointer;
+  color: #0080FF;
+  font-size: 14px;
+  background: #fafafa;
+  border: 1px solid #0080FF;
+  border-radius: 3px;
+  overflow: hidden;
+  display: inline-block;
+  input {
+    position: absolute;
+    width: 100%;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    cursor: pointer
+  }
+}

src/app/ui/ui.module.ts

@@ -67,7 +67,6 @@ import { UnittypeComponent,DialogOverviewExampleDialog,editorialUnit } from './u
 import { AuthorityComponent, CreateAuthority } from './authority/authority.component';
 import { RoleComponent, CreateRole, EditRole } from './role/role.component';
 import { UsermanagementComponent,CreateNewUser,EditNewUser,allRoles,seeInformation } from './usermanagement/usermanagement.component';
-
 import { IsnoPipe } from '../pipes/boolean.pipe';
 import {ConfirmpswDirective} from './changepassword/equal-validator.directive'
 import { TimePipe } from '../pipes/time.pipe';
@@ -90,16 +89,15 @@ import { EditGroup } from './unit-information/editgroup.component';
 import { EnterpriseuserComponent,seeenterpriseuser,editenterpriseuser } from './enterpriseuser/enterpriseuser.component';
 import { AddEnterpriserUser } from './enterpriseuser/addenterpriseuser.component';
 import { FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent } from './fire-fighting-facilities-formwork/fire-fighting-facilities-formwork.component';
-
 import { CollectionToolsComponent, CreateBuilding, EditBuilding, ViewDetails } from './collection-tools/collection-tools.component';
 import { WorkingAreaComponent } from '../working-area/working-area.component';
-import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
+import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent,addBGCDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
 import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
 import { CollectionToolsPlanComponent, CreateBuildingPlan, EditBuildingPlan, ViewDetailsPlan } from './collection-tools-plan/collection-tools.component';
 import { addDisposalNodeComponentPlan, editDisposalNodeComponentPlan, editPlaneFigureComponentPlan, leftFunctionalDomainComponentPlan } from './collection-tools-plan/leftFunctionalDomain';
 import { saveOneDialogPlan, saveTwoDialogPlan } from './collection-tools-plan/save';
 @NgModule({
-  declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,CreateOrganization,EditOrganization,seeInformation,EditUser,editorialUnit,FireProtectionElementsComponent,Establish,EditingFireControl,FireFightingTemplateComponent, NavmenusComponent,CreateMenus,EditMenus,NewFireFighting,EditFireClassification, MaterialBankComponent, UnitInformationComponent,AddMatLibrary,EditMatLibrary,attributeComponent,AddOriginalCopy,addAttributeComponent,editAttribute,EditOriginalCopy,SelectOriginalCopy,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,CollectionToolsPlanComponent,CreateBuildingPlan,EditBuildingPlan,ViewDetailsPlan,leftFunctionalDomainComponentPlan,editPlaneFigureComponentPlan,addDisposalNodeComponentPlan,editDisposalNodeComponentPlan,saveOneDialogPlan,saveTwoDialogPlan,addOffices,editOffices],
+  declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,CreateOrganization,EditOrganization,seeInformation,EditUser,editorialUnit,FireProtectionElementsComponent,Establish,EditingFireControl,FireFightingTemplateComponent, NavmenusComponent,CreateMenus,EditMenus,NewFireFighting,EditFireClassification, MaterialBankComponent, UnitInformationComponent,AddMatLibrary,EditMatLibrary,attributeComponent,AddOriginalCopy,addAttributeComponent,editAttribute,EditOriginalCopy,SelectOriginalCopy,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,CollectionToolsPlanComponent,CreateBuildingPlan,EditBuildingPlan,ViewDetailsPlan,leftFunctionalDomainComponentPlan,editPlaneFigureComponentPlan,addDisposalNodeComponentPlan,editDisposalNodeComponentPlan,saveOneDialogPlan,saveTwoDialogPlan,addOffices,editOffices,addBGCDisposalNodeComponent],
 
   imports: [
     CommonModule,

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

@@ -276,7 +276,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       icon.assetData.Type === 3 ||
       icon.assetData.Type === 4
     )) {
-      console.log(this.backgroundImage.position);
       this.backgroundImage.pivot.set(icon.x, icon.y);
       this.backgroundImage.position.set(771, 404);
       clearTimeout(this.animationTime);
@@ -315,7 +314,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.app.stage.addChild(this.grid);
     this.grid.drawGrid();
     this.grid.onMousemove = (evt, gridCoord) => {
-      console.log(gridCoord);
+
     };
 
     this.createBackgroundImage();
@@ -504,7 +503,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public setIconScale(value: number): void {
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxImageShape) {
-        console.log(item.image.scale);
         item.image.scale.set(value);
       } else if (item instanceof MultipointIcon) {
 
@@ -630,7 +628,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.backgroundImage
       .on('pointerdown', event => {
         if (event.data.button !== 0) { return; }
-        console.log(this.backgroundImage.toLocal(this.mousePosition));
         if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
           this.selection.deselectAll();
           event.currentTarget.data = event.data;