You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
483 lines
30 KiB
483 lines
30 KiB
<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 *ngIf="selectedItem == '重点图示'" class="leftKeyImg"> |
|
<div class="keyImgTitle"> |
|
重点图示 |
|
</div> |
|
<div class="planlist" id="planlist"> |
|
<!-- 总平面图 --> |
|
<div style="margin: 10px 0;"> |
|
<mat-accordion> |
|
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
|
<mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px' |
|
style="position: relative;padding-left:20px;background: #F2F9FF;"> |
|
<mat-panel-title> |
|
总平面图 |
|
</mat-panel-title> |
|
</mat-expansion-panel-header> |
|
<div class="content"> |
|
<div class="contentitem" *ngFor="let item of sitePlanItems"> |
|
<div> |
|
<img (click)="openPlan(item,-1)" |
|
[src]="item.imageUrl && item.imageUrl != 'null' ? item.imageUrl+'?x-oss-process=image/resize,m_fill,h_100,w_100' : '/assets/images/2D.jpg'" |
|
alt=""> |
|
</div> |
|
<p>{{item.name}}</p> |
|
</div> |
|
</div> |
|
</mat-expansion-panel> |
|
</mat-accordion> |
|
</div> |
|
<!-- 建筑平面图 --> |
|
<div> |
|
<div *ngFor="let item of allBuildings;let key=index" style="margin-bottom: 10px;"> |
|
<mat-accordion> |
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
|
<mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px' |
|
style="position: relative;padding-left:20px;background: #F2F9FF;"> |
|
<mat-panel-title> |
|
{{item.name}} |
|
</mat-panel-title> |
|
</mat-expansion-panel-header> |
|
<ng-template matExpansionPanelContent> |
|
<div class="content"> |
|
<div class="contentitem" *ngFor="let i of item.plandata"> |
|
<div> |
|
<img (click)="openPlan(i,key)" |
|
[src]="i.imageUrl ? i.imageUrl+'?x-oss-process=image/resize,m_fill,h_100,w_100' : '../../../assets/images/noImg.png'" |
|
alt=""> |
|
</div> |
|
<p>{{i.name}}</p> |
|
</div> |
|
</div> |
|
</ng-template> |
|
</mat-expansion-panel> |
|
</mat-accordion> |
|
</div> |
|
</div> |
|
<!-- 实景图 --> |
|
<div style="margin: 10px 0;"> |
|
<mat-accordion> |
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
|
<mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px' |
|
style="position: relative;padding-left:20px;background: #F2F9FF;"> |
|
<mat-panel-title> |
|
实景图 |
|
</mat-panel-title> |
|
</mat-expansion-panel-header> |
|
<div class="content" id="viewer"> |
|
<div class="realPictureItem" *ngFor="let item of allRealPicture;let key1 = index"> |
|
<div class="realPictureTitle">{{item.name}}</div> |
|
<div class="contentitem" *ngFor="let i of item.realityImages;let key2 = index"> |
|
<div class="realPictureImgItem"> |
|
<img [src]="i.newImageUrl" alt="" |
|
[attr.data-original]="'/api/Objects/PlanPlatform/' + i.imageUrl"> |
|
<div class="realPictureImgItemBtn realPictureImgItemBtn1" |
|
(click)="lookkeyImgItemLeft(key1,key2,i)"> |
|
查看图片 |
|
</div> |
|
<div class="realPictureImgItemBtn realPictureImgItemBtn2" |
|
(click)="addkeyImgItemLeft(item,i)"> |
|
增加分组 |
|
</div> |
|
</div> |
|
<p>{{i.name}}</p> |
|
|
|
</div> |
|
</div> |
|
|
|
</div> |
|
</mat-expansion-panel> |
|
</mat-accordion> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="leftBuilding" *ngIf="selectedItem == '单位概况'"> |
|
<div class="buildingHead" > |
|
<span>建筑列表</span> |
|
</div> |
|
<div class="buildingBody"> |
|
<div class="buildName" *ngFor="let item of allBuildings;let i=index" [ngClass]="{'selectedTr': i == clicki}" (click)='clickBuilding(item,i)'> |
|
<mat-checkbox class="example-margin" color='primary'></mat-checkbox> |
|
<span>{{item.name}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="mainbox"> |
|
<!-- 封面 --> |
|
<div class="cover" *ngIf="selectedItem == '封面'"> |
|
<p class="planNum"> |
|
预案编号: <input type="text" name="" id=""> |
|
</p> |
|
<h1>{{planName}}</h1> |
|
<ul *ngIf="unitData"> |
|
<li> |
|
<div> |
|
对象名称： |
|
</div> |
|
<div> |
|
{{unitData.name}} |
|
</div> |
|
</li> |
|
<li> |
|
<div> |
|
单位性质： |
|
</div> |
|
<div> |
|
{{unitData.buildingTypes[0].name}} |
|
</div> |
|
</li> |
|
<li> |
|
<div> |
|
<span class="redspan">*</span>预案级别： |
|
</div> |
|
<div> |
|
<ng-container *ngIf="planLevel == '5'; else elseTemplate"> |
|
Ⅴ级 |
|
</ng-container> |
|
<ng-template #elseTemplate> |
|
Ⅲ级 |
|
</ng-template> |
|
</div> |
|
</li> |
|
<li> |
|
<div> |
|
<span class="redspan">*</span>灾害类型： |
|
</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> |
|
{{unitData.organizationName}} |
|
</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 class="centerBox" |
|
*ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'"> |
|
<div class="boxHead"> |
|
<span>{{item.groupName}}</span> |
|
</div> |
|
<div class="boxBody" *ngFor="let element of item.attribute;let i=index"> |
|
<div class="boxBodyHead"> |
|
<span>{{element.headName}}</span> |
|
<img src="../../../assets/images/deleteblue.png" *ngIf="element.level==1" |
|
(click)='delTd(key,i)'> |
|
<img src="../../../assets/images/add.png" *ngIf="element.level==1" |
|
(click)='addTd(key,i)'> |
|
</div> |
|
<div class="body"> |
|
<!--表格类型--> |
|
<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> |
|
</thead> |
|
<tbody> |
|
<tr *ngFor="let itemtr of element.tabletr"> |
|
<td |
|
*ngFor="let itemtd of itemtr.tabletd;let tabletdi=index;TrackBy:trackByFn"> |
|
<input type="text" placeholder="请输入" |
|
[(ngModel)]="itemtr.tabletd[tabletdi]"> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<!--文本区域--> |
|
<textarea style="width: 99%;height: 100px;" *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"> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;" |
|
[(ngModel)]="itemthj.body"> |
|
</div> |
|
</div> |
|
</div> |
|
<!--树形图--> |
|
<div style="height: 300px;width: 100%;" *ngIf="element.level==4"> |
|
<tree-diagram [data]="element.tableth" ></tree-diagram> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="keyImg" *ngIf="item.groupName == '重点图示'"> |
|
<div class="keyImgItem" *ngFor="let i of item.attribute;let key = index"> |
|
<div class="keyImgTitle"> |
|
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name"> |
|
<mat-icon class="deleteItem" *ngIf="key != 0" (click)="deleteItem(item,key)">delete |
|
</mat-icon> |
|
</div> |
|
<div class="keyImgImg"> |
|
<div class="imgbox" *ngFor="let imgUrl of i.imgArr;let imgkey = index"> |
|
<mat-icon class="deleteImg" (click)="deleteImgItem(i.imgArr,imgkey)">delete |
|
</mat-icon> |
|
<img [src]="imgUrl" alt=""> |
|
</div> |
|
<div class="uploadBtn"> |
|
<button mat-stroked-button> |
|
<mat-icon>add</mat-icon>上传图片 |
|
</button> |
|
<input (change)="filechange($event,i)" type="file" name="" id=""> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 增加分组 --> |
|
<div class="addkeyImgItem"> |
|
<button mat-flat-button color="primary" (click)="addkeyImgItem(item)"> |
|
增加分组 |
|
</button> |
|
</div> |
|
</div> |
|
<div class="disposalPoint" *ngIf="item.groupName == '处置要点'"> |
|
<div class="disposalPointItem" *ngFor="let i of item.attribute;let key = index"> |
|
<div class="disposalPointTitle"> |
|
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name"> |
|
<mat-icon class="deleteItem" *ngIf="key != 0" (click)="deleteItem(item,key)">delete |
|
</mat-icon> |
|
</div> |
|
<div class="disposalPointTextarea"> |
|
<textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name="" id="" cols="30" rows="10"></textarea> |
|
</div> |
|
</div> |
|
<!-- 增加分组 --> |
|
<div class="addDisposalPointItem"> |
|
<button mat-flat-button color="primary" (click)="addDisposalPointItem(item)"> |
|
增加分组 |
|
</button> |
|
</div> |
|
</div> |
|
<div class="unit" *ngIf="item.groupName == '单位概况'"> |
|
<div class="unithead"> |
|
<span>{{buildingName}}</span> |
|
</div> |
|
<div class="unitbody" *ngFor="let element of group;let i=index"> |
|
<div *ngIf="element.completed"> |
|
<div class="unitbodyHead"> |
|
<span>{{element.surveyName}}</span> |
|
<!-- <img src="../../../assets/images/deletered.png" > --> |
|
<img src="../../../assets/images/addbai.png" (click)='unitadd(element.surveyName,1)' *ngIf="element.surveyName=='功能分区'||element.surveyName=='重点部位'"> |
|
</div> |
|
<div class="body"> |
|
<!-- 进攻通道 --> |
|
<div class="attack" *ngIf="element.surveyName=='进攻通道'"> |
|
<div *ngFor="let attack of element.attinf;let attacki=index"> |
|
<div class="attackhead"> |
|
<span>{{attack.head}}</span> |
|
<img src="../../../assets/images/deleteblue.png" (click)='unitDel(element.surveyName,attacki)'> |
|
<img src="../../../assets/images/add.png" (click)='unitadd(element.surveyName,attacki)'> |
|
</div> |
|
<div class="attackbody"> |
|
<table> |
|
<thead> |
|
<th *ngFor="let itemth of attack.tableth;let tablethi=index;TrackBy:trackByFn"> |
|
<input type="text" placeholder="请输入内容" |
|
[(ngModel)]="attack.tableth[tablethi]"> |
|
</th> |
|
</thead> |
|
<tbody> |
|
<tr *ngFor="let itemtr of attack.tabletr"> |
|
<td |
|
*ngFor="let itemtd of itemtr.tabletd;let tabletdi=index;TrackBy:trackByFn"> |
|
<input type="text" placeholder="请输入" |
|
[(ngModel)]="itemtr.tabletd[tabletdi]"> |
|
</td> |
|
</tr> |
|
</tbody> |
|
<tbody></tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
|
|
</div> |
|
<!-- 单位和建筑信息 --> |
|
<div class="building" *ngIf="element.surveyName=='单位基本信息'"> |
|
<div *ngFor="let info of element.attinf"> |
|
<div *ngIf="info.completed" class="onetext"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="info.propertyName" readonly> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="info.value"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="building" *ngIf="element.surveyName=='建筑信息'"> |
|
<div *ngFor="let info of element.attinf"> |
|
<div *ngIf="info.completed" class="onetext"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="info.propertyName" readonly> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="info.propertyValue"> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 消防设施 --> |
|
<div class="file" *ngIf="element.surveyName=='消防设施'"> |
|
<div *ngFor="let attack of element.attinf;let attacki=index"> |
|
<div *ngIf="attack.completed"> |
|
<div class="fileHead"> |
|
<span>{{attack.name}}</span> |
|
</div> |
|
<div class="fileBody"> |
|
<div *ngFor="let info of attack.facilityItems"> |
|
<div *ngIf="info.completed" class="onetext"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="info.name" readonly> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="info.value"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
<!-- 四周毗邻 --> |
|
<div class="fouradj" *ngIf="element.surveyName=='四周毗邻'"> |
|
<div class="fourTexttwo" *ngFor="let info of element.attinf"> |
|
<input type="text" placeholder="请输入内容" style="width: 30%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="info.name" readonly> |
|
<input type="text" placeholder="请输入内容" style="width: 70%;background-color: #FFFFFF;" [(ngModel)]="info.value"> |
|
|
|
</div> |
|
</div> |
|
<!-- 功能分区 --> |
|
<div class="fouradj" *ngIf="element.surveyName=='功能分区'"> |
|
<div class="onetext" *ngFor="let info of element.attinf;let infoi=index"> |
|
<input type="text" placeholder="请输入内容" style="width: 30%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="info.name"> |
|
<input type="text" placeholder="请输入内容" style="width: 67%;background-color: #FFFFFF;" [(ngModel)]="info.value"> |
|
<img src="../../../assets/images/deletered.png" (click)='unitDel(element.surveyName,infoi)'> |
|
</div> |
|
</div> |
|
<!-- 重点部位 --> |
|
<div class="parts" *ngIf="element.surveyName=='重点部位'"> |
|
<div *ngFor="let parts of element.attinf;let infoi=index"> |
|
<div class="partsHead"> |
|
<input type="text" placeholder="请输入内容" [(ngModel)]="parts.heafName"> |
|
<img src="../../../assets/images/deletered.png" (click)='unitDel(element.surveyName,infoi)'> |
|
</div> |
|
<div class="partsBody"> |
|
<div class="duohang"> |
|
<div class="duohangHalf"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="parts.body[0].name"> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="parts.body[0].value"> |
|
</div> |
|
<div class="duohangHalf"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;"[(ngModel)]="parts.body[1].name" > |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="parts.body[1].value"> |
|
</div> |
|
</div> |
|
<div class="duohang"> |
|
<div class="duohangHalf"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="parts.body[2].name"> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="parts.body[2].value"> |
|
</div> |
|
<div class="duohangHalf"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="parts.body[3].name"> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="parts.body[3].value"> |
|
</div> |
|
</div> |
|
<div class="danhang"> |
|
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #e8e9e9;text-align: center;" [(ngModel)]="parts.body[4].name"> |
|
<input type="text" placeholder="请输入内容" style="width: 60%;background-color: #FFFFFF;" [(ngModel)]="parts.body[4].value"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="rightbox"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="viewerjs" style="display:none"> |
|
|
|
</div> |