shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]增加预览模式

tangshan
邵佳豪 4 years ago
parent
b3e28a0e7a
commit
b6f8b3191b
4 changed files with 231 additions and 161 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

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

@ -1,16 +1,13 @@
<div class="bigbox">
<div class="titlebox">
<div class="titlebox" *ngIf="pattern == 'edit'">
<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)"
[ngClass]="{'selectedItem': selectedItem == item.groupName}" [title]="item.groupName">
{{key + 2}}.{{item.groupName}}
{{key + 1}}.{{item.groupName}}
</div>
</div>
<div class="btnbox">
<button mat-stroked-button>
<button mat-stroked-button (click)="preview()">
<mat-icon>visibility</mat-icon> 预览
</button>
<button mat-flat-button color="primary">
@ -18,8 +15,12 @@
</button>
</div>
</div>
<div class="contentbox">
<div class="leftbox">
<button mat-stroked-button (click)="quitPreview()" class="quitPreview">
<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 class="keyImgTitle">
重点图示
@ -129,9 +130,7 @@
<div class="content">
<div class="contentitem">
<div>
<img (click)="openPlan(1,-1,'水源')"
src='/assets/images/2D.jpg'
alt="">
<img (click)="openPlan(1,-1,'水源')" src='/assets/images/2D.jpg' alt="">
</div>
<p>交通水源</p>
</div>
@ -158,8 +157,7 @@
<div class="content">
<div class="contentitem" *ngFor="let TwoDPlan of TwoDPlanList">
<div>
<img (click)="openPlan(TwoDPlan,-1,'预案')"
src='/assets/images/2Dplan.png'
<img (click)="openPlan(TwoDPlan,-1,'预案')" src='/assets/images/2Dplan.png'
alt="">
</div>
<p>{{TwoDPlan.name}}</p>
@ -170,12 +168,13 @@
</div>
</div>
</div>
<div class="leftBuilding" *ngIf="selectedItem == '单位概况'">
<div class="buildingHead" >
<div *ngIf="selectedItem == '单位概况'" class="leftBuilding">
<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)'>
<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>
@ -183,111 +182,114 @@
</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">
<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"
*ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'&&item.groupName!='特别警示'&&item.groupName!='处置要点'">
<div class="boxHead">
*ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'&&item.groupName!='特别警示'&&item.groupName!='处置要点'&&item.groupName!='封面'">
<div class="titleItem">
<span>{{item.groupName}}</span>
</div>
<div class="boxBody" *ngFor="let element of item.attribute;let i=index">
@ -341,7 +343,11 @@
</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="keyImgTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
@ -354,7 +360,7 @@
</mat-icon>
<img [src]="imgUrl" alt="">
</div>
<div class="uploadBtn">
<div class="uploadBtn" *ngIf="pattern == 'edit'">
<button mat-stroked-button>
<mat-icon>add</mat-icon>上传图片
</button>
@ -363,13 +369,16 @@
</div>
</div>
<!-- 增加分组 -->
<div class="addkeyImgItem">
<div class="addkeyImgItem" *ngIf="pattern == 'edit'">
<button mat-flat-button color="primary" (click)="addkeyImgItem(item)">
增加分组
</button>
</div>
</div>
<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="disposalPointTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
@ -377,7 +386,8 @@
</mat-icon>
</div>
<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>
<!-- 增加分组 -->
@ -388,16 +398,23 @@
</div>
</div>
<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="disposalPointTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
</div>
<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 class="unit" *ngIf="item.groupName == '单位概况'">
<div class="titleItem">
<span>单位基本信息</span>
</div>
<div class="unithead">
<span>{{buildingName}}</span>
</div>
@ -412,13 +429,16 @@
<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)'>
<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">
<th
*ngFor="let itemth of attack.tableth;let tablethi=index;TrackBy:trackByFn">
<input type="text" placeholder="请输入内容"
[(ngModel)]="attack.tableth[tablethi]">
</th>
@ -433,17 +453,17 @@
</tr>
</tbody>
<tbody></tbody>
</table>
</table>
</div>
</div>
</div>
<!-- 单位和建筑信息 -->
<div class="building"></div>
</div>
</div>
</div>
</div>
</div>

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

@ -69,12 +69,12 @@
}
}
}
.contentbox {
height: 100%;
box-sizing: border-box;
padding-top: 66px;
overflow-y: auto;
.leftbox {
position: fixed;
width: 14%;
@ -229,6 +229,7 @@
padding: 10px 10px 0;
.cover {
width: 100%;
min-height: 780px;
input,
select {
border: 1px solid #ebebeb;
@ -236,6 +237,9 @@
height: 28px;
line-height: 28px;
}
input{
width: 140px;
}
p {
height: 28px;
line-height: 28px;
@ -627,6 +631,22 @@
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
Unescape View File

@ -22,13 +22,9 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
constructor(private http: HttpClient, private route: ActivatedRoute, public snackBar: MatSnackBar, public dialog: MatDialog) { }
planName: string //预案名称
planLevel: string//预案级别
ngOnInit(): void {
this.planName = this.route.snapshot.queryParams.planName
this.planLevel = this.route.snapshot.queryParams.planCategory
console.log('级别', this.planLevel)
this.getTemplateData()
this.getUnitData()
this.getAllBuildings()
this.tree = {
@ -64,7 +60,8 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
data.items.forEach(element => {
if (element.id == this.route.snapshot.queryParams.companyId) {
this.unitData = element
console.log('单位列表信息', this.unitData)
// console.log('单位列表信息', this.unitData)
this.getTemplateData()
}
});
})
@ -73,7 +70,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
selectedItem: string = '封面'
clickTitleItem(item) {
this.addNumber = -1
item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
this.selectedItem = item.groupName
if (this.selectedItem == '重点图示') {
this.getAllBuildings()
this.getSitePlan()
@ -96,7 +93,6 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
this.TwoDPlanList = data.items.filter((item) => {
return item.planType == 1
})
console.log(this.TwoDPlanList)
})
}
@ -110,12 +106,12 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
let companyId = this.unitId
this.http.get('/api/RealityImageGroups', {
params: {
companyId: '5e9964caa760a059e84512e9'
companyId: this.route.snapshot.queryParams.companyId
}
}).subscribe((data: any) => {
this.allRealPicture = data
this.getAllRealPicture().then(() => {
console.log('实景图', this.allRealPicture)
// console.log('实景图', this.allRealPicture)
})
})
}
@ -146,12 +142,39 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
planTemplateData: any
//获得模板信息
getTemplateData() {
this.http.get(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}/WebText`).subscribe(data => {
console.log('预案内容',data)
// this.planTemplateData = JSON.parse(data.webdata).filter(item =>
// item.completed == true
// )
console.log(this.planTemplateData)
this.http.get(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}/WebText`).subscribe((data: any) => {
// console.log('预案内容', data)
this.planTemplateData = JSON.parse(data.webTextData).filter(item =>
item.completed == true
)
// 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 => {
if (element.groupName == '重点图示') {
if (!element.attribute) {
@ -277,7 +300,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
}
this.buildingName = this.allBuildings[0].name
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) {
sessionStorage.setItem("gisplan", 'look')
sessionStorage.setItem("companyId", this.unitId)
console.log(item)
if(type == '预案'){
// console.log(item)
if (type == '预案') {
sessionStorage.setItem("planId", item.id)
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("planName", 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('')
}
}
console.log(this.planTemplateData)
// console.log(this.planTemplateData)
}
//灾情设定表格删除一行
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'
}
}

Write Preview
Loading…
Cancel
Save