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

.gitignore

@@ -44,3 +44,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+debug.log

debug.log

@@ -1,3 +0,0 @@
-[1229/141605.754:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
-[0104/100053.968:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
-[0122/085819.900:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

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; // 数据 是否改动
 
-  selectTemplateData: any; // 选择当前 模板数据
+  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; // 新建 自定义数据节点 底图+名称
-  selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 所对应的 天气,详情 数据节点
   // 处置 节点
+
   /**
   * 游戏模式
   */

src/app/data-collection/data-collection.module.ts

@@ -45,11 +45,11 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DataCollectionRoutingModule } from './data-collection.routing';
 import { AddWater, WaterCollectionComponent } from './water-collection/water-collection.component';
 import { AddFireForce, FireForceComponent, ViewDetails } from './fire-force/fire-force.component';
-import { LinkageForcesComponent } from './linkage-forces/linkage-forces.component';
+import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage-forces/linkage-forces.component';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 
 @NgModule({
-  declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent,AddWater,AddFireForce,ViewDetails],
+  declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent,AddWater,AddFireForce,ViewDetails,AddLinkageForce,ViewDetails2],
   imports: [
     CommonModule,
     A11yModule,

src/app/data-collection/fire-force/fire-force.component.html

@@ -94,7 +94,7 @@
     </div>
     <div class="mapbox">
         <div class="mapcheckbox">
-            <mat-checkbox color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
+            <mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
         </div>
         <div id="map" class="map" style="overflow: hidden;">
             <div id="container"></div>

src/app/data-collection/fire-force/fire-force.component.ts

@@ -38,12 +38,104 @@ export class FireForceComponent implements OnInit {
     {id:5,name:'90%-100%'}
   ]
   checkBoxList:any[] = [
-    {id:0,name:'总队'},
+    {id:0,name:'总队',isChecked:false},
-    {id:1,name:'支队'},
+    {id:1,name:'支队',isChecked:false},
-    {id:2,name:'大队'},
+    {id:2,name:'大队',isChecked:false},
-    {id:3,name:'中队(消防站)'},
+    {id:3,name:'中队(消防站)',isChecked:false},
-    {id:4,name:'其他消防队伍'}
+    {id:4,name:'其他消防队伍',isChecked:false}
   ]
+   //勾选力量类型checkbox在地图上显示marker
+   checkBoxChange(){
+    let Levels = []
+    this.checkBoxList.forEach(item =>{
+      if(item.isChecked){
+        Levels.push(item.id)
+      }
+    })
+    let params:any = {
+      PageSize : 999999,
+      Levels:Levels
+    }
+    console.log('4444',Levels)
+    if(Levels.length != 0){//如果勾选了checkbox
+      this.http.get('/api/CustomFireForce',{params:params}).subscribe((data:any) => {
+        console.log('所有力量',data)
+        this.createMarker(data)
+      })
+    }else{
+      this.cluster.setData([])
+    }
+  }
+  //循环渲染出所有力量markers
+  cluster:any //力量聚合实例
+  createMarker(list){
+    let markerArrcluster = []
+    this.cluster ? this.cluster.setData([]) : null
+    list.forEach((item) => {
+      let image
+      if(item.forceType == 2){
+        image = '/assets/fireForcesMarkers/其他.png'
+      }else if(item.level == 0){
+        image = '/assets/fireForcesMarkers/总队.png'
+      }else if(item.level == 1){
+        image = '/assets/fireForcesMarkers/支队.png'
+      }else if(item.level == 2){
+        image = '/assets/fireForcesMarkers/大队.png'
+      }else if(item.level == 3){
+        image = '/assets/fireForcesMarkers/中队.png'
+      }
+      // 用于点集合的数组
+      item.fireForceDetailInfo.location ? 
+      markerArrcluster.push({
+        lnglat : [item.fireForceDetailInfo.location.x,item.fireForceDetailInfo.location.y],
+        image : image,
+        data : item
+      }) : null
+    })
+    this.map.plugin(["AMap.MarkerClusterer"],() => {
+      var gridSize = 60
+      var count = markerArrcluster.length;
+      var _renderClusterMarker = function (context) {
+        var factor = Math.pow(context.count / count, 1 / 18);
+        var div = document.createElement('div');
+        var Hue = 180 - factor * 180;
+        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+        div.style.backgroundColor = bgColor;
+        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+        div.style.width = div.style.height = size + 'px';
+        div.style.border = 'solid 1px ' + borderColor;
+        div.style.borderRadius = size / 2 + 'px';
+        div.style.boxShadow = '0 0 5px ' + shadowColor;
+        div.innerHTML = context.count;
+        div.style.lineHeight = size + 'px';
+        div.style.color = fontColor;
+        div.style.fontSize = '14px';
+        div.style.textAlign = 'center';
+        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+        context.marker.setContent(div)
+      };
+      var _renderMarker = (context)=> {
+        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
+        var offset = new AMap.Pixel(-12.5, -12.5);
+        context.marker.setContent(content)
+        context.marker.setOffset(offset)
+      }
+      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+        gridSize: gridSize, // 设置网格像素大小
+        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+        renderMarker: _renderMarker, // 自定义非聚合点样式
+      });
+      this.cluster.on('click',(e)=>{
+        if(e.clusterData.length == 1){
+         
+        }
+      })
+    });
+    
+  }
   ngOnInit(): void {  
     this.getAllFireForce()
     setTimeout(() => {

src/app/data-collection/linkage-forces/addLinkageForce.html

@@ -0,0 +1,15 @@
+<div class="addLinkageForceBox">
+    <div class="topbox">
+        <span>新增联动力量</span>
+    </div>
+    <div class="contant">
+        <div (click)="selecteAddType(item,key)" *ngFor="let item of addList;let key = index" [ngClass]="{'selectedDiv': item.id == selectedFireForceTypeIndex}">
+            <img [src]="item.imgUrl" alt="">
+            {{item.name}}
+        </div>
+    </div>
+    <div class="btnbox">
+        <button mat-flat-button color="primary" (click)="confirm()">确定</button>
+        <button mat-flat-button style="background-color: #F2F4F6;" mat-dialog-close>取消</button>
+    </div>
+</div>

src/app/data-collection/linkage-forces/linkage-forces.component.html

@@ -1,8 +1,260 @@
-<div class="box">
+<div class="box" style="width: 100%;height: 100%;overflow: hidden;">
     <div class="listbox">
+        <div class="topbox">
+            <div class="add">
+                <div>
+                    <mat-slide-toggle color="primary" (change)='slideChange($event)' checked labelPosition='before'>列表过滤</mat-slide-toggle>
+                </div>
+                <div>
+                    <button (click)="reset()" style="width: 68px;margin-right: 12px;" mat-flat-button color="primary">重置</button>
+                    <button (click)="addLinkageForce()" style="width: 68px;" mat-flat-button color="primary">新增</button>
+                </div>
+            </div>
+            <div class="searchbox" *ngIf="isCheckedOfSearchDiv">
+                <div class="inputbox">
+                    <span>
+                        关键字: 
+                    </span>
+                    <input type="text" placeholder="请输入名称/类别" [(ngModel)]="searchForm.name"/>
+                </div>
+                <div class="inputbox">
+                    <span>
+                        完整度: 
+                    </span>
+                    <select [(ngModel)]="searchForm.integrityNum" [ngClass]="{'gray': searchForm.integrityNum == ''}">
+                        <option value='' selected disabled style='display:none;'>请选择</option>  
+                        <option *ngFor="let item of listIntegrityNum" [value]="item.id">{{item.name}}</option>
+                    </select>
+                </div>
+                <div class="searchbtn">
+                    <button (click)="searchList()" style="width: 100%;" mat-flat-button color="primary"><mat-icon style="width: 20px;height: 20px;font-size: 20px;">search</mat-icon>搜索</button>
+                </div>
+            </div>
+        </div>
+        <div style="height: 1px;width: 100%;background-color: #F2F4F6;"></div>
+        <div class="contantbox">
+            <div class="title">
+                <span>消防队</span>
+                <span>完整度</span>
+            </div>
+            <div class="linkageForceList">
+                <ul *ngIf="allLinkageForceObj && allLinkageForceObj.items.length != 0">
+                    <li *ngFor="let item of allLinkageForceObj.items" (click)="selectedLinkageForce(item)" [ngClass]="{'selectedLi': item.id == LinkageForceDetailInfo.id}">
+                        <div class="name" [title]="item.name">{{item.name}}</div>
+                        <div class="integrity">
+                            <span class="integrityNum">
+                                {{accMul(item.integrityScore.toFixed(3),100,1)}}%
+                            </span>
+                            <div class="integrityColorDiv" [style]="integrity((item.integrityScore.toFixed(2) * 100).toFixed())">
+                            </div>
+                        </div>
+                        <div class="deletebtn" (click)="deleteLinkageForc(item,$event)"><mat-icon>highlight_off</mat-icon></div>
+                    </li>
+                </ul>
+            </div>
+            <div class="paginator">
+                <mat-paginator [length]="dataLength" [pageSize]="15" (page)="chagePage($event)"></mat-paginator>
+            </div>
+
+        </div>
+    </div>
+    <div class="mapbox" id="linkageForcesSwiper">
+        <div class="mapcheckbox swiper-container">
 
+            <div class="swiper-wrapper">
+                <mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" class="swiper-slide" color="primary" *ngFor="let item of checkBoxList">
+                    <span>
+                        <img style="width: 16px;height:16px;" [src]="item.imgUrl" alt="">
+                        {{item.name}}
+                    </span>
+                </mat-checkbox>
             </div>
-    <div class="mapbox">
+            <!-- 如果需要导航按钮 -->
+            <div style="left: 2px;top: 52%;" class="swiper-button-prev"></div>
+            <div style="top: 52%;"class="swiper-button-next"></div>
 
         </div>
+        <div id="map" class="map" style="overflow: hidden;">
+            <div id="container"></div>
+            <div class="gistopbox hidden" [ngClass]="{'show': isGisTopBox}">
+                <div class="inputBox">
+                    <span>搜索: </span>
+                    <input name="position" [(ngModel)]="searchTitle" id="tipinput" class="positionInput" type="text" autocomplete="off">
+                </div>
+            </div>
+        </div>
+        <div class="detailsbox" *ngIf="LinkageForceDetailInfo.linkageForceType || LinkageForceDetailInfo.linkageForceType == '0'">
+            <div class="masklayer" *ngIf="isMasklayer">
+                <mat-spinner [diameter]='30'></mat-spinner>
+                <span>请等待...</span>
+            </div>
+            <div class="masklayer" *ngIf="isMasklayerUploading">
+                <mat-progress-bar class="progressbar" mode="determinate" [value]="progressBarValue"></mat-progress-bar>
+                <span>上传中...({{progressBarValue}}%)</span>
+                <button (click)="cancelUploading()" class="cancelbtn" mat-flat-button>取消上传</button>
+            </div>
+            <div class="masklayer" *ngIf="isMasklayerDownload">
+                <mat-progress-bar class="progressbar" mode="determinate" [value]="progressBarValue"></mat-progress-bar>
+                <span>下载中...({{progressBarValue}}%)</span>
+            </div>
+            <div class="tabsbox">
+                <div class="tabs">
+                    <div (click)="selectedTab(1)" [ngClass]="{'selectedBtn': tabIndex == 1}">
+                        <span>详情</span>
+                    </div>
+                    <div (click)="selectedTab(2)" [ngClass]="{'selectedBtn': tabIndex == 2}">
+                        <span>相关资料</span>
+                    </div>
+                </div>
+                <div class="btnbox">
+                    <div class="uploadAttachment" *ngIf="tabIndex == 2">
+                        <button mat-flat-button color="primary">
+                            <mat-icon>attach_file</mat-icon>
+                            上传附件
+                        </button>
+                        <a href="javascript:;" class="a-upload">
+                            <input type="file" (change)='uploadAttachment($event)'>
+                        </a>
+                    </div>
+                    
+                    <span class="save" (click)="save()"><mat-icon>save</mat-icon>保存</span>
+                    <span class="submitAudit"><mat-icon>open_in_browser</mat-icon>提交审核</span>
+                </div>
+            </div>
+            <!-- 详情 -->
+            <div class="contant" *ngIf="tabIndex == 1">
+                <div>
+                    <p>基本信息</p>
+                    <mat-grid-list cols="6" rowHeight="40px">
+                        <mat-grid-tile colspan='3' rowspan='1'>
+                            <span>
+                                <span style="color: red;">*</span> 
+                                类型:
+                            </span>
+                           <select disabled style="width: 67.7%;" [(ngModel)]="LinkageForceDetailInfo.linkageForceType">
+                               <option *ngFor="let item of checkBoxList" [value]="item.id">{{item.name}}</option>
+                           </select>
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='3' rowspan='1'>
+                            <span>
+                                <span style="color: red;">*</span> 
+                                名称:
+                            </span>
+                            <input type="text" style="width: 63%;" [(ngModel)]="LinkageForceDetailInfo.name">
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='3' rowspan='1'>
+                            <span>
+                                单位联系电话:
+                            </span>
+                            <input type="text" [(ngModel)]="LinkageForceDetailInfo.phoneNumber">
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='3' rowspan='1'>
+                            <span>
+                                单位传真:
+                            </span>
+                            <input type="text" [(ngModel)]="LinkageForceDetailInfo.faxNumber">
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='6' rowspan='2'>
+                            <span>
+                                备注:
+                            </span>
+                           <textarea [(ngModel)]="LinkageForceDetailInfo.remark" style="height: 80%;width: 84.5%;" name="" id="" cols="30" rows="10"></textarea>
+                        </mat-grid-tile>
+                    </mat-grid-list>
+                    <p>位置信息</p>
+                    <mat-grid-list cols="6" rowHeight="40px">
+                        <mat-grid-tile colspan='3' rowspan='1'>
+                            <span>
+                                行政区:
+                            </span>
+                            <input type="text" style="width: 26%;margin-right: 6%;" [(ngModel)]="LinkageForceDetailInfo.administrativeRegion">
+                            <span>
+                                地址:
+                            </span>
+                            <input type="text" style="width: 26%;margin-right: 6%;" [(ngModel)]="LinkageForceDetailInfo.address">
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='3' rowspan='1'>
+                            <span>
+                                经度:
+                            </span>
+                            <input [(ngModel)]="positionLngLat.x" disabled type="text" style="width: 26%;margin-right: 6%;">
+                            <span>
+                                纬度:
+                            </span>
+                            <input [(ngModel)]="positionLngLat.y" disabled type="text" style="width: 26%;margin-right: 6%;">
+                            <button (click)="setPosition()" style="width:85px;text-align: center;" mat-flat-button color="primary">
+                                <mat-icon style="width: 20px;height: 20px;font-size: 20px;">place</mat-icon>位置
+                            </button>
+                        </mat-grid-tile>
+    
+                    </mat-grid-list>
+                    <p>联系人</p>
+                    <mat-grid-list cols="6" rowHeight="40px">
+                        <mat-grid-tile colspan='2' rowspan='1'>
+                            <span>
+                                联系人:
+                            </span>
+                            <input type="text" [(ngModel)]="LinkageForceDetailInfo.contactName">
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='2' rowspan='1'>
+                            <span>
+                                职务:
+                            </span>
+                            <input type="text" [(ngModel)]="LinkageForceDetailInfo.contactTitle">
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='2' rowspan='1'>
+                            <span>
+                                电话:
+                            </span>
+                            <input type="text" [(ngModel)]="LinkageForceDetailInfo.contactPhone">
+                        </mat-grid-tile>
+                    </mat-grid-list>
+                    <p>应急信息</p>
+                    <mat-grid-list cols="6" rowHeight="40px">
+                        <mat-grid-tile colspan='3' rowspan='2'>
+                            <span>
+                                服务内容:
+                            </span>
+                            <textarea style="height: 80%;width: 70%;" name="" id="" cols="30" rows="10" [(ngModel)]="LinkageForceDetailInfo.serviceContent"></textarea>
+                        </mat-grid-tile>
+                        <mat-grid-tile colspan='3' rowspan='2'>
+                            <span>
+                                资源说明:
+                            </span>
+                            <textarea style="height: 80%;width: 70%;" name="" id="" cols="30" rows="10" [(ngModel)]="LinkageForceDetailInfo.resourceRemark"></textarea>
+                        </mat-grid-tile>
+                
+                    </mat-grid-list>
+                </div>
+            </div>
+            <!-- 相关资料 -->
+            <div class="contant" *ngIf="tabIndex == 2">
+                <div class="fileDivBox" *ngFor="let item of AttachmentArr" >
+                    <mat-icon class="deleteFile" (click)="deleteFile(item,$event)">highlight_off</mat-icon>
+                    <div class="imgbox">
+                        <img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'png'
+                        || item.fileName.split('.')[item.fileName.split('.').length-1] == 'jpg'
+                        || item.fileName.split('.')[item.fileName.split('.').length-1] == 'JPG'" 
+                        class="thumbnailImg" src="/api/Objects/PlanPlatform/{{item.objectName}}" alt="">
+                        <img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'docx'
+                        || item.fileName.split('.')[item.fileName.split('.').length-1] == 'doc'" 
+                        class="thumbnailImg" src="/assets/images/word.jpg" alt="">
+                        <img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'pdf'" 
+                        class="thumbnailImg" src="/assets/images/pdf.jpg" alt="">
+                        <img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'txt'" 
+                        class="thumbnailImg" src="/assets/images/txt.jpg" alt="">
+                        <img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'mp4'" 
+                        class="thumbnailImg" src="/assets/images/vedio.jpg" alt="">
+                    </div>
+                    <span [title]="item.fileName">{{item.fileName}}</span>
+                    <button (click)="clickFile(item)" class="btn btn1" mat-flat-button color="primary">查看</button>
+                    <button (click)="download (item)" class="btn btn2" mat-flat-button color="primary">下载</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="viewerjs" style="display:none">
+
 </div>

src/app/data-collection/linkage-forces/linkage-forces.component.scss

@@ -5,14 +5,532 @@
     display: flex;
     box-sizing: border-box;
     padding: 10px;
+    font-size: 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #000000;
 }
 .listbox{
     width: 400px;
     height: 100%;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    .topbox{
+        max-height: 200px;
+        box-sizing: border-box;
+        padding: 10px 22px 22px;
+        .add{
+            height: 36px;
+            line-height: 36px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .searchbox{
+            .inputbox{
+                width: 100%;
+                height: 36px;
+                font-size: 14px;
+                line-height: 36px;
+                margin: 10px 0;
+                display: flex;
+                span{
+                    margin-right: 5px;
+                }
+                select,input{
+                    flex: 1;
+                    background-color: #F2F4F6;
+                    border: 0;
+                    border-radius: 5px;
+                    box-sizing: border-box;
+                    padding:0 8px;
+                   
+                }
+                .gray{
+                    color: gray;
+                }
+                // input::-moz-placeholder {
+                //     color: rgba(90, 83, 83, 0.89);
+                //     opacity: 1;
+                // }
+                // input:-ms-input-placeholder {
+                //     color: rgba(90, 83, 83, 0.89);;
+                // }
+                // input::-webkit-input-placeholder {
+                //     color: rgba(90, 83, 83, 0.89);;
+                // }
+            }
+        }
+    }
+    .contantbox{
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        .title{
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0 33px 0 22px;
+            height: 36px;
+            line-height: 36px;
+            span{
+                font-size: 14px;
+                font-weight: 500;
+            }
+        }
+        .linkageForceList{
+            flex: 1;
+            overflow-y: auto;
+            li{ 
+                cursor: pointer;
+                width: 100%;
+                height: 36px;
+                line-height: 36px;
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                div{
+                    float: left;
+                    box-sizing: border-box;
+                }
+                .name{
+                    text-align: left;
+                    width: 60%;
+                    padding-left: 22px;
+                    white-space:nowrap;
+                    overflow:hidden;
+                    text-overflow:ellipsis;
+                }
+                .integrity{
+                    height: 58%;
+                    width: 32%;
+                    position: relative;
+                    background-color: #F2F4F6;
+                    .integrityNum{
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                        color: black;
+                        font-size: 13px;
+                        cursor: default;
+                    }
+                    .integrityColorDiv{
+                        height: 100%;
+                    }
+                }
+                .deletebtn{
+                    flex: 1;
+                    text-align: center;
+                    mat-icon{
+                        width: 20px;
+                        height: 20px;
+                        cursor: pointer;
+                        font-size: 20px;
+                        vertical-align: text-top;
+                        color: rgba(49, 46, 46, 0.144);
+                    }
+                    mat-icon:hover{
+                        color: #000;
+                    }
+                }
+            }
+            li:hover{
+                background-color: #b3d3ee;
+            }
+            .selectedLi{
+                background-color: #b3d3ee;
+            }
+        }
+        .paginator{
+            height: 56px;
+            width: 100%;
+        }
+    }
 }
 .mapbox{
     flex: 1;
     margin-left: 10px;
     background-color: #fff;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    .mapcheckbox,.swiper-container{
+        width: 100%;
+        height: 50px;
+        .swiper-wrapper{
+            flex: 1;
+            display: flex;
+            height: 50px;
+            line-height: 50px;
+        }
+        mat-checkbox{
+            font-size: 15px;
+            span{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                img{
+                    margin-right: 3px;
+                }
+            }
+           
+        }
+        mat-checkbox:nth-child(1){
+            margin-left: 20px;
+        }
+       
+    }
+    #map{
+        flex: 1;
+        position: relative;
+        #container{
+            width: 100%;
+            height: 100%;
+        }
+        .gistopbox{
+            position: absolute;
+            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+            border-radius: 5px;
+            top: 3px;
+            width: 30%;
+            height:40px;
+            background: #FFFFFF;
+            display: flex;
+            align-items: center;
+            cursor: default;;
+            .inputBox{
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                font-size: 14px;
+                .positionInput{
+                    border: 0;
+                    border-radius: 6px;
+                    width: 80%;
+                    height: 28px;
+                    background: #F2F2F2;
+                    margin-left: 8px;
+                    box-sizing: border-box;
+                    padding-left: 10px;
+                }
+            }
+            
+        }
+        .hidden{
+            opacity: 0;
+            z-index: -1;
+        }
+        .show{
+            opacity: 1;
+            z-index: 1;
+        }
+    }
+    .detailsbox{
+        width: 100%;
+        height:500px;
+        position: relative;
+        .tabsbox{
+            width: 100%;
+            height: 40px;
+            overflow: hidden;
+            overflow-x: auto;
+            line-height: 40px;
+            display: flex;
+            justify-content: space-between;
+            font-size: 15px;
+            .tabs{
+                div{
+                    float: left;
+                    width: 120px;
+                    text-align: center;
+                    cursor: pointer;
+                    color: #000000;
+                    opacity: 0.4;
+                    border-right: 1px solid #F2F4F6;
+                }
+                .selectedBtn{
+                    background-color: #2196F3;
+                    color: #fff;
+                    opacity: 1;
+                }
+            }
+            .btnbox{
+                display: flex;
+                align-items: center;
+                .uploadAttachment{
+                    display: inline-block;
+                    margin-right: 20px;
+                    width: 120px;
+                    text-align: center;
+                    height: 28px;
+                    line-height: 28px;
+                    position: relative;
+                    button{
+                        width: 100%;
+                        height: 28px;
+                        line-height: 28px;
+                        mat-icon{
+                            transform: rotate(25deg);
+                            font-size: 20px;
+                            width: 20px;
+                            height: 20px;
+                        }
+                    }
+                     .a-upload{
+                         display: inline-block;
+                         position: absolute;
+                         left: 0;
+                         top: 0;
+                         display: inline-block;
+                         width: 100%;
+                         height: 100%;
+                         opacity: 0;
+                         input{
+                            width: 100%;
+                            height: 100%;
+                            cursor: pointer;
+                         }
+                     }
+                 }
+                span{
+                    display: inline-block;
+                    cursor: pointer;
+                    color: #2196F3;
+                    mat-icon{
+                        vertical-align: text-top;
+                        font-size: 20px;
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+                span:hover{
+                    text-decoration: underline;
+                }
+                .submitAudit{
+                    margin: 0 30px;
+                }
+                
+            }
+        }
+        .contant{
+            width: 100%;
+            height:460px;
+            overflow-y: auto;
+            p{
+                color: #2196F3;
+                background-color: #F2F4F6;
+                height: 33px;
+                line-height: 33px;
+                box-sizing: border-box;
+                padding-left: 20px;
+                font-size: 15px;
+            }
+            span{
+                font-size: 15px;
+            }
+            input,select{
+                height: 30px;
+                line-height: 30px;
+                box-sizing: border-box;
+                padding: 0 12px;
+                width: 60%;
+                margin-left: 5px;
+                border: 1px solid #EBEBEB;
+                border-radius: 5px;
+            }
+            textarea{
+                width: 89%;
+                margin-left: 5px;
+                height: 85%;
+                border: 1px solid #EBEBEB;
+                border-radius: 5px;
+            }
+            .longinput{
+                width: 74%;
+            }
+            .unitDiv{
+                width: 60%;
+                position: relative;
+                input,select{
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding-right: 50px;
+                }
+                .unit{
+                    position: absolute;
+                    right: 13px;
+                    top: 4px;
+                    color: #000000;
+                    opacity: 0.4;
+                }
+            }
+            .smallwidth{
+                width: 30%;
+            }
+            // 相关资料
+            .fileDivBox{
+                position: relative;
+                float: left;
+                border: 1px solid #EBEBEB;
+                width: 160px;
+                height: 162px;
+                box-sizing: border-box;
+                padding: 16px 16px 0;
+                display: flex;
+                flex-direction: column;
+                margin: 12px;
+                align-items: center;
+                cursor: pointer;
+                .imgbox{
+                    width: 134px;
+                    height: 110px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    .thumbnailImg{
+                        width: 134px;
+                        height: 110px;
+                    }
+                }
+               
+                span{
+                    width: 100%;
+                    text-align: center;
+                    margin-top: 5px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color:  gray;
+                    font-size: 14px;
+                }
+                .deleteFile{
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 18px;
+                    height: 18px;
+                    font-size: 18px;
+                    display: none;
+                }
+                .btn{
+                    position: absolute;
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 14px;
+                    display: none;
+                }
+                .btn1{
+                    top: 37px;
+                }
+                .btn2{
+                    top: 78px;
+                }
+            }
+            .fileDivBox:hover{
+                border: 1px solid #000;
+                .deleteFile{
+                    display: block;
+
+                }
+                .deleteFile:hover{
+                    color: red;
+                }
+                .btn{
+                    display: block;
+                }
+            }
+        }
+        .masklayer{
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2000;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            span{
+                font-size: 14px;
+                margin-top: 5px;
+            }
+            .progressbar{
+                width: 15%;
+            }
+            .cancelbtn{
+                height: 32px;
+                line-height: 32px;
+                font-size: 14px;
+                margin-top: 12px;
+            }
+        }
+    }
+}
+
+
+.addLinkageForceBox{
+    width: 530px;
+    height: 262px;
+    display: flex;
+    flex-direction: column;
+    .topbox{
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        background-color: #2196F3;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: 15px;
+    }
+    .contant{
+        flex: 1;
+        box-sizing: border-box;
+        padding:20px 30px;
+
+        div{
+            width:86px;
+            margin: 3px;
+            height: 36px;
+            float: left;
+            line-height: 36px;
+            text-align: center;
+            background-color: #F2F4F6;
+            font-size: 14px;
+            cursor: pointer;
+            border: 1px solid #fff;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img{
+                margin-right: 3px;
+            }
+        }
+        .selectedDiv{
+            background-color: #fff;
+            border: 1px solid #2196F3;
+        }
+    }
+    .btnbox{
+        width: 100%;
+        height: 50px;
+        box-sizing: border-box;
+        padding: 0px 30px;
+        display: flex;
+        align-items: flex-start;;
+        justify-content: center;
+        button{
+            width: 80px;
+            height: 36px;
+            line-height: 36px;
+            margin: 0 20px;
+        }
+    }
 }

src/app/data-collection/linkage-forces/linkage-forces.component.ts

@@ -1,5 +1,16 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { HttpClient } from '@angular/common/http';
+import { Inject, Renderer2 } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
-
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { NzTreeNode } from 'ng-zorro-antd/tree';
+import { TreeService } from 'src/app/http-interceptors/tree.service';
+import Viewer from 'viewerjs'
+import Swiper from 'swiper';
+declare var AMap: any;
 @Component({
   selector: 'app-linkage-forces',
   templateUrl: './linkage-forces.component.html',
@@ -7,9 +18,865 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LinkageForcesComponent implements OnInit {
 
-  constructor() { }
+  constructor(private tree: TreeService,public snackBar: MatSnackBar,private http:HttpClient,private  elementRef: ElementRef,public renderer2: Renderer2,public dialog: MatDialog) { }
+  
+  isCheckedOfSearchDiv:boolean = true//列表过滤滑块
+  slideChange(e){
+    this.isCheckedOfSearchDiv = e.checked
+  }
+  //搜索表单
+  searchForm:any = {
+    name:'',
+    integrityNum:''
+  }
+  listIntegrityNum:any[] = [
+    {id:-1,name:'全部'},
+    {id:0,name:'<=50%'},
+    {id:1,name:'50%-60%'},
+    {id:2,name:'60%-70%'},
+    {id:3,name:'70%-80%'},
+    {id:4,name:'80%-90%'},
+    {id:5,name:'90%-100%'}
+  ]
+  checkBoxList:any[] = [
+    {id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png',isChecked:false},
+    {id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png',isChecked:false},
+    {id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png',isChecked:false},
+    {id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png',isChecked:false},
+    {id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png',isChecked:false},
+    {id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png',isChecked:false},
+    {id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png',isChecked:false},
+    {id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png',isChecked:false},
+    {id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png',isChecked:false},
+    {id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png',isChecked:false},
+    {id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png',isChecked:false},
+    {id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png',isChecked:false},
+    {id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png',isChecked:false},
+    {id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png',isChecked:false},
+    {id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png',isChecked:false}
+  ]
+  //勾选力量类型checkbox在地图上显示marker
+  checkBoxChange(){
+    let LinkageForceTypes = []
+    this.checkBoxList.forEach(item =>{
+      if(item.isChecked){
+        LinkageForceTypes.push(item.id)
+      }
+    })
+    let params:any = {
+      PageSize : 999999,
+      LinkageForceTypes:LinkageForceTypes
+    }
+    console.log('4444',LinkageForceTypes)
+    if(LinkageForceTypes.length != 0){//如果勾选了checkbox
+      this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => {
+        console.log('所有力量',data)
+        this.createMarker(data.items)
+      })
+    }else{
+      this.cluster.setData([])
+    }
+  }
+  //循环渲染出所有力量markers
+  cluster:any //力量聚合实例
+  createMarker(list){
+    let markerArrcluster = []
+    this.cluster ? this.cluster.setData([]) : null
+    list.forEach((item) => {
+      let image
+      if(item.linkageForceType == 0){//消火栓
+        image = '/assets/linkageForcesMarkers/安监.png'
+      }else if(item.linkageForceType == 1){//消防水池
+        image = '/assets/linkageForcesMarkers/电力局.png'
+      }else if(item.linkageForceType == 2){//天然水源
+        image = '/assets/linkageForcesMarkers/公安.png'
+      }else if(item.linkageForceType == 3){//天然水源
+        image = '/assets/linkageForcesMarkers/海事.png'
+      }else if(item.linkageForceType == 4){//天然水源
+        image = '/assets/linkageForcesMarkers/环保局.png'
+      }else if(item.linkageForceType == 5){//天然水源
+        image = '/assets/linkageForcesMarkers/交通.png'
+      }else if(item.linkageForceType == 6){//天然水源
+        image = '/assets/linkageForcesMarkers/民政.png'
+      }else if(item.linkageForceType == 7){//天然水源
+        image = '/assets/linkageForcesMarkers/气象局.png'
+      }else if(item.linkageForceType == 8){//天然水源
+        image = '/assets/linkageForcesMarkers/燃气局.png'
+      }else if(item.linkageForceType == 9){//天然水源
+        image = '/assets/linkageForcesMarkers/市政.png'
+      }else if(item.linkageForceType == 10){//天然水源
+        image = '/assets/linkageForcesMarkers/水利.png'
+      }else if(item.linkageForceType == 11){//天然水源
+        image = '/assets/linkageForcesMarkers/通信.png'
+      }else if(item.linkageForceType == 12){//天然水源
+        image = '/assets/linkageForcesMarkers/医疗.png'
+      }else if(item.linkageForceType == 13){//天然水源
+        image = '/assets/linkageForcesMarkers/应急管理.png'
+      }else if(item.linkageForceType == 14){//天然水源
+        image = '/assets/linkageForcesMarkers/住建.png'
+      }
+      // 用于点集合的数组
+      markerArrcluster.push({
+        lnglat : [item.location.x,item.location.y],
+        image : image,
+        data : item
+      })
+    })
+    this.map.plugin(["AMap.MarkerClusterer"],() => {
+      var gridSize = 60
+      var count = markerArrcluster.length;
+      var _renderClusterMarker = function (context) {
+        var factor = Math.pow(context.count / count, 1 / 18);
+        var div = document.createElement('div');
+        var Hue = 180 - factor * 180;
+        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+        div.style.backgroundColor = bgColor;
+        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+        div.style.width = div.style.height = size + 'px';
+        div.style.border = 'solid 1px ' + borderColor;
+        div.style.borderRadius = size / 2 + 'px';
+        div.style.boxShadow = '0 0 5px ' + shadowColor;
+        div.innerHTML = context.count;
+        div.style.lineHeight = size + 'px';
+        div.style.color = fontColor;
+        div.style.fontSize = '14px';
+        div.style.textAlign = 'center';
+        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+        context.marker.setContent(div)
+      };
+      var _renderMarker = (context)=> {
+        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
+        var offset = new AMap.Pixel(-12.5, -12.5);
+        context.marker.setContent(content)
+        context.marker.setOffset(offset)
+      }
+      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+        gridSize: gridSize, // 设置网格像素大小
+        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+        renderMarker: _renderMarker, // 自定义非聚合点样式
+      });
+      this.cluster.on('click',(e)=>{
+        if(e.clusterData.length == 1){
+         
+        }
+      })
+    });
+    
+  }
+  ngOnInit(): void {  
+    this.getAllFireForce()
+    window.onload = () => {
+      var mySwiper = new Swiper('.swiper-container', {
+        slidesPerView: 10,//每页显示的个数
+        slidesPerGroup: 3,//点击一次需要跳多少次
+        // 如果需要前进后退按钮
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      })
+    }
+    setTimeout(() => {
+     
+      this.createMap()
+    }, 0);
+  }
+  //获得所有联动力量
+  allLinkageForceObj:any//获得的所有联动力量
+  dataLength:any //获取的数据一共多少条
+  PageNumber:any = 1 //当前第几页
+  getAllFireForce(){
+    let MinIntegrity = 0
+    let MaxIntegrity = 1.1
+    if(this.searchForm.integrityNum == '0'){
+      MinIntegrity = 0
+      MaxIntegrity = 0.5
+    }else if(this.searchForm.integrityNum == '1'){
+      MinIntegrity = 0.5
+      MaxIntegrity = 0.6
+    }else if(this.searchForm.integrityNum == '2'){
+      MinIntegrity = 0.6
+      MaxIntegrity = 0.7
+    }else if(this.searchForm.integrityNum == '3'){
+      MinIntegrity = 0.7
+      MaxIntegrity = 0.8
+    }else if(this.searchForm.integrityNum == '4'){
+      MinIntegrity = 0.8
+      MaxIntegrity = 0.9
+    }else if(this.searchForm.integrityNum == '5'){
+      MinIntegrity = 0.9
+      MaxIntegrity = 1.1
+    }else if(this.searchForm.integrityNum == '-1'){
+      MinIntegrity = 0
+      MaxIntegrity = 1.1
+    }
+    let params:any = {
+      Keyword : this.searchForm.name ? this.searchForm.name : '',
+      MinIntegrity : MinIntegrity,
+      MaxIntegrity : MaxIntegrity,
+      PageSize : 15,
+      PageNumber : this.PageNumber,
+    }
+    this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => {
+      console.log('所有消防力量列表',data)
+      this.dataLength = data.totalCount
+      this.allLinkageForceObj = data
+    })
+  }
+
+
+  //选择要显示的联动力量
+  selectedLinkageForce(item){
+    this.isGisTopBox = false
+    if(this.LinkageForceDetailInfo.id != item.id){
+      this.clearData()
+      this.LinkageForceDetailInfo = item
+      item.location?this.positionLngLat = item.location:null
+      this.AttachmentArr = JSON.parse(item.relevantInfomationData)
+      if(this.newPositionMarker){
+        this.map.remove(this.newPositionMarker);
+      }
+      console.log('当前点击的li',item)
+      if(item.location && item.location.x){//如果已经标注单位坐标
+        console.log('开始标注')
+        
+        this.map.setCenter([item.location.x,item.location.y]);
+        this.newPositionMarker = new AMap.Marker({
+          position: [item.location.x,item.location.y],
+          content: this.newPositionMarkerContent,
+          offset: new AMap.Pixel(-15, -18)
+        })
+        // 将 markers 添加到地图
+        this.map.add(this.newPositionMarker);
+      }
+    }
+  }
+  //搜索
+  searchList(){
+    this.getAllFireForce()
+  }
+  //重置搜索
+  reset(){
+    this.searchForm = {
+      name:'',
+      integrityNum:''
+    }
+    this.getAllFireForce()
+  }
+  //分页事件
+  chagePage(e){
+    this.PageNumber = e.pageIndex+1
+    this.getAllFireForce()
+  }
+  //js乘法
+  accMul(arg1,arg2,fix) { 
+    if(!parseInt(fix)==fix)
+    {
+        return;
+    }
+     var m=0,s1=arg1.toString(),s2=arg2.toString(); 
+     try{m+=s1.split(".")[1].length}catch(e){} 
+     try{m+=s2.split(".")[1].length}catch(e){}
+     if(m>fix){
+        return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix));
+     }else if(m<=fix){
+         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix);
+     }else{
+        return (arg1*arg2).toFixed(fix).toString();
+     }
+  } 
+  //完整度颜色
+  integrity(width){
+    let _this = this
+    let style:any = {}
+    style.width = width +'%';
+    if(width < 30){
+      style.background = '#FF5D4A'
+    }
+    if(width >= 30 && width < 60){
+      style.background = '#FFDD00'
+    }
+    if(width >= 60){
+      style.background = '#5CD64E'
+    }
+    return style
+  }
+  //删除某条联动力量
+  deleteLinkageForc(item,e){
+    e.stopPropagation()
+    let isDelete = window.confirm(`确定要删除${item.name}吗`)
+    if(isDelete){
+      this.http.delete(`/api/LinkageForces/${item.id}`).subscribe(data => {
+        let config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('删除成功','确定',config);
+        if(item.id == this.LinkageForceDetailInfo.id){
+          this.LinkageForceDetailInfo.linkageForceType = null
+        }
+        this.getAllFireForce()
+      })
+    }
+  }
+  //当前点击tab页面第几个
+  tabIndex:any = 1
+  selectedTab(index){
+    this.tabIndex = index
+  }
+
+  //联动力量详情提交信息
+  LinkageForceDetailInfo:any = {
+    // id:'',//编号
+    linkageForceType:'',
+    name:'',//名称
+    phoneNumber:'',//联系电话
+    faxNumber:'',//传真
+    remark:'',//备注
+    administrativeRegion:'',//行政区
+    address:'',//地址
+    location:{
+      x:'',
+      y:''
+    },
+    contactName:'',//联系人姓名
+    contactTitle:'',//联系人职务
+    contactPhone:'',//联系人电话
+    serviceContent:'',//服务内容
+    resourceRemark:'',//资源说明
+    relevantInfomationData:[]//相关资料
+  }
+
+  //清空表单数据
+  clearData(){
+    this.deletedFile = []//清空相关资料已删除缓存
+    this.AttachmentArr = []//清空相关资料
+    this.positionLngLat = {x:'',y:''}
+    this.atLastPositionLngLat = {x:'',y:''}
+    this.LinkageForceDetailInfo = {
+      // id:'',//编号
+      linkageForceType:'',
+      name:'',//名称
+      phoneNumber:'',//联系电话
+      faxNumber:'',//传真
+      remark:'',//备注
+      administrativeRegion:'',//行政区
+      address:'',//地址
+      location:{
+        x:'',
+        y:''
+      },
+      contactName:'',//联系人姓名
+      contactTitle:'',//联系人职务
+      contactPhone:'',//联系人电话
+      serviceContent:'',//服务内容
+      resourceRemark:'',//资源说明
+      relevantInfomationData:[]//相关资料
+    }
+  }
+  //新增联动力量
+  selectedFireForceTypeIndex:any//新增消防力量名称
+  addLinkageForce(){
+    const dialogRef = this.dialog.open(AddLinkageForce, {
+      data: {},
+      id:'addLinkageForce'
+    });
+    dialogRef.afterClosed().subscribe(
+      data=>{
+        if(typeof data === 'number' && !isNaN(data)){
+          this.clearData()
+          console.log('清空了',this.LinkageForceDetailInfo)
+          this.LinkageForceDetailInfo.linkageForceType = data
+          this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
+          this.map.setCity('上海市');
+
+        }  
+      }
+    )
+  }
+  //保存
+  save(){
+    if(!this.LinkageForceDetailInfo.name){
+      alert('名称必填')
+      return
+    }
+    this.isMasklayer = true
+    //删除一下数据库的文件
+    if(this.deletedFile.length != 0){
+      this.deletedFile.forEach(item => {
+        this.http.delete(`/api/Objects/PlanPlatform/${item.objectName}`).subscribe(data=>{
+          console.log('删除原文件成功')
+        })
+      });
+    }
+
+    this.LinkageForceDetailInfo.location = {x:'',y:''}
+    this.LinkageForceDetailInfo.RelevantInfomationData = JSON.stringify(this.AttachmentArr)
+    if(this.atLastPositionLngLat.x){
+      this.LinkageForceDetailInfo.location.x = this.atLastPositionLngLat.x
+      this.LinkageForceDetailInfo.location.y = this.atLastPositionLngLat.y
+    }else{
+      this.LinkageForceDetailInfo.location = null
+    }
+    this.LinkageForceDetailInfo.relevantInfomationData = JSON.stringify(this.LinkageForceDetailInfo.relevantInfomationData)
+    let body = this.LinkageForceDetailInfo
+    if(this.LinkageForceDetailInfo.id){
+      this.http.put(`/api/LinkageForces/${this.LinkageForceDetailInfo.id}`,body).subscribe((data:any) =>{
+        console.log('修改成功',data)
+        this.isMasklayer = false
+        let config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('修改成功','确定',config);
+        // this.LinkageForceDetailInfo.id = data.id
+        this.getAllFireForce()
+
+      })
+    }else{
+      this.http.post('/api/LinkageForces',body).subscribe((data:any) =>{
+        console.log('创建成功',data)
+        this.isMasklayer = false
+        let config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('保存成功','确定',config);
+        this.LinkageForceDetailInfo = data
+        this.getAllFireForce()
+      })
+    }
+
+   
+  }
+  
+  map:any
+  placeSearch:any//构造地点查询类
+  isMapLabel:boolean = false //是否已经标记坐标
+  newPositionMarkerContent:any  = 
+  '<div class="custom-content-marker">' +
+  '   <img src="/assets/images/定位.png">' +
+  '</div>'
+  newPositionMarkerContentBtn:any = 
+  '<div class="custom-content-marker">' +
+  '   <img src="/assets/images/定位.png">' +
+  '   <div  class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
+  '</div>'
+  //创建地图
+  newPositionMarker:any//坐标实例
+  createMap(){
+    this.map = new AMap.Map('container', {
+      zoom:12
+    })
+    this.map.setCity('上海市');
+    //输入提示
+    var autoOptions = {
+      input: "tipinput"
+    };
+    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
+      let auto = new AMap.AutoComplete(autoOptions);
+      this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
+      auto.on("select", (e)=>{
+        this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
+        this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat}
+        this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点
+      });//注册监听，当选中某条记录时会触发
+
+    });
+
+    if(this.isMapLabel){//如果已经标注单位坐标
+      console.log('已标注单位位置')
+      // this.map.setCenter([this.unitinfo.location.x,this.unitinfo.location.y]);
+      // this.oldPositionMarker = new AMap.Marker({
+      //   position: [this.unitinfo.location.x,this.unitinfo.location.y],
+      //   content: this.newPositionMarkerContent,
+      //   offset: new AMap.Pixel(-15, -18)
+      // })
+      // // 将 markers 添加到地图
+      // this.map.add(this.oldPositionMarker);
+    }else{
+      console.log('未标注单位位置')
+      // this.map.setCity('上海市');
+    }
+  }
+  //点击位置
+  isGisTopBox:boolean = false //
+  searchTitle:any = ''//
+
+  positionLngLat:any = {x:'',y:''}//临时坐标点
+  atLastPositionLngLat:any = {x:'',y:''}//最终坐标点
+  setPosition(){
+    if(!this.isGisTopBox){
+      this.isGisTopBox = true
+      this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
+      let center
+      console.log(789,this.atLastPositionLngLat)
+      if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标
+        console.log(1)
+        center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y]
+      }else if(this.newPositionMarker && !this.atLastPositionLngLat.x && this.LinkageForceDetailInfo.location && this.LinkageForceDetailInfo.location.x){
+        console.log(2)
+        center = [this.LinkageForceDetailInfo.location.x, this.LinkageForceDetailInfo.location.y]
+      }else{
+        console.log(3)
+        center = this.map.getCenter(); //获取当前地图中心位置
+      }
+      this.newPositionMarker = new AMap.Marker({
+        draggable: true,
+        position: center,
+        content: this.newPositionMarkerContentBtn,
+        offset: new AMap.Pixel(-15, -18)
+      });
+      this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
+      this.map.add(this.newPositionMarker);
+      this.isMapLabel = true
+      this.newPositionMarker.on('dragend', (e)=>{
+        this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat}
+      })
+      //点击确定
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        this.newPositionMarker = new AMap.Marker({
+          position: [this.positionLngLat.x,this.positionLngLat.y],
+          content: this.newPositionMarkerContent,
+          offset: new AMap.Pixel(-15, -18)
+        });
+        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
+        this.map.add(this.newPositionMarker);
+        this.positionLngLat = this.atLastPositionLngLat
+      })
+      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ 
+        this.isGisTopBox = false
+        this.map.remove(this.newPositionMarker)
+        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
+          this.map.remove(this.newPositionMarker)
+          this.positionLngLat = {}
+          this.atLastPositionLngLat = {}
+        }else{
+          this.newPositionMarker = new AMap.Marker({
+            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
+            content: this.newPositionMarkerContent,
+            offset: new AMap.Pixel(-15, -18)
+          });
+          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
+          this.map.add(this.newPositionMarker);
+          this.positionLngLat = this.atLastPositionLngLat
+        }
+      })//取消
+    }
+    
+  }
+
+
+
+
+  //上传附件
+  file:any; //上传的文件
+  AttachmentArr:any = []//上传附件地址集合
+  uploadId:any//分块上传id
+  objectName:any
+  progressBarValue:any = 0//分块上传进度
+  isMasklayer:boolean = false//圆圈遮罩层是否打开
+  isMasklayerUploading:boolean = false//上传进度条遮罩层是否打开
+  isMasklayerDownload:boolean = false//下载进度条遮罩层是否打开
+  uploadAttachment(e){
+    console.log('选择的文件',e)
+    this.file = e.target.files[0] || null //上传的文件
+    let file = e.target.files[0] || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    
+    if (file && fileSize<=shardSize) { //上传文件<=5MB时
+      this.isMasklayer = true
+      console.log('file',this.file)
+      let formData = new FormData()
+      formData.append("file",file)
+      //this.selectedFireForce.id 选择的组织机构的id
+      this.http.post(`/api/Objects/PlanPlatform/LinkageForce/${this.LinkageForceDetailInfo.id}`,formData).subscribe((data:any)=>{
+        // this.objectName = data.objectName
+        let obj = {
+          objectName:data.objectName,
+          fileName:data.fileName,
+          fileLength:data.fileLength
+        }
+        this.AttachmentArr.push(obj)
+        this.isMasklayer = false
+        console.log('上传成功',data)
+        let config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传成功','确定',config);
+      })
+    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
+      this.isMasklayerUploading = true
+      let data = {filename: file.name}
+      this.http.post(`/api/NewMultipartUpload/PlanPlatform/LinkageForce/${this.LinkageForceDetailInfo.id}`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
+        console.log('初始化分块上传成功',data)
+        this.objectName = data.objectName
+        this.uploadId = data.uploadId
+        this.subsectionUploading()
+      })
+    }
+  }
+  PartNumberETag:any=[]; //每次返回需要保存的信息
+
+  //开始分段上传
+  async subsectionUploading () {
+    let file = this.file || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
+    for (let i = 0;i < allSlice;i++) { //循环分段上传
+        let start = i * shardSize //切割文件开始位置
+        let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
+        let formData = new FormData()
+        formData.append("file",file.slice(start, end))
+
+        //同步写法实现异步调用
+        let result = await new Promise((resolve, reject) => {
+          // await 需要后面返回一个 promise 对象
+          this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
+              let msg = {
+                "partNumber":data.partNumber || null,
+                "eTag": data.eTag || null}
+              resolve(msg) // 调用 promise 内置方法处理成功
+          })
+        });
+        this.PartNumberETag.push(result)
+        // this.progressBarValue = Number((i/allSlice).toFixed(2))*100
+        this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0)
+        if (this.PartNumberETag.length === allSlice) {
+          this.progressBarValue = 100
+          this.endUploading()}
+    }//for循环
+
+  }
+
+  //完成分块上传
+  endUploading () {
+    let data = this.PartNumberETag
+    let paramsData = {uploadId:this.uploadId}
+    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
+      this.PartNumberETag =[] //清空保存返回的信息
+      let obj = {
+        objectName:this.objectName,
+        fileName:this.file.name,
+        fileLength:this.file.size
+      }
+      this.AttachmentArr.push(obj)
+      this.isMasklayerUploading = false//关闭进度条遮罩层
+      this.progressBarValue = 0//重置进度数
+      let config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('上传成功','确定',config);
+    })
+  }
+
+  //取消分块上传
+  cancelUploading() {
+    this.http.delete(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{
+      this.progressBarValue = 0;
+      this.isMasklayerUploading= false
+      this.PartNumberETag =[] //清空保存返回的信息
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('取消上传成功','确定',config);
+    })
+  }
+
+  //下载
+  download (e) {
+    this.isMasklayerDownload = true //开启下载进度条
+    let file = e //传递过来的文件元数据
+    let fileSize = file.fileLength //下载文件的总大小
+    let shardSize = 3 * 1024 * 1024 //文件大小是否大于10MB
+    if (file && fileSize<=shardSize) { //<=3MB时直接下载
+      this.progressBarValue = 60
+      this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{responseType: 'blob'},).subscribe(data=>{
+        let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1]
+        link.setAttribute("download", fileName);
+        document.body.appendChild(link);
+        link.click();
+        this.isMasklayerDownload = false //关闭下载进度条
+        this.progressBarValue = 0 //初始化进度条
+      })
+    } else if (file && fileSize>shardSize) { //>3MB时分块下载
+      this.blockingDownload(e) //分段下载
+    }
+
+  }
+
+  //分段下载并合并
+  async blockingDownload (e) {
+    let file = e //传递过来的文件元数据
+    let fileSize = file.fileLength //下载文件的总大小
+    let shardSize = 3 * 1024 * 1024 //3MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
+    let allFile:any = [] //所有的file分段
+
+    for (let i=0;i<allSlice;i++) {
+      let start = i * shardSize //每次下载文件开始位置
+      let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
+
+      let result =  await new Promise ((result,reject)=>{
+        this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
+          result(data) }) 
+      })
+      allFile.push(result)
+      // this.progressBarValue = Number((i/allSlice).toFixed(2))*100 //文件进度数
+      this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0)
+      if (allFile.length === allSlice) { //合并文件输出给浏览器
+        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1]
+        link.setAttribute("download", fileName);
+        document.body.appendChild(link);
+        link.click();
+        this.isMasklayerDownload = false //关闭下载进度条
+        this.progressBarValue = 0 //初始化进度条
+      }
+
+    } //for循环结束
+
+  }
+
+  //删除图片
+  deletedFile:any = []
+  deleteFile(item,e){
+    console.log(this.AttachmentArr)
+    e.stopPropagation()
+    let isTrue = window.confirm('确定要删除该文件吗？')
+    if(isTrue){
+      let index
+      this.AttachmentArr.forEach((element,key) => {
+        if(element.objectName == item.objectName){
+          index = key
+        }
+      });
+      this.AttachmentArr.splice(index,1)
+      this.deletedFile.push(item)
+      let config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('删除成功','确定',config);
+    }
+  }
+
+  //点击文件
+  clickFile(item){
+    console.log(item)
+    let suffix = item.fileName.split('.')[item.fileName.split('.').length-1]
+    if(suffix == 'png' || suffix == 'jpg' || suffix == 'JPG'){
+      console.log('这是图片')
+      let dom =  document.getElementById(`viewerjs`)
+      let pObjs = dom.childNodes;
+      let node = document.createElement("img")
+      node.style.display = "none";
+      node.src = "/api/Objects/PlanPlatform/" + item.objectName;
+      node.id = 'img'
+      dom.appendChild(node)
+      setTimeout(() => {
+        let viewer = new Viewer(document.getElementById(`viewerjs`), {
+          hidden:()=>{
+            dom.removeChild(pObjs[0]);
+            viewer.destroy();
+          }
+        });
+        node.click();
+      }, 0);
+    }
+    if(suffix == 'docx' || suffix == 'doc' || suffix == 'pdf'){
+      let config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('暂不支持查看','确定',config);
+    }
+    if(suffix == 'mp4'){
+      const dialogRef = this.dialog.open(ViewDetails2, {//调用open方法打开对话框并且携带参数过去
+        data: {item:item,type:"video"},
+        id:'videodialog2'
+      });
+      dialogRef.afterClosed().subscribe();
+    }
+  }
+
+}
+
+
+
+
+//新增联动力量弹出框
+@Component({
+  selector: 'AddLinkageForce',
+  templateUrl: './addLinkageForce.html',
+  styleUrls: ['./linkage-forces.component.scss']
+})
+export class AddLinkageForce {
+  
+  constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddLinkageForce>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
+
+
+  addList:any = [
+    {id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png'},
+    {id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png'},
+    {id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png'},
+    {id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png'},
+    {id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png'},
+    {id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png'},
+    {id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png'},
+    {id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png'},
+    {id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png'},
+    {id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png'},
+    {id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png'},
+    {id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png'},
+    {id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png'},
+    {id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png'},
+    {id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png'}
+  ]
+  selectedFireForceTypeIndex:any = 0
+  selecteAddType(item,key){
+    this.selectedFireForceTypeIndex = item.id
 
+  }
   ngOnInit(): void {
+
+  }
+
+  confirm(){
+    this.dialogRef.close(this.selectedFireForceTypeIndex)
+  }
+
+}
+
+//查看图片大图和视频
+@Component({
+  selector: 'viewdetails',
+  templateUrl: './viewdetails.html',
+  styleUrls: ['./linkage-forces.component.scss']
+})
+export class ViewDetails2 {
+  // myControl = new FormControl();
+  //注入MatDialogRef，可以用来关闭对话框
+  //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
+  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails2>,@Inject(MAT_DIALOG_DATA) public data) {}
+  Url:string
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+   this.Url = '/api/Objects/PlanPlatform/' + this.data.item.objectName
+  }
+  closeDialog(){
+    this.dialogRef.close();
   }
 
 }

src/app/data-collection/linkage-forces/viewdetails.html

@@ -0,0 +1 @@
+<video autoplay controls  [src]="Url"></video>

src/app/data-collection/water-collection/water-collection.component.html

@@ -52,13 +52,13 @@
                 </ul>
             </div>
             <div class="paginator">
-                <mat-paginator [length]="dataLength" [pageSize]="30" (page)="chagePage($event)"></mat-paginator>
+                <mat-paginator [length]="dataLength" [pageSize]="15" (page)="chagePage($event)"></mat-paginator>
             </div>
         </div>
     </div>
     <div class="mapbox">
         <div class="mapcheckbox">
-            <mat-checkbox color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
+            <mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
         </div>
         <div id="map" class="map" style="overflow: hidden;">
             <div id="container"></div>

src/app/data-collection/water-collection/water-collection.component.ts

@@ -33,10 +33,95 @@ export class WaterCollectionComponent implements OnInit {
     {id:5,name:'90%-100%'}
   ]
   checkBoxList:any[] = [
-    {id:0,name:'消火栓'},
+    {id:0,name:'消火栓',isChecked:false},
-    {id:1,name:'消防水池'},
+    {id:1,name:'消防水池',isChecked:false},
-    {id:2,name:'天然水源'}
+    {id:2,name:'天然水源',isChecked:false}
   ]
+  //勾选水源类型checkbox在地图上显示marker
+  checkBoxChange(){
+    let WaterSourceTypesArr = []
+    this.checkBoxList.forEach(item =>{
+      if(item.isChecked){
+        WaterSourceTypesArr.push(item.id)
+      }
+    })
+    let params:any = {
+      PageSize : 999999,
+      WaterSourceTypes:WaterSourceTypesArr
+    }
+    if(WaterSourceTypesArr.length != 0){//如果勾选了checkbox
+      this.http.get('/api/WaterSources',{params:params}).subscribe((data:any) => {
+        this.createMarker(data.items)
+      })
+    }else{
+      this.cluster.setData([])
+    }
+  }
+  //循环渲染出所有水源markers
+  cluster:any //水源聚合实例
+  createMarker(list){
+    let markerArrcluster = []
+    this.cluster ? this.cluster.setData([]) : null
+    list.forEach((item) => {
+      let image
+      if(item.waterSourceType == 0){//消火栓
+        image = '/assets/waterMarkers/市政消火栓.png'
+      }else if(item.waterSourceType == 1){//消防水池
+        image = '/assets/waterMarkers/方形储水池.png'
+      }else if(item.waterSourceType == 2){//天然水源
+        image = '/assets/waterMarkers/天然水源.png'
+      }
+      // 用于点集合的数组
+      markerArrcluster.push({
+        lnglat : [item.location.x,item.location.y],
+        image : image,
+        data : item
+      })
+    })
+    this.map.plugin(["AMap.MarkerClusterer"],() => {
+      var gridSize = 60
+      var count = markerArrcluster.length;
+      var _renderClusterMarker = function (context) {
+        var factor = Math.pow(context.count / count, 1 / 18);
+        var div = document.createElement('div');
+        var Hue = 180 - factor * 180;
+        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+        div.style.backgroundColor = bgColor;
+        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+        div.style.width = div.style.height = size + 'px';
+        div.style.border = 'solid 1px ' + borderColor;
+        div.style.borderRadius = size / 2 + 'px';
+        div.style.boxShadow = '0 0 5px ' + shadowColor;
+        div.innerHTML = context.count;
+        div.style.lineHeight = size + 'px';
+        div.style.color = fontColor;
+        div.style.fontSize = '14px';
+        div.style.textAlign = 'center';
+        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+        context.marker.setContent(div)
+      };
+      var _renderMarker = (context)=> {
+        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
+        context.marker.setContent(content)
+        var offset = new AMap.Pixel(-12.5, -12.5);
+        context.marker.setOffset(offset)
+      }
+      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+        gridSize: gridSize, // 设置网格像素大小
+        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+        renderMarker: _renderMarker, // 自定义非聚合点样式
+      });
+      this.cluster.on('click',(e)=>{
+        if(e.clusterData.length == 1){
+         
+        }
+      })
+    });
+    
+  }
   ngOnInit(): void {
     this.getAllWaterData()
     setTimeout(() => {
@@ -74,7 +159,7 @@ export class WaterCollectionComponent implements OnInit {
     }
     let params:any = {
       Keyword : this.searchForm.name,
-      PageSize : 30,
+      PageSize : 15,
       PageNumber : this.PageNumber,
       MinIntegrity : MinIntegrity,
       MaxIntegrity : MaxIntegrity

src/app/gis-management/gis-labeling/gis-labeling.component.html

@@ -114,6 +114,7 @@
                 <span>显示范围 : </span>
                 <mat-form-field>
                   <select matNativeControl formControlName="areaUnit" [(ngModel)]="unitAreaDefault">
+                    <option value="-1">全部</option>
                     <option value="0">当前视野范围</option>
                     <option value="200">200米</option>
                     <option value="500">500米</option>
@@ -150,6 +151,7 @@
                 <span>显示范围 : </span>
                 <mat-form-field>
                   <select matNativeControl formControlName="areaWater" [(ngModel)]="waterAreaDefault">
+                    <option value="-1">全部</option>
                     <option value="0">当前视野范围</option>
                     <option value="200">200米</option>
                     <option value="500">500米</option>

src/app/gis-management/gis-labeling/gis-labeling.component.ts

@@ -27,28 +27,14 @@ export class GisLabelingComponent implements OnInit {
     {id:'0',name:'消火栓',selected:false},
     {id:'1',name:'消防水池',selected:false},
     {id:'2',name:'天然水源',selected:false},
-                // {id:'0',name:'单位地上消火栓',selected:false},
-                // {id:'0',name:'单位地下消火栓',selected:false},
-                // {id:'0',name:'市政地上消火栓',selected:false},
-                // {id:'0',name:'消防水池',selected:false},
-                // {id:'0',name:'方形储水池',selected:false},
-                // {id:'0',name:'蓄水池',selected:false},
-                // {id:'0',name:'原型水塔',selected:false},
-                // {id:'0',name:'水库',selected:false},
-                // {id:'0',name:'消防水箱',selected:false},
-                // {id:'0',name:'码头',selected:false},
-                // {id:'0',name:'海洋',selected:false},
-                // {id:'0',name:'河流',selected:false},
-                // {id:'0',name:'湖泊',selected:false},
-                // {id:'0',name:'沟渠',selected:false}
             ]
 
   keyUnitForm : FormGroup//gis右上角重点单位表单
   watertForm : FormGroup//gis右上角水源表单
   selectedUnitList:any = []//选择提交的单位
   selectedWaterList:any = []//选择提交的水源
-  unitAreaDefault:any = '0'//默认单位范围
+  unitAreaDefault:any = '-1'//默认单位范围
-  waterAreaDefault:any = '0'//默认水源范围
+  waterAreaDefault:any = '-1'//默认水源范围
   //获得单位循环出来的checkbox列表（formControl实例）
   get units():any{
     return this.keyUnitForm.get('units')
@@ -156,17 +142,19 @@ export class GisLabelingComponent implements OnInit {
   //重点单位提交
   ketUnitSubmit(value){
     if(this.markers.length == 0){
-      const config = new MatSnackBarConfig();
+      let paramsdata:any = {
-      config.verticalPosition = 'top';
+        PageSize:99999,
-      config.duration = 3000
+        BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
-      this.snackBar.open('请先选择一个单位','确定',config);
+      }
+      this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
+        this.createUnitMarker(data.items)
+      })
     }else if(!this.mapPattern){
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000
       this.snackBar.open('请切换2D模式使用此功能','确定',config);
     }else{
-      // console.log('提交',this.selectedUnit)
       this.circle.setRadius(Number(this.unitAreaDefault))
       this.circle.setCenter(this.markers[0]._position)
       this.circle.setMap(this.map)
@@ -178,14 +166,27 @@ export class GisLabelingComponent implements OnInit {
       }else{
         Distance = Math.abs(lnglat.offset(0, this.unitAreaDefault).lat - this.selectedUnit.location.y) 
       }
-      
+      if(this.unitAreaDefault == '-1'){//如果勾选全部
         let paramsdata:any = {
+          PageSize:99999,
+          BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
+        }
+        this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
+          data.items.forEach((i,index) => {
+            if(i.id == this.selectedUnit.id){
+              data.items.splice(index,1)
+            }
+          })
+          this.createUnitMarker(data.items)
+        })
+      }else{
+        let paramsdata:any = {
+          PageSize:99999,
           Lon : this.selectedUnit.location.x,
           Lat : this.selectedUnit.location.y,
           Distance : Distance,
           BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
         }
-      // console.log(666,paramsdata)
         this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
           data.items.forEach((i,index) => {
             if(i.id == this.selectedUnit.id){
@@ -196,14 +197,12 @@ export class GisLabelingComponent implements OnInit {
         })
       }
     }
+  } 
   //创建单位markers
-  unitMarkerList:any = []
+  unitCluster:any //重点单位点聚合实例
-  unitlabelsLayer:any
   createUnitMarker(list){
-    this.unitlabelsLayer ? this.map.remove(this.unitlabelsLayer) : null
+    let unitMarkerArrcluster = []
-    this.unitMarkerList ? this.map.remove(this.unitMarkerList) : null
+    this.unitCluster ? this.unitCluster.setData([]) : null
-
-    let markerArr = []
     list.forEach((item) => {
       let image
       if(item.buildingTypes[0].name.indexOf('高层') != -1){
@@ -241,46 +240,52 @@ export class GisLabelingComponent implements OnInit {
       }else{
         image = '/assets/images/其他.png'
       }
-      var icon = {
+      // 用于点集合的数组
-        // 图标类型，现阶段只支持 image 类型
+      unitMarkerArrcluster.push({
-        type: 'image',
+        lnglat : [item.location.x,item.location.y],
-        // 图片 url
+        image : image,
-        image: image,
+        data : item
-        // 图片尺寸
+      })
-        size: [32, 32],
+    })
-        // 图片相对 position 的锚点，默认为 bottom-center
+    this.map.plugin(["AMap.MarkerClusterer"],() => {
-        anchor: 'center',
+      var gridSize = 60
-      };
+      var count = unitMarkerArrcluster.length;
-      var text = {
+      var _renderClusterMarker = function (context) {
-        // 要展示的文字内容
+        var factor = Math.pow(context.count / count, 1 / 18);
-        content: item.name,
+        var div = document.createElement('div');
-        // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
+        var Hue = 180 - factor * 180;
-        direction: 'bottom',
+        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-        // 在 direction 基础上的偏移量
+        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-        offset: [-3, -3],
+        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-        // 文字样式
+        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-        style: {
+        div.style.backgroundColor = bgColor;
-            // 字体大小
+        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-            fontSize: 12,
+        div.style.width = div.style.height = size + 'px';
-            // 字体颜色
+        div.style.border = 'solid 1px ' + borderColor;
-            fillColor: '#22886f',
+        div.style.borderRadius = size / 2 + 'px';
-            // 描边颜色
+        div.style.boxShadow = '0 0 5px ' + shadowColor;
-            strokeColor: '#fff',
+        div.innerHTML = context.count;
-            // 描边宽度
+        div.style.lineHeight = size + 'px';
-            strokeWidth: 2,
+        div.style.color = fontColor;
-        }
+        div.style.fontSize = '14px';
+        div.style.textAlign = 'center';
+        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+        context.marker.setContent(div)
       };
-      var labelMarker = new AMap.LabelMarker({
+      var _renderMarker = (context)=> {
-        name: item.name, // 此属性非绘制文字内容，仅最为标识使用
+        var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
-        position: [item.location.x,item.location.y],
+        var offset = new AMap.Pixel(-15, -25);
-        zIndex: 16,
+        context.marker.setContent(content)
-        // 将第一步创建的 icon 对象传给 icon 属性
+        context.marker.setOffset(offset)
-        icon: icon,
+      }
-        // 将第二步创建的 text 对象传给 text 属性
+      this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, {
-        text: text,
+        gridSize: gridSize, // 设置网格像素大小
+        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+        renderMarker: _renderMarker, // 自定义非聚合点样式
       });
-      labelMarker.on('click', (e)=>{
+      this.unitCluster.on('click',(e)=>{
-        // console.log(item)
+        if(e.clusterData.length == 1){
+          let item = e.clusterData[0].data
           let markerContent = 
           `<div style="font-size: 14px" id="gispopupbox">
             <div style="color: #0080FF;"><span style="margin-left:8px">${item.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${item.address}</label> </div>
@@ -329,88 +334,168 @@ export class GisLabelingComponent implements OnInit {
           this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(item) })//三维场景点击事件
           this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(item) })//查看预案点击事件	
           this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(item) })//分享点击事件
-      });
+        }
-      markerArr.push(labelMarker)
       })
-    this.unitlabelsLayer = new AMap.LabelsLayer({
-      zooms: [3, 20],
-      zIndex: 1000,
-      // 该层内标注是否避让
-      collision: false,
-      // 设置 allowCollision：true，可以让标注避让用户的标注
-      // allowCollision: true,
     });
-    this.unitlabelsLayer.add(markerArr);
-    this.map.add(this.unitlabelsLayer);//增加图层
     
-    this.unitMarkerList = markerArr
-    this.map.add(this.unitMarkerList);//将markers添加到图层上
   }
-  //取消单位markers
+  //取消显示单位
-  clearUnitMarker(){
+  resetUnit(){
-    this.map.remove(this.unitlabelsLayer)
+    this.keyUnitForm.reset()
-    this.map.remove(this.unitMarkerList);
+    this.keyUnitForm.controls.areaUnit.setValue('-1')
+    this.map.remove(this.circle)
+    this.unitCluster.setData([])
   }
-  
   //水源提交
   waterSubmit(value){
     if(this.markers.length == 0){
-      const config = new MatSnackBarConfig();
+      if(this.selectedWaterList.length != 0){//勾选了水源类型
+        let paramsdata:any = {
+          PageSize:99999,
+          WaterSourceTypes : this.selectedWaterList
+        }
+        this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
+          console.log('所有水源',data)
+          this.createwaterMarker(data.items)
+        })
+      }else{
+        let config = new MatSnackBarConfig();
         config.verticalPosition = 'top';
         config.duration = 3000
-      this.snackBar.open('请先选择一个单位','确定',config);
+        this.snackBar.open('请勾选想要显示的水源类型','确定',config);
+      }  
     }else if(!this.mapPattern){
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000
       this.snackBar.open('请切换2D模式使用此功能','确定',config);
     }else{
-      this.createwaterMarker()
       this.circleofwater.setRadius(Number(this.waterAreaDefault))
       this.circleofwater.setCenter(this.markers[0]._position)
       this.circleofwater.setMap(this.map)
+      let Distance
+      let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
+      
+      //如果选择当前的视野范围算出查询半径
       if(this.waterAreaDefault == '0'){
         this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
+        Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) 
+      }else{
+        Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.selectedUnit.location.y) 
       }
+      //如果选择全部
+      if(this.waterAreaDefault == '-1'){
+        if(this.selectedWaterList.length != 0){
+          let paramsdata:any = {
+            PageSize:99999,
+            WaterSourceTypes : this.selectedWaterList
           }
-  }
+          this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
-  waterIconList = []; //展示的水源图标
+            console.log('所有水源',data)
-  //循环渲染出所有水源markers
+            this.createwaterMarker(data.items)
-  createwaterMarker(){
-    this.waterIconList.forEach((element,index) => { this.map.remove(element) });  //先删除所有标点
-    this.waterIconList = []
-    let waterType = this.selectedWaterList //筛选出展示的 水源类型
-    if (waterType.length) {
-      let x = JSON.parse( JSON.stringify(this.markers[0]._position[0]) ) //中心标注的 坐标
-      let y = JSON.parse( JSON.stringify(this.markers[0]._position[1]) ) //中心标注的 坐标
-      let positonList = [0.015, -0.035, 0.045, 0.061, -0.013, 0.029]
-      // 创建一个 Icon
-      let startIcon = new AMap.Icon({
-        image: '../../../assets/images/fireHydrant.png',
-        imageSize: new AMap.Size(20, 20),
-      });
-      positonList.forEach((item,index)=>{
-        let marker = new AMap.Marker({
-          map: this.map,
-          position: index%2==0? JSON.parse( JSON.stringify([x+item,y-item]) ) : JSON.parse( JSON.stringify([x-item,y+item]) ),
-          icon: startIcon,
-        });
-        this.waterIconList.push(marker)
           })
-      positonList.forEach((item,index)=>{
+        }else{
-        let marker = new AMap.Marker({
+          let config = new MatSnackBarConfig();
-          map: this.map,
+          config.verticalPosition = 'top';
-          position: index%2==0? JSON.parse( JSON.stringify([x+item,y+item]) ) : JSON.parse( JSON.stringify([x-item,y-item]) ),
+          config.duration = 3000
-          icon: startIcon,
+          this.snackBar.open('请勾选想要显示的水源类型','确定',config);
-        });
+        }
-        this.waterIconList.push(marker)
+       
+      }else{
+        if(this.selectedWaterList.length != 0){
+          let paramsdata:any = {
+            PageSize:99999,
+            Lon : this.selectedUnit.location.x,
+            Lat : this.selectedUnit.location.y,
+            Distance : Distance,
+            WaterSourceTypes :this.selectedWaterList
+          }
+          this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
+            console.log('所有水源',data)
+            this.createwaterMarker(data.items)
           })
-    } else {
+        }else{
-      const config = new MatSnackBarConfig();
+          let config = new MatSnackBarConfig();
           config.verticalPosition = 'top';
           config.duration = 3000
-      this.snackBar.open('请选择水源类型','确定',config);
+          this.snackBar.open('请勾选想要显示的水源类型','确定',config);
+        }
+      }
+    }
+  }
+   //取消显示水源
+  resetWater(){
+    this.watertForm.reset()
+
+    this.watertForm.controls.areaWater.setValue('-1')
+    
+    this.map.remove(this.circleofwater)
+    this.waterCluster.setData([])
   }
+  //循环渲染出所有水源markers
+  waterCluster:any //水源聚合实例
+  createwaterMarker(list){
+    let waterMarkerArrcluster = []
+    this.waterCluster ? this.waterCluster.setData([]) : null
+    list.forEach((item) => {
+      let image
+      if(item.waterSourceType == 0){//消火栓
+        image = '/assets/waterMarkers/市政消火栓.png'
+      }else if(item.waterSourceType == 1){//消防水池
+        image = '/assets/waterMarkers/方形储水池.png'
+      }else if(item.waterSourceType == 2){//天然水源
+        image = '/assets/waterMarkers/天然水源.png'
+      }
+      // 用于点集合的数组
+      waterMarkerArrcluster.push({
+        lnglat : [item.location.x,item.location.y],
+        image : image,
+        data : item
+      })
+    })
+    this.map.plugin(["AMap.MarkerClusterer"],() => {
+      var gridSize = 60
+      var count = waterMarkerArrcluster.length;
+      var _renderClusterMarker = function (context) {
+        var factor = Math.pow(context.count / count, 1 / 18);
+        var div = document.createElement('div');
+        var Hue = 180 - factor * 180;
+        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+        div.style.backgroundColor = bgColor;
+        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+        div.style.width = div.style.height = size + 'px';
+        div.style.border = 'solid 1px ' + borderColor;
+        div.style.borderRadius = size / 2 + 'px';
+        div.style.boxShadow = '0 0 5px ' + shadowColor;
+        div.innerHTML = context.count;
+        div.style.lineHeight = size + 'px';
+        div.style.color = fontColor;
+        div.style.fontSize = '14px';
+        div.style.textAlign = 'center';
+        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+        context.marker.setContent(div)
+      };
+      var _renderMarker = (context)=> {
+        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
+        var offset = new AMap.Pixel(-12.5, -12.5);
+        context.marker.setContent(content)
+        context.marker.setOffset(offset)
+      }
+      this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
+        gridSize: gridSize, // 设置网格像素大小
+        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+        renderMarker: _renderMarker, // 自定义非聚合点样式
+      });
+      this.waterCluster.on('click',(e)=>{
+        if(e.clusterData.length == 1){
+         
+        }
+      })
+    });
+    
   }
 
   //计算两地距离
@@ -442,24 +527,9 @@ export class GisLabelingComponent implements OnInit {
     }
   }
 
-  //取消显示单位
-  resetUnit(){
-    this.keyUnitForm.reset()
-    this.keyUnitForm.controls.areaUnit.setValue('0')
-    this.map.remove(this.circle)
-    this.clearUnitMarker()//取消显示单位markers
-    // console.log('取消')
-  }
 
-  //取消显示水源
+
-  resetWater(){
+ 
-    this.waterIconList.forEach((element,index) => { this.map.remove(element) });  //先删除所有标点
-    this.waterIconList = []
-    this.watertForm.reset()
-    this.watertForm.controls.areaWater.setValue('0')
-    this.map.remove(this.circleofwater)
-    // console.log('取消')
-  }
 
   //右上角点击每一个title
   clickTitle(index){
@@ -482,15 +552,6 @@ export class GisLabelingComponent implements OnInit {
   loadChange(e){
     e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer);
   }
-  // floorLayer =  new AMap.Buildings({
-  //   zooms: [16, 18],
-  //   zIndex: 10,
-  //   heightFactor: 2 //2倍于默认高度，3D下有效
-  // })
-  //楼层图层
-  // floorChange(e){
-  //   e.checked ? this.map.add(this.floorLayer) : this.map.remove(this.floorLayer);
-  // }
   
   @ViewChild( 'appLeft',{static: false} ) appLeft:any //子组件
   leftDivState:boolean = false; //左侧工作区显示隐藏
@@ -556,19 +617,6 @@ export class GisLabelingComponent implements OnInit {
     that.map.setCity('上海市');
     AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],function () {
     that.mouseTool=new AMap.MouseTool(that.map);
-      /* that.measureDistance = new AMap.RangingTool(that.map, rulerOptions); //测距离
-      that.measureArea = new AMap.MouseTool(that.map); //侧面积 */
-     /*  that.measureDistance.on('addnode',function(e){ //监听测距离 标点事件
-        that.distanceList.push(e.marker)
-      })
-      that.measureDistance.on('end',function(e){ //监听测距离 连线事件
-        that.distanceList.push(e.polyline)
-      }) */
-      /* that.mouseTool.on("rightclick",function(e){ 
-        if(this.mouseTool.eventsList[1]==undefined){
-          alert("000")
-        }
-      }) */
     });
 
   }
@@ -1093,7 +1141,6 @@ export class LookPlanDialog {
     }
     this.http.get("/api/PlanComponents",{params:paramsData}).subscribe((data:any)=>{
       this.allPlanComponents = data.items
-      // console.log(this.allPlanComponents)
     })
   }
   //查看预案
@@ -1137,7 +1184,6 @@ export class LookPlanDialog {
     dialogRef.afterClosed().subscribe(
       data=>{
         if(data){
-          // console.log(123,data)
           this.downloadFileName = data.fileName
           this.download = data
           this.downloadFile()

src/app/key-unit/edit-plan-info/edit-plan-info.component.html

@@ -7,52 +7,57 @@
             <app-basicinfo></app-basicinfo>
         </ng-template>
     </mat-tab>
-    <mat-tab label="2.平面图">
+    <mat-tab label="2.总平面图">
         <ng-template matTabContent>
           <app-collection-tools-plan></app-collection-tools-plan>
         </ng-template>
     </mat-tab>
-    <mat-tab label="3.四周毗邻">
+    <mat-tab label="3.平面图">
+      <ng-template matTabContent>
+        <app-collection-tools-building></app-collection-tools-building>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="4.四周毗邻">
       <ng-template matTabContent>
         <app-allaround></app-allaround>
       </ng-template>
     </mat-tab>
-    <mat-tab label="4.消防设施">
+    <mat-tab label="5.消防设施">
       <ng-template matTabContent>
         <app-fire-fighting-device></app-fire-fighting-device>
       </ng-template>
     </mat-tab>
-    <mat-tab label="5.重点部位">
+    <mat-tab label="6.重点部位">
         <ng-template matTabContent>
             <app-key-site></app-key-site>
         </ng-template>
     </mat-tab>
-    <mat-tab label="6.功能分区">
+    <mat-tab label="7.功能分区">
         <ng-template matTabContent>
            <app-function-division></app-function-division>
         </ng-template>
     </mat-tab>
-    <mat-tab label="7.行车路线">
+    <mat-tab label="8.行车路线">
       <ng-template matTabContent>
          <app-router-gis></app-router-gis>
       </ng-template>
     </mat-tab>
-    <mat-tab label="8.周边水源">
+    <mat-tab label="9.周边水源">
         <ng-template matTabContent>
           <app-water-road></app-water-road>
         </ng-template>
     </mat-tab>
-    <mat-tab label="9.实景图">
+    <mat-tab label="10.实景图">
         <ng-template matTabContent>
            <app-realistic-picture></app-realistic-picture>
         </ng-template>
     </mat-tab>
-    <mat-tab label="10.上传CAD">
+    <mat-tab label="11.上传CAD">
         <ng-template matTabContent>
             <app-uploading-cad></app-uploading-cad>
         </ng-template>
     </mat-tab>
-    <!-- <mat-tab label="11.unity平面图">
+    <!-- <mat-tab label="12.unity平面图">
       <ng-template matTabContent>
         <iframe id="main" src="/unityApp2Basic/index.html" name="unityApp" frameborder="0" width="96%" height="100%" style="margin-left: 2%;"></iframe>
       </ng-template>

src/app/key-unit/view-unit-details/view-unit-details.component.html

@@ -4,52 +4,57 @@
             <app-basicinfo-look></app-basicinfo-look>
         </ng-template>
     </mat-tab>
-    <mat-tab label="2.平面图">
+    <mat-tab label="2.总平面图">
         <ng-template matTabContent>
             <app-collection-tools-plan></app-collection-tools-plan>
         </ng-template>
     </mat-tab>
-    <mat-tab label="3.四周毗邻">
+    <mat-tab label="3.平面图">
+      <ng-template matTabContent>
+        <app-collection-tools-building></app-collection-tools-building>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="4.四周毗邻">
         <ng-template matTabContent>
             <app-allaround></app-allaround>  
         </ng-template>
     </mat-tab>
-    <mat-tab label="4.消防设施">
+    <mat-tab label="5.消防设施">
         <ng-template matTabContent>
             <app-fire-fighting-device-look></app-fire-fighting-device-look>
         </ng-template>
     </mat-tab>
-    <mat-tab label="5.重点部位">
+    <mat-tab label="6.重点部位">
         <ng-template matTabContent>
             <app-key-site-look></app-key-site-look>
         </ng-template>
     </mat-tab>
-    <mat-tab label="6.功能分区">
+    <mat-tab label="7.功能分区">
         <ng-template matTabContent>
             <app-function-division-look></app-function-division-look>
         </ng-template>
     </mat-tab>
-    <mat-tab label="7.行车路线">
+    <mat-tab label="8.行车路线">
       <ng-template matTabContent>
          <app-router-gis></app-router-gis>
       </ng-template>
     </mat-tab>
-    <mat-tab label="8.周边水源">
+    <mat-tab label="9.周边水源">
         <ng-template matTabContent>
           <app-water-road></app-water-road>
         </ng-template>
     </mat-tab>
-    <mat-tab label="9.实景图">
+    <mat-tab label="10.实景图">
         <ng-template matTabContent>
            <app-realistic-picture-look></app-realistic-picture-look>
         </ng-template>
     </mat-tab>
-    <mat-tab label="10.上传CAD">
+    <mat-tab label="11.上传CAD">
         <ng-template matTabContent>
             <app-uploading-cad-look></app-uploading-cad-look>
         </ng-template>
     </mat-tab>
-    <!-- <mat-tab label="11.unity平面图">
+    <!-- <mat-tab label="12.unity平面图">
       <ng-template matTabContent>
         <iframe id="main" src="/unityApp2Basic/index.html" name="unityApp" frameborder="0" width="96%" height="100%" style="margin-left:2%;"></iframe>
       </ng-template>

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

@@ -0,0 +1,24 @@
+<div class="functionalDomainContent">
+  <div mat-dialog-title>
+    <label *ngIf="!data.parentId">新建处置节点</label>
+    <label *ngIf="data.parentId">新建节点</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required ngModel placeholder="名称">
+      </mat-form-field>
+    </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-building/addPlaneFigure.html

@@ -0,0 +1,38 @@
+<div class="functionalDomainContent">
+  <div mat-dialog-title>
+    <label *ngIf="!data.isBuilding">新建平面图</label>
+    <label *ngIf="data.isBuilding">新建楼层/区域</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required ngModel placeholder="名称">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin" *ngIf="data.isBuilding">
+      <mat-checkbox name="isRefugeStorey"  [(ngModel)]="checked">是否为避难层</mat-checkbox>
+    </div>
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="area" type="number" required ngModel placeholder="面积 (平方米)">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin">
+      <textarea name="details" ngModel placeholder="详情"></textarea>
+    </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-building/collection-tools.component.html

@@ -0,0 +1,384 @@
+<div class="content">
+  <!-- header头部 -->
+  <div class="header">
+    <button mat-button (click)="toggle()">
+      <mat-icon style="vertical-align: middle; color: #279FFF;">toc</mat-icon>
+    </button>
+    <button mat-button (click)="toggle2()">
+      <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
+    </button>
+
+    <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
+      基本信息名称
+      <mat-icon>visibility</mat-icon>
+    </span>
+  
+    <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
+      复制<mat-icon>library_books</mat-icon>
+    </button>
+
+    <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
+      粘贴<mat-icon>screen_share</mat-icon>
+    </button>
+
+    <span class="rightSave">
+      <!-- <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
+      <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern && isediticon">create</mat-icon> -->
+      <label title="保存" (click)="saveSite()"><mat-icon>description</mat-icon>保存</label>
+    </span>
+  </div>
+
+  <!-- 头部操作栏 -->
+  <div class="headerOperate">
+    <button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn"
+      [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
+      <span>{{item.name}}</span>
+      <span class="editdeletebtn" *ngIf="isEditPattern && pattern">
+        <mat-icon (click)="editBuilding($event,item)"
+          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>
+      </span>
+    </button>
+    <button mat-button (click)="createBuilding()" *ngIf="isEditPattern && pattern">
+      <span style="font-size: 24px;">+</span>
+    </button>
+  </div>
+
+  <!--功能区 -->
+  <div class="functionalDomain">
+    <div class='functionalDomainContent' id="functionalDomainContent">
+
+      <!-- H5Canvas -->
+      <app-working-area #canvas [init]='this'></app-working-area>
+      <!-- H5Canvas -->
+      <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="planarGraph">
+          <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
+            <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
+            <label class="overflowText" style="font-weight: 550;">平面图</label>
+            <label class="hover" *ngIf="isEditPattern && pattern">
+              <mat-icon (click)='foundPanel($event)'>add</mat-icon>
+            </label>
+          </div>
+          <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" style="display:inline-block; max-width: 160px;"><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>
+              </a>
+              <a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" >
+                <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
+                <img src="../../../assets/images/upload.jpg">
+              </a>
+              <!-- 右边定位操作栏 -->
+              <div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();">
+                <p class="functionButton">
+                  <mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon>
+                  <mat-icon class="functionIcon" title="删除" (click)="deletePlaneData(item)">delete</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon" title="旋转底图" (click)='revolveImg(item)'>cached</mat-icon>
+                  <mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon>
+                </p>
+              </div>
+              <!-- 右边定位操作栏 -->
+            </div>
+          </div>
+        </div>
+
+        <!-- 素材库 -->
+        <div id="materialBank" *ngIf="isEditPattern" [ngClass]="{'selectEditMode': pattern}">
+          <div class="planarGraphHeader" (click)='toggleMaterial()'>
+            <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
+            <label class="overflowText" style="font-weight: 550;">素材库</label>
+          </div>
+          <div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
+            <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
+              <mat-expansion-panel (opened)='opened(item)'>
+                <mat-expansion-panel-header>
+                  <label class="text">{{item.name}}</label>
+                </mat-expansion-panel-header>
+
+                <div class="panelLibraryFlex">
+                  <div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
+                    (click)='selectImg(item,items,key)'
+                    [ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
+                    <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
+                    <p class="overflowText">{{items.name}}</p>
+                  </div>
+                </div>
+
+              </mat-expansion-panel>
+            </mat-accordion>
+          </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;">
+              <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="planIconDiv">
+                  <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 -->
+        <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
+        <!-- 属性 -->
+        <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;background-color: white;">
+          <div class="title">
+            <div>
+              <span style="user-select: none">属性</span>
+            </div>
+          </div>
+          <!-- 平面图属性 -->
+          <div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
+            <p>面积(平方米)</p>
+            <div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
+            <p>详情</p>
+            <div class="siteproperty_size">
+              {{canvasData.selectStorey.details}}
+            </div>
+          </div>
+          <!-- 素材属性 -->
+          <div class="assetsproperty" style="user-select: none"  *ngIf="isShowProperty && !isShowAttribute">
+            <h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
+
+            <div *ngIf="canvasAssetObj.InteractiveMode == 0">
+              <p>宽度(像素)</p>
+              <input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              <p>高度(像素)</p>
+              <input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              <p>角度</p>
+              <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
+                <input type="number" class="smallinput" [(ngModel)]="sliderValue"
+                  oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                <mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
+                  [(ngModel)]="sliderValue" (change)="assetAngleIunput()"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></mat-slider>
+              </div>
+            </div>
+            <!-- 如果是多点连线 -->
+            <div *ngIf="canvasAssetObj.InteractiveMode == 1 || canvasAssetObj.InteractiveMode == 3">
+              <p>厚度</p>
+              <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
+                <input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
+                  oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
+                  [(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></mat-slider>
+              </div>
+            </div>
+
+            <p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
+            <div>
+              <input class="input" [(ngModel)]="isHighLight" type="checkbox"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              <span style="font-size: 14px;">选中高亮</span>
+            </div>
+            <div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
+              <div class="colorBigTemplateDiv">
+                <span>颜色</span>
+                <div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
+
+                </div>
+              </div>
+              <div class="colorDiv" *ngIf="isEditPattern && pattern && canvasAssetObj.GameMode == 0"> 
+                <ul>
+                    <li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
+                </ul>
+              </div>
+              <span style="color: #9c9fa5;font-size: 14px;">透明度</span>
+              <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
+                [(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></mat-slider>
+              <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
+            </div>
+            <div *ngFor="let item of PropertyInfos;index as key ">
+              <!-- 单行文本 -->
+              <div *ngIf="item.PropertyType == 0">
+                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                <input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              </div>
+              <!-- 多行文本 -->
+              <div *ngIf="item.PropertyType == 1">
+                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                <textarea class="textarea" name="" id=""  [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></textarea>
+              </div>
+              <!-- 数值 -->
+              <div *ngIf="item.PropertyType == 2">
+                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                <input type="number" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              </div>
+              <!-- 图片数量 -->
+              <div *ngIf="item.PropertyType == 4" style="height: 140px;">
+                <div style="position: relative;width: 100%;height: 21px;margin: 1px 0;">
+                  <p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p>
+                  <span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span>
+                  <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" *ngIf="isImgNumCss" accept="image/*" (change)="selectFile($event)" type="file" style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;">
+                  <div style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;" (click)="imgNumBeyond()">添加</div>
+                  
+                  
+                  <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;" class="swiper-container">
+                    <div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}">
+                      <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div>
+                    </div>
+                    <!-- 如果需要导航按钮 -->
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                    <span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;" *ngIf="isEditPattern">
+                      <mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <!-- 方向 -->
+              <div *ngIf="item.PropertyType == 5" class="selectDiv">
+                <p style="display: inline-block;">{{item.PropertyName}}</p>
+                <select (change)="direction(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                  <option value ="0" [selected]="item.PropertyValue =='0'">东</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">西</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">南</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">北</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
+                  <option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
+                  <option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
+                  <option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
+                </select>
+              </div>
+              <!-- 布尔值 是1或否0 -->
+              <div *ngIf="item.PropertyType == 6">
+                <p>{{item.PropertyName}}</p>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == '1'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == '0'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
+              </div>
+              <!-- 供给区域 -->
+              <div *ngIf="item.PropertyType == 7" class="selectDiv">
+                <p style="display: inline-block;">{{item.PropertyName}}</p>
+                <select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                  <option value ="0" [selected]="item.PropertyValue =='0'">全部</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">高区</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">中区</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">低区</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">高中区</option>
+                  <option value ="5" [selected]="item.PropertyValue =='5'">高低区</option>
+                  <option value ="6" [selected]="item.PropertyValue =='6'">中低区</option>
+                </select>
+              </div>
+              <!-- 供给类型 -->
+              <div *ngIf="item.PropertyType == 8" class="selectDiv">
+                <p style="display: inline-block;">{{item.PropertyName}}</p>
+                <select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                  <option value ="0" [selected]="item.PropertyValue =='0'">消火栓</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">喷淋</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">水幕</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">泡沫</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">消防</option>
+                </select>
+              </div>
+          </div>
+        </div>
+        
+        </div>
+        <!-- 消防要素 -->
+        <div id="firecategories" class="firecategories" style="height: 50%;">
+          <!-- 素材属性div鼠标拖动div -->
+          <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></div>
+          
+          <div class="title">
+            <div>
+              <span style="user-select: none">消防要素</span>
+            </div>
+          </div>
+
+          <div class="firecategoriesTree">
+            <!-- 消防列表树写在这里 -->
+            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList  [cdkDropListData]="dataSource" (cdkDropListDropped)="drop($event)">
+              
+              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
+                <button mat-icon-button disabled></button>
+                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  {{node.name}}      
+                </span> 
+                <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
+                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+              </mat-tree-node>
+            
+            
+              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
+                <button mat-icon-button 
+                        matTreeNodeToggle
+                        [attr.aria-label]="'toggle ' + node.name">
+                  <mat-icon class="mat-icon-rtl-mirror">
+                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                  </mat-icon>
+                </button>
+                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  {{node.name}}      
+                </span>   
+                <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
+                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+              </mat-tree-node>
+             
+            </mat-tree>
+          </div>
+        </div>
+      </div>
+
+      <div id="bottomDiv" class="bottomCss" *ngIf="!pattern">
+        <div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
+        <div class="title">
+          <div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
+            节点详情
+          </div>
+          <div (click)="attent()" [ngClass]="{'detailsAndattentBtn': !detailsAndattentBtn}">
+            注意事项
+          </div>
+        </div>
+        <div class="body">
+          <textarea [disabled]="!isEditPattern" *ngIf="detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.description"></textarea>
+          <textarea [disabled]="!isEditPattern" *ngIf="!detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.notes"></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,450 @@
+@import './panel.scss';
+.icongray{
+  color: #D9D0DC;
+}
+.content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 1px;
+  display: flex;
+  flex-direction: column;
+
+  .buildingbtnchecked{
+    background-color: #34A6FD;
+    color: white;
+  }
+}
+
+//header头部
+.header {
+  position: relative;
+  flex: 5%;
+  display: flex;
+  align-items:center;
+  min-height: 40px;
+  background-color: #fff;
+  .marginLeftRight {
+    margin: 0 8px;
+    font-size: 16px;
+    user-select: none;
+    cursor: pointer;
+    .mat-icon { vertical-align: middle; font-size: 24px; }
+  }
+  .copytobutn{
+    width: 60px;
+    min-width: 60px;
+    display: flex;
+    justify-content: center;
+  }
+  span{
+    height: 24px;
+    line-height: 24px;
+  }
+  .patternSwitch{
+    position: absolute;
+    right: 140px;
+    span{
+      font-size: 18px;
+      cursor: pointer;
+      margin: 0 3px;
+      display: inline-block;
+      border: 1px solid gray;
+      border-radius: 3px;
+      padding: 0 5px;
+    }
+    .selectedPattern{
+      background-color: #2196f3;
+      color: white;
+    }
+  }
+  .rightSave {
+    cursor: pointer;
+    position: absolute;
+    right: 60px;
+    label { vertical-align: middle; color: #279FFF; }
+  }
+}
+
+//头部操作栏
+.headerOperate {
+  img {
+    width: 24px; 
+    height: 24px;
+    vertical-align: middle;
+    margin-left: 1px;
+  }
+  span{
+    font-size: 18px;
+  }
+  flex: 5%;
+  display: flex;
+  align-items:center;
+  min-height: 40px;
+  box-sizing: border-box;
+  margin: 3px 0;
+  background-color: white;
+  button{
+    border: 0.5px solid rgb(208, 211, 214);
+    margin: 0 2px;
+  }
+  .editdeletebtn{
+    display: none;
+  }
+  .bigeditdeletebtn:hover{
+    .editdeletebtn{
+      display: inline-block;
+    }
+  }
+}
+
+//功能区
+// icon统一样式
+.mat-icon {
+  cursor:pointer;
+  vertical-align: middle;
+}
+//左右两侧功能栏 统一样式
+.publicCss {
+  border-radius: 5px;
+  position: absolute;
+  height: 100%;
+  top: 0;
+}
+.functionalDomain {
+  flex: 90%;
+  overflow: hidden;
+  .functionalDomainContent {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .functionalDomainLeft {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    margin-left: 0px;
+    transition: margin-left 0.5s;
+    min-width: 235px;
+    border: 1px solid #E6EAEE;
+    width: 235px;
+    left: 0;
+    z-index: 111;
+    .leftDragDiv{
+      position: absolute;
+      right: 0;
+      height: 100%;
+      width: 3px;
+      z-index: 1000;
+      cursor: e-resize;
+    }
+  }
+  .functionalDomainRight {
+    z-index: 1001;
+    margin-right: 0px;
+    transition:  margin-right 0.5s;
+    border: 1px solid #464646;
+    width: 235px;
+    right: 0;
+    
+  }
+    //右边导航栏显示隐藏
+  .togglePanel2 {
+    margin-right: -2000px;
+    transition:  margin-right 1s;
+  }
+  //左侧导航栏显示隐藏
+  .togglePanel {
+    margin-left: -2000px;
+    transition: margin-left 1s;
+  }
+
+}
+
+//右边操作栏
+.title{
+  width: 100%;
+  height: 35px;
+  background-color: #464646;
+  div{
+    width: 50%;
+    height: 35px;
+    line-height: 35px;
+    background-color: #595959;
+    border-radius: 5px;
+    span{
+      color: white;
+      font-size: 14px;
+      font-weight: 400;
+      padding-left: 5px;
+    }
+  }
+}
+
+
+//右侧属性
+.property{
+  display: flex;
+  flex-flow: column;
+  .siteproperty{
+    height: 100%;
+    overflow-y: auto;
+    p{
+      color: #9c9fa5;
+      padding-left: 5px;
+    }
+    .siteproperty_size{
+      background-color: #e3e3e3;
+      width: 93%;
+      margin: 0 auto;
+      border-radius: 3px;
+      min-height: 21px;
+    }
+    .rightAttribute{
+      width: 12%;
+      height: 99.5%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      border: 2px solid #464646;
+    }
+  }
+  .assetsproperty{
+    overflow-y: auto;
+    height: 100%;
+    p{
+      color: #9c9fa5;
+      margin:1px 0 3px 8px;
+      font-size: 14px;
+    }
+    span{
+      font-size: 15px;
+    }
+    input{
+      height: 18px;
+    }
+    .biginput{
+      display: block;
+      width: 88%;
+      margin: 0 auto;
+    }
+    .smallinput{
+      display: block;
+      width: 19%;
+      margin-left: 8px;
+    }
+    .textarea{
+      display: block;
+      width: 88%;
+      height: 50px;
+      margin: 0 auto;
+    }
+    .swiper-button-next{
+      right: 6px;
+    }
+    .swiper-button-prev{
+      left: 6px;
+    }
+    .swiper-container{
+      // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
+      // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
+      --swiper-navigation-size:20px;/* 设置按钮大小 */
+    }
+    .hoverred:hover{
+      color: rgb(187, 28, 28);
+    }
+    .selectDiv{
+      height: 21px;
+      position: relative;
+      margin-bottom: 5px;
+      select{
+        width: 98px;
+        height: 22px;
+        vertical-align: middle;
+        position: absolute;
+        right: 10px;
+        top: 1px;
+        border: 1px solid rgb(208, 211, 214);
+        border-radius: 2px;
+      }
+    }
+    .colorBigDiv{
+      width: 88%;
+      margin-left: 8px;
+      .colorBigTemplateDiv{
+        span{
+          color: #9c9fa5;
+          font-size: 14px;
+          height: 26px;
+          line-height: 26px;
+        }
+        .colorTemplateDiv{
+          width: 65%;
+          height: 22px;
+          display: inline-block;
+          vertical-align: middle;
+          margin-left: 26px;
+        }
+      }
+      
+      .colorDiv{
+        .colorLi{
+          width: 24px;
+          height: 24px;
+          list-style: none;
+          float: left;
+          border: 2px solid white;
+        }
+        .coloractive{
+          border: 2px solid black;
+        }
+      }
+    }
+      
+  }
+}
+//右侧消防要素
+.firecategories{
+  background-color: #fff;
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  .firecategoriesTree{
+    overflow-y: auto;
+    height: 100%;
+    mat-tree-node{
+      position: relative;
+    }
+    .isLookCss{
+      position: absolute;
+      right: 6px;
+    }
+  }
+}
+
+// 解决轮播图蓝框问题
+div:focus {
+  outline: none;
+}
+
+//没有图片时显示无图片背景图
+.noImgCss{
+  background: url(../../../assets/images/noImg.png) no-repeat center center;
+  background-size: 88% 100%;/*按比例缩放*/
+}
+.input{
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 3px;
+}
+
+
+// tree
+.mat-tree-node{
+  min-height: 0;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.treeNode:hover{
+  background-color: #ccebf8;
+}
+.isLookPattern{
+  display: none;
+}
+.treeText{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 65px;
+}
+
+.bigBox{
+  width: 700px;
+  height: 40px;
+  position: absolute;
+  overflow: hidden;
+  right: 0;
+}
+.weatherBox{
+  height: 40px;
+  width: 700px;
+  line-height: 40px;
+  position: absolute;
+  right: 0;
+  transition: right linear .5s;
+  .openbtn{
+    font-size: 45px;
+    height: 45px;
+    width: 40px;
+  }
+  .name{
+    font-size: 16px;
+    vertical-align: middle;
+    margin-left: 3px;
+  }
+  input{
+    width: 140px;
+    height: 22px;
+    margin-left: 3px;
+  }
+  select{
+    width: 96px;
+    height: 25px;
+    margin-left: 3px;
+    vertical-align: middle;
+  }
+}
+.open{
+  right: 0px;
+}
+.close{
+  right:-622px;
+}
+.bottomCss{
+  position: absolute;
+  left: 232px;
+  right: 0px;
+  bottom: 0;
+  height: 158px;
+  width: auto;
+  z-index: 100;
+  background-color: white;
+  border: 1px solid #464646;
+  .dragDiv{
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    top: 0;
+    z-index: 1000;
+    cursor: n-resize;
+  }
+  .title{
+    height: 35px;
+    background-color: #464646;
+    div{
+      background-color: #464646;
+      float: left;
+      width: 80px;
+      color: white;
+      font-size: 13px;
+      padding-left: 5px;
+      cursor: pointer;
+    }
+    .detailsAndattentBtn{
+      background-color: #595959;
+    }
+  }
+  .body{
+    textarea{
+      width: 100%;
+      border-radius: 0px;
+   }   
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollectionToolsComponent } from './collection-tools.component';
+
+describe('CollectionToolsComponent', () => {
+  let component: CollectionToolsComponent;
+  let fixture: ComponentFixture<CollectionToolsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionToolsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CollectionToolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+<div mat-dialog-title>新增建筑</div>
+<div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+        <div mat-dialog-content>
+            <mat-form-field>
+                  <input type="text" matInput ngModel
+                  required name="propertyName" placeholder="建筑名称" autocomplete="off">
+            </mat-form-field>
+        </div>
+        <div mat-dialog-content>
+            <mat-form-field>
+                <mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑类型">
+                    <mat-option *ngFor="let item of allBuildingType" [value]="item.id">
+                    {{item.name}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>  
+        <div mat-dialog-actions>
+            <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-building/editBuilding.html

@@ -0,0 +1,23 @@
+<div mat-dialog-title>编辑建筑</div>
+<div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+        <div mat-dialog-content>
+            <mat-form-field>
+                <input type="text" matInput [(ngModel)]="defaultName" required name="propertyName" placeholder="建筑名称" autocomplete="off">
+            </mat-form-field>
+        </div>
+        <div mat-dialog-content>
+            <mat-form-field>
+                <mat-select required [(ngModel)]="defaultBuildingType" name="buildingId" placeholder="建筑类型">
+                    <mat-option *ngFor="let item of allBuildingType" [value]="item.id">
+                        {{item.name}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>  
+        <div mat-dialog-actions>
+            <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-building/editDisposalNode.html

@@ -0,0 +1,23 @@
+<div class="functionalDomainContent">
+  <div mat-dialog-title>
+    <label>修改灾情节点名称</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required [(ngModel)]="nodeName" placeholder="名称">
+      </mat-form-field>
+    </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-building/editPlaneFigure.html

@@ -0,0 +1,39 @@
+<div class="functionalDomainContent">
+  
+  <div mat-dialog-title>
+    <label *ngIf="!data.isBuilding">编辑平面图</label>
+    <label *ngIf="data.isBuilding">编辑楼层/区域</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required [(ngModel)]="name" placeholder="名称">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin" *ngIf="data.isBuilding">
+      <mat-checkbox name="isRefugeStorey"  [(ngModel)]="checked">是否为避难层</mat-checkbox>
+    </div>
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="area" type="number" required [(ngModel)]="area" placeholder="面积 (平方米)">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin">
+      <textarea name="details" [(ngModel)]="details" placeholder="详情"></textarea>
+    </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-building/leftFunctionalDomain.ts

@@ -0,0 +1,180 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-leftFunctionalDomain-building',
+  templateUrl: './addPlaneFigure.html',
+  styleUrls: ['./panel.scss']
+})
+export class leftFunctionalDomainBuildingComponent implements OnInit {
+
+  constructor(
+    private http:HttpClient,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<any>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+
+  }
+
+  params = {companyId: sessionStorage.getItem('companyId')}
+  checked:boolean = false;//是否为避难层
+  
+  //提交表单创建平面图
+  onSubmit (e) {
+    if (!this.data.isBuilding) { //总平面图 创建平面图
+      let data = {
+        companyId: sessionStorage.getItem('companyId'),
+        name: e.name,
+        order: this.data.order,
+        area:e.area,
+        details:e.details,
+        enabled: true,
+        modifiedTime: new Date(),
+      }
+      this.http.post('/api/SitePlans',data).subscribe(data=>{
+        this.dialogRef.close('总平面图');
+      })
+    } else { //建筑 创建楼层/区域
+      let data = {
+        isRefugeStorey: e.isRefugeStorey,
+        buildingId: this.data.Panel.id,
+        name: e.name,
+        order: this.data.order,
+        area:e.area,
+        details:e.details,
+        enabled: true,
+        modifiedTime: new Date(),
+      }
+      this.http.post('/api/BuildingAreas',data,{params:this.params}).subscribe(data=>{
+        this.dialogRef.close('建筑');
+      })
+    }
+  }
+
+
+
+}
+
+//编辑平面图 楼层/区域
+@Component({
+  selector: 'app-editPlaneFigure-building',
+  templateUrl: './editPlaneFigure.html',
+  styleUrls: ['./panel.scss']
+})
+export class editPlaneFigureBuildingComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+    this.name = this.data.buildingData.name || ''
+    this.checked = this.data.buildingData.isRefugeStorey || false
+    this.area = this.data.buildingData.area || 0
+    this.details = this.data.buildingData.details || ''
+  }
+
+  params = {companyId: sessionStorage.getItem('companyId')}
+  name:any; //name
+  checked:boolean = false;//是否为避难层
+  area:number; //面积
+  details:string; //详情
+
+  //提交表单修改平面图
+  onSubmit (e) {
+    if (!this.data.isBuilding) { //总平面图 修改平面图
+      let data = {
+        companyId: sessionStorage.getItem('companyId'),
+        id: this.data.buildingData.id,
+        name: e.name,
+        cadUrl: this.data.buildingData.cadUrl,
+        imageUrl: this.data.buildingData.imageUrl,
+        imageAngle: this.data.buildingData.imageAngle,
+        order: this.data.buildingData.order,
+        area:e.area,
+        details:e.details,
+        enabled: this.data.buildingData.enabled,
+        modifiedTime: new Date(),
+      }
+      this.http.put(`/api/SitePlans/${this.data.buildingData.id}`,data).subscribe(data=>{
+        this.dialogRef.close('总平面图');
+      })
+    } else { //建筑 修改楼层/区域
+      let data = {
+        isRefugeStorey: e.isRefugeStorey,
+        buildingId: this.data.Panel.id,
+        id: this.data.buildingData.id,
+        name: e.name,
+        cadUrl: this.data.buildingData.cadUrl,
+        imageUrl: this.data.buildingData.imageUrl,
+        imageAngle: this.data.buildingData.imageAngle,
+        order: this.data.buildingData.order,
+        area:e.area,
+        details:e.details,
+        enabled: this.data.buildingData.enabled,
+        modifiedTime: new Date(),
+      }
+      this.http.put(`/api/BuildingAreas/${this.data.buildingData.id}`,data,{params:this.params}).subscribe(data=>{
+        this.dialogRef.close('建筑');
+      })
+    }
+  }
+
+
+
+}
+
+
+
+//创建 处置预案 节点
+@Component({
+  selector: 'app-addDisposalNode-building',
+  templateUrl: './addDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class addDisposalNodeBuildingComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+  }
+
+  //提交表单
+  onSubmit (e) {
+    this.data.name = e.name
+    this.http.post('/api/DisposalNodes',this.data).subscribe(data=>{
+      this.dialogRef.close('success');
+    })
+  }
+
+}
+
+
+
+//编辑 处置预案 节点
+@Component({
+  selector: 'app-editDisposalNode-building',
+  templateUrl: './editDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class editDisposalNodeBuildingComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+    this.nodeName = JSON.parse(JSON.stringify( this.data.name || '' )) 
+  }
+  nodeName:string;
+  
+  //提交表单
+  onSubmit (e) {
+    this.data.name = e.name
+    this.http.put(`/api/DisposalNodes/${this.data.id}`,this.data).subscribe(data=>{
+      this.dialogRef.close(e.name);
+    })
+  }
+
+}

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

@@ -0,0 +1,291 @@
+.matIcons {
+  color: #8E909F;
+}
+
+
+
+//平面图 素材库 公共样式 头部
+.planarGraphHeader{
+  height: 35px;
+  min-height: 35px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 24px;
+  border-radius: 5px;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #000;
+  background: linear-gradient(to top,#cdced1,#FFF);
+}
+//平面图头部字体图标样式
+.hover {
+  width: 18px;
+  height: 18px;
+  margin-left: 90px;
+  border: 1px solid #999;
+  border-radius: 3px;
+  .mat-icon {font-size: 18px; color: #999;}
+}
+.hover:hover { 
+  background-color: #4DA5FA;
+  .mat-icon {color: #fff;}
+}
+
+//平面图
+.sitePlanContent {
+  position: relative;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  box-sizing: border-box;
+  padding: 0 10px 0 25px;
+  .mat-icon {
+    font-size: 20px;
+  }
+}
+
+//火源/力量 图标
+.fireForce {
+  display: block;
+  float: right;
+  margin: 8px 5px 0 0;
+  width: 40px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  img{
+    width: 20px; 
+    height: 20px;
+  }
+}
+//替换底图  inputfile
+.a-upload {
+  display: block;
+  float: right;
+  margin: 8px 18px 0 0;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  input {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+}
+.a-upload:hover {
+  .mat-icon {
+    color: #fff;
+  }
+}
+//上传底图 inputfile
+#a-uploadImg {
+  display: block;
+  width: 300px;
+  height: 170px;
+  position: fixed;
+  top: 40%;
+  left: 48%;
+  overflow: hidden;
+  border-radius: 5px;
+  border: 1px solid #999;
+  z-index: 999;
+  input {
+    position: absolute;
+    width: 300px;
+    height: 170px;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+#a-uploadImg:hover {
+  border: 5px solid skyblue;
+}
+
+//hover时显示右边操作栏
+.sitePlanContent:hover {
+  #rightOperate {
+    display: block;
+  }
+}
+//右边操作栏
+#rightOperate{
+  width: 50px;
+  height: 100px;
+  position: absolute;
+  top: -32px;
+  right: -48px;
+  z-index: 99999;
+  border-radius: 0 100px 100px 0;
+  background-color: #F0F4F7;
+  // #F0F4F7 cdced1
+  display: none;
+  .functionButton {
+    height: 25%;
+    line-height: 25px;
+  }
+  .bigFunctionIcon {
+    font-size: 24px;
+  }
+  .functionIcon {
+    color: #999;
+  }
+  .functionIcon:hover {
+    color: #4DA5FA;
+  }
+}
+
+//处置预案 素材库 公用div
+.publiclBankPlan {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-bottom: 10px;
+  // border-top: 1px dashed #999;
+}
+
+
+
+//   基本信息/想定作业 切换
+.scenarioAssignment {
+  overflow-y: auto;
+}
+.selectEditMode {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.materialBankDIV{
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+//   基本信息/想定作业 切换
+//处置预案
+#terrNodePublic {
+  height: 35px;
+  line-height: 35px;
+  display: flex;
+  .textNode {flex: 1;}
+}
+//字体图标
+.planIconDiv {
+  display: inline-block;
+  .mat-icon{
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: #666;
+    margin-right: 3px;
+  }
+}
+
+
+
+.mat-expansion-panel-header {
+  height: 40px !important;
+}
+//素材库溢出隐藏
+#materialBank {
+  margin: 1px 0;
+}
+//素材库图片flex
+#panelLibrary .text{
+  box-sizing: border-box;
+  margin-left: 10px;
+}
+.panelLibraryFlex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平居中 */
+  .imgBox {
+    width: 70px;
+    height: 100px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 3px;
+    margin: 5px 0;
+    img {
+      width: 70px;
+      height: auto;
+      max-height: 70px;
+      cursor:pointer;
+    }
+    p {
+      font-size: 12px;
+      cursor:pointer;
+    }
+  }
+}
+
+//文本溢出
+.overflowText {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+// 楼层/区域 是避难层时
+.isRefugeStorey {
+  color: #fff;
+  background-color: rgb(238, 186, 186);
+}
+//选中平面图时
+.selectSitePlan {
+  color: #fff;
+  background-color: #6BC2FF;
+}
+//选中素材库图片时
+.selectImg {
+  color: #fff;
+  background-color: #4DA5FA;
+}
+//选中 处置节点时
+.selectanelPoint {
+  background-color: #F4C235;
+}
+
+
+
+//左侧功能区弹出框样式
+.keyMargin {
+  width: 100%;
+  margin: 5px 0;
+  .mat-form-field {
+    width: 100%;
+  }
+}
+.submitBottom {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平居中 */
+}
+.functionalDomainContent {
+  width: 300px;
+  height: 100%;
+  textarea {
+    border-radius: 5px;
+    border: 1px solid #999;
+    width: 100%;
+    height: 120px;
+    resize:none;
+  }
+}

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

@@ -0,0 +1,300 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import {CanvasShareDataService,DisposalNodeData} from '../../canvas-share-data.service' //引入服务
+// 保存想定作业第一个弹窗
+@Component({
+    selector: 'dialog-overview-example-dialog-building',
+    templateUrl: 'saveOne.html',
+    styleUrls: ['./collection-tools.component.scss']
+})
+export class saveOneDialogBuilding {
+
+    constructor(
+        private http:HttpClient,
+        public dialog: MatDialog,
+        public snackBar: MatSnackBar,
+        public dialogRef: MatDialogRef<any>,
+        @Inject(MAT_DIALOG_DATA) public data) {}
+
+    onNoClick(): void {
+        this.dialogRef.close()
+    }
+    allDisposalNode = this.data.allDisposalNode
+
+    saveType(type){
+      this.dialogRef.close()
+      const dialogRef = this.dialog.open(saveTwoDialogBuilding, {
+        data: {type: type,
+          allDisposalNode: this.data.allDisposalNode,
+          selectedBuildingData:this.data.selectedBuildingData,
+          selectedSiteData:this.data.selectedSiteData,
+          siteOrbuilding:this.data.siteOrbuilding,
+          disasterId:this.data.disasterId}
+      });
+      dialogRef.afterClosed().subscribe(result => {
+      });
+    }
+
+}
+
+  // 保存想定作业第二个弹窗
+@Component({
+    selector: 'dialog-overview-example-dialog-building',
+    templateUrl: 'saveTwo.html',
+    styleUrls: ['./collection-tools.component.scss']
+})
+export class saveTwoDialogBuilding {
+  
+    constructor(
+      private http:HttpClient,
+      public dialogRef: MatDialogRef<any>,
+      public canvasData: CanvasShareDataService,
+      public snackBar: MatSnackBar,
+      @Inject(MAT_DIALOG_DATA) public data) {}
+      
+    type = this.data.type
+    allDisposalNode = this.data.allDisposalNode
+    allPlanDisposalNode = []
+    allRootDisposalNode =  [{name:"根节点",id:null}]
+    allDisposalNodeChild = []
+    ngOnInit(): void {
+      //所有非数据节点
+      this.allDisposalNode.forEach(item => {
+        if(!item.sitePlanId && !item.buildingAreaId){
+          this.allPlanDisposalNode.push(item)
+        }
+      })
+
+      //所有一级节点
+      this.allDisposalNode.forEach(item => {
+        if(!item.parentId){
+          this.allRootDisposalNode.push(item)
+        }
+      })
+      this.allDisposalNodeChild = JSON.parse(JSON.stringify(this.allDisposalNode))
+      this.allDisposalNodeChild.forEach(item => {
+        item.children = []
+        this.allDisposalNodeChild.forEach(i => {
+          if(i.parentId == item.id){
+            item.children.push(i)
+          }
+        })
+      })
+      // console.log(this.nodeItem.id)
+    }
+    onNoClick(): void {
+      this.dialogRef.close();
+    }
+    nodeItem
+    itemChildNum = 0 //点击处置节点子数据节点的数量
+    clickNode(item){
+      // console.log(item)
+      this.nodeItem = item
+      this.allDisposalNodeChild.forEach(item => {
+        if(item.id ==  this.nodeItem.id){
+          this.itemChildNum = item.children.length
+        }
+      })
+    }
+
+    selectedBuildingData = this.data.selectedBuildingData
+    selectedSiteData = this.data.selectedSiteData
+    onSubmit(value,type){
+      // console.log(type)
+      let name = this.selectedBuildingData.name + '-' + this.selectedSiteData.name
+      //如果保存到已有节点
+      var postdata = {
+        id: "",
+        name: name,
+        level: 0,
+        order: this.itemChildNum,
+        description: "",
+        notes: "",
+        weather: null,
+        airTemperature: null,
+        windDirection: null,
+        windScale: null,
+        imageNames: null,
+        imageUrls: null,
+        parentId:  this.nodeItem ? this.nodeItem.id : null,
+        disasterId: this.data.disasterId,
+        planComponentId: sessionStorage.getItem('planId') || '',
+        companyId: this.data.siteOrbuilding == -1 ? sessionStorage.getItem('companyId') : null,
+        sitePlanId:  this.data.siteOrbuilding==-1 ? this.selectedSiteData.id : null,
+        buildingId: this.selectedBuildingData.id || null,
+        buildingAreaId: this.data.siteOrbuilding!=-1 ? this.selectedSiteData.id : null
+      }
+      if(type == 'old'){
+        let istrue = this.canvasData.findDisposalNode(this.nodeItem.id,name)
+        let putdata = this.nodeItem
+            putdata.weather = this.canvasData.selectPanelPointBaseData.weather
+            putdata.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature)
+            putdata.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale) 
+            putdata.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection) 
+            putdata.description = this.canvasData.selectPanelPointBaseData.description
+            putdata.notes = this.canvasData.selectPanelPointBaseData.notes
+        
+        
+        if(istrue){//如果该处置节点下已有同名数据节点 则只修改 2个接口
+          new Promise((resolve,reject)=>{
+            this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => {
+              resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点")
+            })
+          }).then((values)=>{
+            this.canvasData.sendMessage('send a message');//发布一条消息
+              // 保存平面图数据到当前节点
+              let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint)) 
+              postdata.Data = JSON.stringify(postdata.Data)
+              this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => {
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config)
+              },err=>{
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存失败','确定',config)
+              })
+              this.dialogRef.close();
+              this.canvasData.sendMessage('send a message');//发布一条消息
+          })
+          
+        }else{//需要3个接口
+          new Promise((resolve,reject)=>{
+            this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => {
+              resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点")
+            })
+          }).then((values)=>{
+            // console.log(values)
+            postdata.level = putdata.level + 1 
+            new Promise((resolve,reject) => {
+              this.http.post(`/api/DisposalNodes`,postdata).subscribe(data => {
+                resolve(data)
+              })
+            }).then((data:any)=>{
+              // console.log(7788,data)
+              let objData = {
+                id: "",
+                data: JSON.stringify(this.canvasData.selectPanelPoint.Data) || null,
+                version: this.canvasData.selectPanelPoint.Version || "2.0",
+                disposalNodeId: data.id,
+                planComponentId: sessionStorage.getItem("planId"),
+              }
+              this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => {
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config)
+              },err=>{
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存失败','确定',config)
+              })
+              this.dialogRef.close();
+              this.canvasData.sendMessage('send a message');//发布一条消息
+            })
+          })
+        }
+
+      }else{//如果保存到新建节点
+        let dispositionNodeData //处置节点data
+        let order
+        let oneLevelNum = []
+        //将order赋值为所有一级节点最后一个+1
+        this.allDisposalNode.forEach(item => {
+          if(!item.parentId){
+            oneLevelNum.push(item)
+          }
+        })
+        if(oneLevelNum.length == 0){
+          order = 0
+        }else{
+          order = oneLevelNum[oneLevelNum.length - 1].order + 1
+        }
+        
+        if(this.nodeItem){//如果点击了下拉选择框
+          if(this.nodeItem.id != null){
+            this.allDisposalNodeChild.forEach(item => {
+              if(item.id == this.nodeItem.id){
+                order = item.children.length
+              }
+            })
+          }
+        }
+        dispositionNodeData = {
+          id: "",
+          name: value.name,
+          level: this.nodeItem && this.nodeItem.id != null ? this.nodeItem.level + 1 : 0,
+          order: order,
+          description: "",
+          notes: "",
+          weather: null,
+          airTemperature: 0,
+          windDirection: 0,
+          windScale: 0,
+          imageNames: null,
+          imageUrls: null,
+          parentId: this.nodeItem ? this.nodeItem.id : null,
+          disasterId: this.data.disasterId,
+          planComponentId: sessionStorage.getItem('planId') || '',
+          companyId: null,
+          sitePlanId: null,
+          buildingId: null,
+          buildingAreaId: null
+        }
+
+        dispositionNodeData.weather = this.canvasData.selectPanelPointBaseData.weather
+        dispositionNodeData.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature)
+        dispositionNodeData.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale) 
+        dispositionNodeData.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection) 
+        dispositionNodeData.description = this.canvasData.selectPanelPointBaseData.description
+        dispositionNodeData.notes = this.canvasData.selectPanelPointBaseData.notes
+        //1.先创建一个处置节点  然后 .then  2.创建数据节点到刚创建的处置节点  3.然后拿着创建好的数据节点的id  将平面图data保存
+        new Promise((resolve,reject) => {
+          this.http.post("/api/DisposalNodes",dispositionNodeData).subscribe((data:any) => {
+            resolve(data.id)
+          })
+        }).then((id) => {
+          let dataNodeData 
+          new Promise((resolve,reject) => {
+            postdata.parentId = id
+            postdata.level = dispositionNodeData.level + 1
+            this.http.post("/api/DisposalNodes",postdata).subscribe((data:any) => {
+              resolve(data)
+            })
+          }).then((data:any) => {
+            // 保存平面图数据到当前节点
+              // console.log(6666,data)
+              // let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint)) 
+              // postdata.Data = JSON.stringify(postdata.Data)
+              let objData = {
+                id: "",
+                data: JSON.stringify(this.canvasData.selectPanelPoint.Data) || null,
+                version: this.canvasData.selectPanelPoint.Version || "2.0",
+                disposalNodeId: data.id,
+                planComponentId: sessionStorage.getItem("planId"),
+              }
+              
+              this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => {
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config)
+                
+              },err=>{
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存失败','确定',config)
+              })
+              this.dialogRef.close();
+              this.canvasData.sendMessage("send a message")
+          })
+        })
+      }
+    }
+}

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

@@ -0,0 +1,5 @@
+<div mat-dialog-title>处置节点保存</div>
+<div style="display: flex;">
+    <button mat-stroked-button style="margin-right: 5px;" (click)="saveType('new')">新建节点并保存</button>
+    <button mat-stroked-button (click)="saveType('old')">保存到已有节点</button>
+</div>

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

@@ -0,0 +1,53 @@
+<div *ngIf="type == 'new'">
+    <div mat-dialog-title>新增节点</div>
+    <div>
+        <form (ngSubmit)="onSubmit(form.value,'new')" #form="ngForm" class="example-container">
+
+            <div mat-dialog-content>
+                <mat-form-field>
+                    <input type="text" matInput ngModel
+                    required name="name" placeholder="节点名称" autocomplete="off">
+                </mat-form-field>
+            </div>
+            <div mat-dialog-content>
+                <mat-form-field>
+                    <mat-select [(value)]="allRootDisposalNode[0].name" required placeholder="父节点名称">
+                        <mat-option *ngFor="let item of allRootDisposalNode" [value]="item.name" (click)="clickNode(item)">
+                            {{item.name}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>  
+            <div mat-dialog-actions>
+                <button mat-raised-button color="primary" type="submit" 
+                [disabled]="!form.form.valid">
+                    确定
+                </button>
+                <button mat-raised-button mat-dialog-close>取消</button>
+            </div>
+        </form>
+    </div>
+</div>
+<div *ngIf="type == 'old'">
+    <div mat-dialog-title>保存到已有节点</div>
+    <div>
+        <form (ngSubmit)="onSubmit(form.value,'old')" #form="ngForm" class="example-container">
+            <div mat-dialog-content>
+                <mat-form-field>
+                    <mat-select required ngModel placeholder="父节点名称" name="nodeId">
+                        <mat-option *ngFor="let item of allPlanDisposalNode" [value]="item.id"  (click)="clickNode(item)">
+                            {{item.name}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>  
+            <div mat-dialog-actions>
+                <button mat-raised-button color="primary" type="submit" 
+                [disabled]="!form.form.valid">
+                    确定
+                </button>
+                <button mat-raised-button mat-dialog-close>取消</button>
+            </div>
+        </form>
+    </div>
+</div>

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

@@ -0,0 +1,24 @@
+<div style="position: relative;width: 1400px;height: 800px;line-height: 800px;" class="swiper-container">
+    <div style="position: absolute;right: -2px;top: -392px;cursor: pointer;z-index: 999;width: 24px;height: 24px;" (click)="closeDialog()">
+        <span><mat-icon>clear</mat-icon></span>
+    </div>
+    
+    <div class="swiper-wrapper">
+        <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr">
+            <img id="bigimg" (mousewheel)="zoomimg($event)" style="
+            max-width: 96%;
+            max-height: 100%;
+            min-width: 1px;
+            min-height: 1px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            margin: auto;" [src]="img.PropertyValue" alt="">
+        </div>
+    </div>
+      <!-- 如果需要导航按钮 -->
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
+</div>

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

@@ -12,6 +12,17 @@
       </mat-form-field>
     </div>
 
+    <div class="keyMargin">
+      <a href="javascript:;" class="uploadBackGround" (click)='toGIS()'>导入GIS地图</a>
+    </div>
+
+    <div class="keyMargin">
+      <a href="javascript:;" class="uploadBackGround">
+        <input type="file" (change)='selectFile($event)' accept="image/*">上传本地图片
+      </a>
+      <p *ngIf="file" style="font-size: 14px; text-align: left;">选择文件: {{file.name}}</p>
+    </div>
+
     <div class="keyMargin" *ngIf="data.isBuilding">
       <mat-checkbox name="isRefugeStorey"  [(ngModel)]="checked">是否为避难层</mat-checkbox>
     </div>

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

@@ -2,105 +2,30 @@
   <!-- header头部 -->
   <div class="header">
     <button mat-button (click)="toggle()">
-      <mat-icon style="vertical-align: middle;">toc</mat-icon>
+      <mat-icon style="vertical-align: middle; color: #279FFF;">toc</mat-icon>
     </button>
     <button mat-button (click)="toggle2()">
-      <mat-icon style="vertical-align: middle;">list</mat-icon>
+      <mat-icon style="vertical-align: middle; color: #279FFF;">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> -->
-    <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}">
-        基本信息编辑
-      </span>
-    </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>
-      <mat-icon *ngIf="isEditPattern " style="margin-left: 12px;" title="保存" (click)="saveSite()">description</mat-icon>
-    </span>
-  </div>
   
-  <!-- 头部操作栏 -->
+    <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
-  <div class="headerOperate">
+      复制<mat-icon>library_books</mat-icon>
-    <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"
-      [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)"
-          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>
-      </span>
     </button>
-    <!-- <button (click)="yyy()">yyyyy</button> -->
+
-    <button mat-button (click)="createBuilding()" *ngIf="isEditPattern && pattern">
+    <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
-      <span style="font-size: 24px;">+</span>
+      粘贴<mat-icon>screen_share</mat-icon>
     </button>
-    <div class="bigBox" *ngIf="!pattern">
+
-      <div class="weatherBox" [ngClass]="{'opened': weatherBtn,'close': !weatherBtn}">
+    <span class="rightSave">
-        <mat-icon class="openbtn" *ngIf="weatherBtn" (click)="weatherBtnHidden()">keyboard_arrow_right</mat-icon>
+      <!-- <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
-        <mat-icon class="openbtn" *ngIf="!weatherBtn" (click)="weatherBtnShow()">keyboard_arrow_left</mat-icon>
+      <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern && isediticon">create</mat-icon> -->
-        <span class="name">天气</span>
+      <label title="保存" (click)="saveSite()"><mat-icon>description</mat-icon>保存</label>
-        <input [(ngModel)]="canvasData.selectPanelPointBaseData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
+    </span>
-        <span class="name">气温</span>
-        <div style="display: inline-block;position: relative;">
-          <input [(ngModel)]="canvasData.selectPanelPointBaseData.airTemperature" style="width: 120px;" type="number" value="0" oninput="if(value.length>2)value=value.slice(0,2)">
-          <span style="position: absolute;right:17px;color: #9c9fa5;">℃</span>
-        </div>
-        <span class="name">风力</span>
-        <select [(ngModel)]="canvasData.selectPanelPointBaseData.windScale">
-          <option value ="0">0(无风)</option>
-          <option value ="1">1(软风)</option>
-          <option value ="2">2(轻风)</option>
-          <option value ="3">3(微风)</option>
-          <option value ="4">4(和风)</option>
-          <option value ="5">5(清风)</option>
-          <option value ="6">6(强风)</option>
-        </select>
-        <span class="name">风向</span>
-        <select [(ngModel)]="canvasData.selectPanelPointBaseData.windDirection">
-          <option value ="0">东</option>
-          <option value ="1">西</option>
-          <option value ="2">南</option>
-          <option value ="3">北</option>
-          <option value ="4">东南</option>
-          <option value ="5">西南</option>
-          <option value ="6">东北</option>
-          <option value ="7">西北</option>
-        </select>
-      </div>
-    </div>
   </div>
 
   <!--功能区 -->
@@ -225,12 +150,8 @@
         <!-- 右侧div鼠标拖动div -->
         <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
         <!-- 属性 -->
-        <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;background-color: white;">
+        <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 100%;background-color: white;">
-          <div class="title">
+          <div class="rightTitle">属性</div>
-            <div>
-              <span style="user-select: none">属性</span>
-            </div>
-          </div>
           <!-- 平面图属性 -->
           <div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
             <p>面积(平方米)</p>
@@ -332,110 +253,52 @@
               <div *ngIf="item.PropertyType == 5" class="selectDiv">
                 <p style="display: inline-block;">{{item.PropertyName}}</p>
                 <select (change)="direction(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
-                  <option value ="0" [selected]="item.PropertyValue ==0">东</option>
+                  <option value ="0" [selected]="item.PropertyValue =='0'">东</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">西</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">西</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">南</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">南</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">北</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">北</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">东南</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
-                  <option value ="5" [selected]="item.PropertyValue ==5">西南</option>
+                  <option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
-                  <option value ="6" [selected]="item.PropertyValue ==6">东北</option>
+                  <option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
-                  <option value ="7" [selected]="item.PropertyValue ==7">西北</option>
+                  <option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
                 </select>
               </div>
               <!-- 布尔值 是1或否0 -->
               <div *ngIf="item.PropertyType == 6">
                 <p>{{item.PropertyName}}</p>
-                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == '1'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
-                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == '0'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
               </div>
               <!-- 供给区域 -->
               <div *ngIf="item.PropertyType == 7" class="selectDiv">
                 <p style="display: inline-block;">{{item.PropertyName}}</p>
                 <select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
-                  <option value ="0" [selected]="item.PropertyValue ==0">全部</option>
+                  <option value ="0" [selected]="item.PropertyValue =='0'">全部</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">高区</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">高区</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">中区</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">中区</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">低区</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">低区</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">高中区</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">高中区</option>
-                  <option value ="5" [selected]="item.PropertyValue ==5">高低区</option>
+                  <option value ="5" [selected]="item.PropertyValue =='5'">高低区</option>
-                  <option value ="6" [selected]="item.PropertyValue ==6">中低区</option>
+                  <option value ="6" [selected]="item.PropertyValue =='6'">中低区</option>
                 </select>
               </div>
               <!-- 供给类型 -->
               <div *ngIf="item.PropertyType == 8" class="selectDiv">
                 <p style="display: inline-block;">{{item.PropertyName}}</p>
                 <select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
-                  <option value ="0" [selected]="item.PropertyValue ==0">消火栓</option>
+                  <option value ="0" [selected]="item.PropertyValue =='0'">消火栓</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">喷淋</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">喷淋</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">水幕</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">水幕</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">泡沫</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">泡沫</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">消防</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">消防</option>
                 </select>
               </div>
           </div>
           </div>
         
         </div>
-        <!-- 消防要素 -->
-        <div id="firecategories" class="firecategories" style="height: 50%;">
-          <!-- 素材属性div鼠标拖动div -->
-          <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></div>
-          
-          <div class="title">
-            <div>
-              <span style="user-select: none">消防要素</span>
-            </div>
       </div>
 
-          <div class="firecategoriesTree">
-            <!-- 消防列表树写在这里 -->
-            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList  [cdkDropListData]="dataSource" (cdkDropListDropped)="drop($event)">
-              
-              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
-                <button mat-icon-button disabled></button>
-                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-                  {{node.name}}      
-                </span> 
-                <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
-                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
-              </mat-tree-node>
-            
-            
-              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
-                <button mat-icon-button 
-                        matTreeNodeToggle
-                        [attr.aria-label]="'toggle ' + node.name">
-                  <mat-icon class="mat-icon-rtl-mirror">
-                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-                  </mat-icon>
-                </button>
-                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-                  {{node.name}}      
-                </span>   
-                <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
-                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
-              </mat-tree-node>
-             
-            </mat-tree>
-          </div>
-        </div>
-      </div>
-
-      <div id="bottomDiv" class="bottomCss" *ngIf="!pattern">
-        <div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
-        <div class="title">
-          <div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
-            节点详情
-          </div>
-          <div (click)="attent()" [ngClass]="{'detailsAndattentBtn': !detailsAndattentBtn}">
-            注意事项
-          </div>
-        </div>
-        <div class="body">
-          <textarea [disabled]="!isEditPattern" *ngIf="detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.description"></textarea>
-          <textarea [disabled]="!isEditPattern" *ngIf="!detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.notes"></textarea>
-        </div>
-      </div>
     </div>
   </div>
 

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;
@@ -61,6 +59,12 @@
       color: white;
     }
   }
+  .rightSave {
+    cursor: pointer;
+    position: absolute;
+    right: 60px;
+    label { vertical-align: middle; color: #279FFF; }
+  }
 }
 
 //头部操作栏
@@ -109,7 +113,7 @@
   top: 0;
 }
 .functionalDomain {
-  flex: 90%;
+  flex: 95%;
   overflow: hidden;
   .functionalDomainContent {
     position: relative;
@@ -140,10 +144,9 @@
     z-index: 1001;
     margin-right: 0px;
     transition:  margin-right 0.5s;
-    border: 1px solid #464646;
+    border: 1px solid #E6EAEE;
     width: 235px;
     right: 0;
-    
   }
     //右边导航栏显示隐藏
   .togglePanel2 {
@@ -155,27 +158,17 @@
     margin-left: -2000px;
     transition: margin-left 1s;
   }
-
 }
 
 //右边操作栏
-.title{
+.rightTitle{
-  width: 100%;
+  height: 35x;
-  height: 35px;
-  background-color: #464646;
-  div{
-    width: 50%;
-    height: 35px;
   line-height: 35px;
-    background-color: #595959;
+  text-align: center;
-    border-radius: 5px;
+  border-top-left-radius: 10px;
-    span{
+  border-top-right-radius: 10px;
-      color: white;
+  background-color: #2196F3;
-      font-size: 14px;
+  color: #fff;
-      font-weight: 400;
-      padding-left: 5px;
-    }
-  }
 }
 
 

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

@@ -607,7 +607,6 @@ export class CollectionToolsPlanComponent implements OnInit {
     this.canvasData.isChange = true
   }
 
-
   isSixShow = true  
   isSixbtn = true //控制想定作业编辑按钮
   isediticon = true //控制查看编辑模式的编辑模式小笔按钮
@@ -631,7 +630,6 @@ export class CollectionToolsPlanComponent implements OnInit {
       this.canvasData.gameMode = GameMode.Assignment
     } else {
       this.getAllLibrary() //获取素材库
-      this.getAllBuildings() //获取所有建筑
     }
 
     let that = this
@@ -645,7 +643,7 @@ export class CollectionToolsPlanComponent implements OnInit {
     
     this.canvasData.getMessage().subscribe((message: any)=>{
       if(message == "send a message"){
-        this.refurbishTreeData()
+        // this.refurbishTreeData()
       }
     })
   }
@@ -669,7 +667,7 @@ export class CollectionToolsPlanComponent implements OnInit {
     //监听数据变化后
     this.canvas.on('canvasDataChanged',()=>{
       // 收到数据表示共享数据发生变化
-      this.renovateTreeData(false)
+      // this.renovateTreeData(false)
     });
   }
 
@@ -684,7 +682,7 @@ export class CollectionToolsPlanComponent implements OnInit {
     let buildingId = this.beforeOneCheckedBuilding.id
     let floorId = this.selectingSitePlan.id
     this.canvas.paste(companyId,buildingId,floorId)
-    this.renovateTreeData(false)
+    // this.renovateTreeData(false)
   }
 
   basicInfo:boolean = true //基本信息名称显隐
@@ -761,7 +759,6 @@ export class CollectionToolsPlanComponent implements OnInit {
         }else{
           //如果是单位 总平面图
           if(this.checkedBuildingIndex==-1){
-            // console.log(111,SitePlanData)
             //保存平面图数据
             this.http.post("/api/SitePlanData",SitePlanData,{
               params:{
@@ -1258,6 +1255,7 @@ export class CollectionToolsPlanComponent implements OnInit {
   //点击数节点的显示隐藏icon
   clickLookItem(node){
 
+   
     //修改真实素材islook属性
     for(let key in this.storeyData.data){
       if(key == node.id){
@@ -1352,31 +1350,30 @@ export class CollectionToolsPlanComponent implements OnInit {
 
   //封装 刷新 tree 数据
  async renovateTreeData (isRefresh:boolean = true) {
-    this.allFireElements[this.allFireElements.length-1].children = []
+    // this.allFireElements[this.allFireElements.length-1].children = []
     isRefresh? await this.canvas.refresh() : null
     this.canvas.setNameVisible(this.basicInfo,0)
     this.canvas.setNameVisible(this.wantToWork,1)
     isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
-    !this.pattern? this.mateFireForce() : null //刷新 建筑楼层 火源/力量图标
 
-    let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
+    // let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
-    let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
+    // let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
-    let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
+    // let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
 
-    for(let key in companyBuildingData.data){
+    // for(let key in companyBuildingData.data){
-      if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
+    //   if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
-        storeyData.data[key] = companyBuildingData.data[key]
+    //     storeyData.data[key] = companyBuildingData.data[key]
-      }
+    //   }
-    }
+    // }
-    for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
+    // for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
-      let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
+    //   let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
-      if (!noMatch) {
+    //   if (!noMatch) {
-        this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
+    //     this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
-      }
+    //   }
-    }
+    // }
-    this.handleTreeData(storeyData) //处理tree数据结构
+    // this.handleTreeData(storeyData) //处理tree数据结构
   }
 
 
@@ -1423,7 +1420,7 @@ export class CollectionToolsPlanComponent implements OnInit {
 
   //获取总平面图
   getSitePlan () {
-    let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
+    // let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
     let planData = this.getSitePlanCompanyData() //获取 单位 数据
     this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{
       this.sitePlanData = data
@@ -1431,7 +1428,7 @@ export class CollectionToolsPlanComponent implements OnInit {
       this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
       this.selectSitePlanIndex = 0
 
-      Promise.all([fireData,planData]).then((res)=>{
+      Promise.all([planData]).then((res)=>{
         this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
       })
 
@@ -1441,7 +1438,7 @@ export class CollectionToolsPlanComponent implements OnInit {
   //获取建筑 楼层/区域
   getBuildingSitePlan (item) {
     let params = { buildingId: item.id }
-    let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素
+    // let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素
     let planData = this.getBuildingData(params) //获取 建筑 数据
     this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{
       this.sitePlanData = data
@@ -1449,7 +1446,7 @@ export class CollectionToolsPlanComponent implements OnInit {
       this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
       this.selectSitePlanIndex = 0
 
-      Promise.all([fireData,planData]).then((res)=>{
+      Promise.all([planData]).then((res)=>{
         this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据
       })
 

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

@@ -23,9 +23,39 @@ export class leftFunctionalDomainComponentPlan implements OnInit {
 
   params = {companyId: sessionStorage.getItem('companyId')}
   checked:boolean = false;//是否为避难层
+  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);
+      }
+    }
+  }
+
+  //导入GIS
+  toGIS () {
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('功能开发测试中,即将上线','确定',config);
+  }
 
   //提交表单创建平面图
   onSubmit (e) {
+    if (this.file) {
+      let formData = new FormData()
+      formData.append("file",this.file)
+      this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
+        let imgURL = '/api/Objects/WebPlan2D/' + data.objectName
+        console.log(imgURL)
         if (!this.data.isBuilding) { //总平面图 创建平面图
           let data = {
             companyId: sessionStorage.getItem('companyId'),
@@ -35,6 +65,7 @@ export class leftFunctionalDomainComponentPlan implements OnInit {
             details:e.details,
             enabled: true,
             modifiedTime: new Date(),
+            imageUrl: imgURL,
           }
           this.http.post('/api/SitePlans',data).subscribe(data=>{
             this.dialogRef.close('总平面图');
@@ -49,11 +80,19 @@ export class leftFunctionalDomainComponentPlan implements OnInit {
             details:e.details,
             enabled: true,
             modifiedTime: new Date(),
+            imageUrl: imgURL,
           }
           this.http.post('/api/BuildingAreas',data,{params:this.params}).subscribe(data=>{
             this.dialogRef.close('建筑');
           })
         }
+      }) //post
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请上传图片','确定',config);
+    }
   }
 
 

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

@@ -268,9 +268,34 @@
 .keyMargin {
   width: 100%;
   margin: 5px 0;
+  text-align: center;
   .mat-form-field {
     width: 100%;
   }
+  //上传CAD弹窗 inputfile
+  .uploadBackGround {
+    width: 80%;
+    padding: 0 25px;
+    height: 30px;
+    line-height: 30px;
+    position: relative;
+    cursor: pointer;
+    color: #000;
+    font-size: 14px;
+    background: #fafafa;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .uploadBackGround  input {
+    position: absolute;
+    width: 100%;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    cursor: pointer
+  }
 }
 .submitBottom {
   display: flex;

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

@@ -2,83 +2,40 @@
   <!-- header头部 -->
   <div class="header">
     <button mat-button (click)="toggle()">
-      <mat-icon style="vertical-align: middle;">toc</mat-icon>
+      <mat-icon style="vertical-align: middle; color: #279FFF;">toc</mat-icon>
     </button>
     <button mat-button (click)="toggle2()">
-      <mat-icon style="vertical-align: middle;">list</mat-icon>
+      <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
     </button>
-    <button (click)="copyAsset()" class="copytobutn" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
+    <span  [ngClass]="{'icongray': !basicInfo}" *ngIf="pattern" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
-      <mat-icon style="padding-bottom: 7px;">library_books</mat-icon>
+      基本信息名称<mat-icon>visibility</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()">
-      基本信息名称
-      <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}">
-        基本信息编辑
     </span>
-      <span *ngIf="isSixbtn" (click)="wantWork()" [ngClass]="{'selectedPattern': !pattern}">
+    <span [ngClass]="{'icongray': !wantToWork}" *ngIf="!pattern" title="想定作业名称显示/隐藏" class="marginLeftRight" (click)="wantToWorkClick()">
-        想定作业编辑
+      想定作业名称<mat-icon>visibility</mat-icon>
     </span>
-    </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 && isxxx">create</mat-icon>
-      <mat-icon *ngIf="isEditPattern " style="margin-left: 12px;" title="保存" (click)="saveSite()">description</mat-icon>
-    </span>
-  </div>
 
-  <!-- 头部操作栏 -->
+    <!-- <span class="marginLeftRight">
-  <div class="headerOperate">
+      <mat-checkbox color="primary"></mat-checkbox> 多选
-    <button mat-button (click)="checkedBuilding({name:'总平面图'},-1)"
+    </span> -->
-      [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
+    <span class="marginLeftRight">
-      <span>总平面图</span>
+      <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
-      <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"
-      [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)"
-          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>
     </span>
+    <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" *ngIf="isEditPattern">
+      复制<mat-icon>library_books</mat-icon>
     </button>
-    <button mat-button (click)="createBuilding()" *ngIf="isEditPattern && pattern">
+
-      <span style="font-size: 24px;">+</span>
+    <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
+      粘贴<mat-icon>screen_share</mat-icon>
     </button>
-    <div class="bigBox" *ngIf="!pattern">
+
+    <div class="bigBox">
       <div class="weatherBox" [ngClass]="{'opened': weatherBtn,'close': !weatherBtn}">
-        <mat-icon class="openbtn" *ngIf="weatherBtn" (click)="weatherBtnHidden()">keyboard_arrow_right</mat-icon>
-        <mat-icon class="openbtn" *ngIf="!weatherBtn" (click)="weatherBtnShow()">keyboard_arrow_left</mat-icon>
         <span class="name">天气</span>
         <input [(ngModel)]="canvasData.selectPanelPointBaseData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
         <span class="name">气温</span>
         <div style="display: inline-block;position: relative;">
-          <input [(ngModel)]="canvasData.selectPanelPointBaseData.airTemperature" style="width: 120px;" type="number" value="0" oninput="if(value.length>2)value=value.slice(0,2)">
+          <input [(ngModel)]="canvasData.selectPanelPointBaseData.airTemperature" style="width: 60px;" type="number" value="0" oninput="if(value.length>2)value=value.slice(0,2)">
-          <span style="position: absolute;right:17px;color: #9c9fa5;">℃</span>
+          <span style="position: absolute;right: 20px;top: 10px;color: #9c9fa5;">℃</span>
         </div>
         <span class="name">风力</span>
         <select [(ngModel)]="canvasData.selectPanelPointBaseData.windScale">
@@ -101,8 +58,10 @@
           <option value ="6">东北</option>
           <option value ="7">西北</option>
         </select>
+        <label title="保存" (click)="saveSite()" class="rightSave"><mat-icon>description</mat-icon>保存</label>
       </div>
     </div>
+  
   </div>
 
   <!--功能区 -->
@@ -112,10 +71,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 +155,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 +213,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 -->
@@ -334,44 +327,44 @@
               <div *ngIf="item.PropertyType == 5" class="selectDiv">
                 <p style="display: inline-block;">{{item.PropertyName}}</p>
                 <select (change)="direction(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
-                  <option value ="0" [selected]="item.PropertyValue ==0">东</option>
+                  <option value ="0" [selected]="item.PropertyValue =='0'">东</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">西</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">西</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">南</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">南</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">北</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">北</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">东南</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
-                  <option value ="5" [selected]="item.PropertyValue ==5">西南</option>
+                  <option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
-                  <option value ="6" [selected]="item.PropertyValue ==6">东北</option>
+                  <option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
-                  <option value ="7" [selected]="item.PropertyValue ==7">西北</option>
+                  <option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
                 </select>
               </div>
               <!-- 布尔值 是1或否0 -->
               <div *ngIf="item.PropertyType == 6">
                 <p>{{item.PropertyName}}</p>
-                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == '1'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
-                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == '0'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
               </div>
               <!-- 供给区域 -->
               <div *ngIf="item.PropertyType == 7" class="selectDiv">
                 <p style="display: inline-block;">{{item.PropertyName}}</p>
                 <select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
-                  <option value ="0" [selected]="item.PropertyValue ==0">全部</option>
+                  <option value ="0" [selected]="item.PropertyValue =='0'">全部</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">高区</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">高区</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">中区</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">中区</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">低区</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">低区</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">高中区</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">高中区</option>
-                  <option value ="5" [selected]="item.PropertyValue ==5">高低区</option>
+                  <option value ="5" [selected]="item.PropertyValue =='5'">高低区</option>
-                  <option value ="6" [selected]="item.PropertyValue ==6">中低区</option>
+                  <option value ="6" [selected]="item.PropertyValue =='6'">中低区</option>
                 </select>
               </div>
               <!-- 供给类型 -->
               <div *ngIf="item.PropertyType == 8" class="selectDiv">
                 <p style="display: inline-block;">{{item.PropertyName}}</p>
                 <select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
-                  <option value ="0" [selected]="item.PropertyValue ==0">消火栓</option>
+                  <option value ="0" [selected]="item.PropertyValue =='0'">消火栓</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">喷淋</option>
+                  <option value ="1" [selected]="item.PropertyValue =='1'">喷淋</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">水幕</option>
+                  <option value ="2" [selected]="item.PropertyValue =='2'">水幕</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">泡沫</option>
+                  <option value ="3" [selected]="item.PropertyValue =='3'">泡沫</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">消防</option>
+                  <option value ="4" [selected]="item.PropertyValue =='4'">消防</option>
                 </select>
               </div>
             </div>
@@ -379,7 +372,7 @@
         
         </div>
         <!-- 消防要素 -->
-        <div id="firecategories" class="firecategories" style="height: 50%;">
+        <div id="firecategories" class="firecategories" style="height: 50%;background-color: white;">
           <!-- 素材属性div鼠标拖动div -->
           <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></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;
@@ -61,6 +59,12 @@
       color: white;
     }
   }
+  .rightSave {
+    margin: 0 10px;
+    cursor: pointer;
+    vertical-align: middle;
+    color: #279FFF;
+  }
 }
 
 //头部操作栏
@@ -109,13 +113,21 @@
   top: 0;
 }
 .functionalDomain {
-  flex: 90%;
+  flex: 95%;
   overflow: hidden;
   .functionalDomainContent {
     position: relative;
     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 +149,7 @@
     }
   }
   .functionalDomainRight {
-    z-index: 1001;
+    z-index: 111;
     margin-right: 0px;
     transition:  margin-right 0.5s;
     border: 1px solid #464646;
@@ -158,6 +170,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%;
@@ -304,6 +351,7 @@
 //右侧消防要素
 .firecategories{
   position: relative;
+  background-color: #fff;
   display: flex;
   flex-flow: column;
   .firecategoriesTree{
@@ -361,19 +409,16 @@ div:focus {
 }
 
 .bigBox{
-  width: 700px;
+  width: 650px;
   height: 40px;
+  line-height: 40px;
   position: absolute;
   overflow: hidden;
   right: 0;
+  top: 0;
 }
 .weatherBox{
-  height: 40px;
+  width: 100%;
-  width: 700px;
-  line-height: 40px;
-  position: absolute;
-  right: 0;
-  transition: right linear .5s;
   .openbtn{
     font-size: 45px;
     height: 45px;

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'
@@ -145,7 +145,7 @@ export class CollectionToolsComponent implements OnInit {
       this.isImgNumCss = false
     }
   }
-  pattern:boolean = true//默认为基本信息编辑
+  pattern:boolean = false//默认为基本信息编辑
   
 
   //基本信息编辑模式
@@ -625,7 +625,7 @@ export class CollectionToolsComponent implements OnInit {
   isxxx = true //控制查看编辑模式的编辑模式按钮
 
   ngOnInit(): void {
-
+    this.canvasData.gameMode = GameMode.Assignment
     if(this.router.url.indexOf("keyUnit/viewunitinfoplan") == -1 && this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
       this.isSixbtn = false
     }
@@ -643,7 +643,7 @@ export class CollectionToolsComponent implements OnInit {
       this.isxxx = false
     }
 
-    this.getAllLibrary() //获取素材库
+    this.getAllLibrary('plan') //获取素材库
     this.getAllBuildings() //获取所有建筑
     this.getAllFirePlan() //获取当前单位灾情
 
@@ -680,7 +680,7 @@ export class CollectionToolsComponent implements OnInit {
     //监听数据变化后
     this.canvas.on('canvasDataChanged',()=>{
       // 收到数据表示共享数据发生变化
-      this.renovateTreeData(false)
+      this.canvasData.selectPanelPoint.BackgroundImageUrl? this.customizeNodes() : this.renovateTreeData(false)
     });
   }
 
@@ -695,10 +695,10 @@ export class CollectionToolsComponent implements OnInit {
     let buildingId = this.beforeOneCheckedBuilding.id
     let floorId = this.selectingSitePlan.id
     this.canvas.paste(companyId,buildingId,floorId)
-    this.renovateTreeData(false)
+    this.canvasData.selectPanelPoint.BackgroundImageUrl? this.customizeNodes() : this.renovateTreeData(false)
   }
 
-  basicInfo:boolean = true //基本信息名称显隐
+  basicInfo:boolean = false //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
   basicInfoClick(){
@@ -1025,12 +1025,7 @@ export class CollectionToolsComponent implements OnInit {
                 disasterId: this.allFirePlan[0].id || ''
                 }
         });
-    
+      } //else
-        dialogRef.afterClosed().subscribe(result => {
-          // console.log('The dialog was closed');
-        });
-      }
-
     } else { //if
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
@@ -1217,10 +1212,9 @@ export class CollectionToolsComponent implements OnInit {
       if(selectPanelPoint.Data){
         for(let key in selectPanelPoint.Data.Stock){
           selectPanelPoint.Data.Stock[key].isLookPattern = true
+          selectPanelPoint.Data.Stock[key].isLook = true
           if(element.id == selectPanelPoint.Data.Stock[key].FireElementId){
             selectPanelPoint.Data.Stock[key].isTemplate = false
-            selectPanelPoint.Data.Stock[key].isLook = true
-            
             element.isNewElement = true //该节点children是否存在新添加的真实素材 标识
 
             //定义查看模式下能看到的元素
@@ -1245,7 +1239,6 @@ export class CollectionToolsComponent implements OnInit {
     });
     this.dataSource.data = treeData
     this.treeControl.expandAll()
-    
   }
 
   //点击树节点
@@ -1276,13 +1269,19 @@ export class CollectionToolsComponent implements OnInit {
 
   //点击数节点的显示隐藏icon
   clickLookItem(node){
-
     //修改真实素材islook属性
     for(let key in this.storeyData.data){
       if(key == node.id){
         this.storeyData.data[key].isLook = !this.storeyData.data[key].isLook
       }
     }
+    if(this.selectPanelPoint && this.selectPanelPoint.Data){
+      for(let key in this.selectPanelPoint.Data.Stock){
+        if(key == node.id){
+          this.selectPanelPoint.Data.Stock[key].isLook = !this.selectPanelPoint.Data.Stock[key].isLook
+        }
+      }
+    }
     
     //所有消防要素模板变化islook值
     if(node.isTemplate){
@@ -1375,10 +1374,12 @@ export class CollectionToolsComponent implements OnInit {
     isRefresh? await this.canvas.refresh() : null
     this.canvas.setNameVisible(this.basicInfo,0)
     this.canvas.setNameVisible(this.wantToWork,1)
+    this.canvas.setLegendVisible(this.isShowLegend) //图例显隐
     isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
     !this.pattern? this.mateFireForce() : null //刷新 建筑楼层 火源/力量图标
+    this.beforeOneCheckedBuildingIsShow = false
 
     let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
     let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
@@ -1391,15 +1392,15 @@ export class CollectionToolsComponent implements OnInit {
     }
     for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
       let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
-      if (!noMatch) {
+      if (!noMatch && storeyData.data[key].Id != "图例") {
         this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
       }
     }
-    let selectPanelPoint =  JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint || {} )) //当前 节点 数据
+    let selectPanelPoint:any =  this.canvasData.selectPanelPoint || {}  //当前 节点 数据
     if(selectPanelPoint.Data){
       for(let key in selectPanelPoint.Data.Stock){ //筛选数据 没有匹配全部放入到   其他   数组
         let noMatch = this.allFireElements.find( every=> every.id===selectPanelPoint.Data.Stock[key].FireElementId )
-        if (!noMatch) {
+        if (!noMatch && selectPanelPoint.Data.Stock[key].Id != "图例") {
           this.allFireElements[this.allFireElements.length-1].children.push(selectPanelPoint.Data.Stock[key])
         }
       }
@@ -1423,6 +1424,12 @@ export class CollectionToolsComponent implements OnInit {
   togglePlane:boolean = true; //可展开面板平面图 显隐
   toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
   toggleHandlePlans:boolean = true; //可展开面板处置预案 显隐
+
+  beforeOneCheckedBuildingIsShow:boolean = false; //想定作业下 建筑是否显示
+  togglebeforeOneCheckedBuilding () { this.beforeOneCheckedBuildingIsShow = !this.beforeOneCheckedBuildingIsShow }
+  isShowLegend:boolean = true; //图例是否显示
+  changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) }
+
   //可展开面板展开或关闭
   toggle () {
     this.toggleExpandPanel = !this.toggleExpandPanel
@@ -1559,7 +1566,7 @@ export class CollectionToolsComponent implements OnInit {
   selectSitePlan (item,index) {
     if (this.selectSitePlanIndex != index) {
       this.canvasData.selectPanelPoint = new DisposalNodeData();
-      if (this.canvasData.isChange) { //true 数据被改动
+      if (this.pattern && this.canvasData.isChange) { //true 数据被改动
         let isTrue = confirm('是否保存当前编辑数据')
         if (isTrue) { //先保存数据 在切换
           let isSuccess = this.saveSite()//true的时候 先保存数据
@@ -1957,6 +1964,7 @@ export class CollectionToolsComponent implements OnInit {
           let params = {disasterId: this.allFirePlan[0].id || ''}
           this.http.get('/api/DisposalNodes',{params:params}).subscribe(data=>{ //所有处置节点
             this.canvasData.allDisposalNode = data
+            this.getDisposalNode()
           })
         })
       } else { //单位 有灾情时
@@ -1964,6 +1972,7 @@ export class CollectionToolsComponent implements OnInit {
         let params = {disasterId: this.allFirePlan[0].id || ''}
         this.http.get('/api/DisposalNodes',{params:params}).subscribe(data=>{ //所有处置节点
           this.canvasData.allDisposalNode = data
+          this.getDisposalNode()
         })
       }
     })
@@ -2126,6 +2135,23 @@ 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地址
+        this.canvasData.selectPanelPointBaseData = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''} //更新 当前数据节点对应父级节点
+        this.selectDisposalNode = ''
+        this.canvasData.selectPanelPoint = new DisposalNodeData() //更新 当前数据节点
+        this.canvasData.selectPanelPoint.BackgroundImageUrl = imgURL
+        this.customizeNodes()
+      }
+    })
+  }
+
   //新建 处置预案 节点
   addPanelPoint (e,item,treeData) {
     e.stopPropagation()
@@ -2218,16 +2244,50 @@ export class CollectionToolsComponent implements OnInit {
           buildingIndex: e.sitePlanId? -1 : this.allBuildings.findIndex(item=>{ return item.id===e.buildingId }), //总平面图/建筑 index
           storeyId: e.sitePlanId? e.sitePlanId : e.buildingAreaId, //楼层id
         }
-        this.http.get('/api/DisposalNodeData',{params:params}).subscribe(data=>{
+        this.http.get('/api/DisposalNodeData',{params:params}).subscribe((data:any)=>{
           this.canvasData.selectPanelPoint = this.canvasData.deserialize(JSON.stringify(data || new DisposalNodeData())) //选择 当前 节点
           this.canvasData.selectPanelPoint.Data = this.canvasData.deserialize(this.canvasData.selectPanelPoint.Data)
-          this.seekPanelPoint(parameter)
+          data.backgroundImageUrl? this.customizeNodes() : this.seekPanelPoint(parameter)
         })
       } //if
 
     } //else if
   }
 
+  //自定义数据节点 时
+  async customizeNodes() {
+    await this.canvas.loadNoRelevantInformationDisposalPlan(this.canvasData.selectPanelPoint)
+    let other = {
+      children: [],
+      computed: true,
+      id: '',
+      name: '其他',
+      order: 999,
+      parentId: null,
+      tag: "INPUT",
+      isLookPattern : true
+    }
+    this.allFireElements = [other]
+    this.canvas.setNameVisible(this.basicInfo,0)
+    this.canvas.setNameVisible(this.wantToWork,1)
+    // this.canvas.setLegendVisible(this.isShowLegend) //图例显隐
+    this.beforeOneCheckedBuildingIsShow = false
+    this.canvasData.isChange = false //服务中 数据是否改动 改为false
+    this.isShowProperty = true
+    this.isShowAttribute = true
+
+    let selectPanelPoint =  JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint || {} )) //当前 节点 数据
+    if(selectPanelPoint.Data){
+      for(let key in selectPanelPoint.Data.Stock){ //筛选数据 没有匹配全部放入到   其他   数组
+        let noMatch = this.allFireElements.find( every=> every.id===selectPanelPoint.Data.Stock[key].FireElementId )
+        if (!noMatch) {
+          this.allFireElements[this.allFireElements.length-1].children.push(selectPanelPoint.Data.Stock[key])
+        }
+      }
+    }
+    this.handleTreeData({data:{}},selectPanelPoint) //处理tree数据结构
+  }
+
   //查找 数据节点 对应 建筑/楼层
   seekPanelPoint (paramsData) {
     this.checkedBuildingIndex = paramsData.buildingIndex

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/collection-tools/save.ts

@@ -57,10 +57,11 @@ export class saveOneDialog {
       @Inject(MAT_DIALOG_DATA) public data) {}
       
     type = this.data.type
-    allDisposalNode = this.data.allDisposalNode
+    allDisposalNode = this.data.allDisposalNode//所有节点数据
-    allPlanDisposalNode = []
+    allPlanDisposalNode = []//所有非数据节点
     allRootDisposalNode =  [{name:"根节点",id:null}]
     allDisposalNodeChild = []
+    defaultSelectedName = '根节点'
     ngOnInit(): void {
       //所有非数据节点
       this.allDisposalNode.forEach(item => {
@@ -84,15 +85,13 @@ export class saveOneDialog {
           }
         })
       })
-      // console.log(this.nodeItem.id)
     }
     onNoClick(): void {
       this.dialogRef.close();
     }
-    nodeItem
+    nodeItem:any//当前选中的要保存到的父节点
-    itemChildNum = 0 //点击处置节点子数据节点的数量
+    itemChildNum = 0 //点击处置节点子数据节点的数量（赋值order）
     clickNode(item){
-      // console.log(item)
       this.nodeItem = item
       this.allDisposalNodeChild.forEach(item => {
         if(item.id ==  this.nodeItem.id){
@@ -105,8 +104,17 @@ export class saveOneDialog {
     selectedSiteData = this.data.selectedSiteData
     onSubmit(value,type){
       this.maskLayerService.sendMessage(true)
-
+      let name
-      let name = this.selectedBuildingData.name + '-' + this.selectedSiteData.name
+      if (this.canvasData.selectPanelPoint.BackgroundImageUrl) { //当前 为自定义处置节点
+        if (this.canvasData.selectPanelPoint.DisposalNodeId) { // 保存逻辑
+          let node = this.canvasData.findDisposalNode(this.canvasData.selectPanelPoint.DisposalNodeId,null)
+          node? name = node.name : null
+        } else { //新建逻辑
+          name = this.canvasData.customizeDisposalNode.name
+        }
+      } else {
+        name = this.selectedBuildingData.name + '-' + this.selectedSiteData.name
+      }
       //如果保存到已有节点
       var postdata = {
         id: "",
@@ -139,7 +147,6 @@ export class saveOneDialog {
             putdata.description = this.canvasData.selectPanelPointBaseData.description
             putdata.notes = this.canvasData.selectPanelPointBaseData.notes
 
-        
         if(istrue){//如果该处置节点下已有同名数据节点 则只修改 2个接口
           new Promise((resolve,reject)=>{
             this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => {
@@ -150,6 +157,14 @@ export class saveOneDialog {
               // 保存平面图数据到当前节点
               let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint)) 
               postdata.Data = JSON.stringify(postdata.Data)
+              postdata.Version = "2.0"
+              postdata.DisposalNodeId ?  null : postdata.DisposalNodeId = istrue.id
+              postdata.PlanComponentId ?  null : postdata.PlanComponentId = sessionStorage.getItem("planId")
+              postdata.Id ?  null : postdata.Id = ''
+              postdata.BackgroundImageUrl? null : postdata.BackgroundImageUrl = null
+              let imgURL = this.uploadBGC() //更新 背景图
+              imgURL.then(url=>{
+                url? postdata.BackgroundImageUrl = url.toString() : null
                 this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => {
                   this.maskLayerService.sendMessage(false)
                   const config = new MatSnackBarConfig();
@@ -165,6 +180,7 @@ export class saveOneDialog {
                 })
                 this.dialogRef.close();
                 this.canvasData.sendMessage('send a message');//发布一条消息
+              }) //imgURL
           })
           
         }else{//需要3个接口
@@ -173,7 +189,6 @@ export class saveOneDialog {
               resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点")
             })
           }).then((values)=>{
-            // console.log(values)
             postdata.level = putdata.level + 1 
             new Promise((resolve,reject) => {
               this.http.post(`/api/DisposalNodes`,postdata).subscribe(data => {
@@ -186,7 +201,11 @@ export class saveOneDialog {
                 version: this.canvasData.selectPanelPoint.Version || "2.0",
                 disposalNodeId: data.id,
                 planComponentId: sessionStorage.getItem("planId"),
+                backgroundImageUrl: this.canvasData.selectPanelPoint.BackgroundImageUrl,
               }
+              let imgURL = this.uploadBGC() //更新 背景图
+              imgURL.then(url=>{
+                url? objData.backgroundImageUrl = url.toString() : null
                 this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => {
                   this.maskLayerService.sendMessage(false)
                   const config = new MatSnackBarConfig();
@@ -202,6 +221,7 @@ export class saveOneDialog {
                 })
                 this.dialogRef.close();
                 this.canvasData.sendMessage('send a message');//发布一条消息
+              }) //imgURL
             })
           })
         }
@@ -280,8 +300,11 @@ export class saveOneDialog {
                 version: this.canvasData.selectPanelPoint.Version || "2.0",
                 disposalNodeId: data.id,
                 planComponentId: sessionStorage.getItem("planId"),
+                backgroundImageUrl: this.canvasData.selectPanelPoint.BackgroundImageUrl,
               }
-              
+              let imgURL = this.uploadBGC() //更新 背景图
+              imgURL.then(url=>{
+                url? objData.backgroundImageUrl = url.toString() : null
                 this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => {
                   this.maskLayerService.sendMessage(false)
                   const config = new MatSnackBarConfig();
@@ -298,8 +321,27 @@ export class saveOneDialog {
                 })
                 this.dialogRef.close();
                 this.canvasData.sendMessage("send a message")
+              }) //imgURL
           })
         })
       }
     }
+
+  //封装方法 上传 自定义底图
+  uploadBGC () {
+    return new Promise((resolve,reject)=>{
+      if (this.canvasData.selectPanelPoint.BackgroundImageUrl && !this.canvasData.selectPanelPoint.DisposalNodeId) { //新建逻辑
+        if (this.canvasData.customizeDisposalNode) {
+          let formData = new FormData()
+          formData.append("file",this.canvasData.customizeDisposalNode.file)
+          this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}/DisposalNode`,formData).subscribe((data:any)=>{
+            resolve('/api/Objects/WebPlan2D/' + data.objectName)
+          })
+        }
+      } else {
+        resolve(null)
+      } //else
+    })
+  }
+
 }

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

@@ -11,7 +11,7 @@
             </div>
             <div mat-dialog-content>
                 <mat-form-field>
-                    <mat-select [(value)]="allRootDisposalNode[0].name" required placeholder="父节点名称">
+                    <mat-select [(value)]="defaultSelectedName" required placeholder="父节点名称">
                         <mat-option *ngFor="let item of allRootDisposalNode" [value]="item.name" (click)="clickNode(item)">
                             {{item.name}}
                         </mat-option>

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,18 @@ 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';
+import {CollectionToolsBuildingComponent,CreateBuildingBuilding,EditBuildingBuilding,ViewDetailsBuilding} from './collection-tools-building/collection-tools.component'
+import {leftFunctionalDomainBuildingComponent,editPlaneFigureBuildingComponent,addDisposalNodeBuildingComponent,editDisposalNodeBuildingComponent} from './collection-tools-building/leftFunctionalDomain'
+import {saveOneDialogBuilding,saveTwoDialogBuilding} from './collection-tools-building/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,CollectionToolsBuildingComponent,CreateBuildingBuilding,EditBuildingBuilding,ViewDetailsBuilding,leftFunctionalDomainBuildingComponent,editPlaneFigureBuildingComponent,addDisposalNodeBuildingComponent,editDisposalNodeBuildingComponent,saveOneDialogBuilding,saveTwoDialogBuilding],
 
   imports: [
     CommonModule,
@@ -157,6 +158,7 @@ import { saveOneDialogPlan, saveTwoDialogPlan } from './collection-tools-plan/sa
   exports:[
     FooterComponent,
     CollectionToolsComponent,
+    CollectionToolsBuildingComponent,
     CollectionToolsPlanComponent
   ]
 })

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

@@ -1,11 +0,0 @@
-import { AxRectangleShape } from "./axRectangleShape";
-
-export class AxImageShapeTest extends AxRectangleShape{
-    /**
-     * 
-     */
-    constructor(x:number,y:number,width:number,height:number) {
-        super(x,y,width,height);
-        
-    }
-}

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

@@ -429,7 +429,6 @@ export class AxLegend extends AxShape {
      */
     public drawBorder(scale: number) {
         const visible = this.upLeft.visible;
-        console.log(visible);
         this.setPointVisiable(false);
 
         super.drawBorder(scale);

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

@@ -0,0 +1,90 @@
+/**
+ * 事件系统
+ */
+export class AxMessageSystem {
+    /** 监听数组 */
+    private static listeners = {};
+
+    /**
+     * 注册事件
+     * @param name 事件名称
+     * @param callback 回调函数
+     * @param context 上下文
+     */
+    public static addListener(name: string, callback: () => void, context: any) {
+        const observers: Observer[] = AxMessageSystem.listeners[name];
+        if (!observers) {
+            AxMessageSystem.listeners[name] = [];
+        }
+        AxMessageSystem.listeners[name].push(new Observer(callback, context));
+    }
+
+    /**
+     * 移除事件
+     * @param name 事件名称
+     * @param callback 回调函数
+     * @param context 上下文
+     */
+    public static removeListener(name: string, callback: () => void, context: any) {
+        const observers: Observer[] = AxMessageSystem.listeners[name];
+        if (!observers) { return; }
+        const length = observers.length;
+        for (let i = 0; i < length; i++) {
+            const observer = observers[i];
+            if (observer.compar(context)) {
+                observers.splice(i, 1);
+                break;
+            }
+        }
+        if (observers.length === 0) {
+            delete AxMessageSystem.listeners[name];
+        }
+    }
+
+    /**
+     * 发送事件
+     * @param name 事件名称
+     */
+    public static send(name: string, ...args: any[]) {
+        const observers: Observer[] = AxMessageSystem.listeners[name];
+        if (!observers) { return; }
+        const length = observers.length;
+        for (let i = 0; i < length; i++) {
+            const observer = observers[i];
+            observer.notify(name, ...args);
+        }
+    }
+}
+
+/**
+ * 观察者
+ */
+class Observer {
+    /** 回调函数 */
+    private callback: () => void;
+    /** 上下文 */
+    private context: any = null;
+
+    constructor(callback: () => void, context: any) {
+        const self = this;
+        self.callback = callback;
+        self.context = context;
+    }
+
+    /**
+     * 发送通知
+     * @param args 不定参数
+     */
+    notify(...args: any[]): void {
+        const self = this;
+        self.callback.call(self.context, ...args);
+    }
+
+    /**
+     * 上下文比较
+     * @param context 上下文
+     */
+    compar(context: any): boolean {
+        return context === this.context;
+    }
+}

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

@@ -1,16 +1,16 @@
-import { Sprite } from "pixi.js";
+import { Sprite } from 'pixi.js';
-import { Graphics } from "pixi.js";
+import { Graphics } from 'pixi.js';
-import { WorkingAreaComponent } from "../working-area.component";
+import { WorkingAreaComponent } from '../working-area.component';
-import { AxShape } from "./axShape";
+import { AxShape } from './axShape';
 
-export class AxRectangleShape extends AxShape{
+export class AxRectangleShape extends AxShape {
     /**
      *
      */
-    constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) {
+    constructor(x: number, y: number, width: number, height: number, assetData: any, workingArea: WorkingAreaComponent) {
-        super(assetData,workingArea);
+        super(assetData, workingArea);
-        this.beginFill(0x0000ff,1);
+        this.beginFill(0x0000ff, 1);
-        this.lineStyle(1, 0xff0000,1);
+        this.lineStyle(1, 0xff0000, 1);
         this.drawRect(x, y, width, height);
         this.endFill();
 

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

@@ -0,0 +1,52 @@
+/**
+ * 选择器
+ */
+export class AxSelection {
+    constructor() {
+    }
+    private objects: Set<any> = new Set<any>();
+    // 获得第一个对象
+    public first(): any {
+        if (this.objects.size > 0) {
+            return [...this.objects][0];
+        } else {
+            return null;
+        }
+    }
+    // 是否已经选择了对象
+    public has(obj: any): boolean {
+        return this.objects.has(obj);
+    }
+    // 获得所有对象
+    public all() {
+        return [...this.objects];
+    }
+    // 获取集合长度
+    public size(): number {
+        return this.objects.size;
+    }
+    // 添加对象
+    public add(obj: any) {
+        this.objects.add(obj);
+    }
+    // 添加集合
+    public addArray(array: any[]) {
+        array.forEach(item => {
+            this.objects.add(item);
+        });
+    }
+    // 移除对象
+    public delete(obj: any) {
+        this.objects.delete(obj);
+    }
+    // 移除集合
+    public deleteArray(array: any[]) {
+        array.forEach(item => {
+            this.objects.delete(item);
+        });
+    }
+    // 清空所有对象
+    public clear() {
+        this.objects.clear();
+    }
+}

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

@@ -8,7 +8,7 @@ import { WorkingAreaComponent } from '../working-area.component';
  */
 export class AxShape extends Graphics {
     assetData: any;
-    pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
+    pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png');
     workingArea: WorkingAreaComponent;
     // 可以被移动的
     moveable = true;
@@ -20,6 +20,10 @@ export class AxShape extends Graphics {
     showName = true;
     // 边框
     border: PIXI.Graphics = new PIXI.Graphics();
+    // 鼠标位置
+    mousePosition: PIXI.Point;
+    // 鼠标拖动
+    mouseDragging: boolean;
 
     constructor(assetData: any, workingArea: WorkingAreaComponent) {
         super();
@@ -35,50 +39,30 @@ export class AxShape extends Graphics {
             .on('pointerdown', event => {
             event.stopPropagation();
             if (this.selectable) {
-                this.workingArea.selection.selectOne(this);
+                this.workingArea.select(this);
             }
             if (this.moveable) {
-                event.currentTarget.data = event.data;
+                this.mouseDragging = true;
-                event.currentTarget.alpha = 0.5;
+                this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y);
-                event.currentTarget.dragging = true;
-
-                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
-                event.currentTarget.dragPoint.x -= event.currentTarget.x;
-                event.currentTarget.dragPoint.y -= event.currentTarget.y;
             }
             })
             .on('pointerup', event => {
-                if (event.currentTarget.dragging) {
+                this.mouseDragging = false;
-                    event.currentTarget.alpha = 1;
-                    event.currentTarget.dragging = false;
-                    event.currentTarget.data = null;
-                }
             })
             .on('pointerupoutside', event => {
-                if (event.currentTarget.dragging) {
+                this.mouseDragging = false;
-                    event.currentTarget.alpha = 1;
-                    event.currentTarget.dragging = false;
-                    event.currentTarget.data = null;
-                }
             })
             .on('pointermove', event => {
-                if (event.currentTarget.dragging) {
+                if (this.mouseDragging) {
-                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                    this.workingArea.selection.all().forEach(item => {
-
+                        const x = event.data.global.x - this.mousePosition.x;
-                    // const offsetX = newPosition.x - event.currentTarget.dragPoint.x;
+                        const y = event.data.global.y - this.mousePosition.y;
-                    // const offsetY = newPosition.y - event.currentTarget.dragPoint.y;
+                        item.x += x * (1 / this.workingArea.backgroundImage.scale.x);
-                    // const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY));
+                        item.y += y * (1 / this.workingArea.backgroundImage.scale.y);
-                    // event.currentTarget.position += offset;
+                        item.assetData.Point = new PIXI.Point(item.x, item.y);
-                    // // this.workingArea.selection.objects.forEach(shpae => {
-                    // //     shpae.x = newPosition.x - event.currentTarget.dragPoint.x;
-                    // //     shpae.y = newPosition.y - event.currentTarget.dragPoint.y;
-                    // //     shpae.assetData.Point = new PIXI.Point(this.x, this.y);
-                    // //     this.workingArea.canvasData.isChange = true;
-                    // // })
-                    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;
+                    });
+                    this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y);
                 }
             })
             .on('rightclick', event => {
@@ -89,7 +73,7 @@ export class AxShape extends Graphics {
 
     }
 
-    refresh(): void{
+    refresh(): void {
 
     }
     public setItemScale(scale: number) {
@@ -127,13 +111,13 @@ export class AxShape extends Graphics {
 
         this.border.lineStyle(scale * 1, 0x00a8ff);
 
-        var spaceLength = scale * 1;
+        const spaceLength = scale * 1;
-        var lineLenght = rect.width + 0.5 + 0.5;
+        const lineLenght = rect.width + 0.5 + 0.5;
-        var dashLength = scale*( lineLenght +spaceLength - Math.floor((rect.width + rect.height)/2 / 4.1))/Math.floor((rect.width + rect.height)/2 / 4.1);
+        const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1);
-        this.drawDash(this.border, p1.x -0.5*scale, p1.y, p2.x + 0.5*scale, p2.y,dashLength,spaceLength);
+        this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength);
-        this.drawDash(this.border, p2.x, p2.y -0.5*scale, p3.x, p3.y + 0.5*scale, dashLength, spaceLength);
+        this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength);
-        this.drawDash(this.border, p3.x+0.5*scale, p3.y, p4.x - 0.5*scale, p4.y, dashLength, spaceLength);
+        this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength);
-        this.drawDash(this.border, p4.x, p4.y + 0.5*scale, p1.x, p1.y - 0.5*scale, dashLength, spaceLength);
+        this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength);
 
         this.border.lineStyle(0, 0x0000ff);
         // this.border.beginFill(0x00ff00,0.1);
@@ -145,16 +129,16 @@ export class AxShape extends Graphics {
         // this.border.endFill();
   }
   // 画虚线
-  drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) {
+  drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) {
-    let x = x2 - x1;
+    const x = x2 - x1;
-    let y = y2 - y1;
+    const y = y2 - y1;
     let hyp = Math.sqrt((x) * (x) + (y) * (y));
-    let units = hyp / (dashLength + spaceLength);
+    const units = hyp / (dashLength + spaceLength);
-    let dashSpaceRatio = dashLength / (dashLength + spaceLength);
+    const dashSpaceRatio = dashLength / (dashLength + spaceLength);
-    let dashX = (x / units) * dashSpaceRatio;
+    const dashX = (x / units) * dashSpaceRatio;
-    let spaceX = (x / units) - dashX;
+    const spaceX = (x / units) - dashX;
-    let dashY = (y / units) * dashSpaceRatio;
+    const dashY = (y / units) * dashSpaceRatio;
-    let spaceY = (y / units) - dashY;
+    const spaceY = (y / units) - dashY;
 
     target.moveTo(x1, y1);
 
@@ -200,7 +184,7 @@ export class AxShape extends Graphics {
         return new PIXI.Point(gravityLat, gravityLng);
     }
     // 计算线段中点坐标
-    public getLineCenter(point1:PIXI.Point,point2:PIXI.Point) {
+    public getLineCenter(point1: PIXI.Point, point2: PIXI.Point) {
-        return new PIXI.Point((point1.x+point2.x)/2,(point1.y+point2.y)/2)
+        return new PIXI.Point((point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
     }
 }

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

@@ -1,37 +0,0 @@
-class MyEvent<T> extends CustomEvent<T> { 
-    public static readonly CMD: string = "EVENT_NAME";
-    public constructor($type: string , $data: T ) { 
-        super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true });
-    }
-}
-
-class MyDispatch extends EventTarget { 
-    private static _instance: MyDispatch;
-    public static get Instance(): MyDispatch { 
-        if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch();
-        return MyDispatch._instance;
-    }
-    public send<T>($data: T, $type: string = MyEvent.CMD): void { 
-        const $event: CustomEvent = new MyEvent<T>($type, $data);
-        this.dispatchEvent($event);
-    }
-}
-
-class Test { 
-
-    public constructor() { 
-        MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener);
-    }
-    private onEvent($e: MyEvent<ITest>): void { 
-        console.log(`target  ${$e.target}`);
-        console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`);
-    }
-}
-
-interface ITest { 
-    _name: string;
-    _occupation: string;
-}
-
-let $test: Test = new Test();
-MyDispatch.Instance.send<ITest>({ _name: `Aonaufly`, _occupation: `it` });

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

@@ -16,9 +16,9 @@ import { PropertyInfo } from './model/PropertyInfo';
 import { AxPreviewImageShape } from './model/axPreviewImageShape';
 import { AxArrowConnector } from './model/axArrowConnector';
 import { AxLegend, Legend } from './model/axLegend';
-import { NullTemplateVisitor } from '@angular/compiler';
-import { AxRectangleShape } from './model/axRectangleShape';
 import { AxGrid } from './model/axGrid';
+import { AxSelection } from './model/axSelection';
+import { AxMessageSystem } from './model/axMessageSystem';
 
 
 @Component({
@@ -76,7 +76,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 选择器
    */
-  public selection: Selection = new Selection(this);
+  public readonly selection: AxSelection = new AxSelection();
   /**
    * 当前鼠标的点
    */
@@ -141,6 +141,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 网格
    */
   public grid: AxGrid = null;
+  // 是否按下Ctrl键
+  isCtrlKeyClicked = false;
+  isMove = false;
   /**
    * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
    * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@@ -148,7 +151,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
    * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
    */
-  public VERSION = '1.0.11.20210122_beta';
+  public VERSION = '1.0.13.20210126_beta';
   /**
    * 数据初始化
    */
@@ -156,13 +159,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
+      event.stopPropagation();
       if (event.keyCode === 17) {
-        this.selection.isMultiselection = true;
+        this.isCtrlKeyClicked = true;
       }
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
+      event.stopPropagation();
       if (event.keyCode === 17) {
-        this.selection.isMultiselection = false;
+        this.isCtrlKeyClicked = false;
         this.rectToolGraphics.visible = false;
         this.rectToolGraphics.clear();
       }
@@ -176,18 +181,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 删除选中的图标
    */
   public deleteSelectedShape() {
-    this.selection.objects.forEach(item => {
+    if (this.selection.size() > 0) {
-      this.deleteShape(item);
+      this.selection.all().forEach(axShape => {
-    });
+        if (this.allowEdit && this.canvasData.gameMode === axShape.assetData.GameMode) {
-    this.selection.deselectAll();
+          // 删除图例对象
+          const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
+          if ( temp !== undefined
+            && temp !== null
+          && axShape.assetData.Name !== '图例') {
+            const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
+            temp.deleteItem(itemLegend);
           }
-  /**
+          if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
-   *
+            // 删除楼层数据
-   * @param obj 删除一个形状
+            delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id];
-   */
+            // 删除建筑数据
-  public deleteShape(shape) {
+            delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id];
-    if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) {
+          } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
-      this.emit('deleteIcon', shape);
+            delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
+            delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
+            delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
+          } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试
+            if (axShape.assetData.Tag === 1) {
+              // 删除楼层数据
+              delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id];
+            } else {
+              delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
+              delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
+              delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
+            }
+          }
+          this.backgroundImage.removeChild(axShape);
+        }
+      });
+      this.selection.clear();
+      this.emit('canvasDataChanged');
+      this.canvasData.isChange = true;
+      AxMessageSystem.send(CanvasAction.selectionChanged);
     }
   }
   /**
@@ -276,7 +306,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 +344,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();
@@ -355,28 +384,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.rectToolGraphics.endFill();
       }
     });
-    /**
-     * 选中事件
-     */
-    this.on('select', (axShape: AxShape) => {
-      // if (axShape instanceof AxRectangleShape) {
-      //   let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
-      //   let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
-      //   let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
-      //   let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture);
-      // } else {
-      axShape.showBorder();
-      axShape.drawBorder(1 / this.backgroundImage.scale.x);
-      axShape.setPointVisiable(this.allowEdit);
-      // }
-    });
-    /**
-     * 取消选中事件
-     */
-    this.on('deselect', (axShape: AxShape) => {
-        axShape.hideBorder();
-        axShape.setPointVisiable(false);
-    });
     /**
      * 创建图标事件（数据处理）
      */
@@ -415,44 +422,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       this.emit('canvasDataChanged');
       this.canvasData.isChange = true;
     });
-    /**
-     * 删除图标事件(数据处理)
-     */
-    this.on('deleteIcon', (axShape: AxShape) => {
-      // 删除图例对象
-      const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
-      if ( temp !== undefined
-        && temp !== null
-      && axShape.assetData.Name !== '图例') {
-        const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
-        temp.deleteItem(itemLegend);
-      }
-
-
-      if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
-        // 删除楼层数据
-        delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id];
-        // 删除建筑数据
-        delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id];
-      } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
-        delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
-        delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
-        delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
-      } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试
-        if (axShape.assetData.Tag === 1) {
-          // 删除楼层数据
-          delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id];
-        } else {
-          delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
-          delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
-          delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
-        }
-
-      }
-      this.backgroundImage.removeChild(axShape);
-      this.emit('canvasDataChanged');
-      this.canvasData.isChange = true;
-    });
   }
   /**
    * 重置画布
@@ -504,7 +473,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) {
 
@@ -513,19 +481,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       }
     });
   }
-  /**
-   * 设置高亮
-   */
-  public setHighlight(ids: string[]): void {
-    this.selection.deselectAll();
-    ids.forEach(item => {
-      let obj = this.backgroundImage.getChildByName(item);
-      if (obj === null) {
-        obj = this.app.stage.getChildByName(item);
-      }
-      this.selection.select(obj);
-    });
-  }
   /**
    * 创建楼层图形
    */
@@ -631,10 +586,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       .on('pointerdown', event => {
         if (event.data.button !== 0) { return; }
         console.log(this.backgroundImage.toLocal(this.mousePosition));
-        if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
+        if (!this.isMove && this.isCtrlKeyClicked === false) {
-          this.selection.deselectAll();
           event.currentTarget.data = event.data;
-          event.currentTarget.dragging = true;
+          this.isMove = true;
           event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
           event.currentTarget.dragPoint.x -= event.currentTarget.x;
           event.currentTarget.dragPoint.y -= event.currentTarget.y;
@@ -828,48 +782,47 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               // this.emit('backgroundScale', this.backgroundImage.scale.x);
                 break;
           }
-        } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
+        } else if (!this.isMove && this.isCtrlKeyClicked === true) {
           this.rectToolGraphics.visible = true;
-          event.currentTarget.dragging = true;
+          this.isMove = true;
           this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
           this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
         }
       })
       .on('pointerup', event => {
-        if (event.currentTarget.dragging) {
+        this.isMove = false;
-          event.currentTarget.dragging = false;
         event.currentTarget.data = null;
-        }
+
         if (this.rectToolGraphics.visible === true) {
+          const shapes: AxShape[] = [];
           this.backgroundImage.children.forEach(item => {
-            if ( item instanceof AxImageShape
+            if ( item instanceof AxShape
-              || item instanceof MultipointIcon
+              && item instanceof AxPreviewImageShape === false) {
-              || 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);
+                shapes.push(item);
               }
             }
           });
           this.rectToolGraphics.clear();
           this.rectToolGraphics.visible = false;
+          this.selectAll(shapes);
         }
       })
       .on('pointerupoutside', event => {
-        if (event.currentTarget.dragging) {
+        if (this.isMove) {
-          event.currentTarget.dragging = false;
+          this.isMove = false;
           event.currentTarget.data = null;
         }
       })
       .on('pointermove', event => {
-        if (event.currentTarget.dragging && this.selection.isMultiselection === false) {
+        if (this.isMove && this.isCtrlKeyClicked === false) {
           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;
-        } else if (event.currentTarget.dragging && this.selection.isMultiselection === true) {
+        } else if (this.isMove && this.isCtrlKeyClicked === true) {
           if (this.rectToolGraphics.visible === true) {
             this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
           }
@@ -877,7 +830,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       })
       .on('rightclick', event => {
         event.stopPropagation();
-        this.selection.deselectAll();
+        this.deselectAll();
         this.setPaintMode(PaintMode.endPaint);
       })
       .on('pointerover', (event) => {
@@ -951,11 +904,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param imageUrl
    * @param imageAngle
    */
-  public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
+  public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl,
+                       imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
     await this.refreshBackgroundImage();
-
     // 清空所有图形
-    this.selection.deselectAll();
+    this.deselectAll();
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@@ -978,10 +931,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 加载无关联信息处置预案
    * @data 处置预案数据
   */
-  public async loadNoRelevantInformationDisposalPlan(data:DisposalNodeData): Promise<void> {
+  public async loadNoRelevantInformationDisposalPlan(data: DisposalNodeData): Promise<void> {
-    await this.refreshBackgroundImage(data.BackgroundImageUrl,data.BackgroundImageAngle);
+    await this.refreshBackgroundImage(data.BackgroundImageUrl, data.BackgroundImageAngle);
     // 清空所有图形
-    this.selection.deselectAll();
+    this.deselectAll();
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@@ -1142,7 +1095,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public beginPaint() {
     console.log(this.canvasData.selectTemplateData);
-    this.selection.deselectAll();
+    this.deselectAll();
     this.setPaintMode(PaintMode.endPaint);
     this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
   }
@@ -1292,7 +1245,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public copy(): void {
       this.copyData = [];
-    this.selection.objects.forEach(item => {
+      this.selection.all().forEach(item => {
         const newData = JSON.parse(JSON.stringify(item.assetData));
         this.copyData.push(newData);
       });
@@ -1301,6 +1254,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 粘贴
    */
   public paste(companyId: string, buildingId: string, floorId: string): void {
+    const ids: string[] = [];
+    if (this.copyData.length > 0) {
       this.copyData.forEach(item => {
         item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
         const newData = JSON.parse(JSON.stringify(item));
@@ -1332,8 +1287,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
             }
             break;
         }
-      this.selection.select(this.backgroundImage.getChildByName(newData.Id));
+        ids.push(newData.Id);
       });
+      this.setHighlight(ids);
+    }
   }
   //////////////////////////////////////////////////////////////////////// 通用/////////////////////////////////////////////////////////////////////////////
   /**
@@ -1357,7 +1314,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public async onExamineeClickFloor() {
     await this.refreshBackgroundImage();
     // 清空所有图形
-    this.selection.deselectAll();
+    this.deselectAll();
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@@ -1384,7 +1341,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public async onExaminerClickFloor() {
     await this.refreshBackgroundImage();
     // 清空所有图形
-    this.selection.deselectAll();
+    this.deselectAll();
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@@ -1410,7 +1367,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public async onExaminerClickFloor_CreateTestpaper() {
     await this.refreshBackgroundImage();
     // 清空所有图形
-    this.selection.deselectAll();
+    this.deselectAll();
     const itemList = [];
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@@ -1428,94 +1385,122 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     // 隐藏图标
     this.setNameVisible(false, 0);
   }
-}
+  //////////////////////////////////////////////////////////////////// 选择逻辑
-
-/**
- * 选择器
- */
-export class Selection {
-  constructor(private workingArea: WorkingAreaComponent) {}
-  public objects: any[] = [];
-  public isMultiselection = false;
   /**
-   * 返回选择器中是否包含对象
+   * 清空选择，选择单个形状
-   * @param obj 对象
+   * @param shape 形状
    */
-  public contains(obj: any): boolean {
+  public selectSingle(shape: AxShape) {
-    return this.objects.includes(obj);
+    if (this.selection.first() !== null) {
+      this.selection.all().forEach(item => {
+        this.clearSelectEffect(item);
+      });
+      this.selection.clear();
+    }
+    this.selection.add(shape);
+    this.setSelectEffect(shape);
+    AxMessageSystem.send(CanvasAction.selectionChanged);
   }
   /**
-   * 选定对象
+   * 选择
-   * @param obj 对象
+   * @param shape 形状
    */
-  public select(obj: any) {
+  public select(shape: AxShape) {
-    if (!this.contains(obj)) {
+    if (this.selection.first() !== null
-      this.workingArea.emit('select', obj);
+      && !this.isCtrlKeyClicked
-      this.objects.push(obj);
+      && !this.selection.has(shape)) {
+      this.selection.all().forEach(item => {
+        this.clearSelectEffect(item);
+      });
+      this.selection.clear();
     }
+    this.selection.add(shape);
+    this.setSelectEffect(shape);
+    AxMessageSystem.send(CanvasAction.selectionChanged);
   }
   /**
-   * 取消选定对象
+   * 选择集合中的形状
-   * @param obj 对象
+   * @param shape 形状集合
    */
-  public deselect(obj: any) {
+  public selectAll(shape: AxShape[]) {
-    if (this.contains(obj)) {
+    this.selection.addArray(shape);
-      this.workingArea.emit('deselect', obj);
+    this.selection.all().forEach(item => {
-      const idx = this.objects.findIndex(x => x === obj);
+        this.setSelectEffect(item);
-      this.objects.splice(idx, 1);
+    });
-    }
+    AxMessageSystem.send(CanvasAction.selectionChanged);
   }
   /**
-   * 选定或取消选定对象
+   * 先清空再选择全部
-   * @param obj 对象
+   * @param shape 形状集合
    */
-  public selectOrDeselect(obj: any) {
+  public selectAllWithClear(shape: AxShape[]) {
-    if (this.contains(obj)) {
+    if (this.selection.first() !== null) {
-      this.deselect(obj);
+      this.selection.all().forEach(item => {
-    } else {
+        this.clearSelectEffect(item);
-      this.select(obj);
+      });
+      this.selection.clear();
     }
+    this.selection.addArray(shape);
+    this.selection.all().forEach(item => {
+        this.setSelectEffect(item);
+    });
+    AxMessageSystem.send(CanvasAction.selectionChanged);
+  }
+  /**
+   * 选择集合中所有id的形状
+   * @param ids 形状id集合
+   */
+  public setHighlight(ids: string[]): void {
+    const shapes: AxShape[] = [];
+    // 重新选择
+    ids.forEach(item => {
+      const obj = this.backgroundImage.getChildByName(item);
+      shapes.push(obj as AxShape);
+    });
+    this.selectAllWithClear(shapes);
   }
   /**
-   * 取消选定所有已选定对象
+   * 取消所有选择
    */
   public deselectAll() {
-    this.objects.forEach(item => {
+    if (this.selection.first() !== null) {
-      this.workingArea.emit('deselect', item);
+      this.selection.all().forEach(item => {
+        this.clearSelectEffect(item);
       });
-    this.objects.splice(0, this.objects.length);
+      this.selection.clear();
+      AxMessageSystem.send(CanvasAction.selectionChanged);
+    }
   }
   /**
-   * 取消选定所有对象后选定一个对象
+   * 设置选中效果
-   * @param obj 对象
+   * @param shape 形状
    */
-  public selectOne(obj: any) {
+  public setSelectEffect(shape: AxShape) {
-    if (this.isMultiselection) {
+    shape.hideBorder();
-      this.selectOrDeselect(obj);
+    shape.setPointVisiable(false);
-    } else {
+    shape.showBorder();
-      this.deselectAll();
+    shape.drawBorder(1 / this.backgroundImage.scale.x);
-      this.select(obj);
+    shape.setPointVisiable(this.allowEdit);
   }
+  /**
+   * 设置形状选中效果
+   * @param shape 形状
+   */
+  public clearSelectEffect(shape: AxShape) {
+    shape.hideBorder();
+    shape.setPointVisiable(false);
   }
+  ////////////////////////////////////////////////////////////////////////////////////////////////图例
   /**
-   * 选定对象集合中所有对象
+   * 设置图例显示隐藏
-   * @param objects 对象集合
+   * @param b true 显示，false隐藏
    */
-  public selectAll(objects: any[]) {
+  public setLegendVisible(b: boolean): void {
-    this.objects.forEach(item => {
+    const legend = this.backgroundImage.getChildByName('图例') as AxLegend;
-      this.select(item);
+    legend.visible = b;
-    });
   }
 }
-
+enum CanvasAction {
-
+  selectionChanged = 'selectionChanged',
-/**
+  copyDataChanged = 'copyDataChanged'
- * 车辆类型
- */
-export enum Type {
-  水源 = 0,
-  举高喷射消防车 = 1,
-  泡沫消防车 = 2,
-  水罐消防车 = 3,
-  压缩空气泡沫消防车 = 4
 }

src/styles.scss

@@ -129,7 +129,7 @@ table td.mat-footer-cell:last-of-type{
 	
 }
 //弹出框样式取消padding
-#shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog{
+#shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog,#addLinkageForce,#videodialog2{
 	padding: 0;
 }
 
@@ -182,3 +182,18 @@ table td.mat-footer-cell:last-of-type{
 		line-height: 30px;
 	}
 }
+#linkageForcesSwiper{
+	.swiper-container{
+		--swiper-navigation-size: 26px;/* 设置按钮大小 */
+	}
+}
+//点聚合自定义图片大小
+.clusterImg{
+	width: 30px;
+	height: 30px;
+}
+//水源采集点聚合
+.clusterImgCollection{
+	width:25px;
+	height:25px;
+}