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

proxy.config.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-      "target": "http://121.37.20.190:8000",
+      "target": "http://39.106.78.171:8000",
       "secure": false,
       "changeOrigin": true
     }

src/app/key-unit/actual-combat-drill/actual-combat-drill.component.html

@@ -0,0 +1,3 @@
+<div class="content">
+  实战演练记录
+</div>

src/app/key-unit/actual-combat-drill/actual-combat-drill.component.scss

@@ -0,0 +1,7 @@
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 1px;
+  overflow: hidden;
+}

src/app/key-unit/actual-combat-drill/actual-combat-drill.component.spec.ts

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

src/app/key-unit/actual-combat-drill/actual-combat-drill.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-actual-combat-drill',
+  templateUrl: './actual-combat-drill.component.html',
+  styleUrls: ['./actual-combat-drill.component.scss']
+})
+export class ActualCombatDrillComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/key-unit/basicinfo-look/basicinfo.component.html

@@ -66,7 +66,7 @@
                             </div>
                             <div class="inputbox" style="width: 700px;">
                                 <span style="color: red;">*</span>
-                                <span>消防救援站：</span>
+                                <span>辖区中队：</span>
                                 <mat-form-field style="width: 538px;">
                                     <input readonly  matInput id="organization" name="organization" type='text'
                                     required minlength="1"
@@ -111,7 +111,7 @@
 
     <!-- body -->
     <div class="bottombox" style="flex: 70%;overflow-y: auto;" >
-        <div class="houseinfobox" style="height: 100%; overflow-y: auto;padding-bottom: 64px; box-sizing:border-box">      
+        <div class="houseinfobox" style="height: 100%; overflow-y: auto;padding-bottom: 34px; box-sizing:border-box">      
                 <!-- <button type="button" mat-icon-button class="addhouseinfo"><mat-icon style="font-size: 38px;">add_circle_outline</mat-icon></button> -->
                 <mat-tab-group style="height: 100%;;" >
                     <mat-tab [label]="item.username" *ngFor="let item of houses;let key = index">

src/app/key-unit/basicinfo-look/basicinfo.component.scss

@@ -157,7 +157,7 @@
     margin-left: 203px;  
 }
 .mat-table{
-    width: 100%;
+    width: 99%;
 }
 
 table{

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

@@ -1,7 +1,7 @@
 
 
 
-<mat-tab-group selectedIndex="0" style="height: 94%;" >
+<mat-tab-group selectedIndex="0" style="height: 97%;" >
     <mat-tab label="1.基本信息">
         <ng-template matTabContent>
             <app-basicinfo></app-basicinfo>
@@ -9,7 +9,8 @@
     </mat-tab>
     <mat-tab label="2.平面图">
         <ng-template matTabContent>
-            <iframe id="main" src="/unityApp2Basic/index.html" name="unityApp" frameborder="0" width="96%" height="100%" style="margin-left: 2%;"></iframe>
+            <app-collection-tools-plan></app-collection-tools-plan>
+            <!-- <iframe id="main" src="/unityApp2Basic/index.html" name="unityApp" frameborder="0" width="96%" height="100%" style="margin-left: 2%;"></iframe> -->
         </ng-template>
     </mat-tab>
     <mat-tab label="3.四周毗邻">
@@ -44,7 +45,7 @@
     </mat-tab>
     <mat-tab label="9.六熟悉记录">
         <ng-template matTabContent>
-            功能开发中~~
+            <app-six-familiar-list></app-six-familiar-list>
         </ng-template>
     </mat-tab>
     <mat-tab label="10.实战演练记录">

src/app/key-unit/find-problem/find-problem.component.html

@@ -0,0 +1,39 @@
+<div class="content">
+  
+  <div class="addBox" *ngIf="isLook == 'edit'">
+    <div><button (click)='add()'>新增</button></div>
+    <div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='keep()'>保存</button></div>
+  </div>
+
+  <div class="center">
+    <div class="fatherDiv">
+
+      <div class="matterDiv" *ngFor="let item of imagesData;let key = index">
+        <div class="leftDiv">
+          <div>问题{{item.index}}:</div>
+          <div *ngIf="isLook == 'edit'"><button (click)='delete(key)'>删除</button></div>
+        </div>
+        <div class="rightDiv">
+          <div style="height: 45%;">
+            <textarea maxlength="500" [(ngModel)]="item.matter" name="matter" [readonly]="isLook == 'look'"></textarea>
+          </div>
+          <div style="height: 55%;" class="imagesBox">
+
+            <div class="everyImg" *ngIf="isLook == 'edit'">
+              <a href="javascript:;" class="a-upload">
+                <input type="file" (change)='selectFile($event,item)'>+
+              </a>
+            </div>
+            <div class="everyImg" *ngFor="let items of item.imgURL;let keys = index" id="viewerjs{{key}}{{keys}}">
+              <img [src]='items' [attr.data-original]="items.split('?')[0]">
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <div *ngIf="!imagesData.length" class="noData">暂无数据</div>
+
+    </div>
+  </div>
+
+</div>

src/app/key-unit/find-problem/find-problem.component.scss

@@ -0,0 +1,134 @@
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #F4F5F9;
+  padding: 5px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .center { 
+    flex: 1; 
+    overflow: hidden;
+    .fatherDiv {
+      width: 100%; 
+      height: 100%; 
+      overflow-x: hidden; 
+      overflow-y: auto;
+      box-sizing: border-box;
+      padding: 10px
+    }
+  }
+  .addBox {
+    margin-top: 15px;
+    >div {
+      display: inline-block;
+      width: 50%;
+    }
+    button {
+      width: 15%;
+      height: 36px;
+      line-height: 36px;
+      color: #fff;
+      background: #4582FC;
+      border-radius: 30px;
+      outline: none;
+      border: none;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+}
+
+.noData {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  margin-top: 30px;
+}
+//问题div
+.matterDiv {
+  width: 100%;
+  height: 180px;
+  box-sizing: border-box;
+  padding: 5px;
+  margin-top: 10px;
+  background-color: #fff;
+  border-radius: 20px;
+  display: flex;
+  .leftDiv {
+    width: 70px;
+    text-align: center;
+    height: 100%;
+    margin-right: 5px;
+    >div {font-size: 16px;}
+    button {
+      height: 22px;
+      background-color:#fff;
+      border-radius: 10px;
+      border: 1px solid red;
+      color: red;
+      font-size: 12px;
+    }
+  }
+  .rightDiv {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+textarea {
+  vertical-align: middle;
+  border-radius: 10px;
+  background-color: #F4F5F9;
+  box-sizing: border-box;
+  padding: 5px;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+}
+.imagesBox::-webkit-scrollbar {display:none}
+.imagesBox {
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 5px;
+  .everyImg {
+    width: 100px;
+    min-width: 100px;
+    max-width: 100px;
+    max-height: 90px;
+    height: 100%;
+    border: 1px dashed #c5c7cc;
+    margin-right: 10px;
+    //上传CAD弹窗 inputfile
+    .a-upload {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      cursor: pointer;
+      color: #888;
+      text-align: center;
+      font-size: 70px;
+      overflow: hidden;
+      display: inline-block;
+    }
+    .a-upload  input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      right: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/app/key-unit/find-problem/find-problem.component.spec.ts

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

src/app/key-unit/find-problem/find-problem.component.ts

@@ -0,0 +1,103 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
+import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
+import Viewer from 'viewerjs';
+
+@Component({
+  selector: 'app-find-problem',
+  templateUrl: './find-problem.component.html',
+  styleUrls: ['./find-problem.component.scss']
+})
+export class FindProblemComponent implements OnInit {
+
+  constructor(public snackBar: MatSnackBar,private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.imagesData =  JSON.parse ( JSON.parse(JSON.stringify(localStorage.getItem('matterData'))) || '[]' )
+    this.isLook = sessionStorage.getItem('six')
+    window.setTimeout(()=>{
+      this.updateIMG()
+    },0)
+  }
+
+  isLook:string//查看模式
+  imagesData = []
+  templateData = {index: 1, matter: '', imgURL:[]} //模板数据
+
+  //刷新图片 大图
+  updateIMG () {
+    this.imagesData.forEach((item,index)=>{
+      item.imgURL.forEach((element,indexs) => {
+        new Viewer(document.getElementById(`viewerjs${index}${indexs}`),{
+          url: 'data-original'
+        });
+      });
+    })
+  }
+
+  //获取问题个数
+  matterIndex () {
+    let index
+    if (this.imagesData.length) {
+      index = this.imagesData[this.imagesData.length-1].index+1
+      return index
+    } else {
+      return 1
+    }
+  }
+
+  //上传文件
+  selectFile (e,item) {
+    let file = e.target.files[0] || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+
+    if (file && fileSize<=shardSize) { //上传文件<=5MB时
+      let formData = new FormData()
+      formData.append("file",file)
+      this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
+        item.imgURL.push(`/api/Objects/PlanPlatform/${data.objectName}?x-oss-process=image/resize,m_fill,h_90,w_100`)
+        window.setTimeout(()=>{
+          this.updateIMG()
+        },0)
+      })
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请上传小于5M图片','确定',config);
+    }
+  }
+
+  //新增
+  add () {
+    let data = JSON.parse(JSON.stringify( this.templateData ));
+    data.index = this.matterIndex()
+    this.imagesData.push(data)
+  }
+
+  //删除
+  delete (index) {
+    let isTrue = confirm('您确定要删除吗?')
+    if (isTrue) {
+      this.imagesData.splice(index,1)
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('删除成功','确定',config);
+    }
+  }
+
+  //保存
+  keep () {
+    let data = JSON.stringify ( JSON.parse(JSON.stringify( this.imagesData )) )
+    localStorage.setItem('matterData',data)
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('保存成功','确定',config);
+  }
+
+
+
+}

src/app/key-unit/fire-fighting-device-look/fire-fighting-device.component.ts

@@ -52,6 +52,13 @@ export class FireFightingDeviceLookComponent implements OnInit {
               elements.total = element.facilityCount[index]
               elements.expanded = false});
           });
+          if(sessionStorage.getItem("tabsindex") == "4"){
+            this.companyBuiltInGrouping = [this.companyBuiltInGrouping[1]]
+            this.companyOptionalGrouping = []
+          }
+          if(sessionStorage.getItem("tabsindex") == "5"){
+            this.companyBuiltInGrouping.splice(1,1)
+          }
         }) //http
       } //if
 
@@ -247,6 +254,14 @@ export class FireFightingDeviceLookComponent implements OnInit {
             newElement.total = elements.facilityCount[index]
             newElement.expanded = false });
         });
+
+        if(sessionStorage.getItem("tabsindex") == "4"){
+          element.buildingFacilityGroups = [element.buildingFacilityGroups[1]]
+          element.buildingOptionalGroups = []
+        }
+        if(sessionStorage.getItem("tabsindex") == "5"){
+          element.buildingFacilityGroups.splice(1,1)
+        }
       })
 
     });

src/app/key-unit/key-unit-management/key-unit-management.component.scss

@@ -146,7 +146,6 @@
     }
     .integrityColorDiv{
         height: 100%;
-        // background-color: #32cd32;
     }
     .integrityDetails{
         position: absolute;

src/app/key-unit/key-unit.module.ts

@@ -74,11 +74,19 @@ import { FireFightingDeviceLookComponent } from './fire-fighting-device-look/fir
 import { ImagesData2, previewBigImg2 } from './fire-fighting-device-look/imagesdata.component';
 import { ImgsDataDetail2 } from './fire-fighting-device-look/addGrouping.component';
 import { LookMaster2 } from './basicinfo-look/lookmaster.component';
-// import { LookMaster2 } from './basicinfo-look/lookmaster.component';
+import { UiModule } from '../../app/ui/ui.module';
-import { UiModule } from '../../app/ui/ui.module'
+import { SixFamiliarityComponent,routerMapComponent } from './six-familiarity/six-familiarity.component';
+import { ActualCombatDrillComponent } from './actual-combat-drill/actual-combat-drill.component';
+import { SixFamiliarListComponent } from './six-familiar-list/six-familiar-list.component'
+import { TrainingRecordinfoComponent } from './training-recordinfo/training-recordinfo.component';
+import { RouterGISComponent } from './router-gis/router-gis.component';
+import { EditText, WaterRoadComponent } from './water-road/water-road.component';
+import { PhotoofthesceneComponent } from './photoofthescene/photoofthescene.component';
+import { KnowRouteComponent } from './know-route/know-route.component';
+import { FindProblemComponent } from './find-problem/find-problem.component';
 
 @NgModule({
-  declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeyImgDetail,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,LookMaster2,addPartitionAttribute2],
+  declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeyImgDetail,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,LookMaster2,addPartitionAttribute2, SixFamiliarityComponent, ActualCombatDrillComponent,routerMapComponent, SixFamiliarListComponent,TrainingRecordinfoComponent,RouterGISComponent,WaterRoadComponent,EditText,PhotoofthesceneComponent,KnowRouteComponent,FindProblemComponent],
   exports:[ViewUnitDetailsPlanComponent],
   imports: [
     CommonModule,

src/app/key-unit/know-route/know-route.component.html

@@ -0,0 +1,37 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-05 15:27:58
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-07 13:08:20
+-->
+<div class="box">
+    <div class="addbw">
+        <span style="margin-left: 8%;">添加熟悉部位:</span>
+        <button style="font-size: 16px;" *ngFor="let item of knowBw; let key=index" (click)="addRoute($event,item)">{{item.name}}</button>
+        <button class="button" (click)="savaClick()" *ngIf="pattern == 'edit'">保存</button>
+    </div>
+    <div class="addRoute">
+        <span style="margin-left: 8%;">添加路线:</span>
+        <input onfocus=this.blur() type="text" >
+        <div class="xxx">
+            <span class="floot" [ngClass]="{'beijicolor': chooseid ==key}" (click)="knowroutwClick(key,item)" *ngFor="let item of uploadSucced; let key=index">{{item.name}}-></span>
+        </div>
+    </div>
+    <div class="bottomAll" *ngIf="showorfalse == 'show'">
+        <div class="upload">
+            <div class="uploadingimg" id="viewerjs">
+                <img [src]="imgsrc"  [attr.data-original]="imgsrc.split('?')[0]" alt="">
+            </div>
+            <div class="image"  *ngIf="inputShow && pattern == 'edit'">
+                <input id="selectedfile" (change)="filechange($event)" type="file" name="imgFile">
+            </div>
+        </div>
+        
+        <div class="remarks">
+            <div style="font-size: 16px;">备注：</div>
+            <textarea [disabled]="pattern == 'look'" name="" id="" cols="50" rows="10" [(ngModel)]="uploadSucced[chooseid].smark"></textarea>
+        </div>
+    </div>
+</div>

src/app/key-unit/know-route/know-route.component.scss

@@ -0,0 +1,114 @@
+.box{
+    width: 100%;
+    height: 100%;
+    //添加熟悉部位
+    .addbw{
+        height: 100px;
+        line-height: 100px;
+        width: 100%;
+        font-size: 18px;
+        button{
+            margin-left:8px;
+        }
+        .button {
+            background-color: #4CAF50; /* Green */
+            border: 1px;
+            color: white;
+            padding:3px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size:18px;
+            margin-left: 30px;
+            cursor: pointer;
+        }
+    }
+    //添加路线
+    .addRoute{
+        height:100px;
+        line-height: 100px;
+        position:relative;
+        white-space: nowrap;
+        input{
+            width:60%;
+            margin-left: 8px;
+            border-top: none;
+            border-left: none;
+            border-right: none;
+            font-size: 0.15625rem;
+            outline: none;
+            background-color: transparent;
+        }
+        hr{
+            width: 5.859375rem;
+            margin-left: 0.78125rem
+            
+        }
+        .xxx{
+            display: inline-block;
+            position: absolute;
+            left: 15%;
+            bottom: 5px;
+        }
+        .floot{
+            cursor: pointer;
+        }
+    }
+    span{
+        font-size:18px;
+    }
+    //底部div
+    .bottomAll{
+        width: 100%;
+        height: 230px;
+        margin-top: 0.488281rem;
+        display: flex;
+        .upload{
+            position: relative;
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            .uploadingimg{
+                width: 45%;
+                height: 75%;
+                top: 0.058594rem;
+                position: absolute;
+                left: 15%;
+                border-radius:3px;
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .image{
+                width: 45%;
+                height: 75%;
+                left: 15%;
+                top: 0.058594rem;
+                position: absolute;
+                border-radius:3px;
+                input{
+                    width: 100%;
+                    height: 100%;
+                    opacity: 0;
+                    cursor: pointer;
+                }    
+            }
+        }
+       
+        .remarks{
+            flex: 1;
+            input{
+                width: 30%;
+                height: 30%;
+            }
+            textarea{
+
+            }
+        }
+    }
+    //熟悉路线选中样式
+    .beijicolor{
+        border: 1px solid #000000;
+    }
+}

src/app/key-unit/know-route/know-route.component.spec.ts

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

src/app/key-unit/know-route/know-route.component.ts

@@ -0,0 +1,157 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-05 15:27:58
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-07 20:00:19
+ */
+import { Component, OnInit } from '@angular/core';
+import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
+import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
+import { FileUploader, FileItem } from 'ng2-file-upload'
+import Viewer from 'viewerjs';
+@Component({
+  selector: 'app-know-route',
+  templateUrl: './know-route.component.html',
+  styleUrls: ['./know-route.component.scss']
+})
+export class KnowRouteComponent implements OnInit {
+
+  constructor(public snackBar: MatSnackBar,private http: HttpClient) { }
+
+
+  pattern:any = sessionStorage.getItem("six")//模式 
+  ngOnInit(): void {
+    
+  }
+ 
+
+
+  //input框显隐
+  inputShow=true
+  //控制底部div显隐
+  showorfalse="www"
+  //判断选中路线的值
+  chooseid:any
+  //熟悉路线对象
+  knowRoute=[{name:``,idnum:""}]
+  //熟悉部位对象
+  knowBw=[{name:"消控室"},{name:"水泵房"},{name:"疏散楼梯"},{name:"各楼层"},{name:"楼层消火栓"},{name:"水泵结合器"},{name:"室外消防水源"}]
+  textareazhi:""
+  //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
+  imgsrc = "../../../assets/images/upload.jpg"
+  imgUrl = ""//返回来的图片地址后缀
+  file: any; //上传的文件
+  objectName: any; //上传对象名
+  uploadId: any; //上传分块上传事件编号
+  isspinner:boolean=false //控制进度圈的显示隐藏
+  PartNumberETag: any = []; //分块上传每次返回需要保存的信息
+  //change选择文件
+  filechange(e) {
+    this.file = e.target.files[0] || null //上传的文件
+    var reader = new FileReader();
+    reader.readAsDataURL(this.file);
+    var image:any = new Image();
+    reader.onload = function(){
+      image.src = reader.result
+    }
+    setTimeout(() => {
+      if(image.width>=4096 || image.height>=5000 ){ 
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config);
+      }else{
+        if(this.file){
+          this.startUploading()
+        }
+      }
+     
+    }, 500);
+  } 
+  //上传文件
+  startUploading() {
+    this.isspinner = true
+    let file = this.file || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+
+    if (file && fileSize <= shardSize) { //上传文件<=5MB时
+      // this.upload()
+      let formData = new FormData()
+      formData.append("file",file)
+      this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
+        this.isspinner = false
+        this.imgUrl = data.objectName
+        this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
+        console.log(this.imgsrc)
+        this.uploadSucced[this.chooseid].src=this.imgsrc
+        this.inputShow=false
+
+        console.log(this.uploadSucced)
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传成功','确定',config);
+      })
+    } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传
+
+    }
+  }
+
+
+  //熟悉部位点击事件
+  addRoute(event,item){
+    if(this.pattern == 'edit'){
+     
+      this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"})
+      this.uploadSucced.push({name:item.name,src:"",smark:""})
+    }else{
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('处于查看模式','确定',config);
+    }
+    
+  }
+
+  savekey
+  uploadSucced:any = JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) || []//上传成功暂存对象
+  gallery
+  //熟悉路线点击事件
+  knowroutwClick(key,item){
+    this.showorfalse = "show"
+    this.chooseid=key
+    setTimeout(() => {
+      if(document.getElementById('viewerjs')){
+        this.gallery = new Viewer(document.getElementById('viewerjs'),{
+          url: 'data-original'
+        });
+      }
+    }, 0);
+    if( JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))
+      && JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key] 
+      && JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src!=""){
+      this.imgsrc=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src
+      this.textareazhi=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].smark
+      this.inputShow=false
+    }else if(this.uploadSucced[key].src!=""){
+      this.imgsrc=this.uploadSucced[key].src
+      this.inputShow=false
+    }else{
+      this.imgsrc="../../../assets/images/upload.jpg"
+      this.textareazhi=""
+      this.inputShow=true
+    }
+  }
+  //保存点击事件
+  savaClick(){
+    localStorage.setItem(sessionStorage.getItem("companyId")+"xxx",JSON.stringify(this.uploadSucced))
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('保存成功','确定',config);
+  }
+
+}

src/app/key-unit/photoofthescene/photoofthescene.component.html

@@ -0,0 +1,96 @@
+<!-- 现场照片 -->
+<table >
+    <tr>
+        <td>
+            <div class="noImg" *ngIf="!unitImg">
+                <div>
+                    <img class="camera" src="../../../assets/images/camera.png" alt="">
+                </div>
+                <p>熟悉单位照片</p>
+                <div>
+                    <span>单位整体建筑或大门照片，要求照拍照时要求设置拍照日期</span>
+                </div>
+            </div> 
+            <div class="input" *ngIf="!unitImg && iseditsix">
+                <input type="file" (change)="filechange1($event,'1')" name="imgFile">
+            </div>
+            <div *ngIf="unitImg" id="viewerjs1">
+                <img class="image" [src]="unitImg" alt="" [attr.data-original]="unitImg.split('?')[0]">
+            </div>
+            <div *ngIf="unitImg && iseditsix" class="deleteicon">
+                <button mat-icon-button (click)="deleteimg('1')">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </div>
+        </td>
+        
+        <td>
+            <div class="noImg" *ngIf="!lingdaoImg">
+                <div>
+                    <img src="../../../assets/images/camera.png" alt="">
+                </div>
+                <p>领导带队现场熟悉照片</p>
+                <div>
+                    <span>人员现场熟悉照片，要求有带队领导及熟悉人员现场熟悉场景，拍照时要求设置拍照日期</span>
+                </div>
+            </div> 
+            <div class="input" *ngIf="!lingdaoImg && iseditsix">
+                <input type="file" (change)="filechange1($event,'2')" name="imgFile">
+            </div>
+            <div *ngIf="lingdaoImg" id="viewerjs2">
+                <img class="image" [src]="lingdaoImg" alt="" [attr.data-original]="lingdaoImg.split('?')[0]">
+            </div>
+            <div *ngIf="lingdaoImg && iseditsix" class="deleteicon">
+                <button mat-icon-button (click)="deleteimg('2')">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="noImg" *ngIf="!peopleImg">
+                <div>
+                    <img src="../../../assets/images/camera.png" alt="">
+                </div>
+                <p>人员现场熟悉照片</p>
+                <div>
+                    <span>人员现场熟悉照片，要求有熟悉人员现场熟悉场景，拍照时要求设置拍照日期</span>
+                </div>
+            </div>   
+            <div class="input" *ngIf="!peopleImg && iseditsix">
+                <input type="file" (change)="filechange1($event,'3')" name="imgFile">
+            </div>
+            <div *ngIf="peopleImg" id="viewerjs3">
+                <img class="image" [src]="peopleImg" alt="" [attr.data-original]="peopleImg.split('?')[0]">
+            </div>  
+            <div *ngIf="peopleImg && iseditsix" class="deleteicon">
+                <button mat-icon-button (click)="deleteimg('3')">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </div>
+        </td>
+        <td>
+            <div class="noImg" *ngIf="!keysiteImg">
+                <div>
+                    <img src="../../../assets/images/camera.png" alt="">
+                </div>
+                <p>单位重点部位照片</p>
+                <div>
+                    <span>重点部位照片，拍照时要求设置拍照日期</span>
+                </div>
+            </div>
+            <div class="input" *ngIf="!keysiteImg && iseditsix">
+                <input type="file" (change)="filechange1($event,'4')" name="imgFile">
+            </div>
+            <div *ngIf="keysiteImg" id="viewerjs4">
+                <img class="image" [src]="keysiteImg" alt="" [attr.data-original]="keysiteImg.split('?')[0]">
+            </div>
+            <div *ngIf="keysiteImg && iseditsix" class="deleteicon">
+                <button mat-icon-button (click)="deleteimg('4')">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </div>
+        </td>
+    </tr>
+</table>

src/app/key-unit/photoofthescene/photoofthescene.component.scss

@@ -0,0 +1,39 @@
+table{
+    margin: 0 auto;
+    width: 85%;
+    height: 80%;
+    margin-top: 3%;
+    border-collapse: collapse;
+    td{ 
+        position: relative;
+        width: 50%;
+        height: 50%;
+        p{
+            font-size: 20px;
+            margin: 8px 0;
+        }
+        span{
+            font-size: 15px;
+            font-weight: 500;
+            color: gray;
+        }
+        input{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            opacity: 0;
+        }
+        .image{
+            height: 100%;
+            width: 299px;
+        }
+        .deleteicon{
+            position: absolute;
+            right: 50px;
+            top: 50px;
+        }
+    }
+}
+table,table tr th, table tr td { border:1px solid black;text-align: center; }

src/app/key-unit/photoofthescene/photoofthescene.component.spec.ts

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

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

@@ -0,0 +1,180 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
+import Viewer from 'viewerjs';
+@Component({
+  selector: 'app-photoofthescene',
+  templateUrl: './photoofthescene.component.html',
+  styleUrls: ['./photoofthescene.component.scss']
+})
+export class PhotoofthesceneComponent implements OnInit {
+
+  constructor(private http: HttpClient,public snackBar: MatSnackBar) { }
+  gallery//viewerJs实例
+  isEditPattern = true
+
+  iseditsix = true
+  ngOnInit(): void {
+    if(sessionStorage.getItem("six") == "look"){
+      this.iseditsix = false
+    }else if(sessionStorage.getItem("six") == "edit"){
+      this.iseditsix = true
+    }
+    setTimeout(() => {
+      if(document.getElementById('viewerjs1')){
+        this.gallery = new Viewer(document.getElementById('viewerjs1'),{
+          url: 'data-original'
+        });
+      }
+      if(document.getElementById('viewerjs2')){
+        this.gallery = new Viewer(document.getElementById('viewerjs2'),{
+          url: 'data-original'
+        });
+      }
+      if(document.getElementById('viewerjs3')){
+        this.gallery = new Viewer(document.getElementById('viewerjs3'),{
+          url: 'data-original'
+        });
+      }
+      if(document.getElementById('viewerjs4')){
+        this.gallery = new Viewer(document.getElementById('viewerjs4'),{
+          url: 'data-original'
+        });
+      }
+    }, 0);
+    
+    if(localStorage.getItem("pattern")=="edit"){
+      this.isEditPattern = true
+    }else if(localStorage.getItem("pattern") == "look"){
+      this.isEditPattern = false
+    }
+  }
+
+  unitImg:any  = localStorage.getItem(sessionStorage.getItem("companyId") + "1") || ""
+  lingdaoImg:any  = localStorage.getItem(sessionStorage.getItem("companyId") + "2") || ""
+  peopleImg:any  = localStorage.getItem(sessionStorage.getItem("companyId") + "3") || ""
+  keysiteImg:any  = localStorage.getItem(sessionStorage.getItem("companyId") + "4") || ""
+
+  //删除照片
+  deleteimg(num){
+    var msg = "您真的确定要删除吗？"; 
+    if (confirm(msg)==true){ 
+      localStorage.removeItem(sessionStorage.getItem('companyId')+num)
+      if(num == "1"){
+        this.unitImg = ""
+      }
+      if(num == "2"){
+        this.lingdaoImg = ""
+      }
+      if(num == "3"){
+        this.peopleImg = ""
+      }
+      if(num == "4"){
+        this.keysiteImg = ""
+      }
+      
+    }else{ 
+     return false; 
+    } 
+  }
+  //熟悉单位照片上传
+  file:any
+  filechange1(e,index){
+    this.file = e.target.files[0] || null //上传的文件
+    var reader = new FileReader();
+    reader.readAsDataURL(this.file);
+    var image:any = new Image();
+    reader.onload = function(){
+      image.src = reader.result
+    }
+    setTimeout(() => {
+      if(image.width>=4096 || image.height>=5000 ){ 
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config);
+      }else{
+        if(this.file){
+          this.startUploading(index)
+        }
+      }
+    }, 500);
+  }
+
+
+  isspinner:any //进度圈
+  imgUrl:any //上传后的图片地址
+  imgsrc:any //上传后的缩略图地址
+
+  //上传文件
+  startUploading(type) {
+    this.isspinner = true
+    let file = this.file || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+
+    if (file && fileSize <= shardSize) { //上传文件<=5MB时
+      // this.upload()
+      let formData = new FormData()
+      formData.append("file",file)
+      this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
+        this.isspinner = false
+        this.imgUrl = data.objectName
+        this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
+        localStorage.setItem(sessionStorage.getItem("companyId") + type, this.imgsrc)
+        if(type == '1'){
+          this.unitImg = this.imgsrc
+          setTimeout(() => {
+            this.gallery = new Viewer(document.getElementById('viewerjs1'),{
+              url: 'data-original'
+            });
+          }, 0);
+        }
+        if(type == '2'){
+          this.lingdaoImg = this.imgsrc
+          setTimeout(() => {
+            this.gallery = new Viewer(document.getElementById('viewerjs2'),{
+              url: 'data-original'
+            });
+          }, 0);
+        }
+        if(type == '3'){
+          this.peopleImg = this.imgsrc
+          setTimeout(() => {
+            this.gallery = new Viewer(document.getElementById('viewerjs3'),{
+              url: 'data-original'
+            });
+          }, 0);
+        }
+        if(type == '4'){
+          this.keysiteImg = this.imgsrc
+          setTimeout(() => {
+            this.gallery = new Viewer(document.getElementById('viewerjs4'),{
+              url: 'data-original'
+            });
+          }, 0);
+        }
+        
+
+
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传成功','确定',config);
+        
+        
+      })
+    } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请上传小于5M图片','确定',config);
+      // let data = { filename: file.name }
+      // this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.unitinfo.id}`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传
+      //   this.objectName = data.objectName
+      //   this.uploadId = data.uploadId
+      //   this.subsectionUploading()
+      // })
+    }
+  }
+}

src/app/key-unit/router-gis/router-gis.component.html

@@ -0,0 +1,7 @@
+<div class="content">
+  <div class="center" id="center"></div>
+  <div class="btnbox">
+    <div class="btn" (click)="next()">已到达熟悉单位</div>
+    <div (click)="back()">取消本次任务</div>
+  </div>
+</div>

src/app/key-unit/router-gis/router-gis.component.scss

@@ -0,0 +1,35 @@
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 3px;
+  overflow: hidden;
+  position: relative;
+  .center {
+    width: 100%;
+    height: 740px;
+  }
+  .btnbox{
+    position: absolute;
+    left: 50%;
+    bottom: 7%;;
+    transform: translateX(-50%);
+    display: flex;
+    div{
+      text-align: center;
+      width:130px;
+      height: 48px;
+      line-height: 48px;
+      opacity: 1;
+      border-radius: 30px;
+      font-size: 16px;
+      margin: 0 12px;
+      background: #E9EAF3;
+      cursor: pointer;
+    }
+    .btn{
+      background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);
+      color: #fff;
+    }
+  }
+}

src/app/key-unit/router-gis/router-gis.component.spec.ts

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

src/app/key-unit/router-gis/router-gis.component.ts

@@ -0,0 +1,60 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+declare var AMap: any;
+
+@Component({
+  selector: 'app-router-gis',
+  templateUrl: './router-gis.component.html',
+  styleUrls: ['./router-gis.component.scss']
+})
+export class RouterGISComponent implements OnInit {
+  @Output() onCustomEvent: EventEmitter<any> = new　EventEmitter();//创建实力
+  constructor() { }
+
+  ngOnInit(): void {
+    window.setTimeout(()=>{
+      this.mapInit()
+    },0)
+  }
+  
+  ngAfterViewInit(): void {
+   
+  }
+
+  //地图初始化
+  mapInit () {
+    console.log("ditu")
+    //创建地图
+    let map = new AMap.Map('center', {
+      resizeEnable: true,
+      cursor: 'default',
+      zooms:[6,18],
+    });
+    //构造路线导航类 实际路线
+    let driving = new AMap.Driving({
+      map: map,
+      showTraffic: true,
+      isOutline: true,
+    });
+    driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
+    //构造路线导航类 导航路线
+    let drivingTwo = new AMap.Driving({
+      map: map,
+      showTraffic: false,
+    });
+    drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
+    //function (status,result) { console.log(status,result) } //地图路线 匹配起始点回调函数
+    //new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719) / [{keyword: '淄博站',city:'山东'},{keyword: '淄博北站',city:'山东'}], //路线可搜索, 可用坐标
+  }
+
+  //下一步
+  next(){
+    this.emitEvent()
+  }
+  private emitEvent(){
+    this.onCustomEvent.emit('data from child');//通过emit可将需要传递的数据发送给父组件
+  }
+  //取消
+  back(){
+    window.history.back();
+  }
+}

src/app/key-unit/six-familiar-list/six-familiar-list.component.html

@@ -0,0 +1,25 @@
+<div class="box" style="height: 100%;">
+    <div *ngIf="!isnext" class="table">
+      <table>
+        <tr>
+          <th class="firstContent"></th>
+          <th>熟悉记录</th>
+          <th>记录时间</th>
+          <th>带队领导</th>
+          <th>上传人员</th>
+          <th>操作</th>
+        </tr>
+        <tr *ngFor="let item of tableData">
+          <td class="firstContent"><mat-checkbox></mat-checkbox></td>
+          <td class="overflowText">{{item.target}}</td>
+          <td class="overflowText">{{item.time}}</td>
+          <td>{{item.leadTheTeam}}</td>
+          <td>{{item.updateStaff}}</td>
+          <td class="fontColor" (click)='viewDetails()'>查看详情</td>
+        </tr>
+      </table>
+    </div>
+    <div *ngIf="isnext" class="app" style="height: 100%;">
+        <app-training-recordinfo></app-training-recordinfo>
+    </div>
+</div>

src/app/key-unit/six-familiar-list/six-familiar-list.component.scss

@@ -0,0 +1,37 @@
+.box {
+    box-sizing: border-box;
+    padding: 5px;
+    overflow: hidden;
+    .table {
+      width: 100%;
+      max-height: 100%;
+      overflow-y: auto;
+    }
+    table {
+      width: 100%;
+      background: #2196f3;
+      text-align: center;
+      border-collapse:collapse;
+      word-break:break-all; 
+      word-wrap:break-all;
+      table-layout:fixed;
+      .firstContent { width:50px; }
+      th {
+        height: 50px;
+        font-weight: normal;
+        font-size: 18px;
+        color: #fff;
+        // border-bottom: 1px solid rgb(211, 207, 207);
+      }
+      td {
+        height: 50px;
+        font-size: 15px;
+        background-color: #fff;
+        border-top: 1px solid rgb(211, 207, 207);
+      }
+    }
+  }
+  .fontColor{
+    cursor: pointer;
+    color: #2196f3;
+  }

src/app/key-unit/six-familiar-list/six-familiar-list.component.spec.ts

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

src/app/key-unit/six-familiar-list/six-familiar-list.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-six-familiar-list',
+  templateUrl: './six-familiar-list.component.html',
+  styleUrls: ['./six-familiar-list.component.scss']
+})
+export class SixFamiliarListComponent implements OnInit {
+
+  constructor() { }
+  tableData :any = [
+    {target: '记录1', time: '2020-10-29 07:19', leadTheTeam: '郑子墨', updateStaff: '赵竹林', },
+    {target: '记录2', time: '2020-11-02 07:19', leadTheTeam: '何先超', updateStaff: '何晨', },
+    {target: '记录3', time: '2020-11-02 11:19', leadTheTeam: '吴洁丽', updateStaff: '赵玉', },
+    {target: '记录4', time: '2020-11-03 07:19', leadTheTeam: '吴毅溪', updateStaff: '赵晓慧', },
+    {target: '记录5', time: '2020-11-07 07:19', leadTheTeam: '周伟林', updateStaff: '李英顺', },
+    {target: '记录6', time: '2020-11-11 07:19', leadTheTeam: '李林颖', updateStaff: '吴思怡', },
+    {target: '记录7', time: '2020-11-12 07:19', leadTheTeam: '李双杆', updateStaff: '钱浩宇', },
+    {target: '记录8', time: '2020-11-14 11:19', leadTheTeam: '孙正荣', updateStaff: '孙正云', },
+    {target: '记录9', time: '2020-11-17 07:19', leadTheTeam: '赵虎林', updateStaff: '冯燕', },
+    {target: '记录10', time: '2020-11-20 07:19', leadTheTeam: '周伟林', updateStaff: '李英顺', },
+    {target: '记录11', time: '2020-11-22 07:19', leadTheTeam: '冯燕', updateStaff: '冯靖宇', },
+  ]
+  ngOnInit(): void {
+  }
+  //点击查看详情
+  isnext = false
+  viewDetails(){
+    this.isnext = true
+  }
+}

src/app/key-unit/six-familiarity/routerMap.html

@@ -0,0 +1,3 @@
+<div class="contentMap" id="contentMap">
+
+</div>

src/app/key-unit/six-familiarity/six-familiarity.component.html

@@ -0,0 +1,6 @@
+<div class="content">
+
+  <div class="mapCenter" id="mapCenter">
+    <app-routerMap></app-routerMap>
+  </div>
+</div>

src/app/key-unit/six-familiarity/six-familiarity.component.scss

@@ -0,0 +1,21 @@
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 1px;
+  overflow: hidden;
+}
+
+//地图div
+.mapCenter {
+  width: 700px;
+  height: 500px;
+  margin: 100px auto;
+  border: 1px solid #000;
+}
+
+//地图组件
+.contentMap {
+  width: 100%;
+  height: 100%;
+}

src/app/key-unit/six-familiarity/six-familiarity.component.spec.ts

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

src/app/key-unit/six-familiarity/six-familiarity.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+declare var AMap: any;
+
+@Component({
+  selector: 'app-six-familiarity',
+  templateUrl: './six-familiarity.component.html',
+  styleUrls: ['./six-familiarity.component.scss']
+})
+export class SixFamiliarityComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+}
+
+
+
+//地图组件
+@Component({
+  selector: 'app-routerMap',
+  templateUrl: './routerMap.html',
+  styleUrls: ['./six-familiarity.component.scss']
+})
+export class routerMapComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterViewInit(): void {
+    window.setTimeout(()=>{
+      this.mapInit()
+    },0)
+  }
+
+  //地图初始化
+  mapInit () {
+    //创建地图
+    let map = new AMap.Map('contentMap', {
+      resizeEnable: true,
+      cursor: 'default',
+      zooms:[6,18],
+    });
+    //构造路线导航类 实际路线
+    let driving = new AMap.Driving({
+      map: map,
+      showTraffic: true,
+      isOutline: true,
+    });
+    driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
+    //构造路线导航类 导航路线
+    let drivingTwo = new AMap.Driving({
+      map: map,
+      showTraffic: false,
+    });
+    drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
+    //function (status,result) { console.log(status,result) } //地图路线 匹配起始点回调函数
+    //new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719) / [{keyword: '淄博站',city:'山东'},{keyword: '淄博北站',city:'山东'}], //路线可搜索, 可用坐标
+  }
+
+
+
+}

src/app/key-unit/training-recordinfo/training-recordinfo.component.html

@@ -0,0 +1,79 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-06 10:44:49
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-06 17:07:16
+-->
+<div class="bigbox">
+    <!-- <div class="title">
+        <app-title [title]="title"></app-title>
+    </div> -->
+    
+    <div class="content">
+        <div class="cardbox">
+            <mat-tab-group  style="height: 100%;" [selectedIndex]="tabsSelectedIndex" (selectedTabChange)="selectedtab($event)">
+                
+                <mat-tab label="行驶路线"> 
+                    <ng-template matTabContent>
+                        <app-router-gis (onCustomEvent)="onCustom($event)"></app-router-gis>
+                    </ng-template>
+                    
+                </mat-tab>
+                <mat-tab label="熟悉路线"> 
+                    <ng-template matTabContent>
+                        <app-know-route></app-know-route>
+                    </ng-template>
+                    
+                </mat-tab>
+                <mat-tab label="单位基本情况">  
+                    <ng-template matTabContent>
+                        <app-basicinfo *ngIf="sixeditpattern"></app-basicinfo> 
+                        <app-basicinfo-look *ngIf="!sixeditpattern"></app-basicinfo-look>    
+                    </ng-template>
+                    
+                </mat-tab> 
+                <mat-tab label="平面图" > 
+                    <ng-template matTabContent >
+                        <app-collection-tools></app-collection-tools>    
+                    </ng-template>
+                   
+                </mat-tab>
+                <mat-tab label="安全疏散设施情况"> 
+                    <ng-template matTabContent>
+                        <app-fire-fighting-device *ngIf="sixeditpattern"></app-fire-fighting-device>
+                        <app-fire-fighting-device-look *ngIf="!sixeditpattern"></app-fire-fighting-device-look>
+                    </ng-template>  
+                </mat-tab>
+                <mat-tab label="消防设施情况">
+                    <ng-template matTabContent>
+                        <app-fire-fighting-device *ngIf="sixeditpattern"></app-fire-fighting-device>
+                        <app-fire-fighting-device-look *ngIf="!sixeditpattern"></app-fire-fighting-device-look>
+                    </ng-template>  
+                </mat-tab>
+                <mat-tab label="水源道路情况"> 
+                    <ng-template matTabContent>
+                        <app-water-road></app-water-road>
+                    </ng-template>      
+                </mat-tab>
+                <mat-tab label="重点部位情况"> 
+                    <ng-template matTabContent>
+                        <app-function-division *ngIf="sixeditpattern"></app-function-division> 
+                        <app-function-division-look *ngIf="!sixeditpattern"></app-function-division-look>   
+                    </ng-template>    
+                </mat-tab>
+                <mat-tab label="发现问题">
+                  <ng-template matTabContent>
+                    <app-find-problem></app-find-problem>
+                  </ng-template> 
+                </mat-tab>
+                <mat-tab label="现场照片"> 
+                    <ng-template matTabContent>
+                        <app-photoofthescene></app-photoofthescene>
+                    </ng-template>  
+                </mat-tab>
+            </mat-tab-group>
+        </div>
+    </div>
+</div>

src/app/key-unit/training-recordinfo/training-recordinfo.component.scss

@@ -0,0 +1,31 @@
+.bigbox{
+    width: 100%;
+    height: 100%;
+    background: #F4F5F9;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .title{
+        width: 100%;
+        height: 0.585938rem;
+    }
+    .content{
+        flex: 1;
+        overflow: hidden;
+        .cardbox{
+            margin: 0 auto;
+            margin-top:0.195313rem;
+            background-color: #fff;
+            border-radius: 0.048828rem;
+            width:100%;
+            height: 100%;
+        }
+    }
+}
+.mat-tab-body-wrapper {
+  height: 100%;
+  overflow: hidden;
+}
+.mat-tab-body-wrapper{
+    height: 100%!important;
+}

src/app/key-unit/training-recordinfo/training-recordinfo.component.spec.ts

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

src/app/key-unit/training-recordinfo/training-recordinfo.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-training-recordinfo',
+  templateUrl: './training-recordinfo.component.html',
+  styleUrls: ['./training-recordinfo.component.scss']
+})
+export class TrainingRecordinfoComponent implements OnInit {
+  tabsSelectedIndex:any = 0//当前选项卡值
+  constructor() { }
+  title:any = "训练记录信息"
+
+  sixeditpattern = true
+  ngOnInit(): void {
+    if(sessionStorage.getItem("six") == "edit"){
+      this.sixeditpattern = true
+    }else{
+      this.sixeditpattern = false
+    }
+  }
+  onCustom($event){
+    console.log($event);//data from child
+    this.tabsSelectedIndex = 1
+  }
+  selectedtab(e){
+    sessionStorage.setItem("tabsindex",e.index)
+    // console.log(e.index)
+  }
+}

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

@@ -46,7 +46,8 @@
     </mat-tab>  
     <mat-tab label="10.作战部署">
         <ng-template matTabContent>
-            <iframe id="main" src="/unityApp2/index.html" name="unityApp" frameborder="0" width="100%" height="98%"></iframe>
+          <app-collection-tools></app-collection-tools>
+          <!-- <iframe id="main" src="/unityApp2/index.html" name="unityApp" frameborder="0" width="100%" height="98%"></iframe> -->
         </ng-template>
     </mat-tab>  
 </mat-tab-group>

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

@@ -1,4 +1,4 @@
-<mat-tab-group selectedIndex="0" style="height:94%;" >
+<mat-tab-group selectedIndex="0" style="height:97%;" (selectedTabChange)="selectedtab($event)">
     <mat-tab label="1.基本信息">
         <ng-template matTabContent>
             <app-basicinfo-look></app-basicinfo-look>
@@ -6,7 +6,8 @@
     </mat-tab>
     <mat-tab label="2.平面图">
         <ng-template matTabContent>
-            <iframe id="main" src="/unityApp2Basic/index.html" name="unityApp" frameborder="0" width="96%" height="100%" style="margin-left:2%;"></iframe>
+            <!-- <iframe id="main" src="/unityApp2Basic/index.html" name="unityApp" frameborder="0" width="96%" height="100%" style="margin-left:2%;"></iframe> -->
+            <app-collection-tools-plan></app-collection-tools-plan>
         </ng-template>
     </mat-tab>
     <mat-tab label="3.四周毗邻">
@@ -41,7 +42,7 @@
     </mat-tab>
     <mat-tab label="9.六熟悉记录">
         <ng-template matTabContent>
-            功能开发中~~
+          <app-six-familiar-list></app-six-familiar-list>
         </ng-template>
     </mat-tab>
     <mat-tab label="10.实战演练记录">

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

@@ -12,4 +12,7 @@ export class ViewUnitDetailsComponent implements OnInit {
   ngOnInit(): void {
   }
   
+  selectedtab(e){
+    sessionStorage.setItem("tabsindex",e.index)
+  }
 }

src/app/key-unit/water-road/edittext.html

@@ -0,0 +1,14 @@
+<div class="dialogbox">
+    <div class="title">
+        <span style="color: #FC7045;">说明:</span>
+        <span>水源情况主要包括消火栓位置、管径、外观完好情况、停车取水位置试水情况，消防水池位置、容量、停车取水位置、取水测试情况，取消码头位置、水位、停车取水位置等；道路情况主要包括道路长度、宽度、起始点、沿线重点单位、立交、桥梁、涵洞及其通车能力。</span>
+        <span style="color: #FC7045;">【该项主要在道路水源熟悉时填写】</span>
+    </div>
+    <div class="text">
+        <textarea [disabled]="!iseditsix" name="" id="" cols="30" rows="10" placeholder="请输入水源情况" [(ngModel)]="textcontant"></textarea>
+    </div>
+    <div class="btnbox">
+        <div *ngIf="iseditsix" (click)="ok()">确认</div>
+        <div (click)="cancel()">取消</div>
+    </div>
+</div>

src/app/key-unit/water-road/water-road.component.html

@@ -0,0 +1,19 @@
+<div class="content">
+    <div class="center" id="map"></div>
+    <!-- <div class="textbox">
+        <div class="btn">
+            <span>
+                <mat-icon (click)="save()">description</mat-icon>
+                <mat-icon (click)="clickicon()">create</mat-icon>
+            </span>
+        </div>
+        <div class="text"  [hidden]="!isshow">
+            <textarea [(ngModel)]="textcontant" name="" id="" cols="28" rows="18" placeholder="水源情况主要包括消火栓位置、管径、外观完好情况、停车取水位置试水情况，消防水池位置、容量、停车取水位置、取水测试情况，取消码头位置、水位、停车取水位置等；道路情况主要包括道路长度、宽度、起始点、沿线重点单位、立交、桥梁、涵洞及其通车能力。【该项主要在道路水源熟悉时填写】"></textarea>
+        </div>
+    </div> -->
+    <div class="editbtn" (click)="opendialog()">
+        <p style="margin-top: 20px;"><mat-icon>create</mat-icon></p>
+        <p style="font-size: 16px;color: #fff;">编辑</p>
+    </div>
+</div>
+  

src/app/key-unit/water-road/water-road.component.scss

@@ -0,0 +1,81 @@
+.content {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0.244141rem;
+    overflow: hidden;
+    position: relative;
+    .center {
+      width: 100%;
+      height: 100%;
+    }
+    .textbox{
+      position: absolute;
+      z-index: 999;
+      right: 0.244141rem;
+      top:0.244141rem;
+      .btn{
+        text-align: right;
+      }
+    }
+    .editbtn{
+      text-align: center;
+      position: absolute;
+      right: 50px;
+      bottom: 50px;
+      width: 80px;
+      height: 80px;
+      background: linear-gradient(360deg, #FC7045 0%, #FF4923 100%);
+      box-shadow: 0px 2px 10px #D8A798;
+      border-radius: 50%;
+      opacity: 1;
+      p{
+        color: #fff;
+      }
+    }
+  }
+
+
+  .dialogbox{
+    width: 800px;
+    height: 600px;
+    .title{
+      span{
+        font-size: 16px;
+      }
+    }
+    .text{
+      width: 97%;
+      height: 420px;
+      margin-top:30px;
+      background: #F4F5F9;
+
+      border-radius: 10px;
+      textarea{
+        width: 100%;
+        height: 100%;
+        font-size: 16px;
+      }
+    }
+    .btnbox{
+      display: flex;
+      margin-top: 30px;
+      justify-content: center;
+      div{
+        cursor: pointer;
+        font-size: 16px;
+        width: 180px;
+        height: 48px;
+        line-height: 48px;
+        text-align: center;
+        background: #E9EAF3;
+        opacity: 1;
+        border-radius: 30px;
+        margin: 0 10px;
+      }
+      div:nth-child(1){
+        color: #fff;
+        background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);
+      }
+    }
+  }

src/app/key-unit/water-road/water-road.component.spec.ts

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

src/app/key-unit/water-road/water-road.component.ts

@@ -0,0 +1,148 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+declare var AMap: any;
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-water-road',
+  templateUrl: './water-road.component.html',
+  styleUrls: ['./water-road.component.scss']
+})
+export class WaterRoadComponent implements OnInit {
+
+  constructor(public snackBar: MatSnackBar,public dialog: MatDialog) { }
+  isshow:boolean = true
+  textcontant:any = localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || ""
+  clickicon(){
+    this.isshow = !this.isshow
+  }
+  save(){
+    localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant)
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('保存成功','确定',config);
+  }
+  map:any //地图
+
+  
+  ngOnInit(): void {
+    
+    setTimeout(() => {
+      this.creatMap()
+     
+    }, 0);
+  }
+
+
+  creatMap(){
+    var satellite = new AMap.TileLayer.Satellite();
+    var roadNet = new AMap.TileLayer.RoadNet();
+    
+    // 创建一个 icon
+    var startIcon = new AMap.Icon({
+      image: '../../../assets/images/fireHydrant.png',
+      // // 图标所用图片大小
+      imageSize: new AMap.Size(20, 20),
+      // // 图标取图偏移量
+      // imageOffset: new AMap.Pixel(-9, -3)
+    });
+    let arr = [{lng:108.299405,lat: 22.894884},
+              {lng:108.597409,lat: 22.80883},
+              {lng:108.689419,lat: 23.061775},
+              {lng:107.971188,lat: 22.950537},
+              {lng:107.847592,lat: 23.090833},
+              {lng:108.176374,lat: 22.790585},
+              {lng:108.407087,lat: 22.671522},
+              {lng:108.158521,lat: 22.61322},
+              {lng:107.925062,lat: 22.565038},
+              {lng:108.180494,lat: 22.501616},
+              {lng:107.743222,lat: 22.535121},
+              {lng:108.373809,lat: 22.764746},
+              {lng:108.378895,lat: 22.761877},
+              {lng:108.383337,lat: 22.766467},
+              {lng:108.37647,lat: 22.763341},
+              {lng:108.37662,lat: 22.767397},
+              {lng:108.378916,lat: 22.758513},
+              {lng:108.379045,lat: 22.765695},
+              {lng:108.384731,lat: 22.760096},]
+    let Arr = []
+    arr.forEach(item=>{
+      let viaMarker = new AMap.Marker({
+        position: new AMap.LngLat(item.lng, item.lat),
+        icon: startIcon,
+        offset: new AMap.Pixel(-10, -10)
+      })
+      Arr.push(viaMarker)
+    })
+    var markerIcon = new AMap.Icon({            
+      image:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+      size: new AMap.Size(52, 52),  //图标大小
+      imageSize: new AMap.Size(26,36)
+    }) 
+    let marker1 = new AMap.Marker({
+      icon: markerIcon,
+      position: [108.377865, 22.763499],
+      offset: new AMap.Pixel(-4, -50)
+    });
+  
+    this.map = new AMap.Map('map',{
+      center: [108.377865, 22.763499], //初始地图中心点
+      zoom: 16
+    });
+    marker1.setMap(this.map);
+    this.map.on('click', (e) => {
+      console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()) 
+    });
+
+    // this.map.setCity('南宁市')
+    this.map.add(Arr);//火源标点
+
+
+  }
+
+  opendialog(){
+    let dialogRef = this.dialog.open(EditText);
+    dialogRef.afterClosed().subscribe(data=>{
+      if(data){
+      
+      }
+    });  
+  }
+}
+
+
+//编辑水源道路情况
+@Component({
+  selector: 'app-editBuilding',
+  templateUrl: './edittext.html',
+  styleUrls: ['./water-road.component.scss']
+})
+export class EditText {
+  
+  constructor(public snackBar: MatSnackBar,public dialog: MatDialog,public dialogRef: MatDialogRef<EditText>,@Inject(MAT_DIALOG_DATA) public data) { }
+  textcontant:any =  localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || ""//输入内容
+  iseditsix = true
+  ngOnInit(): void {
+    if(sessionStorage.getItem("six") == "look"){
+      this.iseditsix = false
+    }else if(sessionStorage.getItem("six") == "edit"){
+      this.iseditsix = true
+    }
+  }
+
+
+  //确定
+  ok(){
+    localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant)
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('保存成功','确定',config);
+    this.dialogRef.close();
+  }
+  //取消
+  cancel(){
+    this.dialogRef.close();
+  }
+}

src/app/pages/home/home.component.ts

@@ -889,7 +889,7 @@ export class HomeComponent implements OnInit {
      
 
     //初始化地图
-    adcode:any = 450000 //行政编码 
+    adcode:any = 310000 //行政编码 
     mapInit () {
       //创建地图
       this.map = new AMap.Map('chartMap', {
@@ -1029,7 +1029,7 @@ export class HomeComponent implements OnInit {
         districtExplorer.on('outsideClick', (e) => {
           // console.log('区域外点击');
           this.chartsSetOption('','province')
-          adcode = 450000
+          adcode = 310000
           districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
             //更新地图视野
             // this.map.setBounds(areaNode.getBounds(), null, null, true);

src/app/ui/collection-tools-plan/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-plan/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-plan/collection-tools.component.html

@@ -0,0 +1,454 @@
+<div class="content">
+  <!-- header头部 -->
+  <div class="header">
+    <button mat-button (click)="toggle()">
+      <mat-icon style="vertical-align: middle;">toc</mat-icon>
+    </button>
+    <button mat-button (click)="toggle2()">
+      <mat-icon style="vertical-align: middle;">list</mat-icon>
+    </button>
+    <span style="color: gray;margin-right: 10px;margin-left: 10px;">图标大小</span>
+    <mat-form-field style="margin-top: 3px;">
+      <mat-select (selectionChange)='iconScale()' [(ngModel)]="selected">
+        <mat-option value="1">正常</mat-option>
+        <mat-option value="2">放大2倍</mat-option>
+        <mat-option value="4">放大4倍</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <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()">
+      基本信息名称
+      <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> -->
+    </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>
+
+  <!-- 头部操作栏 -->
+  <div class="headerOperate">
+    <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">
+      <span style="font-size: 24px;">+</span>
+    </button>
+    <div class="bigBox" *ngIf="!pattern">
+      <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)">
+          <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>
+
+  <!--功能区 -->
+  <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)'>
+              <mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>
+              <label class="overflowText">{{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">
+              <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.nodes"></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,446 @@
+@import './panel.scss';
+.icongray{
+  color: #D9D0DC;
+}
+.content {
+  width: 100%;
+  height: 93%;
+  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;
+  .nameShow{
+    cursor: pointer;
+    user-select: none;
+  }
+  .copytobutn{
+    width: 33px;
+    min-width: 33px;
+    display: flex;
+    justify-content: center;
+  }
+  font-size: 18px;
+  mat-icon{
+    font-size: 26px;
+    vertical-align: text-top;
+  }
+  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;
+    }
+  }
+}
+
+//头部操作栏
+.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-plan/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-plan/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-plan/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-plan/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-plan/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-plan/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-plan',
+  templateUrl: './addPlaneFigure.html',
+  styleUrls: ['./panel.scss']
+})
+export class leftFunctionalDomainComponentPlan 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-plan',
+  templateUrl: './editPlaneFigure.html',
+  styleUrls: ['./panel.scss']
+})
+export class editPlaneFigureComponentPlan 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-plan',
+  templateUrl: './addDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class addDisposalNodeComponentPlan 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-plan',
+  templateUrl: './editDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class editDisposalNodeComponentPlan 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-plan/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-plan/save.ts

@@ -0,0 +1,301 @@
+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',
+    templateUrl: 'saveOne.html',
+    styleUrls: ['./collection-tools.component.scss']
+})
+export class saveOneDialogPlan {
+
+    constructor(
+        private http:HttpClient,
+        public dialog: MatDialog,
+        public snackBar: MatSnackBar,
+        public dialogRef: MatDialogRef<saveOneDialogPlan>,
+        @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(saveTwoDialogPlan, {
+        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',
+    templateUrl: 'saveTwo.html',
+    styleUrls: ['./collection-tools.component.scss']
+})
+export class saveTwoDialogPlan {
+  
+    constructor(
+      private http:HttpClient,
+      public dialogRef: MatDialogRef<saveTwoDialogPlan>,
+      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 
+          console.log("qnm",id)
+          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-plan/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-plan/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-plan/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/collection-tools.component.html

@@ -35,13 +35,13 @@
       <span (click)="baseInfo()" [ngClass]="{'selectedPattern': pattern}">
         基本信息编辑
       </span>
-      <span (click)="wantWork()" [ngClass]="{'selectedPattern': !pattern}">
+      <span *ngIf="isSixbtn" (click)="wantWork()" [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">create</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>
@@ -207,7 +207,7 @@
             <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;">
+            <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>
@@ -218,7 +218,7 @@
             <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">
+                <div class="planIconDiv" *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>

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

@@ -15,6 +15,7 @@ import { Observable, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { windows } from 'src/app/interface';
 import { GameMode } from 'src/app/working-area/model/gameMode';
+import { ActivatedRoute, Router } from '@angular/router';
 
 
 
@@ -27,7 +28,7 @@ export class CollectionToolsComponent implements OnInit {
 
   @ViewChild('canvas',{static: true}) canvas:WorkingAreaComponent; //父组件中获得子组件的引用
 
-  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { }
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService,private router:Router,private route:ActivatedRoute) { }
   @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
   // tree配置
   private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
@@ -155,6 +156,9 @@ export class CollectionToolsComponent implements OnInit {
   //基本信息编辑模式
   baseInfo(){
     if (!this.pattern) {
+      this.basicInfo = true
+      this.canvas.setNameVisible(this.basicInfo,1)
+
       this.pattern = true
       this.canvasData.gameMode = GameMode.BasicInformation
       this.canvasData.selectPanelPoint = new DisposalNodeData();
@@ -168,6 +172,10 @@ export class CollectionToolsComponent implements OnInit {
   //想定作业编辑模式
   wantWork(){
     if (this.pattern) {
+      //让基本信息图标显示
+      this.basicInfo = false
+      this.canvas.setNameVisible(this.basicInfo,0)
+
       this.pattern = false
       this.canvasData.gameMode = GameMode.Assignment
       this.getAllLibrary('plan')
@@ -610,8 +618,30 @@ export class CollectionToolsComponent implements OnInit {
     this.canvasData.isChange = true
   }
 
+
+  isSixShow = true  
+  isSixbtn = true //控制想定作业编辑按钮
+  isxxx = true //控制查看编辑模式的编辑模式按钮
+
   ngOnInit(): void {
 
+    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
+    }
+
+    if(!this.isSixbtn && sessionStorage.getItem("six") == "edit"){
+      this.isSixShow = true
+    }
+    if(!this.isSixbtn && sessionStorage.getItem("six") == "look"){
+      this.isEditPattern = false
+      this.isxxx = false
+    }
+
+    if (sessionStorage.getItem('editable') == "0") {
+      this.isEditPattern = false
+      this.isxxx = false
+    }
+
     this.getAllLibrary() //获取素材库
     this.getAllBuildings() //获取所有建筑
     this.getAllFirePlan() //获取当前单位灾情
@@ -635,6 +665,7 @@ export class CollectionToolsComponent implements OnInit {
 
 
   ngAfterViewInit(): void {
+    
     this.getSitePlan()
     // 监听canvas组件选中素材事件
     this.canvas.on("select",obj=>{
@@ -653,6 +684,7 @@ export class CollectionToolsComponent implements OnInit {
     this.canvas.on("deleteIcon",obj=>{
       this.renovateTreeData(false)
     })
+
   }
 
   copyAssetData:any //存储用于复制的素材

src/app/ui/organization/organization.component.html

@@ -10,8 +10,10 @@
       <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"  color="warn"><mat-icon>block</mat-icon></button>
       <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
       <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
+     
     </mat-tree-node>
   
+  
     <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
       <button mat-icon-button 
               matTreeNodeToggle
@@ -28,6 +30,7 @@
       <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button>
       <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
       <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
+  
     </mat-tree-node>
    
   </mat-tree>

src/app/ui/ui.module.ts

@@ -95,8 +95,11 @@ import { CollectionToolsComponent, CreateBuilding, EditBuilding, ViewDetails } f
 import { WorkingAreaComponent } from '../working-area/working-area.component';
 import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
 import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
+import { CollectionToolsPlanComponent, CreateBuildingPlan, EditBuildingPlan, ViewDetailsPlan } from './collection-tools-plan/collection-tools.component';
+import { addDisposalNodeComponentPlan, editDisposalNodeComponentPlan, editPlaneFigureComponentPlan, leftFunctionalDomainComponentPlan } from './collection-tools-plan/leftFunctionalDomain';
+import { saveOneDialogPlan, saveTwoDialogPlan } from './collection-tools-plan/save';
 @NgModule({
-  declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,CreateOrganization,EditOrganization,seeInformation,EditUser,editorialUnit,FireProtectionElementsComponent,Establish,EditingFireControl,FireFightingTemplateComponent, NavmenusComponent,CreateMenus,EditMenus,NewFireFighting,EditFireClassification, MaterialBankComponent, UnitInformationComponent,AddMatLibrary,EditMatLibrary,attributeComponent,AddOriginalCopy,addAttributeComponent,editAttribute,EditOriginalCopy,SelectOriginalCopy,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent],
+  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],
 
   imports: [
     CommonModule,
@@ -153,7 +156,8 @@ import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
 
   exports:[
     FooterComponent,
-    CollectionToolsComponent
+    CollectionToolsComponent,
+    CollectionToolsPlanComponent
   ]
 })
 export class UiModule { }

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

@@ -56,6 +56,7 @@ export class MultipointIcon extends PIXI.Container {
             icon.x = pointA.x;
             icon.y = pointA.y;
             icon.angle = angle;
+            icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
             this.iconsTilingSprite.push(icon);
             this.addChild(icon);
             if (i === 0) {
@@ -234,8 +235,12 @@ export class MultipointIcon extends PIXI.Container {
             this.text.visible = value;
         }
     }
-    //
+    // 刷新数据
     public refresh() {
+        console.log(this.assetData);
+        this.iconsTilingSprite.forEach(element => {
+            element.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
+        });
         this.text.text = this.assetData.Name
             + '\r\n'
             + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;

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

@@ -61,7 +61,6 @@ export class SinglePointIcon extends PIXI.Container {
         this.image.interactive = true;
         this.image
             .on('mousedown', event => {
-                console.log(this.workingArea.canvasData.selectPanelPoint);
                 event.stopPropagation();
                 this.workingArea.selection.selectOne(this);
                 if (this.assetData.CanConnection && this.parent === this.workingArea.backgroundImage) {

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

@@ -339,7 +339,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
         }
       } else {
-        console.log();
+        // console.log();
         if (this.canvasData.selectPanelPoint.Data === undefined
         || this.canvasData.selectPanelPoint.Data === null) {
           this.canvasData.selectPanelPoint.Data = new FloorNodeData();
@@ -426,8 +426,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
 
     const floorData = this.canvasData.originaleveryStoreyData.data;
-    // const buildingData = this.canvasData.originalcompanyBuildingData.data;
+    const buildingData = this.canvasData.originalcompanyBuildingData.data;
-    // const floor = this.canvasData.selectStorey;
+    const floor = this.canvasData.selectStorey;
 
     // // key=>属性名    data[key]=>属性值
     Object.keys(floorData).forEach((key) => {
@@ -443,21 +443,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           break;
         }
     });
-    // Object.keys(buildingData).forEach((key) => {
+    Object.keys(buildingData).forEach((key) => {
-    //   if (buildingData[key].FloorId === floor.id) {
+      if (buildingData[key].FloorId === floor.id) {
-    //     switch (buildingData[key].InteractiveMode) {
+        switch (buildingData[key].InteractiveMode) {
-    //       case 0:
+          case 0:
-    //         const singleIcon = new SinglePointIcon(buildingData[key], this);
+            const singleIcon = new SinglePointIcon(buildingData[key], this);
-    //         break;
+            break;
-    //       case 1:
+          case 1:
-    //         const icon = new MultipointIcon(buildingData[key], this);
+            const icon = new MultipointIcon(buildingData[key], this);
-    //         break;
+            break;
-    //       case 2:
+          case 2:
-    //         const polygonIcon = new PolygonIcon(buildingData[key], this);
+            const polygonIcon = new PolygonIcon(buildingData[key], this);
-    //         break;
+            break;
-    //     }
+        }
-    //   }
+      }
-    // });
+    });
 
     // 加载处置节点数据
     const nodeData = this.canvasData.selectPanelPoint.Data;