[新增]在线制作预案页面布局

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

@@ -50,17 +50,16 @@
                                 <span style="color: red;">*</span>
                                 <span>联系电话：</span>
                                 <mat-form-field>
-                                    <input matInput id="linkphone" name="linkphone" type='text' #linkphone="ngModel"
+                                    <input type="number" matInput id="linkphone" name="linkphone" #linkphone="ngModel"
                                         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}$"
                                         [(ngModel)]="unitinfo.phone" (focus)="closeorganizationbox()">
                                 </mat-form-field>
-                                <div *ngIf="linkphone.invalid && (linkphone.dirty || linkphone.touched)"
+                                <!-- <div *ngIf="linkphone.invalid && (linkphone.dirty || linkphone.touched)"
                                     class="alert-danger">
                                     <div *ngIf="linkphone.errors.pattern" class="alert-danger">
                                         电话号码格式不正确
                                     </div>
-                                </div>
+                                </div> -->
                             </div>
                             <div class="inputbox longinputbox">
                                 <span style="color: red;">*</span>

src/app/navigation/navigation.component.html

@@ -1,6 +1,6 @@
 <!-- <app-tabbar></app-tabbar> -->
 <mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme">
-    <mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;">
+    <mat-sidenav #drawer class="example-sidenav" mode="side" [opened]="navIsOpen" color="primary" style="overflow-x: hidden;">
         <div class="biglogobox">
             <img src="../../assets/images/h130.png" alt="">
         </div>

src/app/navigation/navigation.component.ts

@@ -7,7 +7,8 @@ import { HttpClient } from '@angular/common/http';
 import { TreeService } from '../http-interceptors/tree.service'
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { CacheTokenService } from '../http-interceptors/cache-token.service'//引入服务
-import { Router,ActivatedRoute } from '@angular/router'
+import { Router, ActivatedRoute, ParamMap } from '@angular/router'
+import { is } from 'date-fns/locale';
 
 
 
@@ -26,7 +27,17 @@ export class NavigationComponent implements OnInit {
   olddata: any
   oldtreedata: any
 
+  navIsOpen: any
   ngOnInit() {
+    this.route.queryParamMap.subscribe((params: ParamMap) => {
+      if (params.get('navIsOpen') == 'false') {
+        this.navIsOpen = 'false'
+      } else {
+        this.navIsOpen = 'true'
+      }
+    });
+
+
     this.http.get('/api/Account/NavMenus').subscribe((data: any) => {
       this.olddata = data
       this.oldtreedata = data

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

@@ -0,0 +1,130 @@
+<div class="bigbox">
+    <div class="titlebox">
+        <div class="titleitembox">
+            <div class="item" [ngClass]="{'selectedItem': selectedItem == '封面'}" (click)="clickTitleItem('封面')">
+                1.封面
+            </div>
+            <div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)" [ngClass]="{'selectedItem': selectedItem == item.groupName}">
+                {{key + 2}}.{{item.groupName}}
+            </div>
+        </div>
+        <div class="btnbox">
+            <button mat-stroked-button>
+                <mat-icon>visibility</mat-icon> 预览
+            </button>
+            <button mat-flat-button color="primary">
+                <mat-icon>save</mat-icon> 提交
+            </button>
+        </div>
+    </div>
+    <div class="contentbox">
+        <div class="leftbox">
+
+        </div>
+        <div class="mainbox">
+            <!-- 封面 -->
+            <div class="cover"  *ngIf="selectedItem == '封面'">
+                <p class="planNum">
+                    预案编号: <input type="text" name="" id="">
+                </p>
+                <h1>民航大厦</h1>
+                <ul>
+                    <li>
+                        <div>
+                            对象名称：
+                        </div>
+                        <div>
+                            民航大厦
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            单位性质：
+                        </div>
+                        <div>
+                            高层公共建筑
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            *预案级别：
+                        </div>
+                        <div>
+                            V级
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            *灾害类型：
+                        </div>
+                        <div>
+                            <select ngModel="0">
+                                <option value="0">火灾</option>
+                                <option value="1">抢险救援</option>
+                                <option value="2">其他</option>
+                            </select>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            防火级别：
+                        </div>
+                        <div>
+                            二级+
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            防火管辖：
+                        </div>
+                        <div>
+                            上海市某某区某消防大队
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            灭火责任队站：
+                        </div>
+                        <div>
+                            上海市某某区某消防救援大队
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            制作人职务/姓名：
+                        </div>
+                        <div>
+                            <input type="text" style="width: 160px;margin-right: 10px;">
+                            <input type="text" style="width: 50px;">
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            审核人职务/姓名：
+                        </div>
+                        <div>
+                           
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            审核时间：
+                        </div>
+                        <div>
+                           
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <!-- 模板页面 -->
+            <div *ngFor="let item of planTemplateData;let key = index">
+                <div *ngIf="selectedItem == item.groupName">
+                    <p>{{item.groupName}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="rightbox">
+
+        </div>
+    </div>
+</div>

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss

@@ -0,0 +1,119 @@
+.bigbox {
+    width: 100%;
+    height: 100%;
+    transform: translate(0, 0);
+    background: #f2f4f5;
+    .titlebox {
+        width: 100%;
+        height: 50px;
+        background-color: white;
+        position: fixed;
+        top: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .titleitembox {
+            display: flex;
+            .item {
+                cursor: pointer;
+                height: 36px;
+                line-height: 36px;
+                background: #e8e9e9;
+                border-radius: 40px;
+                color: #8b8c8c;
+                margin: 0 3px;
+                text-align: center;
+                box-sizing: border-box;
+                padding: 0 10px;
+                font-size: 14px;
+            }
+            .item:hover {
+                background: #e8f4fe;
+                color: #2196f3;
+            }
+            .selectedItem {
+                background: #e8f4fe;
+                color: #2196f3;
+            }
+        }
+        .btnbox {
+            position: absolute;
+            right: 24px;
+            top: 7px;
+            button {
+                margin-left: 10px;
+                mat-icon {
+                    font-size: 21px;
+                    width: 22px;
+                    height: 22px;
+                }
+            }
+        }
+    }
+    .contentbox {
+        height: 100%;
+        box-sizing: border-box;
+        padding-top: 66px;
+        overflow-y: auto;
+
+        .leftbox {
+            position: fixed;
+            width: 14%;
+            height: 85%;
+            background-color: white;
+            top: 66px;
+        }
+        .mainbox {
+            background-color: white;
+            width: 745px;
+            margin: 0 auto;
+            min-height: 97%;
+            box-sizing: border-box;
+            padding: 10px 10px 0;
+            .cover {
+                width: 100%;
+                input,
+                select {
+                    border: 1px solid #ebebeb;
+                    border-radius: 4px;
+                    height: 28px;
+                    line-height: 28px;
+                }
+                p {
+                    height: 28px;
+                    line-height: 28px;
+                }
+                h1 {
+                    font-size: 46px;
+                    color: #2196f3;
+                    text-align: center;
+                    font-weight: 600;
+                    height: 230px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+                li {
+                    width: 100%;
+                    display: flex;
+                    div {
+                        height: 38px;
+                        line-height: 38px;
+                        nz-select {
+                            width: 150px;
+                            height: 33px;
+                        }
+                    }
+                    div:first-child {
+                        width: 45%;
+                        text-align: right;
+                    }
+                    div:last-child {
+                        width: 55%;
+                        text-align: left;
+                    }
+                }
+            }
+        }
+    }
+}

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.spec.ts

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

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

@@ -0,0 +1,32 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-create-plan-online-five',
+  templateUrl: './create-plan-online-five.component.html',
+  styleUrls: ['./create-plan-online-five.component.scss']
+})
+export class CreatePlanOnlineFiveComponent implements OnInit {
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.getTemplateData()
+  }
+
+  selectedItem:string = '封面'
+  clickTitleItem(item){
+    item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
+  }
+  planTemplateData: any
+  //获得模板信息
+  getTemplateData() {
+    this.http.get('/api/PlanTemplate').subscribe(data => {
+      this.planTemplateData = JSON.parse(data[2].data).filter(item =>
+        item.completed == true
+      )
+      console.log(this.planTemplateData)
+    })
+  }
+
+}

src/app/plan-management/create-plan-online-three/create-plan-online-three.component.html

@@ -0,0 +1 @@
+<p>create-plan-online-three works!</p>

src/app/plan-management/create-plan-online-three/create-plan-online-three.component.spec.ts

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

src/app/plan-management/create-plan-online-three/create-plan-online-three.component.ts

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

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

@@ -66,7 +66,9 @@ export class EntryPlanLookComponent implements OnInit {
       data.items.forEach(element => {
         if (element.companyId === this.route.snapshot.queryParams.unitId) {
           this.compantData = element.company
-          return } });
+          return
+        }
+      });
       // console.log(123,this.compantData)
       this.unitdata.unitname = this.compantData.name
       this.unitdata.organizationName = this.compantData.organizationName
@@ -449,7 +451,8 @@ export class EntryPlanLookComponent implements OnInit {
 
       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) }) 
+          result(data)
+        })
       })
       allFile.push(result)
       this.downloadProgress = Number((i / allSlice).toFixed(2)) * 100
@@ -651,9 +654,11 @@ export class AddPlanone {
             planCategory: Number(this.selectedPLanLevel),
             url: "",
             attachmentUrls: [`${this.objectName}`]
-          },{params:{
+          }, {
+            params: {
               companyId: this.data.companyId
-          }}).subscribe(data=>{
+            }
+          }).subscribe(data => {
             this.dialogRef.close(data);
           })
         } else {
@@ -693,7 +698,8 @@ export class AddPlanone {
         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}
+            "eTag": data.eTag || null
+          }
           resolve(msg) // 调用 promise 内置方法处理成功
         })
       });
@@ -702,7 +708,8 @@ export class AddPlanone {
 
       if (this.PartNumberETag.length === allSlice) {
         this.uploadProgress = 100
-          this.endUploading(planType)}
+        this.endUploading(planType)
+      }
     }//for循环
 
   }
@@ -751,9 +758,11 @@ export class AddPlanone {
           planCategory: Number(this.selectedPLanLevel),
           url: "",
           attachmentUrls: [`${this.objectName}`]
-      },{params:{
+        }, {
+          params: {
             companyId: this.data.companyId
-      }}).subscribe(data=>{
+          }
+        }).subscribe(data => {
           this.dialogRef.close(data);
         })
       } else {
@@ -901,7 +910,6 @@ export class AddPlanone {
         this.snackBar.open('请先输入网址', '确定', config);
       }
       if (this.defaultisshow == '3' && this.webaddress) { //如果是填写网址
-        // console.log(99999,this.selectedPLanType)
         var reg = new RegExp('(http|https):\/\/([\w.!@#$%^&*()_+-=])*\s*')
         if (reg.test(this.webaddress)) {
           let body = {
@@ -915,10 +923,11 @@ export class AddPlanone {
             attachmentUrls: null
           }
           //console.log(body)
-          this.http.post("/api/PlanComponents",body,{params:{
+          this.http.post("/api/PlanComponents", body, {
+            params: {
               companyId: this.data.companyId
-          }}).subscribe(data=>{
+            }
-            // console.log("创建成功")
+          }).subscribe(data => {
             this.dialogRef.close(data);
           })
         } else {
@@ -965,9 +974,11 @@ export class AddPlanone {
           url: "",
           attachmentUrls: null
         }
-        this.http.post("/api/PlanComponents2D",body,{params:{
+        this.http.post("/api/PlanComponents2D", body, {
+          params: {
             companyId: this.data.companyId
-        }}).subscribe(data=>{
+          }
+        }).subscribe(data => {
           // console.log("创建成功")
           this.dialogRef.close(data);
         })
@@ -993,9 +1004,11 @@ export class AddPlanone {
             attachmentUrls: null
           }
           //console.log(body)
-          this.http.post("/api/PlanComponents2D",body,{params:{
+          this.http.post("/api/PlanComponents2D", body, {
+            params: {
               companyId: this.data.companyId
-          }}).subscribe(data=>{
+            }
+          }).subscribe(data => {
             // console.log("创建成功")
             this.dialogRef.close(data);
           })

src/app/plan-management/plan-management-routing.module.ts

@@ -19,6 +19,7 @@ import { TypePlanComponent } from './type-plan/type-plan.component'
 import { MaintainUpComponent } from './maintain-up/maintain-up.component'
 import { from } from 'rxjs';
 import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component';
+import { CreatePlanOnlineFiveComponent } from './create-plan-online-five/create-plan-online-five.component';
 
 const routes: Routes = [
   { path: 'entryPlan', component: EntryPlanComponent},
@@ -32,7 +33,8 @@ const routes: Routes = [
   { path: 'MeetPlan',component:MeetPlanComponent},//应急预案
   { path: 'typePlan',component:TypePlanComponent},//类型预案
   { path: 'maintainup',component:MaintainUpComponent},//维护更新
-  { path: 'reinforceplan',component:ReinforcePlanComponent}//增援预案
+  { path: 'reinforceplan',component:ReinforcePlanComponent},//增援预案
+  { path: 'createplanonlinefive',component:CreatePlanOnlineFiveComponent},//在线编制五级预案
 ];
 
 @NgModule({

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

@@ -63,14 +63,14 @@ import { typeAuditResult } from './type-plan/type-plan.component';
 import { MaintainUpComponent } from './maintain-up/maintain-up.component'
 import { GkPsViewer } from './pass-plan/pass-plan.component'
 import { GkhtmlPsViewer } from './open-plan/open-plan.component';
-import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component'
+import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component';
-
+import { CreatePlanOnlineFiveComponent } from './create-plan-online-five/create-plan-online-five.component';
-
+import { CreatePlanOnlineThreeComponent } from './create-plan-online-three/create-plan-online-three.component'
 
 @NgModule({
   declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName,
     WebLookComponent, OnetwoEntryPlanComponent, newunitComponent, MeetPlanComponent, newunitMeet, TypePlanComponent, newunitType, PsViewer, onetwoAuditResult, meetAuditResult,
-    typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails],
+    typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails, CreatePlanOnlineFiveComponent, CreatePlanOnlineThreeComponent],
   imports: [
     CommonModule,
     PlanManagementRoutingModule,

src/app/ui/plan-template/plan-template.component.html

@@ -18,15 +18,21 @@
       </div>
     </div>
     <div class="leftbox">
-            <div class="leftbody" [ngClass]="{'selectedTr':item.buildingTypeId==buildingTypeId&&item.planCategory==planCategory}" *ngFor="let item of newleftTabledata;let i=index" (click)='planClick(item)'>
+      <div class="leftbody"
+        [ngClass]="{'selectedTr':item.buildingTypeId==buildingTypeId&&item.planCategory==planCategory}"
+        *ngFor="let item of newleftTabledata;let i=index" (click)='planClick(item)'>
         <div class="bodyname">
           <span>{{item.unitname}}</span>
         </div>
         <div class="bodycz">
           <span>{{item.planCategory==3?'Ⅲ级':item.planCategory==4?'Ⅳ级':'Ⅴ级'}}</span>
           <span style="margin-left: 5px;" (click)='upPlan(item,i,"copy")'>复制</span>
-                    <img  [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/update.png':'../../../assets/images/updatehui.png'" (click)='upPlan(item,i,"edit")'>
+          <img
-                    <img  [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/deleteblue.png':'../../../assets/images/deletehui.png'" (click)='deletePlan(item.id,i)'>
+            [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/update.png':'../../../assets/images/updatehui.png'"
+            (click)='upPlan(item,i,"edit")'>
+          <img
+            [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/deleteblue.png':'../../../assets/images/deletehui.png'"
+            (click)='deletePlan(item.id,i)'>
         </div>
       </div>
     </div>
@@ -37,14 +43,15 @@
         <span>{{unitName}}</span>
       </div>
       <div class="rightheadtwo">
-                <button mat-raised-button color="primary" (click)='addGroupClick()' style="margin-left: 60%;">新增分组</button>
         <button mat-raised-button color="primary" style="margin-left: 10px;" (click)='save()'>保存</button>
+        <button mat-raised-button color="primary" (click)='addGroupClick()'>新增分组</button>
       </div>
     </div>
     <div class="rightbody">
       <mat-accordion *ngFor="let item of group;let zi=index;TrackBy:trackByFn" multi>
         <!-- 基本信息 -->
-                <mat-expansion-panel expanded (opened)='groupPanle=true' *ngIf="item.completed" style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;" [disabled]='groupPanle==true'>
+        <mat-expansion-panel expanded (opened)='groupPanle=true' *ngIf="item.completed"
+          style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;" [disabled]='groupPanle==true'>
           <mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead">
             <mat-panel-title class="paneltitle">
               <div class="groupName">
@@ -56,7 +63,8 @@
                 <span style="margin-left: 2px;">编辑</span>
               </div>
               <div class="delinfo" (click)='deleteGroup(item.groupName)'>
-                        <img src="../../../assets/images/deleteblue.png" style="margin-left: 20px;height: 15px;margin-top: 4px;">
+                <img src="../../../assets/images/deleteblue.png"
+                  style="margin-left: 20px;height: 15px;margin-top: 4px;">
                 <span style="margin-left: 2px;">删除</span>
               </div>
 
@@ -65,24 +73,31 @@
           <!--单位概况-->
           <div class="accordingin" *ngIf="item.groupName=='单位概况'">
             <mat-accordion *ngFor="let element of item.attribute">
-                      <mat-expansion-panel expanded *ngIf="element.completed" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;" [disabled]='groupPanle==true'>
+              <mat-expansion-panel expanded *ngIf="element.completed" expanded
-                        <mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead" style="background-color: #FFFFFF;">
+                style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;" [disabled]='groupPanle==true'>
+                <mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead"
+                  style="background-color: #FFFFFF;">
                   <mat-panel-title style="font-size: 16px;color:#000000;" class="paneltitle">
                     <div class="dwgk" *ngIf="item.groupName=='单位概况'">
                       <div class="attname" *ngIf="item.groupName=='单位概况'">
                         <span>{{element.surveyName}}</span>
                       </div>
                       <div class="caozuo">
-                                <button mat-raised-button color="#ECF6FF" (click)='delAttribute(item.groupName,element.surveyName)'><img src="../../../assets/images/deletehui.png"> 删除</button>
+                        <button mat-raised-button color="#ECF6FF"
-                                <button mat-raised-button color="primary" style="margin-right: 10px;" (click)='addAttInfo(element.surveyName)' 
+                          (click)='delAttribute(item.groupName,element.surveyName)'><img
-                                *ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息'||element.surveyName=='进攻通道'||element.surveyName=='消防设施')"><img src="../../../assets/images/addbai.png"> 编辑</button>
+                            src="../../../assets/images/deletehui.png"> 删除</button>
+                        <button mat-raised-button color="primary" style="margin-right: 10px;"
+                          (click)='addAttInfo(element.surveyName)'
+                          *ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息'||element.surveyName=='进攻通道'||element.surveyName=='消防设施')"><img
+                            src="../../../assets/images/addbai.png"> 编辑</button>
                       </div>
                     </div>
 
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <!--单位概况:单位基本信息,建筑信息 -->
-                        <div class="table" *ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息')">
+                <div class="table"
+                  *ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息')">
                   <!-- <table mat-table [dataSource]='element.attinf' class="mat-elevation-z8">
                             <ng-container matColumnDef="name">
                                 <th mat-header-cell *matHeaderCellDef style="width: 20%;">名称</th>
@@ -124,8 +139,11 @@
                     <tbody>
                       <tr *ngFor="let attinf of element.attinf">
                         <td *ngIf="attinf.completed" style="width: 30%;">{{attinf.propertyName}}</td>
-                              <td *ngIf="attinf.completed" style="width: 30%;">{{attinf.propertyType==0?'单行文本':attinf.propertyType==1?'多行文本':'数值'}}</td>
+                        <td *ngIf="attinf.completed" style="width: 30%;">
-                              <td *ngIf="attinf.completed" style="width: 30%;"><span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"(click)='delAttInfo(item.groupName,element.surveyName,attinf.propertyName)' > 删除</span></td>
+                          {{attinf.propertyType==0?'单行文本':attinf.propertyType==1?'多行文本':'数值'}}</td>
+                        <td *ngIf="attinf.completed" style="width: 30%;"><span
+                            style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"
+                            (click)='delAttInfo(item.groupName,element.surveyName,attinf.propertyName)'> 删除</span></td>
                       </tr>
                     </tbody>
                   </table>
@@ -133,16 +151,23 @@
                 <!-- 单位概况消防设施-->
                 <div class="accordingin" *ngIf="item.groupName=='单位概况'&&(element.surveyName=='消防设施')">
                   <mat-accordion *ngFor="let attinf of element.attinf;let i = index">
-                            <mat-expansion-panel *ngIf="attinf.completed" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;" [disabled]='groupPanle==true'>
+                    <mat-expansion-panel *ngIf="attinf.completed" expanded
-                              <mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead" style="background-color: #FFD91D;">
+                      style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;"
+                      [disabled]='groupPanle==true'>
+                      <mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead"
+                        style="background-color: #FFD91D;">
                         <mat-panel-title class="paneltitle">
                           <div class="dwgk">
                             <div class="attname">
                               <span style="float: right;color: #B99A00;">{{attinf.name}}</span>
                             </div>
                             <div class="caozuo">
-                                      <button mat-raised-button color="#ECF6FF" (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img src="../../../assets/images/deletehui.png"> 删除</button>
+                              <button mat-raised-button color="#ECF6FF"
-                                      <button mat-raised-button color="primary" style="margin-right: 10px;" (click)='fileAdd(attinf.facilityItems,i)'><img src="../../../assets/images/addbai.png"> 编辑</button>
+                                (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img
+                                  src="../../../assets/images/deletehui.png"> 删除</button>
+                              <button mat-raised-button color="primary" style="margin-right: 10px;"
+                                (click)='fileAdd(attinf.facilityItems,i)'><img src="../../../assets/images/addbai.png">
+                                编辑</button>
                             </div>
                           </div>
                         </mat-panel-title>
@@ -156,9 +181,13 @@
                           </thead>
                           <tbody>
                             <tr *ngFor="let facilityItems of attinf.facilityItems;let f=index">
-                                    <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">{{facilityItems.name}}</td>
+                              <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">
-                                    <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">文本类型</td>
+                                {{facilityItems.name}}</td>
-                                    <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;"><span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"(click)='fileDel(i,f)' > 删除</span></td>
+                              <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">
+                                文本类型</td>
+                              <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">
+                                <span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;" (click)='fileDel(i,f)'>
+                                  删除</span></td>
                             </tr>
                           </tbody>
                         </table>
@@ -176,15 +205,19 @@
                       <div class="attackleftTable">
                         <table>
                           <thead>
-                                    <th *ngFor="let item of attackitem.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text" [(ngModel)]='attackitem.tableth[tablethi]' placeholder="请输入内容"></th>
+                            <th *ngFor="let item of attackitem.tableth;let tablethi=index;TrackBy:trackByFn"><input
+                                type="text" [(ngModel)]='attackitem.tableth[tablethi]' placeholder="请输入内容"></th>
                           </thead>
                         </table>
                       </div>
                     </div>
                     <div class="attackRight">
                       <div class="rightButton">
-                                <button mat-raised-button color="primary" (click)='attackAdd(element.surveyName,i,8)'><img src="../../../assets/images/addbai.png"> 新增</button>
+                        <button mat-raised-button color="primary" (click)='attackAdd(element.surveyName,i,8)'><img
-                                <button mat-raised-button color="#ECF6FF" style="margin-left: 10px;" (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img src="../../../assets/images/deletehui.png" > 删除</button>
+                            src="../../../assets/images/addbai.png"> 新增</button>
+                        <button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
+                          (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img
+                            src="../../../assets/images/deletehui.png"> 删除</button>
                       </div>
                     </div>
                   </div>
@@ -204,16 +237,20 @@
                   <!--表格类型-->
                   <table *ngIf="element.level==1">
                     <thead>
-                              <th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"  placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
+                      <th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"
+                          placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
                     </thead>
                   </table>
                   <!--文本区域-->
                   <textarea *ngIf="element.level==3" [(ngModel)]="element.tableth"></textarea>
                   <!--输入框-->
                   <div class="inputtext" *ngIf="element.level==2">
-                            <div class="inputj" style="height: 100%;width: 100%;" *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
+                    <div class="inputj" style="height: 100%;width: 100%;"
-                              <div style="height: 100%;width: 100%;" *ngFor="let itemthj of element.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
+                      *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
-                                <input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;" [(ngModel)]="itemthj.head">
+                      <div style="height: 100%;width: 100%;"
+                        *ngFor="let itemthj of element.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
+                        <input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;"
+                          [(ngModel)]="itemthj.head">
                         <input type="text" placeholder="请输入内容" style="width: 60%;" [(ngModel)]="itemthj.body">
                       </div>
                     </div>
@@ -226,8 +263,11 @@
               </div>
               <div class="attackRight">
                 <div class="rightButton">
-                          <button mat-raised-button color="primary"(click)='attackAdd(item.groupName,attributei,element.level)'*ngIf="element.level==1" ><img src="../../../assets/images/addbai.png"> 新增</button>
+                  <button mat-raised-button color="primary" (click)='attackAdd(item.groupName,attributei,element.level)'
-                          <button mat-raised-button color="#ECF6FF" style="margin-left: 10px;" (click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png" > 删除</button>
+                    *ngIf="element.level==1"><img src="../../../assets/images/addbai.png"> 新增</button>
+                  <button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
+                    (click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png">
+                    删除</button>
                 </div>
               </div>
             </div>

src/app/ui/plan-template/plan-template.component.scss

@@ -7,15 +7,16 @@
  * @LastEditTime: 2021-06-08 15:03:02
  */
 .box {
-    height: 97%;
+    height: 100%;
     width: 100%;
     padding: 10px;
-    background-color: #F7F8FA;
+    box-sizing: border-box;
+    background-color: #f7f8fa;
     display: flex;
     .boxleft {
         width: 20%;
         height: 100%;
-        background-color: #FFFFFF;
+        background-color: #ffffff;
         display: flex;
         flex-direction: column;
         .lefthead {
@@ -23,13 +24,16 @@
             width: 100%;
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid #F7F8FA;
+            border-bottom: 1px solid #f7f8fa;
             span {
                 font-size: 16px;
             }
             .leftheadone {
                 width: 60%;
                 height: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
                 span {
                     margin: 10px 10px;
                     height: 50px;
@@ -40,6 +44,7 @@
                 width: 30%;
                 height: 100%;
                 cursor: pointer;
+                overflow-x: auto;
                 img {
                     position: relative;
                     top: 2px;
@@ -49,7 +54,7 @@
                     //margin: 10px 10px;
                     height: 50px;
                     line-height: 50px;
-                    color: #2196F3;
+                    color: #2196f3;
                 }
             }
         }
@@ -59,9 +64,9 @@
             display: flex;
             flex-direction: column;
             .selectedTr {
-                background-color: #E1F1FF;
+                background-color: #e1f1ff;
                 span {
-                    color: #2196F3;
+                    color: #2196f3;
                 }
             }
             .leftbody {
@@ -73,6 +78,9 @@
                 .bodyname {
                     height: 40px;
                     width: 60%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
                     span {
                         font-size: 16px;
                         height: 40px;
@@ -83,12 +91,13 @@
                 .bodycz {
                     height: 40px;
                     width: 40%;
+                    overflow-y: auto;
                     img {
                         margin-left: 10px;
                         cursor: pointer;
                     }
                     span {
-                        color: #B2BEC7;
+                        color: #b2bec7;
                         font-size: 16px;
                         height: 40px;
                         line-height: 40px;
@@ -101,8 +110,8 @@
     .boxright {
         margin-left: 10px;
         height: 100%;
-        width: 78%;
+        width: 80%;
-        background-color: #FFFFFF;
+        background-color: #ffffff;
         display: flex;
         flex-direction: column;
         .righthead {
@@ -110,7 +119,7 @@
             width: 100%;
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid #F7F8FA;
+            border-bottom: 1px solid #f7f8fa;
             span {
                 font-size: 16px;
             }
@@ -127,8 +136,9 @@
                 width: 50%;
                 height: 100%;
                 button {
-                    //margin-left: 70%;
+                    float: right;
                     margin-top: 5px;
+                    margin-right: 15px;
                 }
             }
         }
@@ -136,12 +146,12 @@
             width: 100%;
             overflow: auto;
             .panelhead {
-                background-color: #E1F1FF;
+                background-color: #e1f1ff;
                 height: 50px;
                 .paneltitle {
                     width: 100%;
                     font-size: 16px;
-                    color: #2196F3;
+                    color: #2196f3;
                     display: flex;
                     //justify-content: space-around;
                     .groupName {
@@ -196,7 +206,6 @@
                             }
                         }
                     }
-                    
                 }
             }
             .table {
@@ -208,7 +217,7 @@
                         height: 40px;
                         font-size: 16px;
                         text-align: center;
-                        background-color: #F7F8FA;
+                        background-color: #f7f8fa;
                     }
                     td {
                         height: 40px;
@@ -228,10 +237,10 @@
                     .attackleftHead {
                         width: 100%;
                         height: 40px;
-                        background-color: #FFD91D;
+                        background-color: #ffd91d;
                         input {
-                            background-color: #FFD91D;
+                            background-color: #ffd91d;
-                            color: #B99A00;
+                            color: #b99a00;
                             text-align: center;
                             height: 100%;
                             width: 100%;
@@ -242,12 +251,12 @@
                     }
                     .attackleftTable {
                         width: 100%;
-                        thead,table{
+                        thead,
+                        table {
                             width: 100%;
-                            
                         }
                         th {
-                            background-color: #E8E9E9;
+                            background-color: #e8e9e9;
                             height: 40px;
                             font-size: 16px;
                             text-align: center;
@@ -316,7 +325,7 @@
 /*
     * This padding sets alignment of the nested nodes.
     */
-    .example-tree .mat-nested-tree-node div[role=group] {
+.example-tree .mat-nested-tree-node div[role="group"] {
     padding-left: 40px;
 }
 /*
@@ -324,6 +333,6 @@
     * Leaf nodes need to have padding so as to align with other non-leaf nodes
     * under the same parent.
     */
-    .example-tree div[role=group] > .mat-tree-node {
+.example-tree div[role="group"] > .mat-tree-node {
     padding-left: 40px;
 }

src/styles.scss

@@ -1,7 +1,7 @@
 
 @import './app/theme.scss';
 @import "./app/ngZorroTree.css"; /* 引入组件样式 */
-
+// @import "~ng-zorro-antd/select/style/index.min.css"; /* 引入组件样式 */
 @font-face
 {
 	font-family: Regular;