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

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

@@ -1,13 +1,14 @@
-import { Component, OnInit,Inject } from '@angular/core';
-import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import {FormControl} from '@angular/forms';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
 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 { CacheTokenService } from '../http-interceptors/cache-token.service'//引入服务
+import { Router, ActivatedRoute, ParamMap } from '@angular/router'
+import { is } from 'date-fns/locale';
 
 
 
@@ -18,16 +19,26 @@ import { Router,ActivatedRoute } from '@angular/router'
 })
 export class NavigationComponent implements OnInit {
 
-  constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,private tree:TreeService,public snackBar: MatSnackBar,
-    private router:Router,private route:ActivatedRoute) { }
+  constructor(public navmenus: CacheTokenService, private http: HttpClient, public dialog: MatDialog, private tree: TreeService, public snackBar: MatSnackBar,
+    private router: Router, private route: ActivatedRoute) { }
 
-  treedata:any
-  isgrey:boolean
-  olddata:any
-  oldtreedata:any
+  treedata: any
+  isgrey: boolean
+  olddata: any
+  oldtreedata: any
 
-  ngOnInit () {
-    this.http.get('/api/Account/NavMenus').subscribe((data: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
       let _data = this.tree.toTree(this.oldtreedata)
@@ -35,7 +46,7 @@ export class NavigationComponent implements OnInit {
     })
   }
 
-  ngOnDestroy () {
+  ngOnDestroy() {
 
   }
 
@@ -44,11 +55,11 @@ export class NavigationComponent implements OnInit {
     this.darktheme = dark;
   }
 
-  defaulttheme(){
+  defaulttheme() {
     this.darktheme = false
   }
 
-  redtheme(){
+  redtheme() {
     this.darktheme = true
   }
 

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/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  [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/deleteblue.png':'../../../assets/images/deletehui.png'" (click)='deletePlan(item.id,i)'>
+          <img
+            [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-header collapsedHeight='50px' expandedHeight='50px' class="panelhead" style="background-color: #FFFFFF;">
+              <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-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="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>
+                        <button mat-raised-button color="#ECF6FF"
+                          (click)='delAttribute(item.groupName,element.surveyName)'><img
+                            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>
@@ -122,27 +137,37 @@
                       <th style="width: 30%;">操作</th>
                     </thead>
                     <tbody>
-                            <tr *ngFor="let attinf of element.attinf" >
+                      <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%;"><span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"(click)='delAttInfo(item.groupName,element.surveyName,attinf.propertyName)' > 删除</span></td>
+                        <td *ngIf="attinf.completed" style="width: 30%;">
+                          {{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>
                 </div>
                 <!-- 单位概况消防设施-->
-                        <div class="accordingin"*ngIf="item.groupName=='单位概况'&&(element.surveyName=='消防设施')">
+                <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-header collapsedHeight='50px' expandedHeight='50px' class="panelhead" style="background-color: #FFD91D;">
-                                <mat-panel-title class="paneltitle" >
+                    <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-header collapsedHeight='50px' expandedHeight='50px' class="panelhead"
+                        style="background-color: #FFD91D;">
+                        <mat-panel-title class="paneltitle">
                           <div class="dwgk">
-                                    <div class="attname" >
+                            <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="primary" style="margin-right: 10px;" (click)='fileAdd(attinf.facilityItems,i)'><img src="../../../assets/images/addbai.png"> 编辑</button>
+                              <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="primary" style="margin-right: 10px;"
+                                (click)='fileAdd(attinf.facilityItems,i)'><img src="../../../assets/images/addbai.png">
+                                编辑</button>
                             </div>
                           </div>
                         </mat-panel-title>
@@ -155,10 +180,14 @@
                             <th style="width: 30%;">操作</th>
                           </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>
-                                    <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 *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>
+                              <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>
@@ -171,20 +200,24 @@
                   <div class="attack" *ngFor="let attackitem of element.attinf;let i=index">
                     <div class="attackLeft">
                       <div class="attackleftHead">
-                                <input type="text" [(ngModel)]='attackitem.head' placeholder="请输入内容" >
+                        <input type="text" [(ngModel)]='attackitem.head' placeholder="请输入内容">
                       </div>
                       <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="#ECF6FF" style="margin-left: 10px;" (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img src="../../../assets/images/deletehui.png" > 删除</button>
+                        <button mat-raised-button color="primary" (click)='attackAdd(element.surveyName,i,8)'><img
+                            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 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">
+                    <div class="inputj" style="height: 100%;width: 100%;"
+                      *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
+                      <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="#ECF6FF" style="margin-left: 10px;" (click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png" > 删除</button>
+                  <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="#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

@@ -6,89 +6,98 @@
  * @LastEditors: sueRimn
  * @LastEditTime: 2021-06-08 15:03:02
  */
-.box{
-    height: 97%;
+.box {
+    height: 100%;
     width: 100%;
     padding: 10px;
-    background-color: #F7F8FA;
+    box-sizing: border-box;
+    background-color: #f7f8fa;
     display: flex;
-    .boxleft{
+    .boxleft {
         width: 20%;
         height: 100%;
-        background-color: #FFFFFF;
+        background-color: #ffffff;
         display: flex;
         flex-direction: column;
-        .lefthead{
+        .lefthead {
             height: 50px;
             width: 100%;
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid #F7F8FA;
-            span{
+            border-bottom: 1px solid #f7f8fa;
+            span {
                 font-size: 16px;
             }
-            .leftheadone{
+            .leftheadone {
                 width: 60%;
                 height: 100%;
-                span{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                span {
                     margin: 10px 10px;
                     height: 50px;
                     line-height: 50px;
                 }
             }
-            .leftheadtwo{
+            .leftheadtwo {
                 width: 30%;
                 height: 100%;
                 cursor: pointer;
-                img{
+                overflow-x: auto;
+                img {
                     position: relative;
                     top: 2px;
                 }
-                span{
+                span {
                     margin-left: 2px;
                     //margin: 10px 10px;
                     height: 50px;
                     line-height: 50px;
-                    color: #2196F3;
+                    color: #2196f3;
                 }
             }
         }
-        .leftbox{
+        .leftbox {
             height: 100%;
             width: 100%;
             display: flex;
             flex-direction: column;
-            .selectedTr{
-                background-color: #E1F1FF;
-                span{
-                    color: #2196F3;
+            .selectedTr {
+                background-color: #e1f1ff;
+                span {
+                    color: #2196f3;
                 }
             }
-            .leftbody{
+            .leftbody {
                 width: 100%;
                 height: 40px;
                 display: flex;
                 justify-content: space-between;
                 cursor: pointer;
-                .bodyname{
+                .bodyname {
                     height: 40px;
                     width: 60%;
-                    span{
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    span {
                         font-size: 16px;
                         height: 40px;
                         line-height: 40px;
                         margin-left: 10px;
                     }
                 }
-                .bodycz{
+                .bodycz {
                     height: 40px;
                     width: 40%;
-                    img{
+                    overflow-y: auto;
+                    img {
                         margin-left: 10px;
                         cursor: pointer;
                     }
-                    span{
-                        color: #B2BEC7;
+                    span {
+                        color: #b2bec7;
                         font-size: 16px;
                         height: 40px;
                         line-height: 40px;
@@ -98,91 +107,92 @@
             }
         }
     }
-    .boxright{
+    .boxright {
         margin-left: 10px;
         height: 100%;
-        width: 78%;
-        background-color: #FFFFFF;
+        width: 80%;
+        background-color: #ffffff;
         display: flex;
         flex-direction: column;
-        .righthead{
+        .righthead {
             height: 50px;
             width: 100%;
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid #F7F8FA;
-            span{
+            border-bottom: 1px solid #f7f8fa;
+            span {
                 font-size: 16px;
             }
-            .rightheadone{
+            .rightheadone {
                 width: 50%;
                 height: 100%;
-                span{
+                span {
                     margin: 10px 10px;
                     height: 50px;
                     line-height: 50px;
                 }
             }
-            .rightheadtwo{
+            .rightheadtwo {
                 width: 50%;
                 height: 100%;
-                button{
-                    //margin-left: 70%;
+                button {
+                    float: right;
                     margin-top: 5px;
+                    margin-right: 15px;
                 }
             }
         }
-        .rightbody{
+        .rightbody {
             width: 100%;
             overflow: auto;
-            .panelhead{
-                background-color: #E1F1FF;
+            .panelhead {
+                background-color: #e1f1ff;
                 height: 50px;
-                .paneltitle{
+                .paneltitle {
                     width: 100%;
                     font-size: 16px;
-                    color: #2196F3;
+                    color: #2196f3;
                     display: flex;
                     //justify-content: space-around;
-                    .groupName{
+                    .groupName {
                         width: 100px;
                     }
-                    .addinfo{
+                    .addinfo {
                         cursor: pointer;
                         height: 100%;
                         width: 75px;
                         margin-left: 75%;
-                        span{
+                        span {
                             position: relative;
                             bottom: 2px;
                         }
                     }
-                    .delinfo{
+                    .delinfo {
                         cursor: pointer;
                         height: 100%;
                         width: 75px;
-                        span{
+                        span {
                             position: relative;
                             bottom: 2px;
                         }
                     }
-                    .dwgk{
+                    .dwgk {
                         height: 100%;
                         width: 100%;
                         display: flex;
-                        .attname{
+                        .attname {
                             height: 100%;
                             width: 40%;
-                            span{
+                            span {
                                 font-size: 16px;
                                 line-height: 50px;
                                 height: 50px;
                             }
                         }
-                        .caozuo{
+                        .caozuo {
                             height: 100%;
                             width: 60%;
-                            button{
+                            button {
                                 font-size: 16px;
                                 width: 80px;
                                 height: 34px;
@@ -190,48 +200,47 @@
                                 float: right;
                                 margin-top: 8px;
                             }
-                            img{
+                            img {
                                 position: relative;
                                 bottom: 2px;
                             }
                         }
                     }
-                    
                 }
             }
-            .table{
+            .table {
                 width: 100%;
-                table{
+                table {
                     width: 100%;
                     font-size: 16px;
-                    th{
+                    th {
                         height: 40px;
                         font-size: 16px;
                         text-align: center;
-                        background-color: #F7F8FA;
+                        background-color: #f7f8fa;
                     }
-                    td{
+                    td {
                         height: 40px;
                         text-align: center;
                         font-size: 16px;
                     }
                 }
             }
-            .attack{
+            .attack {
                 width: 100%;
                 display: flex;
                 flex-direction: row;
-                .attackLeft{
+                .attackLeft {
                     width: 70%;
                     display: flex;
                     flex-direction: column;
-                    .attackleftHead{
+                    .attackleftHead {
                         width: 100%;
                         height: 40px;
-                        background-color: #FFD91D;
-                        input{
-                            background-color: #FFD91D;
-                            color: #B99A00;
+                        background-color: #ffd91d;
+                        input {
+                            background-color: #ffd91d;
+                            color: #b99a00;
                             text-align: center;
                             height: 100%;
                             width: 100%;
@@ -240,18 +249,18 @@
                             outline: none;
                         }
                     }
-                    .attackleftTable{
+                    .attackleftTable {
                         width: 100%;
-                        thead,table{
+                        thead,
+                        table {
                             width: 100%;
-                            
                         }
-                        th{
-                            background-color: #E8E9E9;
+                        th {
+                            background-color: #e8e9e9;
                             height: 40px;
                             font-size: 16px;
                             text-align: center;
-                            input{
+                            input {
                                 //background-color: #FFFFFF;
                                 text-align: center;
                                 height: 100%;
@@ -261,22 +270,22 @@
                                 outline: none;
                             }
                         }
-                        textarea{
+                        textarea {
                             width: 100%;
                         }
-                        .inputtext{
+                        .inputtext {
                             width: 100%;
                             height: 100%;
                             display: flex;
                             flex-direction: column;
-                            input{
+                            input {
                                 //width: 100%;
                                 height: 40px;
                                 font-size: 16px;
                                 border: none;
                                 outline: none;
                             }
-                            .inputj{
+                            .inputj {
                                 width: 100%;
                                 height: 100%;
                                 display: flex;
@@ -284,9 +293,9 @@
                         }
                     }
                 }
-                .attackRight{
+                .attackRight {
                     width: 30%;
-                    .rightButton{
+                    .rightButton {
                         margin-top: 20px;
                         margin-left: 40%;
                     }
@@ -306,24 +315,24 @@
 
 .example-tree-invisible {
     display: none;
-    }
-    .example-tree ul,
-    .example-tree li {
+}
+.example-tree ul,
+.example-tree li {
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    }
-    /*
+}
+/*
     * 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;
-    }
-    /*
+}
+/*
     * Padding for leaf nodes.
     * 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;