Browse Source

[新增]增加预览模式

tangshan
邵佳豪 4 years ago
parent
commit
b6f8b3191b
  1. 16
      src/app/key-unit/fire-fighting-device/fire-fighting-device.component.ts
  2. 280
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  3. 22
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
  4. 74
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

16
src/app/key-unit/fire-fighting-device/fire-fighting-device.component.ts

@ -478,15 +478,13 @@ export class FireFightingDeviceComponent implements OnInit {
for (const key in object) { for (const key in object) {
if (Object.prototype.hasOwnProperty.call(object, key)) { if (Object.prototype.hasOwnProperty.call(object, key)) {
const element = object[key]; const element = object[key];
if(element.total || element.details){ body.push({
body.push({ buildingId: item.buildingId,
buildingId: item.buildingId, groupName: groupName,
groupName: groupName, facilityName: element.name,
facilityName: element.name, count: element.total || '',
count: element.total, description: element.details || ''
description: element.details })
})
}
} }
} }
return body return body

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

@ -1,16 +1,13 @@
<div class="bigbox"> <div class="bigbox">
<div class="titlebox"> <div class="titlebox" *ngIf="pattern == 'edit'">
<div class="titleitembox"> <div class="titleitembox">
<div title="封面" class="item" [ngClass]="{'selectedItem': selectedItem == '封面'}" (click)="clickTitleItem('封面')">
1.封面
</div>
<div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)" <div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)"
[ngClass]="{'selectedItem': selectedItem == item.groupName}" [title]="item.groupName"> [ngClass]="{'selectedItem': selectedItem == item.groupName}" [title]="item.groupName">
{{key + 2}}.{{item.groupName}} {{key + 1}}.{{item.groupName}}
</div> </div>
</div> </div>
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button> <button mat-stroked-button (click)="preview()">
<mat-icon>visibility</mat-icon> 预览 <mat-icon>visibility</mat-icon> 预览
</button> </button>
<button mat-flat-button color="primary"> <button mat-flat-button color="primary">
@ -18,8 +15,12 @@
</button> </button>
</div> </div>
</div> </div>
<div class="contentbox"> <button mat-stroked-button (click)="quitPreview()" class="quitPreview">
<div class="leftbox"> <mat-icon>visibility</mat-icon> 退出预览
</button>
<div class="contentbox" [ngClass]="{'noPadding': pattern == 'look'}">
<div class="leftbox"
*ngIf="pattern == 'edit' && (selectedItem == '重点图示' || selectedItem == '交通水源' || selectedItem == '预案附件' || selectedItem == '单位概况')">
<div *ngIf="selectedItem == '重点图示'" class="leftKeyImg"> <div *ngIf="selectedItem == '重点图示'" class="leftKeyImg">
<div class="keyImgTitle"> <div class="keyImgTitle">
重点图示 重点图示
@ -129,9 +130,7 @@
<div class="content"> <div class="content">
<div class="contentitem"> <div class="contentitem">
<div> <div>
<img (click)="openPlan(1,-1,'水源')" <img (click)="openPlan(1,-1,'水源')" src='/assets/images/2D.jpg' alt="">
src='/assets/images/2D.jpg'
alt="">
</div> </div>
<p>交通水源</p> <p>交通水源</p>
</div> </div>
@ -158,8 +157,7 @@
<div class="content"> <div class="content">
<div class="contentitem" *ngFor="let TwoDPlan of TwoDPlanList"> <div class="contentitem" *ngFor="let TwoDPlan of TwoDPlanList">
<div> <div>
<img (click)="openPlan(TwoDPlan,-1,'预案')" <img (click)="openPlan(TwoDPlan,-1,'预案')" src='/assets/images/2Dplan.png'
src='/assets/images/2Dplan.png'
alt=""> alt="">
</div> </div>
<p>{{TwoDPlan.name}}</p> <p>{{TwoDPlan.name}}</p>
@ -170,12 +168,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="leftBuilding" *ngIf="selectedItem == '单位概况'"> <div *ngIf="selectedItem == '单位概况'" class="leftBuilding">
<div class="buildingHead" > <div class="buildingHead">
<span>建筑列表</span> <span>建筑列表</span>
</div> </div>
<div class="buildingBody"> <div class="buildingBody">
<div class="buildName" *ngFor="let item of allBuildings;let i=index" [ngClass]="{'selectedTr': i == clicki}" (click)='clickBuilding(item,i)'> <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> <mat-checkbox class="example-margin" color='primary'></mat-checkbox>
<span>{{item.name}}</span> <span>{{item.name}}</span>
</div> </div>
@ -183,111 +182,114 @@
</div> </div>
</div> </div>
<div class="mainbox"> <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 *ngFor="let item of planTemplateData;let key = index">
<div *ngIf="selectedItem == item.groupName"> <div *ngIf="selectedItem == item.groupName || pattern == 'look'">
<!-- 封面 -->
<div class="cover" *ngIf="item.groupName == '封面'">
<p class="planNum">
预案编号: <input [(ngModel)]="item.attribute.planNumber" type="text" name="" id="">
</p>
<h1>{{item.attribute.planName}}</h1>
<ul>
<li>
<div>
对象名称:
</div>
<div>
{{item.attribute.objName}}
</div>
</li>
<li>
<div>
单位性质:
</div>
<div>
{{item.attribute.unitNature}}
</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)]="item.attribute.disasterType">
<option value="0">火灾</option>
<option value="1">抢险救援</option>
<option value="2">其他</option>
</select>
</div>
</li>
<li>
<div>
防火级别:
</div>
<div>
<input type="text" [(ngModel)]="item.attribute.fireproofingLevel">
</div>
</li>
<li>
<div>
防火管辖:
</div>
<div>
{{item.attribute.fireproofingAdminister}}
</div>
</li>
<li>
<div>
灭火责任队站:
</div>
<div>
<input type="text" [(ngModel)]="item.attribute.putOutFireAdminister">
</div>
</li>
<li>
<div>
制作人职务/姓名:
</div>
<div>
<input [(ngModel)]="item.attribute.producer.duty" type="text"
style="margin-right: 10px;">
<input [(ngModel)]="item.attribute.producer.name" type="text" style="width: 50px;">
</div>
</li>
<li>
<div>
审核人职务/姓名:
</div>
<div>
<input [(ngModel)]="item.attribute.verifier.duty" type="text"
style="margin-right: 10px;">
<input [(ngModel)]="item.attribute.verifier.name" type="text" style="width: 50px;">
</div>
</li>
<li>
<div>
审核时间:
</div>
<div>
<input type="text" [(ngModel)]="item.attribute.auditTime">
</div>
</li>
</ul>
</div>
<div class="centerBox" <div class="centerBox"
*ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'&&item.groupName!='特别警示'&&item.groupName!='处置要点'"> *ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'&&item.groupName!='特别警示'&&item.groupName!='处置要点'&&item.groupName!='封面'">
<div class="boxHead"> <div class="titleItem">
<span>{{item.groupName}}</span> <span>{{item.groupName}}</span>
</div> </div>
<div class="boxBody" *ngFor="let element of item.attribute;let i=index"> <div class="boxBody" *ngFor="let element of item.attribute;let i=index">
@ -341,7 +343,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="keyImg" *ngIf="item.groupName == '重点图示' || item.groupName == '交通水源' || item.groupName == '预案附件'"> <div class="keyImg"
*ngIf="item.groupName == '重点图示' || item.groupName == '交通水源' || item.groupName == '预案附件'">
<div class="titleItem">
<span>{{item.groupName}}</span>
</div>
<div class="keyImgItem" *ngFor="let i of item.attribute;let key = index"> <div class="keyImgItem" *ngFor="let i of item.attribute;let key = index">
<div class="keyImgTitle"> <div class="keyImgTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name"> <input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
@ -354,7 +360,7 @@
</mat-icon> </mat-icon>
<img [src]="imgUrl" alt=""> <img [src]="imgUrl" alt="">
</div> </div>
<div class="uploadBtn"> <div class="uploadBtn" *ngIf="pattern == 'edit'">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon>add</mat-icon>上传图片 <mat-icon>add</mat-icon>上传图片
</button> </button>
@ -363,13 +369,16 @@
</div> </div>
</div> </div>
<!-- 增加分组 --> <!-- 增加分组 -->
<div class="addkeyImgItem"> <div class="addkeyImgItem" *ngIf="pattern == 'edit'">
<button mat-flat-button color="primary" (click)="addkeyImgItem(item)"> <button mat-flat-button color="primary" (click)="addkeyImgItem(item)">
增加分组 增加分组
</button> </button>
</div> </div>
</div> </div>
<div class="disposalPoint" *ngIf="item.groupName == '处置要点'"> <div class="disposalPoint" *ngIf="item.groupName == '处置要点'">
<div class="titleItem">
<span>{{item.groupName}}</span>
</div>
<div class="disposalPointItem" *ngFor="let i of item.attribute;let key = index"> <div class="disposalPointItem" *ngFor="let i of item.attribute;let key = index">
<div class="disposalPointTitle"> <div class="disposalPointTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name"> <input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
@ -377,7 +386,8 @@
</mat-icon> </mat-icon>
</div> </div>
<div class="disposalPointTextarea"> <div class="disposalPointTextarea">
<textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name="" id="" cols="30" rows="10"></textarea> <textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name=""
id="" cols="30" rows="10"></textarea>
</div> </div>
</div> </div>
<!-- 增加分组 --> <!-- 增加分组 -->
@ -388,16 +398,23 @@
</div> </div>
</div> </div>
<div class="disposalPoint" *ngIf="item.groupName == '特别警示'"> <div class="disposalPoint" *ngIf="item.groupName == '特别警示'">
<div class="titleItem">
<span>{{item.groupName}}</span>
</div>
<div class="disposalPointItem" *ngFor="let i of item.attribute;let key = index"> <div class="disposalPointItem" *ngFor="let i of item.attribute;let key = index">
<div class="disposalPointTitle"> <div class="disposalPointTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name"> <input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
</div> </div>
<div class="disposalPointTextarea"> <div class="disposalPointTextarea">
<textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name="" id="" cols="30" rows="10"></textarea> <textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name=""
id="" cols="30" rows="10"></textarea>
</div> </div>
</div> </div>
</div> </div>
<div class="unit" *ngIf="item.groupName == '单位概况'"> <div class="unit" *ngIf="item.groupName == '单位概况'">
<div class="titleItem">
<span>单位基本信息</span>
</div>
<div class="unithead"> <div class="unithead">
<span>{{buildingName}}</span> <span>{{buildingName}}</span>
</div> </div>
@ -412,13 +429,16 @@
<div *ngFor="let attack of element.attinf;let attacki=index"> <div *ngFor="let attack of element.attinf;let attacki=index">
<div class="attackhead"> <div class="attackhead">
<span>{{attack.head}}</span> <span>{{attack.head}}</span>
<img src="../../../assets/images/deleteblue.png" (click)='unitDel(element.surveyName,attacki)'> <img src="../../../assets/images/deleteblue.png"
<img src="../../../assets/images/add.png" (click)='unitadd(element.surveyName,attacki)'> (click)='unitDel(element.surveyName,attacki)'>
<img src="../../../assets/images/add.png"
(click)='unitadd(element.surveyName,attacki)'>
</div> </div>
<div class="attackbody"> <div class="attackbody">
<table> <table>
<thead> <thead>
<th *ngFor="let itemth of attack.tableth;let tablethi=index;TrackBy:trackByFn"> <th
*ngFor="let itemth of attack.tableth;let tablethi=index;TrackBy:trackByFn">
<input type="text" placeholder="请输入内容" <input type="text" placeholder="请输入内容"
[(ngModel)]="attack.tableth[tablethi]"> [(ngModel)]="attack.tableth[tablethi]">
</th> </th>
@ -433,17 +453,17 @@
</tr> </tr>
</tbody> </tbody>
<tbody></tbody> <tbody></tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<!-- 单位和建筑信息 --> <!-- 单位和建筑信息 -->
<div class="building"></div> <div class="building"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

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

@ -69,12 +69,12 @@
} }
} }
} }
.contentbox { .contentbox {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-top: 66px; padding-top: 66px;
overflow-y: auto; overflow-y: auto;
.leftbox { .leftbox {
position: fixed; position: fixed;
width: 14%; width: 14%;
@ -229,6 +229,7 @@
padding: 10px 10px 0; padding: 10px 10px 0;
.cover { .cover {
width: 100%; width: 100%;
min-height: 780px;
input, input,
select { select {
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
@ -236,6 +237,9 @@
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
} }
input{
width: 140px;
}
p { p {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
@ -627,6 +631,22 @@
margin: 10px 0; margin: 10px 0;
} }
} }
.titleItem{
width: 100%;
height: 36px;
line-height: 36px;
background-color: #2196F3;
text-align: center;
color: white;
}
} }
} }
.noPadding{
padding-top: 10px;
}
.quitPreview{
position: fixed;
top: 10px;
right: 15px;
}
} }

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

@ -22,13 +22,9 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
constructor(private http: HttpClient, private route: ActivatedRoute, public snackBar: MatSnackBar, public dialog: MatDialog) { } constructor(private http: HttpClient, private route: ActivatedRoute, public snackBar: MatSnackBar, public dialog: MatDialog) { }
planName: string //预案名称
planLevel: string//预案级别 planLevel: string//预案级别
ngOnInit(): void { ngOnInit(): void {
this.planName = this.route.snapshot.queryParams.planName
this.planLevel = this.route.snapshot.queryParams.planCategory this.planLevel = this.route.snapshot.queryParams.planCategory
console.log('级别', this.planLevel)
this.getTemplateData()
this.getUnitData() this.getUnitData()
this.getAllBuildings() this.getAllBuildings()
this.tree = { this.tree = {
@ -64,7 +60,8 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
data.items.forEach(element => { data.items.forEach(element => {
if (element.id == this.route.snapshot.queryParams.companyId) { if (element.id == this.route.snapshot.queryParams.companyId) {
this.unitData = element this.unitData = element
console.log('单位列表信息', this.unitData) // console.log('单位列表信息', this.unitData)
this.getTemplateData()
} }
}); });
}) })
@ -73,7 +70,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
selectedItem: string = '封面' selectedItem: string = '封面'
clickTitleItem(item) { clickTitleItem(item) {
this.addNumber = -1 this.addNumber = -1
item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName this.selectedItem = item.groupName
if (this.selectedItem == '重点图示') { if (this.selectedItem == '重点图示') {
this.getAllBuildings() this.getAllBuildings()
this.getSitePlan() this.getSitePlan()
@ -96,7 +93,6 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
this.TwoDPlanList = data.items.filter((item) => { this.TwoDPlanList = data.items.filter((item) => {
return item.planType == 1 return item.planType == 1
}) })
console.log(this.TwoDPlanList)
}) })
} }
@ -110,12 +106,12 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
let companyId = this.unitId let companyId = this.unitId
this.http.get('/api/RealityImageGroups', { this.http.get('/api/RealityImageGroups', {
params: { params: {
companyId: '5e9964caa760a059e84512e9' companyId: this.route.snapshot.queryParams.companyId
} }
}).subscribe((data: any) => { }).subscribe((data: any) => {
this.allRealPicture = data this.allRealPicture = data
this.getAllRealPicture().then(() => { this.getAllRealPicture().then(() => {
console.log('实景图', this.allRealPicture) // console.log('实景图', this.allRealPicture)
}) })
}) })
} }
@ -146,12 +142,39 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
planTemplateData: any planTemplateData: any
//获得模板信息 //获得模板信息
getTemplateData() { getTemplateData() {
this.http.get(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}/WebText`).subscribe(data => { this.http.get(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}/WebText`).subscribe((data: any) => {
console.log('预案内容',data) // console.log('预案内容', data)
// this.planTemplateData = JSON.parse(data.webdata).filter(item => this.planTemplateData = JSON.parse(data.webTextData).filter(item =>
// item.completed == true item.completed == true
// ) )
console.log(this.planTemplateData) // console.log(this.planTemplateData)
if (this.planTemplateData[0].groupName != '封面') {
let obj = {
completed: true,
groupName: "封面",
attribute: {
planNumber: '',
planName: this.route.snapshot.queryParams.planName,
objName: this.unitData.name,
unitNature: this.unitData.buildingTypes[0].name,
planLevel: '',
disasterType: '0',
fireproofingLevel: '',
fireproofingAdminister: this.unitData.organizationName,
putOutFireAdminister: '',
producer: {
name: '',
duty: ''
},
verifier: {
name: '',
duty: ''
},
auditTime: ''
}
}
this.planTemplateData.unshift(obj)
}
this.planTemplateData.forEach(element => { this.planTemplateData.forEach(element => {
if (element.groupName == '重点图示') { if (element.groupName == '重点图示') {
if (!element.attribute) { if (!element.attribute) {
@ -277,7 +300,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
} }
this.buildingName = this.allBuildings[0].name this.buildingName = this.allBuildings[0].name
this.group = this.planTemplateData[0].building[this.clicki].body this.group = this.planTemplateData[0].building[this.clicki].body
console.log(this.planTemplateData) // console.log(this.planTemplateData)
}) })
} }
//获取总平面图 //获取总平面图
@ -292,11 +315,11 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
openPlan(item, index, type?: string) { openPlan(item, index, type?: string) {
sessionStorage.setItem("gisplan", 'look') sessionStorage.setItem("gisplan", 'look')
sessionStorage.setItem("companyId", this.unitId) sessionStorage.setItem("companyId", this.unitId)
console.log(item) // console.log(item)
if(type == '预案'){ if (type == '预案') {
sessionStorage.setItem("planId", item.id) sessionStorage.setItem("planId", item.id)
sessionStorage.setItem("companyId", this.route.snapshot.queryParams.companyId) sessionStorage.setItem("companyId", this.route.snapshot.queryParams.companyId)
sessionStorage.setItem("buildingTypeId",this.route.snapshot.queryParams.unitTypeId) sessionStorage.setItem("buildingTypeId", this.route.snapshot.queryParams.unitTypeId)
sessionStorage.setItem("editable", "0") sessionStorage.setItem("editable", "0")
sessionStorage.setItem("planName", item.name) sessionStorage.setItem("planName", item.name)
sessionStorage.setItem("orName", item.name) sessionStorage.setItem("orName", item.name)
@ -346,7 +369,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
this.planTemplateData[key].attribute[i].tabletr[this.addNumber].tabletd.push('') this.planTemplateData[key].attribute[i].tabletr[this.addNumber].tabletd.push('')
} }
} }
console.log(this.planTemplateData) // console.log(this.planTemplateData)
} }
//灾情设定表格删除一行 //灾情设定表格删除一行
delTd(key, i) { delTd(key, i) {
@ -391,7 +414,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
} }
} }
console.log(this.planTemplateData) // console.log(this.planTemplateData)
} }
} }
//单位概况删除一行 //单位概况删除一行
@ -454,6 +477,15 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
}) })
}) })
} }
//预览
pattern:string = 'edit'
preview(){
this.pattern = 'look'
}
quitPreview(){
this.pattern = 'edit'
}
} }

Loading…
Cancel
Save