[合并]合并代码

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

@@ -70,6 +70,7 @@ export class CanvasShareDataService {
     [ '泡沫枪', '泡沫枪'],
     [ '泡沫发生器', '泡沫发生器' ],
     [ '消防管网', '消防管网'],
+    [ '泡沫管网', '消防管网'],
     [ 'DCS控制室', 'DCS控制室']
   ]);
 

src/app/plan-audit/allaround/allaround.component.html

@@ -0,0 +1,177 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-24 09:22:17
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-02-03 15:50:27
+-->
+<div class="content" id="allaround">
+  <!-- <mat-tab-group style="height: 100%;">
+    <mat-tab label="单位毗邻">
+      <div class="allImgs">
+
+        <div class="imgBox" *ngFor="let item of AllAdjoining" >
+          <div class="fixedImg" *ngIf="item.imageUrls.length">
+            <img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'>
+          </div>
+          <div class="fixedImg" *ngIf="!item.imageUrls.length">
+            <img src="../../../assets/images/upload.png" (click)='imgdetails(item.imageUrls)'>
+          </div>
+          <div style="margin-top: 5px;">
+            <label style="margin-left: 25px;">建筑物名称:</label>
+            <label style="margin-left: 25px;">{{item.name}}</label>
+          </div>
+          <div style="margin-top: 5px;">
+            <label style="margin-left: 25px;">建筑物方向:</label>
+            <label style="margin-left: 25px;">
+              <label *ngIf="item.direction==0">东</label>
+              <label *ngIf="item.direction==1">西</label>
+              <label *ngIf="item.direction==2">南</label>
+              <label *ngIf="item.direction==3">北</label>
+              <label *ngIf="item.direction==4">东南</label>
+              <label *ngIf="item.direction==5">西南</label>
+              <label *ngIf="item.direction==6">东北</label>
+              <label *ngIf="item.direction==7">西北</label>
+            </label>
+          </div>
+          <div style="margin-top: 5px;">
+            <label style="margin-left: 25px;">图片数量:</label>
+            <label style="margin-left: 25px;" *ngIf="item.imageUrls.length">{{item.imageUrls.length}}张</label>
+            <label style="margin-left: 25px;" *ngIf="!item.imageUrls.length">0张</label>
+          </div>
+        </div>
+
+        <p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!AllAdjoining.length">暂无数据,请前往平面图进行相关数据录入</p>
+      </div>
+    </mat-tab>
+
+    <mat-tab label="{{item.name}}" *ngFor="let item of AllBuilding">
+      <div class="allImgs">
+
+        <div class="imgBox" *ngFor="let items of item.allImgs">
+          <div class="fixedImg" *ngIf="items.imageUrls.length">
+            <img [src]="items.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(items.imageUrls)'>
+          </div>
+          <div class="fixedImg" *ngIf="!items.imageUrls.length"><img src="../../../assets/images/upload.png" (click)='imgdetails(items.imageUrls)'></div>
+          <div style="margin-top: 5px;">
+            <label style="margin-left: 25px;">建筑物名称:</label>
+            <label style="margin-left: 25px;">{{items.name}}</label>
+          </div>
+          <div style="margin-top: 5px;">
+            <label style="margin-left: 25px;">建筑物方向:</label>
+            <label style="margin-left: 25px;">
+              <label *ngIf="items.direction==0">东</label>
+              <label *ngIf="items.direction==1">西</label>
+              <label *ngIf="items.direction==2">南</label>
+              <label *ngIf="items.direction==3">北</label>
+              <label *ngIf="items.direction==4">东南</label>
+              <label *ngIf="items.direction==5">西南</label>
+              <label *ngIf="items.direction==6">东北</label>
+              <label *ngIf="items.direction==7">西北</label>
+            </label>
+          </div>
+          <div style="margin-top: 5px;">
+            <label style="margin-left: 25px;">图片数量:</label>
+            <label style="margin-left: 25px;" *ngIf="items.imageUrls.length">{{items.imageUrls.length}}张</label>
+            <label style="margin-left: 25px;" *ngIf="!items.imageUrls.length">0张</label>
+          </div>
+        </div>
+
+        <p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!item.allImgs.length">暂无数据,请前往平面图进行相关数据录入</p>
+      </div>
+    </mat-tab>
+
+  </mat-tab-group> -->  
+
+  <div style="margin: 10px 0;">
+    <mat-accordion class="tableContent">
+      <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+        <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
+          <mat-panel-title style="font-size: 14px;" >
+            单位毗邻
+          </mat-panel-title>
+        </mat-expansion-panel-header >
+  
+        <div class="columall" >
+          <div class="colum" *ngFor="let item of AllAdjoining">
+            <div class="left">
+              <img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'>
+            </div>
+            <div class="right" >
+              <div class="rightone">
+                <span>建筑名称：{{item.name}}</span>
+              </div>
+              <div class="righttwo">
+                <span>建筑方向：</span>
+                <span>
+                  <span *ngIf="item.direction==0">东</span>
+                  <span *ngIf="item.direction==1">西</span>
+                  <span *ngIf="item.direction==2">南</span>
+                  <span *ngIf="item.direction==3">北</span>
+                  <span *ngIf="item.direction==4">东南</span>
+                  <span *ngIf="item.direction==5">西南</span>
+                  <span *ngIf="item.direction==6">东北</span>
+                  <span *ngIf="item.direction==7">西北</span>
+                </span>
+              </div>
+              <div class="righthree">
+                <span>图片数量：</span>
+                <span *ngIf="item.imageUrls.length">{{item.imageUrls.length}}张</span>
+                <span *ngIf="!item.imageUrls.length">0张</span>
+              </div>
+            </div>  
+          </div>
+        </div>
+        
+  
+      
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>
+  <div *ngFor="let item of AllBuilding" style="margin-bottom: 10px;">
+    <mat-accordion class="tableContent" >
+      <mat-expansion-panel  style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+        <mat-expansion-panel-header class="panelhead" collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
+          <mat-panel-title style="font-size: 14px;">
+            {{item.name}}
+          </mat-panel-title>
+        </mat-expansion-panel-header >
+        <div class="columall">
+          <div class="colum" *ngFor="let items of item.allImgs">
+            <div class="left">
+              <img [src]="items.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(items.imageUrls)'>
+            </div>
+            <div class="right" >
+              <div class="rightone">
+                <span>建筑名称：{{items.name}}</span>
+              </div>
+              <div class="righttwo">
+                <span>建筑方向：</span>
+                <span>
+                  <span *ngIf="items.direction==0">东</span>
+                  <span *ngIf="items.direction==1">西</span>
+                  <span *ngIf="items.direction==2">南</span>
+                  <span *ngIf="items.direction==3">北</span>
+                  <span *ngIf="items.direction==4">东南</span>
+                  <span *ngIf="items.direction==5">西南</span>
+                  <span *ngIf="items.direction==6">东北</span>
+                  <span *ngIf="items.direction==7">西北</span>
+                </span>
+              </div>
+              <div class="righthree">
+                <span>图片数量：</span>
+                <span *ngIf="items.imageUrls.length">{{items.imageUrls.length}}张</span>
+                <span *ngIf="!items.imageUrls.length">0张</span>
+              </div>
+            </div>  
+          </div>
+        </div>
+          
+    
+        
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+  
+</div>

src/app/plan-audit/allaround/allaround.component.scss

@@ -0,0 +1,116 @@
+*{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.content {
+  width: 100%;
+  height: 760px;
+  //padding: 10px;
+  overflow-y: auto;
+}
+.tableContent{
+  width: 100%;
+  height: 760px;
+  .panelhead{
+    //position: relative;
+    height: 44px;
+    background-color: #F2F9FF;
+  }
+  .columall{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .colum{
+      width: 300px;
+      margin-top: 1%;
+      display: flex;
+      flex-direction: row;
+      .left{
+        width: 140px;
+        margin-left: 5%;
+        img{
+          width: 140px;
+          height: 100px;
+          //margin-left: 13%;
+          cursor:pointer;
+        }
+      }
+      .right{
+        margin-left: 5%;
+        width:150px;
+        margin-top: 1%;
+        display: flex;
+        flex-direction: column;
+        .rightone{
+          width: 150px;
+        }
+        .righttwo{
+          width: 150px;
+          margin-top: 3%;
+        }
+        .righthree{
+          width: 150px;
+          margin-top: 3%;
+        }
+      }
+    }
+  }
+  
+}
+
+//图片外部div
+.allImgs {
+  display: flex;
+  overflow-y: auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  .imgBox{
+    width: 300px;
+    height: 250px;
+    margin: 25px 35px 35px 35px;
+    display: inline-block;
+    position: relative;
+    .fixedImg {
+      width: 100%;
+      height: 170px;
+      text-align: center;
+      margin-bottom: 3px;
+      img {
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        height: 100%;
+        cursor:pointer;}
+    }
+  }
+}
+
+//预览图片
+.previewImgBox {
+  width: 1500px;
+  height: 700px;
+  text-align: center;
+  img{
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    height: 100%;}
+}
+.previewImgBottom {
+  text-align: center;
+  height: 30px;
+  margin: 20px auto;
+}
+//预览图片旋转角度
+.rotateA {transform: rotate(90deg) scale(0.75);}
+.rotateB {transform: rotate(180deg)}
+.rotateC {transform: rotate(270deg) scale(0.75);}

src/app/plan-audit/allaround/allaround.component.spec.ts

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

src/app/plan-audit/allaround/allaround.component.ts

@@ -0,0 +1,91 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-26 17:10:54
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-02-03 15:29:11
+ */
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { ImgDetails } from './imgdetails.component'
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { Router, ActivatedRoute } from '@angular/router';
+
+
+
+@Component({
+  selector: 'app-allaround',
+  templateUrl: './allaround.component.html',
+  styleUrls: ['./allaround.component.scss']
+})
+export class AllaroundComponent implements OnInit {
+
+  constructor(private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private route:ActivatedRoute,) { }
+
+  ngOnInit(): void {
+    this.getAllCompany()
+    this.getAllBuilding()
+  }
+
+  AllAdjoining:any = []; //所有单位毗邻
+  AllBuilding:any = []; //所有建筑 + 建筑毗邻图片
+  //单位相关数据
+  unitId:string = '5e9964caa760a059e84512e9'
+  //5ee19fe06f91049f5e23e937
+  //5fb78554919f2b44e464017e
+  //获取所有单位毗邻图片
+  getAllCompany () {
+    let id = {companyId:this.unitId}
+    this.http.get('/api/CompanyAdjoins',{params:id}).subscribe(data=>{
+      this.AllAdjoining = data
+      this.AllAdjoining.forEach(element => {element.imgURL = element.imageUrls[0] +'?x-oss-process=image/resize,m_fill,h_170,w_299'})
+    })
+  }
+
+  //获取所有建筑
+  getAllBuilding () {
+    let id = {companyId:this.unitId}
+    this.http.get('/api/Buildings',{params:id}).subscribe((data:any)=>{
+      if (data.length) {
+        this.AllBuilding = data
+        this.AllBuilding.forEach(element => {
+          element.allImgs = []
+        });
+       this.getAllArchitecture()}
+    })
+  }
+
+  //获取所有建筑毗邻图片
+  getAllArchitecture () {
+    this.AllBuilding.forEach(element => {
+      let id = {buildingId:element.id}
+      this.http.get('/api/BuildingAdjoins',{params:id}).subscribe(data=>{
+        element.allImgs = data
+        /* console.log(element)
+        console.log(element.allImgs) */
+        element.allImgs.forEach(element => {element.imgURL = element.imageUrls[0] +'?x-oss-process=image/resize,m_fill,h_170,w_299'});
+      })
+    });
+  }
+
+  //预览图片
+  imgdetails(e){
+    if (e.length && e!=null) {
+      let data = e
+      const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
+        width: '1600px',
+        height:'900px',data});
+      dialogRef.afterClosed().subscribe();
+    } else{
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('暂无图片数据','确定',config);
+    }
+  }
+
+
+
+}

src/app/plan-audit/allaround/imgdetails.component.html

@@ -0,0 +1,18 @@
+<div mat-dialog-title>图片详情</div>
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+        <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
+          <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy"
+           [attr.data-src]="item">
+           <div class="swiper-lazy-preloader"></div>
+        </div>
+    </div>
+
+    <!-- 如果需要导航按钮 -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+</div>
+
+<div class="previewImgBottom">
+  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
+</div>

src/app/plan-audit/allaround/imgdetails.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, Inject, ɵConsole } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import Swiper from 'swiper';
+
+
+
+@Component({
+    selector: 'imgdetails',
+    templateUrl: './imgdetails.component.html',
+    styleUrls: ['./allaround.component.scss']
+  })
+  export class ImgDetails {
+   
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<ImgDetails>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+    testSwiper: Swiper;
+
+  ngOnInit(): void {
+    this.allImages = []
+    this.data.forEach(element => {
+      element = `${element}?x-oss-process=image/auto-orient,1`
+      this.allImages.push(element)
+    });
+  }
+
+  ngAfterViewInit() {
+    this.testSwiper = new Swiper('.swiper-container', {
+      lazy: true,
+      direction: 'horizontal',
+      loop: false,
+
+      // 如果需要前进后退按钮
+      navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+      }
+    });
+  }
+
+  allImages:any; //展示所有的图片
+  rotationAngle:number=0; //旋转角度
+
+  //旋转图片
+  rotate () {
+    this.rotationAngle = this.rotationAngle+90
+    if (this.rotationAngle === 360) {this.rotationAngle = 0}
+  }
+
+
+
+}
+  

src/app/plan-audit/basic-info/basic-info.component.html

@@ -4,87 +4,88 @@
  * @Author: sueRimn
  * @Date: 2020-12-25 15:29:42
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-12-27 14:10:41
+ * @LastEditTime: 2021-02-03 09:10:26
 -->
-<div class="content">
-
-    <div id="firefacilities"  style="margin: 10px;">
-      <mat-accordion class="tableContent" >
-        <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
-            <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead" style="background-color: #2196F3;">
-              <mat-panel-title style="font-size: 16px;color: #FFFFFF;" >
-                单位信息
-              </mat-panel-title>
-            </mat-expansion-panel-header >
-            <div class="mainbox" >
-                <div class="mainleft">
-                    <div class="inputbox" >
-                        <span style="color: red;">*</span>
-                        <span>统一社会信用代码：</span>
-                        <mat-form-field>
-                            <input readonly matInput id="creditcode" name="creditcode" type='text'
-                            required minlength="1" maxlength="18"
-                            pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$">
-                        </mat-form-field>
-                    </div>
-                    <div class="inputbox">
-                        <span style="color: red;">*</span>
-                        <span>单位类型：</span>
-                        <mat-form-field>
-                            <mat-select disabled  readonly  required name="unittype" >
-                                <mat-option>石油化工类</mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
-                    <div class="inputbox">
-                        <span style="color: red;">*</span>
-                        <span>联系人：</span>
-                        <mat-form-field>
-                            <input readonly  matInput id="linkman" name="linkman" type='text'
-                            required minlength="1"
-                            >
-                        </mat-form-field>
-                    </div>
-                    <div class="inputbox">
-                        <span style="color: red;">*</span>
-                        <span>联系电话：</span>
-                        <mat-form-field>
-                            <input  readonly matInput id="linkphone" name="linkphone" type='text' 
-                            required pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0135-9]\d{2}|66\d{2})\d{6}$"
-                        >
-                        </mat-form-field>
+<div class="box" id="gisbasicinfo">
+    <div class="unitPhotographBox">
+        <p>单位照片</p>
+        <div class="imgbox"  id="viewerjs">
+            <img [src]="unitInfo.imageUrl ? unitInfo.imageUrl : noImg" alt="" [attr.data-original]="unitInfo.imageUrl ? unitInfo.imageUrl.split('?')[0] :''">
+        </div>
+    </div>
+    <div class="unitInfoBox">
+        <p>单位信息</p>
+        <table>
+            <tr>
+                <td>统一社会信用代码</td>
+                <td>{{unitInfo.usci}}</td>
+            </tr>
+            <tr>
+                <td>单位类型</td>
+                <td>{{unitInfo.buildingTypes ? unitInfo.buildingTypes[0].name : ''}}</td>
+            </tr>
+            <tr>
+                <td>联系人</td>
+                <td>{{unitInfo.contacts}}</td>
+            </tr>
+            <tr>
+                <td>联系电话</td>
+                <td>{{unitInfo.phone}}</td>
+            </tr>
+            <tr>
+                <td>辖区中队</td>
+                <td>{{unitInfo.organizationName}}</td>
+            </tr>
+            <tr>
+                <td>单位地址</td>
+                <td>{{unitInfo.address}}</td>
+            </tr>
+        </table>
+    </div>
+    <div class="buildingsBox">
+        <p>建筑信息</p>
+        <mat-accordion *ngFor="let item of buildingsData">
+            <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+              <mat-expansion-panel-header style="position: relative;padding-left: 0;">
+                <mat-panel-title>
+                  {{item.name}}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              
+              <div *ngFor="let i of item.details">
+                <div *ngFor="let n of i.buildingBasicGroups;let key = index">
+                    <p>{{key+1 + '.' +n.name}}</p>
+                    <!-- 输入框文本类(基本信息) -->
+                    <div *ngIf="n.type == 0">
+                        <table>
+                            <tr *ngFor="let p of n.propertyInfos">
+                                <td>{{p.propertyName}}<span *ngIf="p.physicalUnit">({{p.physicalUnit}})</span></td>
+                                <td>{{p.propertyValue}}</td>
+                            </tr>
+                        </table>
                     </div>
-                    <div class="inputbox" style="width: 700px;">
-                        <span style="color: red;">*</span>
-                        <span>辖区中队：</span>
-                        <mat-form-field style="width: 538px;">
-                            <input readonly  matInput id="organization" name="organization" type='text'
-                            required minlength="1"
-                            readonly="value" >
-                        </mat-form-field>
+                    <!-- 多行表格(储罐信息) -->
+                    <div *ngIf="n.type == 1">
+                        <table>
+                            <tr *ngFor="let p of n.tabledata">
+                                <td>{{p.propertyName}}<span *ngIf="p.physicalUnit">({{p.physicalUnit}})</span></td>
+                                <td *ngFor="let o of p.data">{{o.propertyValue}}</td>
+                            </tr>
+                        </table>
                     </div>
-            
-                    <div class="inputbox"  style="width: 700px;">
-                        <span style="color: red;">*</span>
-                        <span>单位地址：</span>
-                        <mat-form-field  style="width: 538px;">
-                            <input readonly  matInput id="unitaddress" name="unitaddress" type='text'
-                            required minlength="1">
-                        </mat-form-field>
-                    </div>     
-                    <div class="uploadimg" >
-                        <span>单位照片：</span>
-                        <div class="uploadingimg">
-                            <img src="../../../assets/images/upload.jpg" alt="" style="width: 299px; height: 170px;" >
-                        </div>
-                        <!-- <mat-spinner *ngIf="isspinner"  diameter= 50></mat-spinner> -->
-                    </div>           
+                    
+                </div>
+                <p *ngIf="i.buildingCustomData.customProperties.length != 0 && (i.buildingCustomData.customProperties[0].name ||i.buildingCustomData.customProperties[0].value)">{{i.buildingBasicGroups.length + 1}}.自定义信息</p>
+                <div *ngIf="i.buildingCustomData.customProperties.length != 0 && (i.buildingCustomData.customProperties[0].name ||i.buildingCustomData.customProperties[0].value)">
+                    <table>
+                        <tr *ngFor="let c of i.buildingCustomData.customProperties">
+                            <td>{{c.name}}</td>
+                            <td>{{c.value}}</td>
+                        </tr>
+                    </table>
                 </div>
-            </div>
-        
-            
-          </mat-expansion-panel>
-    </mat-accordion>
+              </div>
+            </mat-expansion-panel>
+        </mat-accordion>
     </div>
-    
 </div>

src/app/plan-audit/basic-info/basic-info.component.scss

@@ -1,106 +1,97 @@
-.content{
+
+table,table tr th, table tr td { border: 1px solid #EEF1F5; }
+table { text-align: center; border-collapse: collapse; padding:2px;}  
+*{
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+.box{
     width: 100%;
-    height: 100%;
-    .tableContent{
-        width: 100%;
-    }
+    height: 760px;
+    overflow-y: auto;
+    // font-family: Source Han Sans CN;
+    color: #333333;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-weight: 400;
 }
-.mainbox{
-    height: 100%;
-    position: relative;
-    .mainleft{
-        width:800px;
-        height: 100%;
-        // background-color: yellow;
-        float: left;
-        .inputbox{
-            width: 343px;
-            height: 58px;
-            margin:2px 6px;
-            float: left;
-            text-align: end;
+//头部单位照片
+.unitPhotographBox{
+    width: 100%;
+    p{
+        height: 14px;
+        font-size: 14px;
+        // font-family: Source Han Sans CN;
+        font-weight: 400;
+        line-height: 14px;
+        color: #333333;
+        opacity: 1;
+        margin: 10px 0 ;
+    }
+    .imgbox{
+        width: 180px;
+        height: 140px;
+        img{
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
         }
-        .organizationbox{
-            width:538px;
-            height: 200px;
-            background: white;
-            position: absolute;
-            top: 164px;
-            left:166px;
-            z-index: 100;
-            border: 1px solid grey;
-            overflow: auto;
-            li{
-                list-style: none;
-
-            }
-            mat-tree-node{
-                cursor: pointer;
-            }
-            mat-tree-node:hover{
-                background:  rgba(225, 225, 225, 0.8);
+    }
+}
+//单位信息
+.unitInfoBox{
+    width: 100%;
+    p{  
+        height: 14px;
+        font-size: 14px;
+        // font-family: Source Han Sans CN;
+        font-weight: 400;
+        line-height: 14px;
+        color: #333333;
+        opacity: 1;
+        margin: 10px 0;
+    }
+    table{
+        width: 100%;
+        tr{
+            height: 35px;
+            td:nth-child(1){
+                width: 40%;
             }
         }
-        .addbtn{
-            width: 695px;
-            position: absolute;
-            bottom: -495px;
-            text-align: center;
-            margin-bottom:20px;
-            button{
-                margin: 0 4px;
-            }
+        tr:nth-child(odd){    
+            background: #F2F9FF;
         }
-        .uploadimg{
-            width: 400px;
-            height: 200px;
-            float: left;
-            margin-top:12px;
-            position: relative;
-            margin-left: 80px;
-            cursor: pointer;
-            span{
-                float: left;
-            }
-            // img{
-            //     float: left;
-            // }
-            .uploadingimg{
-                width: 299px;
-                height: 170px;
-                // background: url('../../../assets/images/upload2.png') no-repeat center center;
- 
-                position: absolute;
-                top: 0px;
-                left: 79px;
-                border: 1px dashed gray;
-                border-radius:3px;
+    }
+}
+//建筑信息
+.buildingsBox{
+    p{
+        margin: 10px 0;
+    }
+    table{
+        width: 100%;
+        tr{
+            height: 35px;
+            td:nth-child(1){
+                width: 40%;
             }
-           
         }
-        .image{
-            // position: absolute;
-            // top: 199px;
-            // left: 160px;
-            // width: 299px;
-            // height: 170px;
-            input{
-                // width: 299px;
-                // height: 170px;
-                width: 190px;
-                margin-top: 160px;
-                cursor: pointer;
-            }
-            // opacity:0;
-            
+        tr:nth-child(odd){    
+            background: #F2F9FF;
         }
     }
-    .mainright{
-        float: left;
-        width: 600px;
-        height: 400px;
-        // position: absolute;
-        // right: 170px;
-        
-    }
-}
+}
+::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}

src/app/plan-audit/basic-info/basic-info.component.ts

@@ -1,4 +1,25 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import Viewer from 'viewerjs';
+class unitInfo {
+  id: string;
+  name: string; //单位信息名字
+  usci: string; //单位信用代码
+  contacts: string; //联系人
+  phone: string; //联系电话
+  address: string; //单位地址
+  imageUrl: string; //图片地址
+  location: string; //单位地理位置
+  modifiedTime: string; //信息修改时间
+  organizationId: string; //所属组织机构
+  organizationName: string; //组织机构名称
+  buildingTypes: [
+    {
+      id:string;
+      name:string;
+    }
+  ]
+}
 
 @Component({
   selector: 'app-basic-info',
@@ -7,9 +28,142 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BasicInfoComponent implements OnInit {
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
+  unitId:string;//单位相关数据
+
+  unitInfo:unitInfo = { 
+    id: '',
+    name: '', //单位信息名字
+    usci: '', //单位信用代码
+    contacts: '', //联系人
+    phone: '', //联系电话
+    address: '', //单位地址
+    imageUrl: '', //图片地址
+    location: '', //单位地理位置
+    modifiedTime: '', //信息修改时间
+    organizationId: '', //所属组织机构
+    organizationName: '', //组织机构名称
+    buildingTypes: [
+      {
+        id:'',
+        name:''
+      }
+    ]
+  }
+  noImg:string = '../../../assets/images/noImg.png'
+  gallery:any //Viewer实例
 
   ngOnInit(): void {
+    this.everyInin()
+  }
+  //每次初始化 加载 组件调用方法
+  everyInin () {
+    //this.unitId = sessionStorage.getItem('unitId')
+    this.unitId='5e9964caa760a059e84512e9'
+    if (this.unitId) {
+      this.getUnitInfo().then(()=>{
+        setTimeout(() => {
+          this.gallery = new Viewer(document.getElementById('viewerjs'),{ url: 'data-original' });
+        },0);
+      });
+      this.getAllBuildingsInfo()
+    }
+  }
+
+  //获得单位信息
+  async getUnitInfo(){
+    let result = await new Promise((resolve, reject) => {
+      this.http.get(`/api/Companies/${this.unitId}`).subscribe((data:any)=>{
+        resolve('获取单位信息成功')
+        this.unitInfo = data
+      }) 
+    })
+  }
+
+  buildingsData:any
+  //获得所有建筑信息
+  getAllBuildingsInfo(){
+    this.http.get("/api/Buildings",{
+      params:{
+        companyId:this.unitId
+      }
+    }).subscribe(async (data:any)=>{
+      this.buildingsData = data
+      for (let i = 0, length = data.length; i < length; i++){
+        const result = await new Promise((resolve) =>{
+          this.http.get("/api/BuildingBasicInfos",{ // 循环请求当前单位建筑每一个建筑的信息保存到数组中
+            params:{
+              companyId :this.unitId,
+              buildingId:data[i].id,
+              buildingType:data[i].buildingTypes[0].id
+            }
+          }).subscribe((buildingsData:any)=>{
+            //获得当前建筑自定义信息并且添加到item自定义属性上
+            let _data = buildingsData
+            _data[0].buildingCustomData = {}
+            _data[0].buildingCustomData.customProperties = []
+            this.http.get("/api/BuildingCustomData",{params:{
+              buildingId:data[i].id
+            }}).subscribe((data:any)=>{
+              _data[0].buildingCustomData = data
+              if(data && data.customProperties.length != 0){
+                _data[0].isCustomData = true
+              }else{
+                _data[0].isCustomData = false
+                _data[0].buildingCustomData ={
+                  id: "",
+                  customProperties: [
+                      {
+                          name: "",
+                          value: ""
+                      }
+                  ],
+                  buildingId: _data[0].buildingId
+                }
+              }
+            })
+           
+            //如果是表格类需要处理数据
+            // console.log(i,buildingsData)
+            buildingsData[0].buildingBasicGroups.forEach(element => {
+              if(element.type == 1){
+                
+                var map = {},
+                dest:any = [];
+                for(var i = 0; i < element.propertyInfos.length; i++){
+                    var ai = element.propertyInfos[i];
+                    if(!map[ai.propertyName]){
+                        dest.push({
+                            propertyName: ai.propertyName,
+                            data: [ai]
+                        });
+                        map[ai.propertyName] = ai;
+                    }else{
+                        for(var j = 0; j < dest.length; j++){
+                            var dj = dest[j];
+                            if(dj.propertyName == ai.propertyName){
+                                dj.data.push(ai);
+                                break;
+                            }
+                        }
+                    }
+                }
+                //根据行数确定在循环数组中的index
+                dest.forEach(item => {
+                  item.data.sort(function(a,b){
+                    return Number(a.tag) - Number(b.tag) 
+                  })
+                })
+
+                element.tabledata = dest
+              }
+            });
+            this.buildingsData[i].details = buildingsData
+            resolve(i)
+          })
+        })
+      }
+    })
   }
 
 }

src/app/plan-audit/cad-draw/cad-draw.component.html

@@ -0,0 +1,25 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-26 09:03:44
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-27 14:31:48
+-->
+<div class="content">
+    <div class="center" *ngFor="let item of CADList">
+        <div class="up">
+            <div class="left">
+                <span>{{item.name}}</span>
+            </div>
+            <div class="right" (click)="checkedCAD($event,item)">
+                <img src="../../../assets/images/download.png">
+                <span>下载</span>
+            </div>
+        </div>
+        <div class="down">
+            <span>日期:{{item.creationTime|date:'yyyy-MM-dd'}}</span>
+            <span style="margin-left: 5%;">大小：{{item.fileLength}}M</span>
+        </div>
+    </div>
+</div>

src/app/plan-audit/cad-draw/cad-draw.component.scss

@@ -0,0 +1,51 @@
+*{
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+.content{
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  .center{
+      width: 100%;
+      border: 1px solid #EEF1F5;
+      display: flex;
+      flex-direction: column;
+      .up{
+          width: 100%;
+          display: flex;
+          margin-top: 2%;
+          span{
+              color: #0080FF;
+              font-size: 15px;
+          }
+          .left{
+              width: 70%;
+              span{
+                  margin-left: 7.5%;
+                  margin-top: 5%;
+              }
+          }
+          .right{
+              width: 30%;
+              text-align: center;
+              cursor: pointer;
+          }
+      }
+      .down{
+          margin: 2% 0 3% 5%;
+      }
+  }
+}

src/app/plan-audit/cad-draw/cad-draw.component.spec.ts

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

src/app/plan-audit/cad-draw/cad-draw.component.ts

@@ -0,0 +1,308 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-cad-draw',
+  templateUrl: './cad-draw.component.html',
+  styleUrls: ['./cad-draw.component.scss']
+})
+export class CadDrawComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private route:ActivatedRoute,) { }
+
+  ngOnInit(): void {
+    this.companyId = this.unitId
+    this.getAllCAD()
+  }
+  unitId:any = '5e9964caa760a059e84512e9'
+
+  displayedColumns: string[] = ['checked', 'name', 'time', 'state','size'];
+
+  companyId:any; //单位编号
+  CADList:any=[]; //所有CAD图
+  selectCAD:any = []; //选中的CAD图
+
+  //获取所有CAD图
+  getAllCAD () {
+    let id = {companyId:this.unitId}
+    this.http.get('/api/CadData',{params:id}).subscribe(data=>{
+      this.CADList = data
+      this.selectCAD = []
+      this.CADList.forEach(element => {
+        element.loading = false
+        element.suffix = element.cadUrl.substring(element.cadUrl.lastIndexOf("."),element.cadUrl.length); //图名后缀
+        element.fileLength = (element.fileLength/1024/1024).toFixed(2)});
+    })
+  }
+
+  //change CAD图checked
+  checkedCAD (e,element) {
+    /* if (e.checked) {
+      this.selectCAD.push(element)
+    } else {
+      this.selectCAD.splice(this.selectCAD.findIndex(item => item.id === element.id), 1)} */
+      this.selectCAD.splice(this.selectCAD.findIndex(item => item.id === element.id), 1)
+      this.selectCAD.push(element)
+      this.readFile()
+  }
+
+  //打开上传文件窗口
+  openReadFile() {
+   
+  }
+
+  //打开编辑文件窗口
+  editFile () {
+  
+  }
+
+  //删除CAD图
+  deleteCAD () {
+    if (this.selectCAD.length) {
+      let isDelete = confirm('您确定要删除吗')
+      let arr = []
+      if (isDelete) {
+        this.selectCAD.forEach( async (element,index) => {
+          let result = await new Promise((result,reject)=>{
+            this.http.delete(`/api/CadData/${element.id}`).subscribe(data=>{result(index)})
+            this.http.delete(`/api/Objects/PlanPlatform/${element.cadUrl}`).subscribe(data=>{})
+          })
+        arr.push(result)
+        if (arr.length == this.selectCAD.length) {
+          this.getAllCAD()
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('删除CAD图纸成功','确定',config);}
+        });
+      }
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请选择CAD图纸','确定',config);
+    }
+  }
+
+
+
+
+
+  //上传文件↓
+  file:any; //上传的文件
+  fileName:any; //上传文件name
+  uploadisLoading:boolean = false; //进度条loading加载
+  uploadProgress:number=0; //进度条进度  
+  objectName:any; //上传对象名
+  uploadId:any; //上传分块上传事件编号
+
+  //上传文件
+  startUploading () {
+    let file = this.file || 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/${this.companyId}/CAD`,formData).subscribe((data:any)=>{
+        this.objectName = data.objectName
+        this.addCADData()
+      })
+    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
+      let data = {filename: file.name}
+      this.uploadisLoading = true
+      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.companyId}/CAD`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
+        this.objectName = data.objectName
+        this.uploadId = data.uploadId
+        this.subsectionUploading()
+      })
+    }
+
+  }
+
+  PartNumberETag:any=[]; //每次返回需要保存的信息
+  //开始分段上传
+  async subsectionUploading () {
+    let file = this.file || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
+
+    for (let i = 0;i < allSlice;i++) { //循环分段上传
+        let start = i * shardSize //切割文件开始位置
+        let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
+        let formData = new FormData()
+        formData.append("file",file.slice(start, end))
+
+        //同步写法实现异步调用
+        let result = await new Promise((resolve, reject) => {
+          // await 需要后面返回一个 promise 对象
+          this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
+              let msg = {
+                "partNumber":data.partNumber || null,
+                "eTag": data.eTag || null}
+              resolve(msg) // 调用 promise 内置方法处理成功
+          })
+        });
+        this.PartNumberETag.push(result)
+        this.uploadProgress = Number((i/allSlice).toFixed(2))*100
+
+        if (this.PartNumberETag.length === allSlice) {
+          this.uploadProgress = 100
+          this.endUploading()}
+    }//for循环
+
+  }
+
+  //完成分块上传
+  endUploading () {
+    let data = this.PartNumberETag
+    let paramsData = {uploadId:this.uploadId}
+    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
+      this.addCADData()
+      this.uploadProgress = 0;
+      this.uploadisLoading = false
+      this.PartNumberETag =[] //清空保存返回的信息
+    })
+  }
+
+  //取消分块上传
+  cancel () {
+    this.http.delete(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{
+      this.uploadProgress = 0;
+      this.uploadisLoading= false
+      this.PartNumberETag =[] //清空保存返回的信息
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('取消上传成功!','确定',config);
+    })
+  }
+
+  //上传成功创建CAD
+  addCADData () {
+    let data = {
+      name: this.fileName,
+      cadUrl: this.objectName,
+      fileLength: this.file.size,
+      creationTime: new Date(),
+      companyId: this.companyId
+    }
+    this.http.post('/api/CadData',data).subscribe(data=>{
+      this.getAllCAD()
+    })
+  }
+
+
+
+
+
+  //下载↓
+  selectDownloadFile:any; //选择下载的文件
+  download:any; //下载文件元数据
+  downloadisLoading:boolean = false; //进度条loading加载
+  downloadProgress:number=0; //进度条进度 
+
+  //读取下载文件信息
+  readFile () {
+    if (this.selectCAD.length===1) {
+      this.selectDownloadFile = this.selectCAD[0]
+      this.http.get('/api/ObjectMetadata/PlanPlatform/'+this.selectDownloadFile.cadUrl).subscribe(data=>{
+        this.download = data
+        this.downloadFile()
+      })
+    } else if (this.selectCAD.length>1) {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('暂时不支持批量下载','确定',config)
+    } else if (!this.selectCAD.length) {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请选择CAD图纸','确定',config);
+    }
+  }
+
+  //初始化下载
+  downloadFile () {
+    let file = this.download
+    let fileSize = file.fileLength//下载文件的总大小
+    let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
+
+    if (file && fileSize<=shardSize) { //<=10MB时直接下载
+      this.downloadisLoading = true
+      this.setFileLoading()
+      this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{
+
+        let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        link.setAttribute("download", this.selectDownloadFile.name+this.selectDownloadFile.suffix);
+        document.body.appendChild(link);
+        link.click();
+        this.downloadisLoading = false
+        this.setFileLoading()
+      })
+    } else if (file && fileSize>shardSize) { //>10MB时分块下载
+      this.blockingDownload() //分段下载
+      this.downloadisLoading = true
+      this.setFileLoading()
+    }
+
+  }
+
+  //分段下载并合并
+  async blockingDownload () {
+    let file = this.download
+    let fileSize = file.fileLength //下载文件的总大小
+    let shardSize = 3 * 1024 * 1024 //3MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
+    let allFile:any = [] //所有的file分段
+
+    for (let i=0;i<allSlice;i++) {
+      let start = i * shardSize //每次下载文件开始位置
+      let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
+
+      let result =  await new Promise ((result,reject)=>{
+        this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
+          result(data) }) 
+      })
+      allFile.push(result)
+      this.downloadProgress = Number((i/allSlice).toFixed(2))*100
+
+      if (allFile.length === allSlice) { //合并文件输出给浏览器
+        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        link.setAttribute("download", this.selectDownloadFile.name+this.selectDownloadFile.suffix);
+        document.body.appendChild(link);
+        link.click();
+        this.downloadProgress = 0
+        this.downloadisLoading = false
+        this.setFileLoading()
+      }
+
+    } //for循环
+
+  }
+
+  //取消分块下载
+  cancelDowload () {
+
+  }
+
+  //封装函数设置当前文件loading状态
+  setFileLoading () {
+    let id = this.selectDownloadFile.id
+    this.CADList.forEach(element => {
+      if (element.id === id) { element.loading = !element.loading }
+    });
+  }
+}

src/app/plan-audit/fire-facilities/fire-facilities.component.html

@@ -0,0 +1,64 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-23 09:28:54
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-27 16:17:53
+-->
+<div class="content">
+
+    <div id="firefacilities" *ngFor="let item of companyBuiltInGrouping;let key = index" style="margin-top: 10px;">
+      <mat-accordion class="tableContent" >
+        <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+            <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
+              <mat-panel-title style="font-size: 14px;" >
+                {{item.name}}
+              </mat-panel-title>
+            </mat-expansion-panel-header >
+            <div class="column" *ngFor="let items of item.facilityItems">
+                <div class="up">
+                  <div class="left">
+                    <span style="margin-left: 25px;margin-top: 3%;white-space: nowrap;">项目：{{items.name}}</span>
+                  </div>
+                  <div class="centernum">
+                    <span style="margin-left: 35px;">{{items.total ? items.total : '总数: 0'}}</span>
+                  </div>
+                </div>
+                <div class="down">
+                  <span style="margin-left: 25px;margin-top: 3%;">主要情况：{{items.details}}</span>
+                </div>
+                <div class="imgdown">
+                  <span style="margin-left: 25px;color: #0080FF;"><a style="color: #0080FF;" href="javascript:void(0)" (click)='previewImg(items)'>查看图片</a></span>
+                  <label  style="float: right;margin-right: 10%;cursor:pointer" (click)='SwitchBoard(items)'><input style="margin-right: 5px;cursor:pointer" [(ngModel)]="items.expanded?down:open" readonly><img [src]="items.expanded?imgsrcdown:imgsrcopen" (click)='SwitchBoard(items)' ></label>
+                  
+                </div>
+                <div class="overflowTable" *ngIf="items.expanded">
+                    <div class="detailsTable">
+                      <table>
+                        <tr *ngFor="let header of items.header">
+                          <th >{{header}}</th>
+                          <td *ngFor="let body of items.body">{{body[header]? body[header] : '暂无数据'}}</td>
+                        </tr>
+                      </table>
+                    </div>
+                    <div *ngFor="let tableMsg of items.loopTable" class="detailsTable">
+                      <p style="text-align: center; font-size: 16px; margin: 5px 0;">楼层/区域名称: {{tableMsg.name? tableMsg.name: '暂无名称'}}</p>
+                      <table>
+                        <tr *ngFor="let header of items.header">
+                            <th >{{header}}</th>
+                            <td *ngFor="let body of items.body">{{body[header]? body[header] : '暂无数据'}}</td>
+                          </tr>
+                      </table>
+                    </div>
+                  </div>
+                  
+              </div>
+              
+        
+            
+          </mat-expansion-panel>
+    </mat-accordion>
+    </div>
+    
+</div>

src/app/plan-audit/fire-facilities/fire-facilities.component.scss

@@ -0,0 +1,222 @@
+*{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.content {
+    width: 100%;
+    height: 760px;
+    //box-sizing: border-box;
+    //padding: 10px;
+    overflow-y: auto;
+    .contentBox {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+      overflow-y: auto;
+    }
+    .tableContent{
+      width: 100%;
+      height: 100%;
+      .panelhead{
+        //height: 24px;
+        background-color: #F2F9FF;
+      }
+      .column{
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        border-bottom: 8px solid #EEF1F5;
+        .up{
+          width: 100%;
+          margin-top: 3%;
+          display: flex;
+          flex-direction: row;
+          .left{
+            width: 40%;
+          }
+          .centernum{
+            //width: 25%;
+            color: black;
+            text-align: center;
+            white-space: pre-line;
+            max-height: 48px;
+            overflow-y: auto;
+          }
+        }
+        .down{
+          width: 100%;
+         /*  display: flex;
+          justify-content: space-around; */
+          span{
+           display: inline-block;
+          }
+        }
+        .downtable{
+          width: 100%;
+        }
+        .imgdown{
+          margin-top: 3%;
+          span{
+            color: #0080FF;
+          }
+          input{
+            border:none;
+            outline: none;
+            text-align: right;
+            color: #0080FF;
+          }
+          img{
+            height: 8px;
+            width: 10px;
+          }
+        }
+      }
+    }
+  }
+  .mat-icon {
+    color: black;
+    cursor:pointer;
+  }
+  
+  
+  
+  //可展开面板每一行css
+  .mat-expansion-panel-header {
+    padding: 3px 24px;
+  }
+  
+  .firstContent {
+    width: 3%;
+  }
+  .textContent {
+    width: 12%;
+    color: black;
+    text-align: center;
+    overflow: hidden;    
+    text-overflow:ellipsis;    
+    white-space: nowrap;
+  }
+  .totalContent {
+    width: 25%;
+    color: black;
+    text-align: center;
+    white-space: pre-line;
+    max-height: 48px;
+    overflow-y: auto;
+  }
+  .lastTextContent { //textarea多行文本
+    width: 45%;
+    color: black;
+    text-align: center;
+  }
+  input {
+    height: 22px;
+    line-height: 22px;
+    padding-left: 5px;
+    border-radius: 3px;
+  }
+  a {
+    color: #0000ff;
+  }
+  
+  
+  
+  //bottom用户输入框
+  .InputField {
+    display: inline-block;
+    width: 40%;
+    text-align: right;
+    margin: 10px 25px;
+    input {width: 60%;}
+    label {margin-right: 10px;}
+  }
+  textarea {
+    vertical-align: middle;
+    border-radius: 5px;
+    padding: 5px;
+    width: 60%;
+    height: 36px;
+    resize: none;
+  }
+  
+  
+  
+  //表格样式
+  .overflowTable {
+    width: 95%;
+    margin: 0 auto;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+  .detailsTable {
+    margin: 10px 0;
+    table {
+      width: 100%;
+      text-align: center;
+      border-collapse:collapse;
+      word-break:break-all; 
+      word-wrap:break-all;
+      table-layout:fixed;
+      th {
+        height: 35px;
+        //border: 1px solid #999;
+      }
+      td {
+        height: 35px;
+        //border: 1px solid #999;
+      }
+        tr:nth-child(odd){
+          background: #F2F9FF;
+          }
+    }
+  }
+  
+  
+  
+  //滚动条样式
+  ::-webkit-scrollbar{
+    width: 5px;
+    background-color: white;
+  }
+  ::-webkit-scrollbar-thumb{
+    background-color: #999;
+  }
+  
+  
+  
+  //img图片列表页面
+  .imageList {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    .imageListBox {
+      width: 100%;
+      height: 90%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .imagesBox {
+        width: 300px;
+        height: 200px;
+        margin: 0 11px 0 11px;
+        display: inline-block;
+        img {
+          border: 1px solid #999;
+          width: auto;
+          height: auto;
+          max-width: 100%;
+          height: 170px;
+          cursor:pointer;
+        }
+      }
+    }
+  }
+  

src/app/plan-audit/fire-facilities/fire-facilities.component.spec.ts

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

src/app/plan-audit/fire-facilities/fire-facilities.component.ts

@@ -0,0 +1,529 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-23 09:28:54
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-02-03 10:12:45
+ */
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http'
+import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+//import { ImgsDataDetail2 } from './addGrouping.component'
+import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
+import { ImagesData2 } from './imagesdata.component'
+import { Router,ActivatedRoute } from '@angular/router'
+export interface Food {
+  value: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-fire-facilities',
+  templateUrl: './fire-facilities.component.html',
+  styleUrls: ['./fire-facilities.component.scss']
+})
+export class FireFacilitiesComponent implements OnInit {
+
+  constructor(private router:Router,private route:ActivatedRoute,public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.getCompanyInformation()
+    this.getAllBuilding()
+    
+  }
+  unitId:any = '5e9964caa760a059e84512e9'
+    //定义属性数据
+  singleElection:Food[]=[
+    {value:'true', name: '有'},
+    {value:'false', name: '无'}]
+  
+    companyBuiltInGrouping:any = []; //单位消防设施内置分组
+    companyDetails:any = []; //单位详情
+    companyEachDetails:any = [] //单位每层详情
+    companyOptionalGrouping:any = []; //单位消防设施可选分组
+    open="详情"
+    down="收起"
+    imgsrcopen="../../../assets/images/routdown2.png"
+    imgsrcdown="../../../assets/images/routup2.png"
+    tableshow=true
+  
+    //获得单位基本信息
+    getCompanyInformation () {
+      //let companyId  = this.route.snapshot.queryParams.id
+      let companyId  = this.unitId
+      this.http.get(`/api/Companies/${companyId}`).subscribe((data:any)=>{
+        if (data.buildingTypes.length) {
+          let newData = {buildingType: data.buildingTypes[0].id,companyId : companyId}
+          this.http.get('/api/CompanyFacilities',{params:newData}).subscribe((data:any)=>{ //获得单位的消防设施
+            this.companyBuiltInGrouping = data[0].summary.companyFacilityGroups
+            this.companyOptionalGrouping = data[0].summary.companyOptionalGroups
+            this.companyDetails = data[0].details
+            this.companyEachDetails = data[0].eachDetails
+            this.companyBuiltInGrouping.forEach(element => { //循环单位内置分组项
+              element.selectBuiltInGrouping = []
+              element.facilityItems.forEach((elements,index) => {
+                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
+  
+      })
+    }
+  
+    //创建单位消防设施内置分组项
+    addCompanyGrouping (e) {
+      let data = e
+      let dialogRef = this.dialog.open(ImagesData2,{data});
+      dialogRef.afterClosed().subscribe(data=>{
+        if (data) { e.facilityItems.push(data) } }); 
+    }
+  
+    //保存单位消防设施内置分组项
+    editCompanyGrouping(e) {
+      let header = {groupId:e.id}
+      let data = []
+      e.facilityItems.forEach((element,index) => {
+        let msg = {
+          isBuiltin: element.isBuiltin,
+          details: element.details,
+          name: element.name,
+          isEachFloor: element.isEachFloor,
+          order: element.order}
+        data.push(msg)
+        if (index==e.facilityItems.length-1) {
+          this.http.post('/api/CompanyFacilityItems/Batch',data,{params:header}).subscribe(data=>{
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('数据更新成功','确定',config);
+          }) }
+      }); //forEach
+    
+    }
+  
+    //checked单位消防设施内置分组项时
+    checkedCompany (e,item,items) {
+      if (e.checked) {
+        item.selectBuiltInGrouping.push(items)
+      } else {
+        item.selectBuiltInGrouping.splice(item.selectBuiltInGrouping.findIndex(oldItem => oldItem == items), 1)
+      }
+    }
+  
+    //删除消防设施内置分组项
+    deleteCompanyGrouping (e) {
+      if (e.selectBuiltInGrouping.length) {
+       let isDelete = confirm('您确定要删除吗')
+       if (isDelete) {
+        let msg:any = `?groupId=${e.id}`
+        e.selectBuiltInGrouping.forEach((element,index) => {
+          let data = `&name=${element.name}`
+          msg = msg + data
+          if (index === e.selectBuiltInGrouping.length-1) {
+            this.http.delete('/api/CompanyFacilityItems/Batch' + msg).subscribe(data=>{
+              let deleteMsg = e.selectBuiltInGrouping
+              deleteMsg.forEach(deleteElement => {
+                e.facilityItems.splice(e.facilityItems.findIndex(item=>item.name==deleteElement.name),1)
+              });
+              e.selectBuiltInGrouping = []
+  
+             }) //http
+          } //if
+        }); //forEach
+       }
+      } else {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('请选择内置分组项','确定',config);
+      }
+    }
+  
+    //保存单位消防设施可选分组
+    editCompanyOptional (e,item) {
+      e.stopPropagation() //阻止冒泡
+      item.propertyInfos.forEach((element,index) => { 
+        element.propertyValue = String(element.propertyValue)
+        if (index == item.propertyInfos.length-1 ) {
+          this.http.post('/api/CompanyOptionalGroups',item).subscribe(data=>{
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('数据更新成功','确定',config);
+          })
+        } //if
+       });
+    }
+  
+    //单位消防设施切换展开面板
+    SwitchBoard (e) {
+      e.expanded = !e.expanded
+      if (e.expanded) { //展开面板展开时
+        if (e.isEachFloor) { //逐层统计时
+          let data = this.companyEachDetails[e.name]
+          if (data) {
+            e.loopTable = []
+            data.forEach(item => {
+              let tableMsg = {name:item.name, header:[], body:[]}
+              item.assets[0].propertyInfos.forEach(element => { //表头
+                if (element.propertyType!=3) {
+                  let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
+                  tableMsg.header.push(element.propertyName+unit)}
+              });
+              item.assets.forEach(element => { //表格内容
+                let everyBody = {}
+                element.propertyInfos.forEach((elements,index) => {
+                  if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { 
+                    let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                    everyBody[elements.propertyName+unit] = elements.propertyValue }
+                  if (elements.propertyType==6) { 
+                    let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                    everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' }
+                  if (elements.propertyType!=3 && elements.propertyName=='图片') { 
+                    let imgLength = []
+                    element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
+                    let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                    everyBody[elements.propertyName+unit] = String(imgLength.length) } 
+  
+                }); //propertyInfos
+                tableMsg.body.push(everyBody)
+              }); //assets
+              e.loopTable.push(tableMsg)
+            });
+  
+          } //data有数据时
+        } else { //非逐层统计时
+          let data = this.companyDetails[e.name]
+          if (data) { 
+            e.header = []
+            e.body = []
+            data[0].propertyInfos.forEach(element => { //表头
+              if (element.propertyType!=3) {
+                let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
+                e.header.push(element.propertyName+unit)}
+            });
+            data.forEach(element => { //表格内容
+              let everyBody = {}
+              element.propertyInfos.forEach((elements,index) => {
+                if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { 
+                  let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                  everyBody[elements.propertyName+unit] = elements.propertyValue }
+                if (elements.propertyType==6) { 
+                  let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                  everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' }
+                if (elements.propertyType!=3 && elements.propertyName=='图片') { 
+                  let imgLength = []
+                  element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
+                  let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                  everyBody[elements.propertyName+unit] = String(imgLength.length) }
+  
+              });
+              e.body.push(everyBody)
+            });
+  
+          }
+        } //非逐层统计时
+        
+  
+      }
+    }
+  
+  
+  
+    allBuildingGrouping:any; //所有建筑的消防设施 内置分组+可选分组
+    //获取所有建筑
+    getAllBuilding () {
+      let companyId  = this.unitId
+      this.http.get('/api/Buildings',{params:{
+        companyId:companyId
+      }}).subscribe((data:any)=>{
+        this.allBuildingGrouping = data
+        if (this.allBuildingGrouping.length) { this.getAllBuildingFacilities() }
+      })
+    }
+  
+    //获取所有建筑的消防设施
+    getAllBuildingFacilities () {
+      let companyId  = this.unitId
+      this.allBuildingGrouping.forEach(element => {
+        let header = {buildingId: element.id, buildingType: element.buildingTypes[0].id,companyId:companyId}
+        this.http.get('/api/BuildingFacilities',{params:header}).subscribe(data=>{
+          element.buildingFacilityGroups = data[0].summary.buildingFacilityGroups
+          element.buildingOptionalGroups = data[0].summary.buildingOptionalGroups
+          element.buildingDetails = data[0].details
+          element.buildingEachDetails = data[0].eachDetails
+          element.buildingFacilityGroups.forEach((elements) => { //循环每个建筑内置分组项
+            elements.selectBuiltInGrouping = []
+            elements.facilityItems.forEach((newElement,index) => { 
+              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)
+          }
+        })
+  
+      });
+  
+    }
+  
+    
+  
+    //保存建筑消防设施内置分组项
+    editBuildingGrouping (e,item) {
+      let companyId  = this.unitId
+      let header = {companyId:companyId,buildingId:e.id, groupId:item.id}
+      let data = []
+      item.facilityItems.forEach((element,index) => {
+        let msg = {
+          isBuiltin: element.isBuiltin,
+          details: element.details,
+          name: element.name,
+          isEachFloor: element.isEachFloor,
+          order: element.order}
+        data.push(msg)
+        if (index==item.facilityItems.length-1) {
+          this.http.post('/api/BuildingFacilityItems/Batch',data,{params:header}).subscribe(data=>{
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('数据更新成功','确定',config);
+          }) }
+      }); //forEach
+  
+    }
+  
+    
+  
+    //保存建筑消防设施可选分组
+    editBuildingOptional (e,item) {
+      let companyId  = this.unitId
+      e.stopPropagation() //阻止冒泡
+      item.propertyInfos.forEach((element,index) => { 
+        element.propertyValue = String(element.propertyValue)
+        if (index == item.propertyInfos.length-1 ) {
+          this.http.post('/api/BuildingOptionalGroups',item,{params:{
+            companyId :companyId 
+          }}).subscribe(data=>{
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('数据更新成功','确定',config);
+          })
+        } //if
+       });
+    }
+  
+    //建筑消防设施切换展开面板
+    SwitchBuildingBoard (item,e) {
+      e.expanded = !e.expanded
+      if (e.expanded) { //展开面板展开时
+        if (e.isEachFloor) { //逐层统计时
+          let data = item.buildingEachDetails[e.name]
+          if (data) {
+            e.loopTable = []
+            data.forEach(item => {
+              let tableMsg = {name:item.name, header:[], body:[]}
+              item.assets[0].propertyInfos.forEach(element => { //表头
+                if (element.propertyType!=3) {
+                  let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
+                  tableMsg.header.push(element.propertyName+unit)}
+              });
+              item.assets.forEach(element => { //表格内容
+                let everyBody = {}
+                element.propertyInfos.forEach((elements,index) => {
+                  if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { 
+                    let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                    everyBody[elements.propertyName+unit] = elements.propertyValue }
+                  if (elements.propertyType==6) { 
+                    let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                    everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' }
+                  if (elements.propertyType!=3 && elements.propertyName=='图片') { 
+                    let imgLength = []
+                    element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
+                    let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                    everyBody[elements.propertyName+unit] = String(imgLength.length) }
+  
+                }); //propertyInfos
+                tableMsg.body.push(everyBody)
+              }); //assets
+              e.loopTable.push(tableMsg)
+            });
+            
+          } //data有数据时
+        } else { //非逐层统计时
+          let data = item.buildingDetails[e.name]
+          if (data) { 
+            e.header = []
+            e.body = []
+            data[0].propertyInfos.forEach(element => { //表头
+              if (element.propertyType!=3) {
+                let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
+                e.header.push(element.propertyName+unit)}
+            });
+            data.forEach(element => { //表格内容
+              let everyBody = {}
+              element.propertyInfos.forEach((elements,index) => {
+                if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { 
+                  let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                  everyBody[elements.propertyName+unit] = elements.propertyValue }
+                if (elements.propertyType==6) { 
+                  let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                  everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' }
+                if (elements.propertyType!=3 && elements.propertyName=='图片') { 
+                  let imgLength = []
+                  element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
+                  let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
+                  everyBody[elements.propertyName+unit] = String(imgLength.length) }
+  
+              });
+              e.body.push(everyBody)
+            });
+  
+          }
+        } //非逐层统计时
+  
+  
+  
+      }
+    }
+  
+    //单位消防设施预览图片
+    previewImg (e) {
+      if (e.isEachFloor) { //逐层统计时
+        let newData = this.companyEachDetails[e.name]
+        if (newData) {
+          let data = {name:e.name, images:[]}
+          let imgName 
+          newData.forEach(item => {
+            item.assets.forEach(element => {
+              element.propertyInfos.forEach( elements => { 
+                if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue}
+                if (elements.propertyType===3) {
+                 elements.propertyName = imgName
+                 data.images.push(elements)} });
+            });
+          }); //newDate
+  
+          if (data.images.length) {
+            let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
+          } else {
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('暂无图片数据','确定',config);
+          }
+  
+        } else{
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('暂无图片数据','确定',config); }
+      } else { //非逐层统计时
+        let newData = this.companyDetails[e.name]
+        let imgName 
+        if (newData) {
+          let data = {name:e.name, images:[]}
+          newData.forEach(element => {
+            element.propertyInfos.forEach(elements => { 
+              if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue}
+              if (elements.propertyType===3) {
+                elements.propertyName = imgName
+                data.images.push(elements)} });
+          });
+          if (data.images.length) {
+            let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
+          } else {
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('暂无图片数据','确定',config);
+          }
+          
+        } else {
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('暂无图片数据','确定',config); }
+      }
+  
+    }
+  
+    //建筑消防设施预览图片
+    previewBuildingImg (item,e) {
+      if (e.isEachFloor) { //逐层统计时
+        let newData = item.buildingEachDetails[e.name]
+        if (newData) {
+          let data = {name:e.name, images:[]}
+          let imgName
+          newData.forEach(item => {
+            item.assets.forEach(element => {
+              element.propertyInfos.forEach( elements => { 
+                if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue}
+                if (elements.propertyType===3) {
+                 elements.propertyName = imgName
+                 data.images.push(elements)} });
+            });
+          }); //newDate
+        
+          if (data.images.length) {
+            let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
+          } else {
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('暂无图片数据','确定',config);
+          }
+  
+        } else{
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('暂无图片数据','确定',config); }
+      } else { //非逐层统计时
+        let newData = item.buildingDetails[e.name]
+        let imgName 
+        if (newData) {
+          let data = {name:e.name, images:[]}
+          newData.forEach(element => {
+            element.propertyInfos.forEach(elements => { 
+              if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue}
+              if (elements.propertyType===3) {
+                elements.propertyName = imgName
+                data.images.push(elements)} 
+              });
+          });
+          if (data.images.length) {
+            let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
+          } else {
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('暂无图片数据','确定',config);
+          }
+          
+        } else {
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('暂无图片数据','确定',config); }
+      }
+  
+    }
+  
+
+}

src/app/plan-audit/fire-facilities/imagesdata.component.html

@@ -0,0 +1,9 @@
+<div class="imageList">
+  <div mat-dialog-title *ngIf="data">{{data.name}}</div>
+  <div class="imageListBox">
+      <div class="imagesBox" *ngFor="let item of data.images;let key = index">
+         <img [src]='item.newImageUrl' (click)='seeImage(key)'>
+         <label style="display: inline-block;width: 100%;text-align: center;">{{item.propertyName}}</label>
+      </div>
+  </div>
+</div>

src/app/plan-audit/fire-facilities/imagesdata.component.ts

@@ -0,0 +1,90 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-23 09:46:16
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-23 09:53:45
+ */
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import Swiper from 'swiper';
+
+
+
+@Component({
+    selector: 'imagesdata',
+    templateUrl: './imagesdata.component.html',
+    styleUrls: ['./fire-facilities.component.scss']
+  })
+export class ImagesData2 {
+
+  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImagesData2>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.data.images.forEach(element => {
+      element.newImageUrl = `${element.propertyValue}?x-oss-process=image/resize,m_fill,h_170,w_299`
+    });
+  }
+
+  //查看大图
+  seeImage (index) {
+    let data = {
+      allImages:this.data.images,
+      imgIndex: index}
+    let dialogRef = this.dialog.open(previewBigImg2,
+      {width: '1600px',
+      height:'900px',data});
+  }
+
+}
+
+
+
+@Component({
+  selector: 'previewBigImg',
+  templateUrl: './previewImg.html',
+  styleUrls: ['./realistic-picture.component.scss']
+})
+export class previewBigImg2 {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewBigImg2>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+    testSwiper: Swiper;
+
+  ngOnInit(): void {
+    this.allImages = this.data.allImages
+    this.allImages.forEach(element => {
+      element.previewImageUrl = `${element.propertyValue}?x-oss-process=image/auto-orient,1` //处理图片URL地址
+    });
+  }
+
+  ngAfterViewInit() {
+    this.testSwiper = new Swiper('.swiper-container', {
+      lazy: true,
+      initialSlide: this.data.imgIndex,
+      direction: 'horizontal',
+      loop: false,
+      
+
+
+      // 如果需要前进后退按钮
+      navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+      }
+    });
+  }
+
+  allImages:any; //展示所有的图片
+  rotationAngle:number=0; //旋转角度
+
+  //旋转图片
+  rotate () {
+    this.rotationAngle = this.rotationAngle+90
+    if (this.rotationAngle === 360) {this.rotationAngle = 0}
+  }
+
+}
+  

src/app/plan-audit/fire-facilities/previewImg.html

@@ -0,0 +1,25 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-23 09:46:16
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-27 08:47:38
+-->
+<div mat-dialog-title>图片详情</div>
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
+        <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
+        <div class="swiper-lazy-preloader"></div>
+      </div>
+    </div>
+
+    <!-- 如果需要导航按钮 -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+</div>
+
+<div class="previewImgBottom">
+  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
+</div>

src/app/plan-audit/fire-facilities/realistic-picture.component.scss

@@ -0,0 +1,174 @@
+.content {
+  margin: 0 0 0 10px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  .leftBox {
+      flex: 15%;
+      padding-top: 10px;
+      .bank  {
+        display: flex;
+        padding-left: 10px;
+        .mat-icon {margin-right: 15px;}
+      }
+  }
+  .rightBox {
+      border-left: 1px solid #999;
+      flex: 85%;
+      display: flex;
+      flex-direction: column;
+      .topBox { 
+        flex: 5%; padding: 10px;
+        display: flex;
+        :first-child {flex: 85%;};
+        :last-child {flex: 15%;}
+      }
+      .bottomBox {
+        flex: 95%;
+        padding: 5px 0 0 25px;
+        overflow: auto;
+        .imgsBoxflex {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+      }
+  }
+}
+
+//icon统一样式
+.mat-icon {
+  cursor:pointer;
+  width: 18px;
+  height: 18px;
+  vertical-align:top;
+  margin-right: 10px;
+}
+.title {margin-right: 30px;font-weight: 500; font-size: 18px;}
+
+.material {
+  cursor:pointer;
+  height: 30px;
+  font-size: 16px;
+  margin-top: 10px;
+  padding-left: 15px;
+  span {
+    max-width: 200px;
+    display: inline-block;
+    overflow: hidden;    
+    text-overflow:ellipsis;    
+    white-space: nowrap;
+  }
+  .btn {
+    color: #FFC122;
+  }
+}
+.imgBox{
+  width: 300px;
+  height: 200px;
+  margin: 0 35px 35px 0;
+  display: inline-block;
+  position: relative;
+  .fixedImg {
+    width: 100%;
+    height: 170px;
+    text-align: center;
+    margin-bottom: 3px;
+    img {
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;
+      cursor:pointer;
+    }
+  }
+  input{
+    font-size:12px;
+    width: 100px;
+    height:18px; 
+    border-radius:3px; 
+    border:1px solid #c8cccf;
+    outline:0; 
+    text-align:left; 
+    padding-left: 5px;
+    display:inline-block; 
+    cursor: pointer;}
+  input::-webkit-input-placeholder{
+      color: #986655;
+      font-size: 12px;
+  }
+  a {display: inline-block;
+    width: 45px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 3px;
+    background-color: #2196F3;
+    font-size: 14px;
+    color: #fff;}
+}
+.uploadFileFixed {
+  position: relative;
+  .uploadFile {
+    opacity:0;
+    display: inline-block;
+    width: 88px;
+    height: 36px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+}
+//分页
+.mat-paginator {
+  background-color: rgba(255,255,255,0);
+  padding-right: 10%;
+}
+.isLoading{
+  display: inline-block;
+  margin-left: 15px;
+  top: 8px;
+}
+
+//左侧实景图文件样式
+.leftFile {
+  background-color: rgba(225,225,225,0.8);
+}
+//选中图片样式
+.selectImg {
+  -webkit-filter: drop-shadow(0px 0px 5px #000);
+  filter: drop-shadow(0px 0px 5px #000);
+  border: 1px solid red;
+}
+.checkedImg {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  color:#00FF00;
+  font-size: 30px;
+  z-index: 999;
+}
+//预览图片旋转角度
+.rotateA {transform: rotate(90deg) scale(0.75);}
+.rotateB {transform: rotate(180deg)}
+.rotateC {transform: rotate(270deg) scale(0.75);}
+
+
+
+//预览图片
+.previewImgBox {
+  width: 1500px;
+  height: 700px;
+  text-align: center;
+  img{
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    height: 100%;}
+}
+.previewImgBottom {
+  text-align: center;
+  height: 30px;
+  margin: 20px auto;
+}

src/app/plan-audit/function-partition/function-partition.component.html

@@ -0,0 +1,64 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-20 15:45:31
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-25 18:41:18
+-->
+<div class="content">
+  
+  
+<div class="center" id="functionpartition">
+  <div style="margin: 10px 0;">
+    <mat-accordion class="tableContent">
+      <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+          <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
+            <mat-panel-title style="font-size: 14px;">
+              单位功能分区
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+      
+          <div class="column" *ngFor="let item of companyFunctionalZoning">
+            <div class="up">
+              <span style="color: #0080FF;">区域：{{item.region}}</span>
+            </div>
+            <div class="areacenter">
+              <span>面积：{{item.area}}</span>
+            </div>
+            <div class="down">
+              <span style="display: inline-block;">基本情况：{{item.details}}</span>
+            </div>
+          </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+  
+<div style="margin-bottom: 10px;" *ngFor="let item of allBuildingFunctionalZoning;let key = index">
+  <mat-accordion class="tableContent">
+    <mat-expansion-panel  >
+        <mat-expansion-panel-header class="panelhead">
+          <mat-panel-title style="font-size: 14px;">
+            {{item.name}}
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+    
+        <div class="column" *ngFor="let item of companyFunctionalZoning">
+          <div class="up">
+            <span style="color: #0080FF;">区域：{{item.region}}</span>
+          </div>
+          <div class="areacenter">
+            <span>面积：{{item.area}}</span>
+          </div>
+          <div class="down">
+            <span style="display: inline-block;">基本情况：{{item.details}}</span>
+          </div>
+        </div>
+      </mat-expansion-panel>
+  </mat-accordion>
+</div>
+  
+</div>
+
+</div>
+

src/app/plan-audit/function-partition/function-partition.component.scss

@@ -0,0 +1,81 @@
+*{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.content {
+  width: 100%;
+  height: 760px;
+  overflow-y: auto;
+  //padding: 10px 0 0 10px;
+  display: flex;
+  .column{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #EEF1F5;
+    .up{
+      width: 100%;
+      margin-top: 3%;
+    }
+    .areacenter{
+      margin-top: 1%;
+    }
+    .down{
+      margin-top: 1%;
+      margin-bottom: 2%;
+    }
+    span{
+      margin-left: 8%;
+      //@at-root: 5%;
+    }
+  }
+}
+.center{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.tableContent {
+  //margin-left: 10px;
+  width: 100%;
+  height: 100%;
+  .panelhead{
+    height: 44px;
+    background-color: #F2F9FF;
+  }
+  table {
+    border:1px solid #0094ff;
+    border-collapse:collapse;
+    td,th{
+      border:1px solid #0094ff;
+    }
+    width: 90%;
+    text-align: center;
+    margin: 0 auto;
+    .cdk-header-cell {
+      text-align: center;
+    }
+    textarea {
+      border-radius: 5px;
+      padding: 5px;
+      width: 80%;
+      height: 36px;
+      resize: none;
+      scrollbar-base-color:#0080FF;
+    }
+  }
+}
+
+//icon统一样式
+.mat-icon {
+  cursor:pointer;
+}

src/app/plan-audit/function-partition/function-partition.component.spec.ts

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

src/app/plan-audit/function-partition/function-partition.component.ts

@@ -0,0 +1,219 @@
+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 { Router,ActivatedRoute } from '@angular/router'
+
+@Component({
+  selector: 'app-function-partition',
+  templateUrl: './function-partition.component.html',
+  styleUrls: ['./function-partition.component.scss']
+})
+export class FunctionPartitionComponent implements OnInit {
+
+  constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.companyId = this.unitId
+    this.getAllCompany()
+    this.getAllBuilding()
+  }
+
+  displayedColumns: string[] = ['checked', 'region', 'measure', 'situation'];
+  unitId:any = '5e9964caa760a059e84512e9'
+
+  companyId:any; //单位编号
+  companyFunctionalZoning:any=[]; //所有单位功能分区属性
+  selectFunctionalZoning:any=[]; //选中的单位功能分区属性
+
+  //获得所有单位功能分区属性
+  getAllCompany () {
+    let companyId = this.unitId
+    this.http.get('/api/CompanyFunctionalDivisions',{params:{
+      companyId:companyId
+    }}).subscribe((data:any)=>{
+      this.companyFunctionalZoning = data
+      this.selectFunctionalZoning = []
+    })
+  }
+
+  //新建单位功能分区属性
+  addCompany () {
+    let companyId = this.route.snapshot.queryParams.id
+    let data = {companyId:companyId, region:'', area:0, details:''}
+    this.companyFunctionalZoning.push(data)
+    this.preservation()
+  }
+
+  //保存单位功能分区属性
+  preservation () {
+    let companyId = this.unitId
+    if (this.companyFunctionalZoning.length) {
+      this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{
+        companyId:companyId
+      }}).subscribe(data=>{
+        this.getAllCompany()
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('数据更新成功','确定',config);
+      })
+    }
+  }
+
+  //单位功能分区checked选择
+  changeCompany (ele,e) {
+    if (e.checked) {
+      this.selectFunctionalZoning.push(ele.id)
+    } else {
+      this.selectFunctionalZoning.splice(this.selectFunctionalZoning.findIndex(item => item === ele.id), 1)
+    }
+  }
+
+  //删除单位功能分区属性
+  delete () {
+    let companyId = this.unitId
+    if (this.selectFunctionalZoning.length) {
+      let isDelete = confirm('您确定要删除吗')
+      if (isDelete) {
+        this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{
+          companyId:companyId
+        }}).subscribe(data=>{
+          const options = {
+            headers: new HttpHeaders({'Content-Type': 'application/json',}),
+            body:this.selectFunctionalZoning}
+          this.http.delete(`/api/CompanyFunctionalDivisions/Batch`,options).subscribe(data=>{
+            this.getAllCompany()
+            const config = new MatSnackBarConfig();
+            config.verticalPosition = 'top';
+            config.duration = 3000
+            this.snackBar.open('数据更新成功','确定',config);
+          })
+        })
+      }
+    } else if (!this.selectFunctionalZoning.length) {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请选择单位功能分区','确定',config);
+    }
+  }
+
+
+
+
+
+  //建筑功能分区↓
+  allBuilding:any = []; //所有建筑
+  allBuildingFunctionalZoning:any = []; //所有建筑的功能分区
+  selectBuildingFunctionalZoning:any = []; //选中的建筑的功能分区
+
+  //获得所有建筑
+  getAllBuilding () {
+    let companyId = this.unitId
+    this.http.get(`/api/Buildings`,{params:{
+      companyId:companyId
+    }}).subscribe((data:any)=>{
+      if (data.length) {
+        this.allBuilding = data
+        this.allBuilding.forEach(element => { //为每个建筑添加一个 功能分区对象
+          element.functionalZoning = null
+        });
+        this.getAllBuildingFunctionalZoning()
+      }
+    })
+  }
+
+  //获得所有建筑的功能分区
+  getAllBuildingFunctionalZoning () {
+    this.selectBuildingFunctionalZoning = []
+    this.allBuildingFunctionalZoning = []
+    this.allBuilding.forEach(element => {
+      let data={buildingId: element.id}
+      this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{
+        if (data.length) {
+          element.functionalZoning = data
+          this.selectBuildingFunctionalZoning.push([]) //拥有建筑功能分区的提前push空数组
+          this.allBuildingFunctionalZoning.push(element) }
+      })
+    });
+  }
+
+  //封装函数刷新当前建筑功能分区
+  updateCurrent (e,index) {
+    let data= {buildingId: e.id}
+    this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{
+      this.selectBuildingFunctionalZoning[index] = []
+      this.allBuildingFunctionalZoning[index].functionalZoning = data
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('数据更新成功','确定',config);
+    })
+  }
+
+  //创建建筑功能分区
+  addPartition () {
+  }
+
+  //创建建筑功能分区属性
+  addBuilding (e,index) {
+    let data = {buildingId:e.id, region:'', area:0, details:''}
+    this.http.post('/api/BuildingFunctionalDivisions',data).subscribe(data=>{
+      this.preservationBuilding(e,index)
+    })
+  }
+
+  //保存建筑功能分区属性
+  preservationBuilding (e,index) {
+    let data ={buildingId:e.id}
+    this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{
+      this.updateCurrent(e,index)
+    })
+  }
+
+  //建筑功能分区checked选择
+  changeBuilding (ele,e,index) {
+    if (e.checked) {
+      this.selectBuildingFunctionalZoning[index].push(ele.id)
+    } else {
+      this.selectBuildingFunctionalZoning[index].splice(this.selectBuildingFunctionalZoning[index].findIndex(item => item === ele.id), 1)
+    }
+  }
+
+  //删除建筑功能分区
+  deleteBuilding (e,index) {
+    if (this.selectBuildingFunctionalZoning[index].length) {
+      let isDelete = confirm('您确定要删除吗')
+      if (isDelete) {
+        let data ={buildingId:e.id}
+        this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{
+          const options = {
+            headers: new HttpHeaders({'Content-Type': 'application/json',}),
+            body:this.selectBuildingFunctionalZoning[index],
+            params:{buildingId:e.id}}
+          this.http.delete(`/api/BuildingFunctionalDivisions/Batch`,options).subscribe(data=>{
+            this.selectBuildingFunctionalZoning[index].forEach((element,newIndex) => {
+              this.allBuildingFunctionalZoning[index].functionalZoning.splice(this.allBuildingFunctionalZoning[index].functionalZoning.findIndex(item=>item.id==element),1)
+              if (newIndex==this.selectBuildingFunctionalZoning[index].length-1) {
+                if (this.allBuildingFunctionalZoning[index].functionalZoning.length) {
+                  this.updateCurrent(e,index)
+                } else {
+                  this.selectBuildingFunctionalZoning.splice(index,1)
+                  this.allBuildingFunctionalZoning.splice(index,1)}
+              }
+            });
+
+
+          })
+        })
+      }
+    } else if (!this.selectBuildingFunctionalZoning[index].length) {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请选择建筑功能分区','确定',config);
+    }
+  }
+
+}

src/app/plan-audit/key-site-look/key-site.component.html

@@ -0,0 +1,101 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-24 10:57:16
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-02-03 16:13:41
+-->
+<div class="content" id="keysite">
+  <div style="margin: 10px 0;">
+    <mat-accordion  class="tableContent">
+      <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+        <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
+          <mat-panel-title style="font-size: 14px;">
+            单位重点部位
+          </mat-panel-title>
+        </mat-expansion-panel-header >
+        <div class="contat">
+          <div class="colum" *ngFor="let element of allCompanyPosition">
+              <div class="left" >
+                <img  [src]="element.imageUrls[0]" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='seeImg(element.imageUrls)'>
+              </div>
+              <div class="right">
+                <div class="rightone">
+                  <span style="color: #0080FF;">{{element.name}}</span>
+                </div>
+                <div class="righttwo">
+                  <span>所在地址：{{element.position}}</span>
+                </div>
+                <div class="righthree">
+                  <span>建筑结构：{{element.structure}}</span>
+                </div>
+                <div class="rightfour">
+                  <span>使用性质：{{element.nature}}</span>
+                </div>
+                <div class="rightfive">
+                  <span>主要危险：{{element.hazards}}</span>
+                </div>
+              </div>
+            
+            
+          </div>
+        </div>
+          
+          <div class="down">
+            <textarea readonly [(ngModel)]="companyInput" ></textarea>
+          </div>  
+          
+    
+        
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+  
+<div *ngFor="let item of allBuilding" style="margin-bottom: 10px;">
+  <mat-accordion class="tableContent" >
+    <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+      <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
+        <mat-panel-title style="font-size: 14px;">
+          {{item.name}}
+        </mat-panel-title>
+        <!-- <mat-icon>keyboard_arrow_down</mat-icon> -->
+      </mat-expansion-panel-header >
+      <div class="contat">
+        <div class="colum" *ngFor="let element of item.position">
+          <div class="left" >
+            <img  [src]="element.imageUrls[0]" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='seeImg(element.imageUrls)'>
+          </div>
+          <div class="right">
+            <div class="rightone">
+              <span style="color: #0080FF;">{{element.name}}</span>
+            </div>
+            <div class="righttwo">
+              <span>所在地址：{{element.position}}</span>
+            </div>
+            <div class="righthree">
+              <span>建筑结构：{{element.structure}}</span>
+            </div>
+            <div class="rightfour">
+              <span>使用性质：{{element.nature}}</span>
+            </div>
+            <div class="rightfive">
+              <span>主要危险：{{element.hazards}}</span>
+            </div>
+          </div>
+        
+        
+      </div>
+      </div>
+        
+        <div class="down">
+          <textarea readonly [(ngModel)]="companyInput" ></textarea>
+        </div>  
+        
+  
+      
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>
+  
+</div>

src/app/plan-audit/key-site-look/key-site.component.scss

@@ -0,0 +1,148 @@
+*{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.mat-expansion-panel-body{
+  display: flex;
+}
+.content {
+  width: 100%;
+  height: 760px;
+  //padding: 10px;
+  overflow-y: auto;
+  
+  .contentBox{
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    text-align: center;
+    margin: 0 auto;
+  }
+}
+.tableContent{
+  width: 100%;
+  height: 100%;
+  .contat{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .colum{
+      width: 280px;
+      display: flex;
+      margin: 10px 0 0 25px;
+      //flex-direction: column;
+        .left{
+          width: 140px;
+          height: 120px;
+          
+          //margin-left: 4%;
+          img{
+            //float: right;
+            width: 140px;
+            height: 120px;
+            cursor: pointer;
+            //padding-left: 7%;
+            //margin-right: 3%;
+          }
+        }
+        .right{
+          width: 140px;
+          //margin-top: 4%;
+          margin-left: 3%;
+          display: flex;
+          flex-direction: column;
+          .rightone{
+            width: 100%;
+          }
+          .righttwo{
+            margin-top: 1%;
+          }
+          .righthree{
+            margin-top: 1%;
+          }
+          .rightfour{
+            margin-top: 1%;
+          }
+          .rightfive{
+            margin-top: 1%;
+          }
+        }
+      
+    }
+  }
+  
+  .panelhead{
+    //height: 44px;
+    background-color: #F2F9FF;
+  }
+  
+  .down{
+    width: 100%;
+    height: 150px;
+    //margin-top: 5%;
+    textarea{
+      width: 95%;
+      height: 70%;
+      margin: 3%;
+      border: none;
+      background-color: #EEF1F5;
+      scrollbar-base-color:#0080FF;
+    }
+    
+  }
+}
+
+table {
+  width: 90%;
+  margin: 15px auto;
+  text-align: center;
+  .cdk-header-cell {
+    text-align: center;
+  }
+}
+
+//重点提示
+.tips{
+  width: 75%;
+  height: 150px;
+  border: 1px solid black;
+  border-radius: 5px;
+  margin: 15px auto;
+  text-align: center;
+  padding: 25px;
+  textarea {
+    resize: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+//预览图片旋转角度
+.rotateA {transform: rotate(90deg) scale(0.75);}
+.rotateB {transform: rotate(180deg)}
+.rotateC {transform: rotate(270deg) scale(0.75);}
+//预览图片
+.previewImgBox {
+  width: 1500px;
+  height: 700px;
+  text-align: center;
+  img{
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    height: 100%;}
+}
+.previewImgBottom {
+  text-align: center;
+  height: 30px;
+  margin: 20px auto;
+}

src/app/plan-audit/key-site-look/key-site.component.ts

@@ -0,0 +1,195 @@
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
+import {HttpClient} from '@angular/common/http'
+import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { KeySiteImgs2 } from './keysiteimgs.component'
+import { ActivatedRoute } from '@angular/router';
+
+
+
+@Component({
+  selector: 'app-key-site-look',
+  templateUrl: './key-site.component.html',
+  styleUrls: ['./key-site.component.scss']
+})
+export class KeySiteLookComponent implements OnInit {
+
+  constructor(public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private route:ActivatedRoute,) { }
+
+  displayedColumns: string[] = ['mainname', 'position', 'construction', 'nature', 'danger', 'img'];
+
+  ngOnInit(): void {
+    this.getCompanyPostion()
+    this.getCompanyTips()
+    this.getAllBuilding()
+  }
+  unitId:any = '5e9964caa760a059e84512e9'
+
+  allCompanyPosition:any = []; //所有单位重点部位
+  companyTips:any; //所有单位重点提示
+  companyInput:any; //单位重点提示数据
+  allBuilding:any = []; //所有建筑 + 建筑重点部位 + 建筑重点提示
+
+  //获取单位重点部位
+  getCompanyPostion () {
+    let id = {companyId:this.unitId}
+    this.http.get('/api/CompanyImportantLocations',{params:id}).subscribe(data=>{
+      this.allCompanyPosition = data
+      this.allCompanyPosition.forEach(element => {
+        if(element.imageUrls[0]!=undefined){
+          element.imageUrls[0]+= '?x-oss-process=image/resize,m_fill,h_140,w_120'
+        }
+       
+      });
+    })
+    
+  }
+
+  //获取单位重点提示
+  getCompanyTips () {
+    let id = {companyId:this.unitId}
+    this.http.get('/api/CompanyImportantTips',{params:id}).subscribe((data:any)=>{
+      if (data) {
+        this.companyTips = data
+        this.companyInput = data.details}
+    })
+  }
+
+  //获取所有建筑
+  getAllBuilding () {
+    let id = {companyId:this.unitId}
+    this.http.get('/api/Buildings',{params:id}).subscribe((data:any)=>{
+      if (data.length) {
+        this.allBuilding = data
+        this.allBuilding.forEach(element => {
+          element.position = [] //建筑重点部位
+          element.tips = null //建筑重点提示
+          element.companyInput = null })  //建筑重点提示数据
+        this.getAllBuildingPositon()
+        this.getAllBuildingTips()
+      }
+    })
+  }
+
+  //获取所有建筑重点部位
+  getAllBuildingPositon () {
+    this.allBuilding.forEach(element => {
+      let id = {buildingId:element.id}
+      this.http.get('/api/BuildingImportantLocations',{params:id}).subscribe(data=>{
+        element.position = data
+        element.position.forEach(element => {
+          if(element.imageUrls[0]!=undefined){
+            element.imageUrls[0]+= '?x-oss-process=image/resize,m_fill,h_140,w_120'
+          }
+        });
+      })
+    });
+  }
+
+  //获取所有建筑重点提示
+  getAllBuildingTips () {
+    this.allBuilding.forEach(element => {
+      let id = {buildingId:element.id}
+      this.http.get('/api/BuildingImportantTips',{params:id}).subscribe((data:any)=>{
+        if (data) {
+          element.tips = data
+          element.companyInput = data.details}
+      })
+    });
+  }
+
+  //保存单位重点提示
+  Preservation () {
+    if (this.companyTips) { //编辑单位重点提示
+      let data = {
+        companyId: this.companyTips.companyId,
+        id: this.companyTips.id,
+        details: this.companyInput}
+      this.http.put(`/api/CompanyImportantTips/${this.companyTips.id}`,data).subscribe(data=>{
+        this.getCompanyTips()
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('数据修改成功','确定',config);
+      })
+    } else { //新增单位重点提示
+      let data = {
+        companyId: this.unitId,
+        id : "",
+        details: this.companyInput || ""}
+      this.http.post('/api/CompanyImportantTips',data).subscribe(data=>{
+        this.getCompanyTips()
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('数据修改成功','确定',config);
+      })
+    }
+  }
+
+  //保存建筑重点提示
+  PreservationBuilding (e) {
+    if (e.tips) { //编辑建筑重点提示
+      let data = {
+        buildingId: e.id,
+        id: e.tips.id,
+        details: e.companyInput}
+      this.http.put(`/api/BuildingImportantTips/${e.tips.id}`,data).subscribe(data=>{
+        this.toUpdate(e)
+      })
+    } else { //新增重点单位提示
+      let data = {
+        buildingId: e.id,
+        details: e.companyInput || ""}
+      this.http.post('/api/BuildingImportantTips',data).subscribe(data=>{
+        this.toUpdate(e)
+      })
+    }
+  }
+
+  //查看图片
+  seeImg (e) {
+    if(e.length>0){
+      var index=e[0].lastIndexOf("\?");
+      if(index!=-1){
+        e[0]=e[0].substring(0,index)
+      }
+      
+    }
+    if (e.length) {
+      let data = e
+      const dialogRef = this.dialog.open(KeySiteImgs2, {//调用open方法打开对话框并且携带参数过去
+        width: '1600px',
+        height:'900px',data});
+      dialogRef.afterClosed().subscribe();
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('暂无图片数据','确定',config);
+    }
+    this.getCompanyPostion()
+    this.getAllBuildingPositon()
+  }
+
+  //封装方法获取更新当前tab页重点提示
+  toUpdate (e) {
+    let id = {buildingId:e.id}
+    this.http.get('/api/BuildingImportantTips',{params:id}).subscribe((data:any)=>{
+      if (data) {
+        this.allBuilding.forEach(element => {
+          if (element.id === e.id) {
+            element.tips = data
+            element.companyInput = data.details}
+        });
+      } // if
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('数据修改成功','确定',config);
+    })
+  }
+
+
+
+}

src/app/plan-audit/key-site-look/keysiteimgs.component.html

@@ -0,0 +1,18 @@
+<div mat-dialog-title>图片详情</div>
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+        <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
+          <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" 
+          [attr.data-src]="item">
+          <div class="swiper-lazy-preloader"></div>
+        </div>
+    </div>
+
+    <!-- 如果需要导航按钮 -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+</div>
+
+<div class="previewImgBottom">
+  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
+</div>

src/app/plan-audit/key-site-look/keysiteimgs.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, Inject ,ViewChild} from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import Swiper from 'swiper';
+
+
+
+@Component({
+    selector: 'keysiteimgs',
+    templateUrl: './keysiteimgs.component.html',
+    styleUrls: ['./key-site.component.scss']
+  })
+
+export class KeySiteImgs2 {
+  
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<KeySiteImgs2>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+    testSwiper: Swiper;
+
+  ngOnInit(): void {
+    this.allImages = []
+    this.data.forEach(element => {
+      element = `${element}?x-oss-process=image/auto-orient,1`
+      this.allImages.push(element)
+    });
+  }
+  
+  ngAfterViewInit() { 
+
+    this.testSwiper = new Swiper('.swiper-container', {
+      direction: 'horizontal',
+      loop: false,
+      lazy: true,
+      // 如果需要前进后退按钮
+      navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+      }
+    });
+
+  }
+
+  allImages:any; //展示所有的图片
+  rotationAngle:number=0; //旋转角度
+
+  //旋转图片
+  rotate () {
+    this.rotationAngle = this.rotationAngle+90
+    if (this.rotationAngle === 360) {this.rotationAngle = 0}
+  }
+
+
+
+}
+  

src/app/plan-audit/plan-audit.module.ts

@@ -55,9 +55,24 @@ import { WaitExamineerComponent } from './wait-examineer/wait-examineer.componen
 import { WaterAuditComponent } from './water-audit/water-audit.component';
 import { FireforceAuditComponent } from './fireforce-audit/fireforce-audit.component';
 import { LinkageforcesAuditComponent } from './linkageforces-audit/linkageforces-audit.component'
-
+import { AllaroundComponent } from './allaround/allaround.component'
+import { ImgDetails } from './allaround/imgdetails.component'
+import { FireFacilitiesComponent } from './fire-facilities/fire-facilities.component'
+import { ImagesData2 } from './fire-facilities/imagesdata.component'
+import { previewBigImg2 } from './fire-facilities/imagesdata.component'
+import { PlanListComponent } from './plan-list/plan-list.component'
+import { OpenPlanToolDialog } from './plan-list/plan-list.component'
+import { UiModule } from '../ui/ui.module';
+import { KeySiteLookComponent }from './key-site-look/key-site.component'
+import { KeySiteImgs2 } from './key-site-look/keysiteimgs.component'
+import { FunctionPartitionComponent } from './function-partition/function-partition.component'
+import { CadDrawComponent } from './cad-draw/cad-draw.component'
+import { RealisticPictureLookComponent }from './realistic-picture-look/realistic-picture.component'
+import { previewImg3 } from './realistic-picture-look/realistic-picture.component'
+import { show3D } from './wait-examineer/wait-examineer.component'
 @NgModule({
-  declarations: [DetachmentLevelComponent, PlanAuditComponent, PlanPassComponent,PlanOpen, PlanRecordComponent, BasicInfoComponent, WaitExamineerComponent, WaterAuditComponent, FireforceAuditComponent, LinkageforcesAuditComponent,],
+  declarations: [DetachmentLevelComponent, PlanAuditComponent, PlanPassComponent,PlanOpen, PlanRecordComponent, BasicInfoComponent, 
+    WaitExamineerComponent,AllaroundComponent,ImgDetails,FireFacilitiesComponent,ImagesData2,previewBigImg2,PlanListComponent,OpenPlanToolDialog,KeySiteLookComponent,KeySiteImgs2,FunctionPartitionComponent,CadDrawComponent,RealisticPictureLookComponent,previewImg3,show3D, WaterAuditComponent, FireforceAuditComponent, LinkageforcesAuditComponent],
   imports: [
     CommonModule,
     PlanAuditRoutingModule,
@@ -104,7 +119,8 @@ import { LinkageforcesAuditComponent } from './linkageforces-audit/linkageforces
     PortalModule,
     ScrollingModule,
     FormsModule,
-    KeyUnitModule
+    KeyUnitModule,
+    UiModule
   ]
 })
 export class PlanAuditModule { }

src/app/plan-audit/plan-list/openPlanTool.html

@@ -0,0 +1,3 @@
+<div style="width: 100%;height: 100%;">
+    <app-collection-tools-plan #plan></app-collection-tools-plan>
+</div>

src/app/plan-audit/plan-list/plan-list.component.html

@@ -0,0 +1,42 @@
+<div class="planlist" id="planlist">
+    <div style="margin: 10px 0;">
+        <mat-accordion>
+            <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+              <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F2F9FF;">
+                <mat-panel-title>
+                  总平面图
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="contant">
+                <div class="contantitem" *ngFor="let item of sitePlanItems">
+                    <div>
+                        <img (click)="openPlan(item,-1)" [src]="item.imageUrl ? item.imageUrl+'?x-oss-process=image/resize,m_fill,h_110,w_110' : '../../../assets/images/noImg.png'" alt="">
+                    </div>
+                    <p>{{item.name}}</p>
+                </div>
+              </div>
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+    <div *ngFor="let item of allBuildings;let key=index"  style="margin-bottom: 10px;">
+        <mat-accordion >
+            <mat-expansion-panel  style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+              <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F2F9FF;">
+                <mat-panel-title>
+                  {{item.name}}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <div class="contant">
+                  <div class="contantitem" *ngFor="let i of item.plandata">
+                      <div>
+                          <img (click)="openPlan(i,key)" [src]="i.imageUrl ? i.imageUrl+'?x-oss-process=image/resize,m_fill,h_110,w_110' : '../../../assets/images/noImg.png'" alt="">
+                      </div>
+                      <p>{{i.name}}</p>
+                  </div>
+                </div>
+              </ng-template>
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+</div>

src/app/plan-audit/plan-list/plan-list.component.scss

@@ -0,0 +1,42 @@
+*{
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+.planlist{
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+.contant{
+    box-sizing: border-box;
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .contantitem{
+        div{
+            width: 110px;
+            height: 110px;
+            img{
+                width: 100%;
+                height: 100%;
+                cursor: pointer;
+            }
+        }
+        p{
+            text-align: center;
+            font-size: 14px;
+            margin: 2px 0;
+            width: 110px;
+        }
+    }
+}

src/app/plan-audit/plan-list/plan-list.component.spec.ts

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

src/app/plan-audit/plan-list/plan-list.component.ts

@@ -0,0 +1,102 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-plan-list',
+  templateUrl: './plan-list.component.html',
+  styleUrls: ['./plan-list.component.scss']
+})
+export class PlanListComponent implements OnInit {
+  constructor(private http: HttpClient,public snackBar: MatSnackBar,public dialog: MatDialog) { }
+  
+  //单位相关数据
+  unitId:any =  '5e9964caa760a059e84512e9'
+
+  ngOnInit(): void {
+    this.getAllBuildings()
+    this.getSitePlan()
+  }
+
+  //获得所有的建筑物
+  allBuildings:any
+  getAllBuildings(){
+    this.http.get("/api/Buildings",{
+      params:{
+        companyId : this.unitId
+      }
+    }).subscribe((data:any)=>{
+      data.forEach((item,index) => {
+        let params = { buildingId: item.id }
+        item.plandata = []
+        this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{
+          item.plandata = data
+        })
+      })
+      this.allBuildings = data
+    })
+  }
+  //获取总平面图
+  sitePlanItems:any
+  getSitePlan () {
+    let params = {companyId: this.unitId}
+    this.http.get('/api/SitePlans',{params:params}).subscribe(data=>{
+      this.sitePlanItems = data
+    })
+  }
+  //打开采集工具
+  openPlan(item,index){
+    sessionStorage.setItem("gisplan",'look')
+    sessionStorage.setItem("companyId",this.unitId)
+    let data = {select: item, key: index, allBuildings: this.allBuildings}
+    let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去
+      width: '1500px',
+      height:'850px',
+      id:'openPlanToolDialog',
+      data
+    });
+    dialogRef.afterClosed().subscribe( (data)=>{  } );
+  }
+}
+
+
+
+//查看预案
+@Component({
+  selector: 'lookPlan-dialog',
+  templateUrl: './openPlanTool.html',
+  styleUrls: ['./openPlanTool.scss']
+})
+export class OpenPlanToolDialog {
+
+  constructor(public http: HttpClient,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<OpenPlanToolDialog>,
+    @Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2,public dialog: MatDialog) {}
+
+  @ViewChild( 'plan',{static: false} ) plan:any //子组件
+  
+  ngOnInit() {
+  }
+  
+  ngAfterViewInit(): void {
+    this.noticePlan()
+  }
+
+  //通知 子组件 传递参数
+  noticePlan () {
+    let parameter = { //查询 节点 对应 建筑/楼层 index,id
+      buildingIndex: this.data.key, //总平面图/建筑 index
+      storeyId: this.data.select.id
+    }
+    this.http.get("/api/Buildings",{params:{companyId : sessionStorage.getItem('unitId')} }).subscribe((data:any)=>{
+      this.plan.allBuildings = data
+      this.plan.seekPanelPoint(parameter)
+    })
+  }
+  
+  //关闭弹窗
+  closeDiv(){
+    this.dialogRef.close()
+  }
+
+}

src/app/plan-audit/plan-pass/plan-pass.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-01-18 11:13:26
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-02-02 10:43:42
+ * @LastEditTime: 2021-02-03 16:56:24
 -->
 <div style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
   

src/app/plan-audit/realistic-picture-look/previewImg.html

@@ -0,0 +1,17 @@
+<div mat-dialog-title>图片详情</div>
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
+        <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
+        <div class="swiper-lazy-preloader"></div>
+      </div>
+    </div>
+
+    <!-- 如果需要导航按钮 -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+</div>
+
+<div class="previewImgBottom">
+  <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
+</div>

src/app/plan-audit/realistic-picture-look/realistic-picture.component.html

@@ -0,0 +1,32 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-25 09:03:26
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-02-03 15:20:04
+-->
+<div class="content" id="realisticpicture">
+  
+<mat-accordion class="tableContent" >
+    <mat-expansion-panel *ngFor="let item of allRealPicture,let key=index"  (opened)="changeReal(item,key)">
+      <mat-expansion-panel-header class="panelhead"  collapsedHeight ='40px' expandedHeight='40px'>
+        <mat-panel-title style="font-size: 14px;" >
+          {{item.name}}
+        </mat-panel-title>
+      </mat-expansion-panel-header >
+        <div class="colum" >
+          <div class="imghe" *ngFor="let items of allImages;let key = index">
+            <div *ngIf="allImages.length!=0"><img  [src]="items.newImageUrl" (click)='operation(items,key)' [ngClass]="{'selectImg': items.checked}"></div>
+            
+            <label>{{items.nameStart}}</label>
+          </div>
+          <div class="zanwu"  *ngIf="allImages.length==0">
+            <span>暂无数据</span>
+        </div>
+        </div>
+  
+      
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>

src/app/plan-audit/realistic-picture-look/realistic-picture.component.scss

@@ -0,0 +1,236 @@
+*{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  scrollbar-width: none; /* Firefox */
+} 
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.content {
+  //margin: 0 0 0 10px;
+  width: 100%;
+  height: 760px;
+  overflow-y: auto;
+  margin-top: 10px;
+  .leftBox {
+      flex: 15%;
+      padding-top: 10px;
+      .bank  {
+        display: flex;
+        padding-left: 10px;
+        .mat-icon {margin-right: 15px;}
+      }
+  }
+  .rightBox {
+      border-left: 1px solid #999;
+      flex: 85%;
+      display: flex;
+      flex-direction: column;
+      .topBox { 
+        flex: 5%; padding: 10px;
+        display: flex;
+        :first-child {flex: 85%;};
+        :last-child {flex: 15%;}
+      }
+      .bottomBox {
+        flex: 95%;
+        padding: 5px 0 0 25px;
+        overflow: auto;
+        .imgsBoxflex {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+      }
+  }
+}
+.tableContent{
+  width: 100%;
+  height: 100%;
+  .panelhead{
+    height: 44px;
+    background-color: #F2F9FF;
+    margin-top: 10px;
+  }
+  .colum{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    .zanwu{
+      width: 100%;
+      height: 30px;
+      margin-top: 10px;
+      span{
+        height: 40px;
+        margin-top: 15px;
+        margin-left: 5%;
+        font-size: 16px;
+      }
+    }
+    .imghe{
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+    }
+    img{
+      width: 140px;
+      height: 100px;
+      margin-left: 9%;
+      margin-top: 7%;
+    }
+    label{
+      width: 140px;
+      margin-left: 9%;
+      text-align: center;
+      font-size: 14px;
+    }
+    input{
+      width: 80%;
+      border: none;
+      outline: none;
+    }
+  }
+}
+
+//icon统一样式
+.mat-icon {
+  cursor:pointer;
+  width: 18px;
+  height: 18px;
+  vertical-align:top;
+  margin-right: 10px;
+}
+.title {margin-right: 30px;font-weight: 500; font-size: 18px;}
+
+.material {
+  cursor:pointer;
+  height: 30px;
+  font-size: 16px;
+  margin-top: 10px;
+  padding-left: 15px;
+  span {
+    max-width: 200px;
+    display: inline-block;
+    overflow: hidden;    
+    text-overflow:ellipsis;    
+    white-space: nowrap;
+  }
+  .btn {
+    color: #FFC122;
+  }
+}
+.imgBox{
+  width: 300px;
+  height: 200px;
+  margin: 0 35px 35px 0;
+  display: inline-block;
+  position: relative;
+  .fixedImg {
+    width: 100%;
+    height: 170px;
+    text-align: center;
+    margin-bottom: 3px;
+    img {
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      height: 100%;
+      cursor:pointer;
+    }
+  }
+  input{
+    font-size:12px;
+    width: 100px;
+    height:18px; 
+    border-radius:3px; 
+    border:1px solid #c8cccf;
+    outline:0; 
+    text-align:left; 
+    padding-left: 5px;
+    display:inline-block; 
+    cursor: pointer;}
+  input::-webkit-input-placeholder{
+      color: #986655;
+      font-size: 12px;
+  }
+  a {display: inline-block;
+    width: 45px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 3px;
+    background-color: #2196F3;
+    font-size: 14px;
+    color: #fff;}
+}
+.uploadFileFixed {
+  position: relative;
+  .uploadFile {
+    opacity:0;
+    display: inline-block;
+    width: 88px;
+    height: 36px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+}
+//分页
+.mat-paginator {
+  background-color: rgba(255,255,255,0);
+  padding-right: 10%;
+}
+.isLoading{
+  display: inline-block;
+  margin-left: 15px;
+  top: 8px;
+}
+
+//左侧实景图文件样式
+.leftFile {
+  background-color: rgba(225,225,225,0.8);
+}
+//选中图片样式
+.selectImg {
+  -webkit-filter: drop-shadow(0px 0px 5px #000);
+  filter: drop-shadow(0px 0px 5px #000);
+  border: 1px solid red;
+}
+.checkedImg {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  color:#00FF00;
+  font-size: 30px;
+  z-index: 999;
+}
+//预览图片旋转角度
+.rotateA {transform: rotate(90deg) scale(0.75);}
+.rotateB {transform: rotate(180deg)}
+.rotateC {transform: rotate(270deg) scale(0.75);}
+
+
+
+//预览图片
+.previewImgBox {
+  width: 1500px;
+  height: 700px;
+  text-align: center;
+  img{
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    height: 100%;}
+}
+.previewImgBottom {
+  text-align: center;
+  height: 30px;
+  margin: 20px auto;
+}

src/app/plan-audit/realistic-picture-look/realistic-picture.component.ts

@@ -0,0 +1,417 @@
+import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FileUploader } from 'ng2-file-upload';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import Swiper from 'swiper';
+import { Router,ActivatedRoute } from '@angular/router'
+
+@Component({
+  selector: 'app-realistic-picture-look',
+  templateUrl: './realistic-picture.component.html',
+  styleUrls: ['./realistic-picture.component.scss']
+})
+export class RealisticPictureLookComponent implements OnInit {
+  uploader:FileUploader = new FileUploader({ //初始化上传文件
+    url: `/api/Objects/PlanPlatform/${this.route.snapshot.queryParams.id}/RealImgs`,  
+    method: "POST",    
+    itemAlias: "uploadedfile",
+    autoUpload: false,
+    removeAfterUpload:true,
+  }); 
+
+  constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    let companyId = this.unitId
+    this.http.get('/api/RealityImageGroups',{params:{
+      companyId : companyId
+    }}).subscribe((data:any)=>{
+      this.allRealPicture = data
+      this.selectReal = data[0]
+      this.getAllRealPicture()
+    })
+    
+  }
+
+  unitId:any = '5e9964caa760a059e84512e9'
+
+  companyId:any; //单位编号
+  allRealPicture:any=[]; //所有实景图文件
+  selectReal:any; //选中的实景图文件
+  selectRealIndex:number=0; //选中的实景图文件下标
+  allImages:any=[]; //实景图文件对应所有的实景图
+  isDownload:boolean = false; //是否批量下载
+  downloadList:any = []; //选中需要下载的图片
+
+  //分页
+  @ViewChild(MatPaginator, {static: true}) 
+  paginator: MatPaginator;
+  length:any; //共多少条数据
+  pageSize:any = '12'; //每页条数
+  pageSizeOptions: number[] = [12] //设置每页条数
+  PageNumber:any; //第几页
+
+  //分页切换
+  chagePage (e) {
+    this.PageNumber = e.pageIndex+1
+    this.getAllRealPicture()
+  }
+
+  //获取所有实景图分组
+  getAllGrouping () {
+    let companyId = this.unitId
+    this.http.get('/api/RealityImageGroups',{params:{
+      companyId : companyId 
+    }}).subscribe((data:any)=>{
+      this.allRealPicture = data
+      this.selectReal = data[this.selectRealIndex]
+    })
+  }
+
+  //获取实景图分组对应实景图
+  getAllRealPicture () {
+    if (this.selectReal) {
+      let data ={
+        groupId: this.selectReal.id,
+        PageNumber: this.PageNumber || 1,
+        pageSize: this.pageSize,
+      }
+      this.http.get('/api/RealityImages',{params:data}).subscribe((data:any)=>{
+        this.allImages = data.items 
+        // console.log(789,this.allImages)
+        this.length = data.totalCount
+        this.pageSize = data.pageSize
+        this.downloadList = []
+        //console.log(this.allImages)
+        this.allImages.forEach(element => { //每张图片设置选中状态为false
+          element.newImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` //处理图片URL地址
+          element.checked = false //图片是否选中布尔值
+          element.nameStart = element.name.substring(0,element.name.lastIndexOf(".")); //图片名称前缀
+          element.nameEnd = element.name.substring(element.name.lastIndexOf("."),element.name.length); //图片名称后缀
+        });
+
+      })
+    }
+  }
+
+  //切换左侧实景图文件
+  changeReal (e,index) {
+    //this.allImages=[]
+    if (this.selectRealIndex != index) {
+      this.selectReal = e
+      this.selectRealIndex = index
+      this.isDownload = false
+      this.downloadList = []
+      this.getAllRealPicture()
+    }
+    
+  }
+
+  //选择批量下载 
+  download () {
+    this.isDownload = !this.isDownload
+    if (!this.isDownload) { //取消批量下载时数组清空
+      this.allImages.forEach(element => {element.checked = false});
+      this.downloadList = []
+    }
+  }
+ 
+  // 预览图片---批量选择图片
+  operation (e,index) {
+    if (this.isDownload) { //批量选择图片
+      e.checked = !e.checked
+      if (e.checked==true) {this.downloadList.push(e)} 
+      else {this.downloadList.splice(this.downloadList.findIndex(item => item.id === e.id), 1)}
+    } else { //预览图片
+      let data = {
+        allImages:this.allImages,
+        imgIndex: index}
+      let dialogRef = this.dialog.open(previewImg3,
+        {width: '1600px',
+        height:'900px',data});
+      dialogRef.afterClosed().subscribe();   
+    }
+
+  }
+
+  //新建实景图文件
+  addReal () {
+    
+  }
+
+  //编辑实景图文件
+  editReal () {
+
+  }
+
+  //删除实景图文件
+  delete () {
+    let companyId = this.unitId
+    if (this.selectReal) {
+      let isDelete = confirm('您确定要删除吗')
+      if (isDelete) {
+        this.http.delete(`/api/RealityImageGroups/${this.selectReal.id}`).subscribe(data=>{
+          this.http.get('/api/RealityImageGroups',{params:{
+            companyId : companyId
+          }}).subscribe((data:any)=>{
+            this.allRealPicture = data
+            this.selectReal = data[this.selectRealIndex]
+            this.allImages = []
+            this.getAllRealPicture()
+          })
+        })
+      }
+    }
+  }
+
+
+
+  //实景图修改
+  preservationImg (e) {
+    let data = {
+      id:e.id,
+      name:e.nameStart+e.nameEnd,
+      imageUrl:e.imageUrl,
+      realityImageGroupId:e.realityImageGroupId
+    }
+    this.http.put(`/api/RealityImages/${e.id}`,data).subscribe(data=>{
+      this.getAllRealPicture()
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('图片修改成功','确定',config);
+    })
+  }
+
+  //实景图删除
+  deleteImg (e) {
+    let isDelete = confirm('您确定要删除吗')
+    if (isDelete) {
+      this.http.delete(`/api/RealityImages/${e.id}`).subscribe(data=>{
+        this.getAllRealPicture()
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('图片删除成功','确定',config);
+      })
+      this.http.delete(`/api/Objects/PlanPlatform/${e.imageUrl}`).subscribe(data=>{})
+    }
+  }
+
+
+
+
+
+  isLoading:boolean = false; //loading加载
+  //上传文件↓
+  file:any; //上传的文件
+  objectName:any; //上传对象名
+  uploadId:any; //上传分块上传事件编号
+
+  //change选择文件
+  uploadFile (e) {
+    if (this.selectReal) {
+      this.file = e.target.files[0] || null //上传的文件
+      let URL = window.URL.createObjectURL(this.file)
+      var img = new Image()
+      img.src = URL
+      let that = this
+      img.onload = function () {
+        if(img.width>=4096 || img.height>=5000 ){ 
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          that.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config);
+          that.uploader.clearQueue(); //清空input控件文件
+          (<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
+        }else{ that.startUploading() }
+      } //onload
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请选择或创建实景图文件夹','确定',config);
+      this.uploader.clearQueue(); //清空input控件文件
+      (<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
+    }
+  }
+
+  //上传文件
+  startUploading () {
+    let file = this.file || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let maxdSize = 20 * 1024 * 1024 //限制20MB
+
+    if (file && fileSize<=shardSize) { //上传文件<=5MB时
+      this.uploader.queue[0].upload();//开始上传
+      this.uploader.queue[0].onSuccess = (response, status, headers) => {    
+        if (status == 201) { // 上传文件成功,上传文件后获取服务器返回的数据
+          let tempRes = JSON.parse(response);
+          this.objectName = tempRes.objectName
+          this.addRealImg()
+        }else { // 上传文件后获取服务器返回的数据错误
+          let tempRes = JSON.parse(response);  
+        }};
+    } else if (file && fileSize>shardSize && fileSize<maxdSize) { //上传文件>5MB时,分块上传
+      let data = {filename: file.name}
+      this.isLoading = true
+      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.companyId}/RealImgs`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
+        this.objectName = data.objectName
+        this.uploadId = data.uploadId
+        this.subsectionUploading()
+      })
+    }
+
+  }
+
+  PartNumberETag:any=[]; //每次返回需要保存的信息
+  //开始分段上传
+  async subsectionUploading () {
+    let file = this.file || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
+
+    for (let i = 0;i < allSlice;i++) { //循环分段上传
+        let start = i * shardSize //切割文件开始位置
+        let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
+        let formData = new FormData()
+        formData.append("file",file.slice(start, end))
+
+        //同步写法实现异步调用
+        let result = await new Promise((resolve, reject) => {
+          // await 需要后面返回一个 promise 对象
+          this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
+              let msg = {
+                "partNumber":data.partNumber || null,
+                "eTag": data.eTag || null}
+              resolve(msg) // 调用 promise 内置方法处理成功
+          })
+        });
+        this.PartNumberETag.push(result)
+        if (this.PartNumberETag.length === allSlice) {this.endUploading()}
+    }//for循环
+
+  }
+
+  //完成分块上传
+  endUploading () {
+    let data = this.PartNumberETag
+    let paramsData = {uploadId:this.uploadId}
+    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
+      this.addRealImg() //上传完成后,发送请求创建实景图
+      this.isLoading = false
+      this.uploader.clearQueue(); //清空input控件文件
+      this.PartNumberETag =[] //清空保存返回的信息
+    })
+  }
+
+  //上传图片成功后获取url地址发送请求创建实景图
+  addRealImg () {
+    let data = {
+      name: this.file.name,
+      imageUrl:this.objectName,
+      realityImageGroupId: this.selectReal.id,
+    }
+    this.http.post('/api/RealityImages',data).subscribe(data=>{
+      (<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
+      this.getAllRealPicture()
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('图片上传成功','确定',config);
+    })
+  }
+
+
+
+  //批量下载↓
+  //开始下载
+  async batchDownload () {
+    if (this.downloadList.length) { //开始批量循环下载
+      this.isLoading = true
+      for (let i=0;i<this.downloadList.length;i++) {
+        let result =  await new Promise ((result,reject)=>{
+          this.http.get(`/api/Objects/PlanPlatform/${this.downloadList[i].imageUrl}`,{responseType: 'blob'},).subscribe(data=>{ 
+            let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
+            let link = document.createElement("a");
+            link.style.display = "none";
+            link.href = url;
+            link.setAttribute("download", this.downloadList[i].name);
+            document.body.appendChild(link);
+            link.click();
+            result('success')})
+        })
+        if(i == this.downloadList.length-1) { //判断是否下载完毕
+          this.isLoading = false
+          this.isDownload = false
+          this.allImages.forEach(element => {element.checked = false});
+          this.downloadList = []}
+
+      } //for循环
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('请选择图片','确定',config);}
+  }
+
+
+
+
+
+}
+
+
+
+//预览图片组件
+@Component({
+  selector: 'app-previewImg',
+  templateUrl: './previewImg.html',
+  styleUrls: ['./realistic-picture.component.scss']
+})
+export class previewImg3 {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewImg3>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+    testSwiper: Swiper;
+
+  ngOnInit(): void {
+    this.allImages = this.data.allImages
+    this.allImages.forEach(element => {
+      element.previewImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/auto-orient,1` //处理图片URL地址
+    });
+  }
+
+  ngAfterViewInit() {
+    this.testSwiper = new Swiper('.swiper-container', {
+      lazy: true,
+      initialSlide: this.data.imgIndex,
+      direction: 'horizontal',
+      loop: false,
+      
+
+
+      // 如果需要前进后退按钮
+      navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+      }
+    });
+  }
+
+  allImages:any; //展示所有的图片
+  rotationAngle:number=0; //旋转角度
+
+  //旋转图片
+  rotate () {
+    this.rotationAngle = this.rotationAngle+90
+    if (this.rotationAngle === 360) {this.rotationAngle = 0}
+  }
+
+}
+
+

src/app/plan-audit/wait-examineer/show3D.html

@@ -0,0 +1,11 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2021-02-04 16:03:00
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-02-05 09:41:49
+-->
+<div style="width:100%;height: 100%;">
+    <iframe style="width:100%;height: 100%;border: none;" [src]='threedUrl'></iframe>
+</div>

src/app/plan-audit/wait-examineer/wait-examineer.component.html

@@ -89,136 +89,141 @@
         
         
       </div>
-
       <mat-tab-group *ngIf="showtype==3" style="flex: 1;overflow-y: auto;margin-top: 10px;" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
-
-          <mat-tab label="基本信息">
-            <ng-template matTabContent>
-              <app-basic-info></app-basic-info>
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="平面图">
-            <ng-template matTabContent>
-              平面图
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="四周毗邻">
-            <ng-template matTabContent>
-              四周毗邻
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="消防设施">
-            <ng-template matTabContent>
-              消防设施
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="重点部位">
-            <ng-template matTabContent>
-              重点部位
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="功能分区">
-            <ng-template matTabContent>
-              功能分区
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="实景图">
-            <ng-template matTabContent>
-              实景图
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="CAD">
-            <ng-template matTabContent>
-              cad
-            </ng-template>
-          </mat-tab>
-          <!-- <mat-tab label="六熟悉">
-            <ng-template matTabContent>
-              六熟悉
-            </ng-template>
-          </mat-tab>
-          <mat-tab label="实战演练">
-            <ng-template matTabContent>
-              实战演练
-            </ng-template>
-          </mat-tab> -->
-      
+        <mat-tab label="基本信息">
+          <ng-template matTabContent>
+            <app-basic-info></app-basic-info>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="平面图">
+          <ng-template matTabContent>
+            <app-plan-list></app-plan-list>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="四周毗邻">
+          <ng-template matTabContent>
+            <app-allaround></app-allaround>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="消防设施">
+          <ng-template matTabContent>
+            <app-fire-facilities></app-fire-facilities>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="重点部位">
+          <ng-template matTabContent>
+            <app-key-site-look></app-key-site-look>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="功能分区">
+          <ng-template matTabContent>
+            <app-function-partition></app-function-partition>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="实景图">
+          <ng-template matTabContent>
+            <app-realistic-picture-look></app-realistic-picture-look>
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="CAD">
+          <ng-template matTabContent>
+            <app-cad-draw></app-cad-draw>
+          </ng-template>
+        </mat-tab>
+        <!-- <mat-tab label="六熟悉">
+          <ng-template matTabContent>
+            六熟悉
+          </ng-template>
+        </mat-tab>
+        <mat-tab label="实战演练">
+          <ng-template matTabContent>
+            实战演练
+          </ng-template>
+        </mat-tab> -->
+        
       </mat-tab-group>
-      <div id="firefacilities" *ngIf="showtype==3"  style="margin: 10px;">
+      <div id="firefacilities" *ngIf="showtype==3 && !isallDate"  style="margin: 10px;">
         <mat-accordion class="tableContent" >
           <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
-              <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' class="panelhead" style="background-color: #2196F3;">
-                <mat-panel-title style="font-size: 16px;color: #FFFFFF;" >
-                  基本信息
-                </mat-panel-title>
-              </mat-expansion-panel-header >
-              <div class="accordingin">
-                <mat-accordion>
-                  <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
-                    <mat-expansion-panel-header collapsedHeight ='30px' expandedHeight='30px' class="panelhead" >
-                      <mat-panel-title style="font-size: 16px;color:#2196F3;" >
-                        <img src="../../../assets/images/update.png"><span>修改-沃尔玛（上海）职业发展有限公司</span> 
-                      </mat-panel-title>
-                    </mat-expansion-panel-header>
-                    <table>
-                      <tr>
-                        <th>单位地址 ：</th>
-                        <td><span style="margin-left: 7px;">由</span> <span style="color: #2196F3;">上海市上海市黄浦区武胜路333号</span>变更为
-                          <span style="color: #2196F3;">上海市上海市黄浦区金陵西路28号</span></td>
-                      </tr>
-                      <tr>
-                        <th>联系电话 ：</th>
-                        <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">15069853369</span>变更为
-                          <span style="color: #2196F3;">13869877764</span></td>
-                      </tr>
-                      <tr>
-                        <th>始建于（年）：</th>
-                        <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">1991</span>变更为
-                          <span style="color: #2196F3;">2003</span></td>
-                      </tr>
-                    </table>
-                  </mat-expansion-panel>
-                </mat-accordion>
-              </div>
-              
-              
-            </mat-expansion-panel>
-      </mat-accordion>
+            <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' class="panelhead" style="background-color: #2196F3;">
+              <mat-panel-title style="font-size: 16px;color: #FFFFFF;" >
+                基本信息
+              </mat-panel-title>
+            </mat-expansion-panel-header >
+            <div class="accordingin">
+              <mat-accordion>
+                <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+                  <mat-expansion-panel-header collapsedHeight ='30px' expandedHeight='30px' class="panelhead" >
+                    <mat-panel-title style="font-size: 16px;color:#2196F3;" >
+                      <img src="../../../assets/images/update.png"><span>修改-沃尔玛（上海）职业发展有限公司</span> 
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <table>
+                    <tr>
+                      <th>单位地址 ：</th>
+                      <td><span style="margin-left: 7px;">由</span> <span style="color: #2196F3;">上海市上海市黄浦区武胜路333号</span>变更为
+                        <span style="color: #2196F3;">上海市上海市黄浦区金陵西路28号</span></td>
+                    </tr>
+                    <tr>
+                      <th>联系电话 ：</th>
+                      <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">15069853369</span>变更为
+                        <span style="color: #2196F3;">13869877764</span></td>
+                    </tr>
+                    <tr>
+                      <th>始建于（年）：</th>
+                      <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">1991</span>变更为
+                        <span style="color: #2196F3;">2003</span></td>
+                    </tr>
+                  </table>
+                </mat-expansion-panel>
+              </mat-accordion>
+            </div>
+          </mat-expansion-panel>
+        </mat-accordion>
       <mat-accordion class="tableContent" >
-        <mat-expansion-panel *ngIf="!isallDate" style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
-            <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead" style="background-color: #2196F3;">
+        <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+            <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' class="panelhead" style="background-color: #2196F3;">
               <mat-panel-title style="font-size: 16px;color: #FFFFFF;" >
-                四周毗邻
+                基本信息
               </mat-panel-title>
             </mat-expansion-panel-header >
             <div class="accordingin">
               <mat-accordion>
-                <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
+                <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
                   <mat-expansion-panel-header collapsedHeight ='30px' expandedHeight='30px' class="panelhead" >
                     <mat-panel-title style="font-size: 16px;color:#2196F3;" >
-                      <img src="../../../assets/images/update.png"><span>一号建筑</span> 
+                      <img src="../../../assets/images/update.png"><span>修改-沃尔玛（上海）职业发展有限公司</span> 
                     </mat-panel-title>
                   </mat-expansion-panel-header>
-                  <div class="onebuilding">
-                    <div class="accordingleft">
-                      <span>一号建筑：</span>
-                    </div>
-                    <div class="accordingright">
-                      <span>由</span><img src="../../../assets/images/chatchange.png">
-                      <span>变更为</span><img src="../../../assets/images/chatchange.png">
-                    </div>
-                  </div>
+                  <table>
+                    <tr>
+                      <th>单位地址 ：</th>
+                      <td><span style="margin-left: 7px;">由</span> <span style="color: #2196F3;">上海市上海市黄浦区武胜路333号</span>变更为
+                        <span style="color: #2196F3;">上海市上海市黄浦区金陵西路28号</span></td>
+                    </tr>
+                    <tr>
+                      <th>联系电话 ：</th>
+                      <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">15069853369</span>变更为
+                        <span style="color: #2196F3;">13869877764</span></td>
+                    </tr>
+                    <tr>
+                      <th>始建于（年）：</th>
+                      <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">1991</span>变更为
+                        <span style="color: #2196F3;">2003</span></td>
+                    </tr>
+                  </table>
                 </mat-expansion-panel>
               </mat-accordion>
             </div>
             
+            
           </mat-expansion-panel>
     </mat-accordion>
     <mat-accordion class="tableContent" >
       <mat-expansion-panel *ngIf="!isallDate" style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
           <mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead" style="background-color: #2196F3;">
             <mat-panel-title style="font-size: 16px;color: #FFFFFF;" >
-              消防设施
+              四周毗邻
             </mat-panel-title>
           </mat-expansion-panel-header >
           <div class="accordingin">
@@ -226,16 +231,18 @@
               <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
                 <mat-expansion-panel-header collapsedHeight ='30px' expandedHeight='30px' class="panelhead" >
                   <mat-panel-title style="font-size: 16px;color:#2196F3;" >
-                    <img src="../../../assets/images/update.png"><span>室内消火栓</span> 
+                    <img src="../../../assets/images/update.png"><span>一号建筑</span> 
                   </mat-panel-title>
                 </mat-expansion-panel-header>
-                <table>
-                  <tr>
-                    <th>总数：</th>
-                    <td><span style="margin-left: 7px;">由</span><span style="color: #2196F3;">5</span>变更为
-                      <span style="color: #2196F3;">8</span></td>
-                  </tr>
-                </table>
+                <div class="onebuilding">
+                  <div class="accordingleft">
+                    <span>一号建筑：</span>
+                  </div>
+                  <div class="accordingright">
+                    <span>由</span><img src="../../../assets/images/chatchange.png">
+                    <span>变更为</span><img src="../../../assets/images/chatchange.png">
+                  </div>
+                </div>
               </mat-expansion-panel>
             </mat-accordion>
           </div>
@@ -243,26 +250,46 @@
         </mat-expansion-panel>
   </mat-accordion>
       </div>
-      <div class="word" *ngIf="showtype==0 || showtype==2">
+      <div class="word" *ngIf="showtype==0">
           <iframe [src]='iframeSrc'></iframe>
       </div>
       <div id="viewer"  *ngIf="showtype==1"></div>
-      
+      <div class="twoD" *ngIf="showtype==2">
+        <div class="planBox">
+          <span>单位名称: </span>
+          <span>{{compantData.name?compantData.name : '暂无数据'}}</span>
+        </div>
+        <div class="planBox">
+          <span>消防救援站: </span>
+          <span>{{organizationName}}</span>
+        </div>
+        <div class="planBox">
+          <span>单位类型: </span>
+          <span>{{compantData.buildingTypes.length?compantData.buildingTypes[0].name : '暂无数据'}}</span>
+        </div>
+        <div class="planBox">
+          <span>单位地址: </span>
+          <span>{{compantData.address?compantData.address : '暂无数据'}}</span>
+        </div>
+        <div class="planBox">
+          <span style="color: #2196F3;cursor:pointer;" (click)='oopen3Dshow()'>查看详情</span>
+        </div>
+      </div>
       <!-- 水源审核 -->
       <!-- <div class="waterAudit">
         <app-water-audit></app-water-audit>
       </div> -->
-       <!-- 消防力量审核 -->
-      <div class="fireForceAudit">
-       <app-fireforce-audit></app-fireforce-audit>
-      </div>
-       <!-- 联动力量审核 -->
+      <!-- 消防力量审核 -->
+      <!-- <div class="fireForceAudit">
+        <app-fireforce-audit></app-fireforce-audit>
+      </div> -->
+      <!-- 联动力量审核 -->
       <!-- <div class="LinkageForcesAudit">
 
       </div> -->
     </div>
 </div>
-<div class="echarts" *ngIf="showtype==3" ><!-- [style.display]="previewshow==true?'block':'none'" -->
+<div class="echarts" *ngIf="previewshow" ><!-- [style.display]="previewshow==true?'block':'none'" -->
   <div class="bar" id="indexbar" ></div>
   <div class="zhu" id="zhu" ></div>
 </div>

src/app/plan-audit/wait-examineer/wait-examineer.component.scss

@@ -204,6 +204,18 @@ th,td{
         opacity: 1;
     }
 }
+.twoD {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    .planBox {
+      margin: 30px 30px;
+      color: black;
+      :first-child {margin-right: 10px;}
+    }
+  }
 
 //滚动条样式
 ::-webkit-scrollbar{

src/app/plan-audit/wait-examineer/wait-examineer.component.ts

@@ -4,11 +4,12 @@
  * @Author: sueRimn
  * @Date: 2020-12-25 16:13:50
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-02-02 15:05:56
+ * @LastEditTime: 2021-02-05 09:46:54
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http'
 declare var CryptoJS
 import { DomSanitizer } from '@angular/platform-browser';
@@ -22,7 +23,7 @@ declare var echarts: any;
 })
 export class WaitExamineerComponent implements OnInit {
 
-  constructor(private http:HttpClient,public snackBar: MatSnackBar,private sanitizer: DomSanitizer) {
+  constructor(private http:HttpClient,public snackBar: MatSnackBar,private sanitizer: DomSanitizer,public dialog: MatDialog) {
     
    }
 
@@ -101,7 +102,14 @@ export class WaitExamineerComponent implements OnInit {
   chuorzhong//判断初审还是终审
   radioid//选中的id
   shenheTable=[]//选中要审核的对象
-  showtype = null//0:word,1:全景图，2:二维三维，3:重点单位
+  showtype//0:word,1:全景图，2:二维三维，3:重点单位
+  compantData={name:'',buildingTypes:[],address:''}
+  organizationName
+  planData
+  id
+  companyId
+  fetchUrl
+  companyName
 
   //获取表格数据
   getAlltabledate(){
@@ -146,34 +154,65 @@ export class WaitExamineerComponent implements OnInit {
   radioClick(e,item){
     //e.target.parentElement.bgColor='#2196F3'
     console.log(e,item)
-    let filename:string
-    let fetchUrl
+    this.id=item.id
+    this.fetchUrl=''
+    
     this.http.get(`/api/PlanComponents/${item.itemId}`).subscribe((data:any)=>{
-      console.log(data)
-      
+      this.companyId=data.companyId
+      this.companyName=data.companyName
       if(data.planType!=2&&data.planType!=1){
-        fetchUrl=data.attachmentUrls[0]
-        var index=fetchUrl.indexOf("\/")
-        if(fetchUrl.substr(0,index)=='psw'){
+        this.fetchUrl=data.attachmentUrls[0]
+        var index=this.fetchUrl.indexOf("\/")
+        if(this.fetchUrl.substr(0,index)=='psw'){
           this.showtype=1
           window.setTimeout(()=>{
             const viewer = new Viewer({
               container: document.querySelector('#viewer'),
-              panorama:'/api/Objects/PlanPlatform/'+ fetchUrl,
+              panorama:'/api/Objects/PlanPlatform/'+ this.fetchUrl,
               
             });
           })
           
         }else{
-          this.showtype=0
-          this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
+          this.lookWord()
+        }
+      }else{
+        this.organizationName=item.organizationName
+        this.getPlanData()
+        //this.src=`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1`
+        //this.iframeSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
+        //window.open(`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1`)
+      }
+      
+      
+     })
+      
+    if(e.checked){
+      this.shenheTable.push(item)
+    }
+    else{
+      for(var i=0;i<this.shenheTable.length;i++ ){
+        if(this.shenheTable[i].id==item.id){
+          this.shenheTable.splice(i,1)
+        }
+      }
+    }
+    /* this.chuorzhong=item.verifyState
+    this.radioid=item.itemId */
+  }
+
+  //毕升
+  lookWord(){
+    this.showtype=0
+    let filename:string
+          this.http.get(`/api/ObjectMetadata/PlanPlatform/${this.fetchUrl}`).subscribe((data:any)=>{
             filename=data.fileName 
             let json={
              doc: {
-                docId: item.id, 
+                docId: this.id, 
                 title: filename,
                //title: filename,
-                fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
+                fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+this.fetchUrl
              },
              user: {
                 uid: "test",
@@ -191,29 +230,57 @@ export class WaitExamineerComponent implements OnInit {
            this.iframeSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
            //window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
            })
-        }
-      }else{
-        this.showtype=2
-        this.src=`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1`
-        this.iframeSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
-        //window.open(`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1`)
-      }
-      
-      
-     })
-      
-    if(e.checked){
-      this.shenheTable.push(item)
+  }
+  getPlanData () {
+    let header = { 
+      CompanyName: this.companyName || '',
+      //AuditStatus: this.id || '',
+      PageSize: '100',
     }
-    else{
-      for(var i=0;i<this.shenheTable.length;i++ ){
-        if(this.shenheTable[i].id==item.id){
-          this.shenheTable.splice(i,1)
-        }
-      }
+    console.log(header)
+    this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{
+      data.items.forEach(element => {
+        /* if (element.id===this.id) {
+           
+        } */
+        this.planData = element
+          this.organizationName = element.committerOrganizationName
+          this.handleData()
+          return
+      });
+    })
+  }
+
+  //查看二维三维预案
+  thirdPartyURL
+  planType
+  handleData () {
+    this.planType = this.planData.planMode
+    let data = this.planData
+    console.log(this.planData)
+    if (this.planData.planMode==0) { //预案planMode=0时, 查看word
+      //this.lookWord()
+    } else if (this.planData.planMode==1) { //预案planMode=1时, 解析文档
+
+    } else if (this.planData.planMode==2) { //预案planMode=2时, 跳查看页面组件
+      sessionStorage.setItem("buildingTypeId", this.compantData.buildingTypes.length? this.compantData.buildingTypes[0].id: undefined);
+      sessionStorage.setItem("companyId",this.companyId);
+      sessionStorage.setItem("planId",this.id);
+      sessionStorage.setItem("editable",'0');
+    } else if (this.planData.planMode==3) { //预案planMode=3时, 第三方网址
+      this.showtype=2
+      this.http.get(`/api/Plans/${data.companyId}`).subscribe((data:any)=>{
+        data && data.company? this.compantData = data.company : null
+      })
+      //this.dialog.open(show3D,{width:'1350px',height:'700px',data:{url:data.url}}); //打开图片弹窗
+      this.thirdPartyURL = this.sanitizer.bypassSecurityTrustResourceUrl(data.url)
     }
-    /* this.chuorzhong=item.verifyState
-    this.radioid=item.itemId */
+
+  }
+
+  //打开三维预案弹窗
+  oopen3Dshow(){
+    this.dialog.open(show3D,{width:'1550px',height:'850px',data:{url:this.thirdPartyURL}});
   }
   //变更数据和全部数据切换按钮
   buttonChange(){
@@ -441,3 +508,17 @@ export class WaitExamineerComponent implements OnInit {
   }
 
 }
+
+@Component({
+  selector: 'app-wait-examineer-show3D',
+  templateUrl: './show3D.html',
+  styleUrls: ['./wait-examineer.component.scss']
+})
+export class show3D{
+  constructor(private sanitizer: DomSanitizer,public dialogRef: MatDialogRef<show3D>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {}
+  ngOnInit(): void {
+    console.log(this.data.url.changingThisBreaksApplicationSecurity)
+    this.threedUrl=this.sanitizer.bypassSecurityTrustResourceUrl(this.data.url.changingThisBreaksApplicationSecurity)
+  }
+  threedUrl
+}

src/app/plan-management/entry-plan-look/entry-plan-look.component.ts

@@ -115,34 +115,35 @@ export class EntryPlanLookComponent implements OnInit {
       ||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='doc'||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='DOC'
       ||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='txt'||e.attachmentUrls[0].substr(e.attachmentUrls[0].length-3,e.attachmentUrls[0].length)=='JPG') */{
         let filename:string
-        let fetchUrl=e.attachmentUrls[0]
-        this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
-        filename=data.fileName 
-        let json={
-         doc: {
-            docId: e.id, 
-            title: filename,
-           //title: filename,
-            fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
-         },
-         user: {
-            uid: "test",
-            nickName: "test",
-            avatar: "",
-            privilege: [
-              'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT'  
-            ],
-          },
-       }
-       var stringjson=JSON.stringify(json)
-       var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
-       var base64 = CryptoJS.enc.Base64.stringify(wordArray);
-       
-       //let base64Date=this.BASE64.encode(stringjson)
-       //let filedata= CryptoJS.enc.Base64.stringify(json)
-       console.log(base64)
-       window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
-       })
+    let fetchUrl = e.attachmentUrls[0]
+    let docIdWordArray = CryptoJS.enc.Utf8.parse(`PlanPlatform/` + fetchUrl);
+    let docId = CryptoJS.enc.Base64.stringify(docIdWordArray);
+    let jwt = sessionStorage.getItem("token");
+    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
+    let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
+    let identityJsonparse=JSON.parse(identityJson)
+    this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
+      filename=data.fileName 
+      let json={
+        doc: {
+          docId: docId,
+          title: filename,
+          fetchUrl: `http://39.106.78.171:8000/api/Objects/PlanPlatform/`+fetchUrl,
+        },
+        user: {
+          uid: identityJsonparse.sub,
+          nickName: identityJsonparse.name,
+          avatar: "",
+          privilege: [
+            'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT'  
+          ],
+        },
+      }
+      var stringjson=JSON.stringify(json)
+      var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
+      var base64 = CryptoJS.enc.Base64.stringify(wordArray);
+      window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
+    })
       }
     }
     if(e.planMode == 1){

src/app/plan-management/meet-plan/meet-plan.component.ts

@@ -165,20 +165,26 @@ export class MeetPlanComponent implements OnInit {
    
   //查看预案
   openPlan(element){
+    //fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
     let filename:string
     let fetchUrl = element.attachmentUrls[0]
+    let docIdWordArray = CryptoJS.enc.Utf8.parse(`PlanPlatform/` + fetchUrl);
+    let docId = CryptoJS.enc.Base64.stringify(docIdWordArray);
+    let jwt = sessionStorage.getItem("token");
+    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
+    let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
+    let identityJsonparse=JSON.parse(identityJson)
     this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
       filename=data.fileName 
       let json={
         doc: {
-          docId: element.id, 
+          docId: docId,
           title: filename,
-          //title: filename,
-          fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
+          fetchUrl: `http://39.106.78.171:8000/api/Objects/PlanPlatform/`+fetchUrl,
         },
         user: {
-          uid: "test",
-          nickName: "test",
+          uid: identityJsonparse.sub,
+          nickName: identityJsonparse.name,
           avatar: "",
           privilege: [
             'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT'  

src/app/plan-management/onetwo-entry-plan/onetwo-entry-plan.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-12-24 14:15:10
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-01-29 15:42:53
+ * @LastEditTime: 2021-02-04 10:01:46
  */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -191,34 +191,35 @@ export class OnetwoEntryPlanComponent implements OnInit {
   //查看预案
   openPlan(element){
     let filename:string
-    let fetchUrl=element.attachmentUrls[0]
-      this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
-        filename=data.fileName 
-        let json={
-         doc: {
-            docId: element.id, 
-            title: filename,
-           //title: filename,
-            fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
-         },
-         user: {
-            uid: "test",
-            nickName: "test",
-            avatar: "",
-            privilege: [
-              'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT' 
-            ],
-          },
-       }
-       var stringjson=JSON.stringify(json)
-       var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
-       var base64 = CryptoJS.enc.Base64.stringify(wordArray);
-       
-       //let base64Date=this.BASE64.encode(stringjson)
-       //let filedata= CryptoJS.enc.Base64.stringify(json)
-       console.log(base64)
-       window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
-       })
+    let fetchUrl = element.attachmentUrls[0]
+    let docIdWordArray = CryptoJS.enc.Utf8.parse(`PlanPlatform/` + fetchUrl);
+    let docId = CryptoJS.enc.Base64.stringify(docIdWordArray);
+    let jwt = sessionStorage.getItem("token");
+    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
+    let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
+    let identityJsonparse=JSON.parse(identityJson)
+    this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
+      filename=data.fileName 
+      let json={
+        doc: {
+          docId: docId,
+          title: filename,
+          fetchUrl: `http://39.106.78.171:8000/api/Objects/PlanPlatform/`+fetchUrl,
+        },
+        user: {
+          uid: identityJsonparse.sub,
+          nickName: identityJsonparse.name,
+          avatar: "",
+          privilege: [
+            'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT'  
+          ],
+        },
+      }
+      var stringjson=JSON.stringify(json)
+      var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
+      var base64 = CryptoJS.enc.Base64.stringify(wordArray);
+      window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
+    })
     
     
   }

src/app/plan-management/type-plan/type-plan.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-01-06 09:47:43
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-01-29 15:42:14
+ * @LastEditTime: 2021-02-04 10:40:16
  */
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -175,34 +175,35 @@ export class TypePlanComponent implements OnInit {
   //查看预案
   openPlan(element){
     let filename:string
-    let fetchUrl=element.attachmentUrls[0]
-      this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
-        filename=data.fileName 
-        let json={
-         doc: {
-            docId: element.id, 
-            title: filename,
-           //title: filename,
-            fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
-         },
-         user: {
-            uid: "test",
-            nickName: "test",
-            avatar: "",
-            privilege: [
-              'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT'  
-            ],
-          },
-       }
-       var stringjson=JSON.stringify(json)
-       var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
-       var base64 = CryptoJS.enc.Base64.stringify(wordArray);
-       
-       //let base64Date=this.BASE64.encode(stringjson)
-       //let filedata= CryptoJS.enc.Base64.stringify(json)
-       console.log(base64)
-       window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
-       })
+    let fetchUrl = element.attachmentUrls[0]
+    let docIdWordArray = CryptoJS.enc.Utf8.parse(`PlanPlatform/` + fetchUrl);
+    let docId = CryptoJS.enc.Base64.stringify(docIdWordArray);
+    let jwt = sessionStorage.getItem("token");
+    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
+    let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
+    let identityJsonparse=JSON.parse(identityJson)
+    this.http.get(`/api/ObjectMetadata/PlanPlatform/${fetchUrl}`).subscribe((data:any)=>{
+      filename=data.fileName 
+      let json={
+        doc: {
+          docId: docId,
+          title: filename,
+          fetchUrl: `http://39.106.78.171:8000/api/Objects/PlanPlatform/`+fetchUrl,
+        },
+        user: {
+          uid: identityJsonparse.sub,
+          nickName: identityJsonparse.name,
+          avatar: "",
+          privilege: [
+            'FILE_READ','FILE_WRITE','FILE_DOWNLOAD', 'FILE_PRINT'  
+          ],
+        },
+      }
+      var stringjson=JSON.stringify(json)
+      var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
+      var base64 = CryptoJS.enc.Base64.stringify(wordArray);
+      window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
+    })
     
     
   }

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

@@ -1,4 +1,3 @@
-import { allowedNodeEnvironmentFlags } from "process";
 
 /**
  * 选择器

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core';
 import * as PIXI from 'pixi.js';
 import { EventEmitter } from 'events';
 import { EventManager } from '@angular/platform-browser';
@@ -32,10 +32,11 @@ import { EVENT_SELECTION_CHANGED } from './model/events';
 /**
  * 工作区
  */
-export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit {
+export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit,OnDestroy {
 
   constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
     super();
+    console.log('组件构造函数');
   }
 
   @ViewChild('content')
@@ -87,7 +88,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 选择器
    */
-  public readonly selection: AxSelection = new AxSelection();
+  public selection: AxSelection = new AxSelection();
   /**
    * 当前鼠标的点
    */
@@ -157,32 +158,30 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
    * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
    */
-  public VERSION = '1.0.15.20210202_beta';
+  public VERSION = '1.0.17.20210204_beta';
   /**
    * 数据初始化
    */
   ngOnInit(): void {
+    console.log('组件OnInit');
     PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
-      // event.stopPropagation();
-      // if (event.keyCode === 17) {
-      //   this.isCtrlKeyClicked = true;
-      // }
+
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
-      // event.stopPropagation();
-      // if (event.keyCode === 17) {
-      //   this.isCtrlKeyClicked = false;
-      //   this.rectToolGraphics.visible = false;
-      //   this.rectToolGraphics.clear();
-      // }
       // 按Del键删除选中的图标
       if (event.keyCode === 46) {
         this.deleteSelectedShape();
       }
     });
   }
+  ngOnDestroy(): void {
+    console.log('组件OnDestroy');
+    this.selection.clear();
+    this.camera2D.destroy();
+    this.app.destroy();
+  }
 
   public setMulitSelect(b: boolean) {
     if (b) {
@@ -348,7 +347,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       worldHeight: 20000,
       interaction: this.app.renderer.plugins.interaction,
     });
-
+    this.camera2D.pivot.set(0.5);
+    this.camera2D.position = new PIXI.Point(0, 0);
     this.app.stage.addChild(this.camera2D);
 
     this.camera2D
@@ -455,7 +455,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.grid2D.updateGrid();
     this.resizeItem(1 / this.camera2D.scale.x);
   }
+  /**
+   * 重置相机
+   */
+  private resetCamera2D() {
+    this.camera2D.scale.set(1);
+    this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2;
+    this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2;
+    this.updateCamera2D();
+  }
+  /**
+   * 缩放适应
+   */
+  public zoomFit() {
+    const imageWidth = this.backgroundImage.texture.width;
+    const imageHeight = this.backgroundImage.texture.height;
+    const appWidth = this.app.view.width - 470;
+    const appHeight = this.app.view.height;
+    const wScale = appWidth / imageWidth;
+    const hScale = appHeight / imageHeight;
+    let scale = wScale < hScale ? wScale : hScale;
 
+    if (scale < 0.12) {
+      scale = 0.12;
+    }
+    if (scale > 16) {
+      scale = 16;
+    }
+    this.camera2D.scale.set(scale);
+    if (wScale < hScale) {
+      this.camera2D.x = 470 / 2;
+      this.camera2D.y = (appHeight - (imageHeight * this.camera2D.scale.y)) / 2;
+    } else {
+      this.camera2D.x = 470 / 2 + (appWidth - (imageWidth * this.camera2D.scale.x)) / 2;
+      this.camera2D.y = 0;
+    }
+    this.updateCamera2D();
+  }
   /**
    * 创建2D网格
    */
@@ -502,11 +538,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
      * 创建图标事件（数据处理）
      */
     this.on('createIcon', (axShape: AxShape) => {
-      console.log('新增图标：' + axShape.assetData.Name);
       if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
         // 添加楼层数据
         this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
-        console.log(this.canvasData.originaleveryStoreyData);
         // 添加建筑数据
         this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData;
       } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
@@ -535,28 +569,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       }
       this.emit('canvasDataChanged');
       this.canvasData.isChange = true;
+      this.updateCamera2D();
     });
-    //     ///
-    // this.app.renderer.plugins.interaction.on('pointerdown', (event) => {
-    //   if (event.data.button !== 2) { return };
-    //   this.dragFlag = true;
-    //   this.startPoint = { x: event.data.global.x, y: event.data.global.y };
-    // });
-    // this.app.renderer.plugins.interaction.on('pointermove', (event) => {
-    //   if (this.dragFlag) {
-    //     const dx = event.data.global.x - this.startPoint.x;
-    //     const dy = event.data.global.y - this.startPoint.y;
-    //     this.app.stage.position.x += dx;
-    //     this.app.stage.position.y += dy;
-    //     this.startPoint = { x: event.data.global.x, y: event.data.global.y };
-    //   }
-    // });
-    // this.app.renderer.plugins.interaction.on('pointerup', (event) => {
-    //   this.dragFlag = false;
-    // });
   }
-  // dragFlag;
-  // startPoint;
   /**
    * 重置画布
    */
@@ -587,7 +602,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public refreshIcon(id: string): void {
     const icon = this.backgroundImage.children.find(item => item.name === id);
-    // console.log(icon);
     if (icon instanceof AxImageShape) {
       icon.refresh();
     } else if (icon instanceof MultipointIcon) {
@@ -705,28 +719,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public createBackgroundImage() {
     this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png');
     this.backgroundImage.anchor.set(0.5);
-    // this.backgroundImage.x = this.app.view.width / 2;
-    // this.backgroundImage.y = this.app.view.height / 2;
     this.backgroundImage.interactive = true;
     this.backgroundImage.name = 'background';
-    // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
-    // const imageWidth = 665;
-    // const imageHeight = 530;
-    // const appWidth = this.app.view.width - 470;
-    // const appHeight = this.app.view.height;
-
-    // const wScale = appWidth / imageWidth;
-    // const hScale = appHeight / imageHeight;
-
-    // const scale = wScale < hScale
-    //   ? wScale
-    //   : hScale;
-    // this.backgroundImage.scale.set(scale);
     this.backgroundImage.sortableChildren = true;
     this.backgroundImage
       .on('pointerdown', event => {
         if (event.data.button !== 0) { return; }
-        // console.log(this.backgroundImage.toLocal(this.mousePosition));
         if (this.isCtrlKeyClicked === false) {
           switch (this.paintMode) {
             case PaintMode.endPaint:
@@ -926,47 +924,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         // }
       })
       .on('pointerup', event => {
-        // event.currentTarget.data = null;
 
-        // if (this.rectToolGraphics.visible === true) {
-        //   const shapes: AxShape[] = [];
-        //   this.backgroundImage.children.forEach(item => {
-        //     if ( item instanceof AxShape
-        //       && item instanceof AxPreviewImageShape === false) {
-        //       // 判断2个矩形是否相交
-        //       const rect1 = this.rectToolGraphics.getBounds();
-        //       const rect2 = item.getBounds();
-        //       if (this.isOverlap(rect1, rect2)) {
-        //         shapes.push(item);
-        //       }
-        //     }
-        //   });
-        //   this.rectToolGraphics.clear();
-        //   this.rectToolGraphics.visible = false;
-        //   this.selectAll(shapes);
-        // }
       })
       .on('pointerupoutside', event => {
-        // if (this.isMove) {
-          // event.currentTarget.data = null;
-        // }
+
       })
       .on('pointermove', event => {
-        // if (this.isCtrlKeyClicked === false) {
-        //   // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
-        //   // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
-        //   // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
-        // } else if (this.isCtrlKeyClicked === true) {
-        //   if (this.rectToolGraphics.visible === true) {
-        //     this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
-        //   }
-        // }
+
       })
-      // .on('rightclick', event => {
-      //   event.stopPropagation();
-      //   this.deselectAll();
-      //   this.setPaintMode(PaintMode.endPaint);
-      // })
       .on('pointerover', (event) => {
         if (this.previewImage !== null
         && this.paintMode === PaintMode.singlePointIcon) {
@@ -987,6 +952,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.backgroundImage.addChild(this.paintingLine);
 
   }
+  /**
+   * 判断矩形一是否包含矩形二
+   * @param rect1 矩形一
+   * @param rect2 矩形二
+   */
   public isOverlap(rect1, rect2): boolean {
     const l1 = { x: rect1.x, y: rect1.y };
     const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height };
@@ -1009,44 +979,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       imageAngle = 0;
     }
     this.backgroundImage.scale.set(1);
-    this.backgroundImage.pivot.set(0);
-    // this.backgroundImage.x = this.app.view.width / 2;
-    // this.backgroundImage.y = this.app.view.height / 2;
     if (imageUrl === undefined || imageUrl === null || imageUrl === '') {
       this.backgroundImage.texture = this.backgroundTexture;
     } else {
       this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
-      console.log(imageUrl);
     }
-    this.backgroundImage.x = this.backgroundImage.width/2;
-    this.backgroundImage.y = this.backgroundImage.height/2;
+    this.backgroundImage.x = this.backgroundImage.width / 2;
+    this.backgroundImage.y = this.backgroundImage.height / 2;
     this.backgroundImage.angle = imageAngle;
-    // 等待图片加载完成
-    const imageWidth = this.backgroundImage.texture.width;
-    const imageHeight = this.backgroundImage.texture.height;
-    const appWidth = this.app.view.width - 470;
-    const appHeight = this.app.view.height;
-    const wScale = appWidth / imageWidth;
-    const hScale = appHeight / imageHeight;
-    let scale = wScale < hScale ? wScale : hScale;
 
-    if (scale < 0.12) {
-      scale = 0.12;
-    }
-    if (scale > 16) {
-      scale = 16;
-    }
-    this.camera2D.scale.set(scale);
-    this.camera2D.x = 235;
-    this.camera2D.y = 0;
-    // 设置图片缩放
-    // this.backgroundImage.scale.set(scale);
-    // this.backgroundImage.visible = true;
-    this.backgroundImage.children.forEach((item) => {
-      if (item instanceof AxShape) {
-        item.refresh();
-      }
-    });
+    this.resetCamera2D();
+    // this.backgroundImage.children.forEach((item) => {
+    //   if (item instanceof AxShape) {
+    //     item.refresh();
+    //   }
+    // });
   }
   /**
    * 刷新
@@ -1246,7 +1193,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 开始绘制
    */
   public beginPaint() {
-    console.log(this.canvasData.selectTemplateData);
     this.deselectAll();
     this.setPaintMode(PaintMode.endPaint);
     this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
@@ -1338,7 +1284,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   private enterPaint(): void {
     this.previewLineSegment.visible = false;
     this.enterPaintEndButton.visible = false;
-    console.log(this.paintMode);
     switch (this.paintMode) {
       case PaintMode.singlePointIcon:
         break;