[新增]保存平面图时增加遮罩层

proxy.config.json

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

src/app/app.component.html

@@ -1 +1,4 @@
 <router-outlet></router-outlet>
+<div class="maskLayer"  *ngIf="isMaskLayerShow">
+    <mat-spinner [diameter]='50'></mat-spinner>
+</div>

src/app/app.component.scss

@@ -0,0 +1,12 @@
+.maskLayer{
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2000;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { Data } from './interface'
 import { Router,ActivatedRoute } from '@angular/router'
 import {CacheTokenService} from './http-interceptors/cache-token.service'//引入服务
 import { CookieService } from 'ngx-cookie-service';
+import { MaskLayerService } from './mask-layer.service';
 
 
 
@@ -14,9 +15,15 @@ import { CookieService } from 'ngx-cookie-service';
 })
 export class AppComponent {
 
-  constructor(private http:HttpClient,private router:Router,public token:CacheTokenService,private cookieService: CookieService) { }
+  constructor(private maskLayerService:MaskLayerService, private http:HttpClient,private router:Router,public token:CacheTokenService,private cookieService: CookieService) { }
 
+  isMaskLayerShow:boolean = false
   ngOnInit(): void {
+    //监听遮罩层
+    this.maskLayerService.getMessage().subscribe((message: any)=>{
+      this.isMaskLayerShow = message
+    });
+
       var token = this.cookieService.get("token")
       var refreshToken = this.cookieService.get("refreshToken");
         if(token && refreshToken) {

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { TreeService } from'./http-interceptors/tree.service'
 import { CookieService } from 'ngx-cookie-service';//cookie插件
 import { CountdownModule } from 'ngx-countdown'; //倒计时插件
 import { MTokenK1Component } from './m-token-k1/m-token-k1.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,8 @@ import { MTokenK1Component } from './m-token-k1/m-token-k1.component';
     PagesModule,
     FormsModule,
     HttpClientModule,
-    CountdownModule
+    CountdownModule,
+    MatProgressSpinnerModule
   ],
   providers: [httpInterceptorProviders, CacheTokenService,TreeService,CookieService],
   bootstrap: [AppComponent]

src/app/mask-layer.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import {ReplaySubject} from "rxjs";
+import { Observable } from "rxjs";
+@Injectable({
+  providedIn: 'root'
+})
+export class MaskLayerService {
+  private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
+  /** * 向其他组件发送信息 *
+  * @param message 需要发送的信息 * @returns {Observavle<any>} */
+  public sendMessage(message: any) {
+    this._sendMessage.next(message);
+  }
+  public getMessage(): Observable <any> {
+    return this._sendMessage.asObservable();
+  }
+  constructor() { }
+}

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

@@ -332,5 +332,7 @@
         </div>
       </div>
   <!--功能区 -->
+  </div>
 
 </div>
+

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

@@ -9,6 +9,7 @@ import {FlatTreeControl} from '@angular/cdk/tree';
 import {WorkingAreaComponent} from '../../working-area/working-area.component'
 import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务
 import Viewer from 'viewerjs';
+import { MaskLayerService } from 'src/app/mask-layer.service';
 @Component({
   selector: 'app-collection-tools',
   templateUrl: './collection-tools.component.html',
@@ -18,7 +19,7 @@ export class CollectionToolsComponent implements OnInit {
 
   @ViewChild('canvas') canvas:WorkingAreaComponent; //父组件中获得子组件的引用
 
-  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { }
+  constructor(private maskLayerService:MaskLayerService, private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { }
   // tree配置
   private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
     return {
@@ -518,7 +519,7 @@ export class CollectionToolsComponent implements OnInit {
 
     //更新用于统计的数据
     this.canvasData.updateBuildingData()
-
+    this.maskLayerService.sendMessage(true)
     if (this.selectingSitePlan && this.selectingSitePlan.id) {
       this.saveNum = []
       let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData));
@@ -553,6 +554,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/SitePlanData",SitePlanData).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -571,6 +573,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/CompanyData",CompanyData).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -590,6 +593,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/CompanyAdjoins/Batch",CompanyAdjoins).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -609,6 +613,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/CompanyImportantLocations/Batch",CompanyImportantLocations).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -628,6 +633,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/CompanyFacilityAssets/Batch",CompanyFacilityAssets).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -648,6 +654,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/BuildingAreaData",SitePlanData).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -666,6 +673,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post("/api/CompanyAccount/BuildingData",CompanyData).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -685,6 +693,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post(`/api/CompanyAccount/BuildingAdjoins/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingAdjoins).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -704,6 +713,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post(`/api/CompanyAccount/BuildingImportantLocations/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingImportantLocations).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';
@@ -723,6 +733,7 @@ export class CollectionToolsComponent implements OnInit {
           this.http.post(`/api/CompanyAccount/BuildingFacilityAssets/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingFacilityAssets).subscribe(data => {
             this.saveNum.push("1")
             if(this.saveNum.length == 5){
+              this.maskLayerService.sendMessage(false)
               this.canvasData.isChange = false
               let config = new MatSnackBarConfig();
               config.verticalPosition = 'top';

src/app/ui/ui.component.html

@@ -1 +0,0 @@
-<p>ui works!</p>