shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善]消防设施完善

develop
陈鹏飞 5 years ago
parent
2a77582a1e
commit
ba090d89ee
5 changed files with 153 additions and 107 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. 106
      src/app/ui/fire-fighting-device/fire-fighting-device.component.html
  2. 38
      src/app/ui/fire-fighting-device/fire-fighting-device.component.scss
  3. 111
      src/app/ui/fire-fighting-device/fire-fighting-device.component.ts
  4. 2
      src/index.html
  5. 3
      src/styles.scss

106
src/app/ui/fire-fighting-device/fire-fighting-device.component.html
Unescape View File

@ -15,49 +15,52 @@
<mat-accordion multi>
<mat-expansion-panel disabled>
<mat-expansion-panel-header>
<label class="textContent"></label>
<label class="firstContent"></label>
<label class="textContent">项目</label>
<label class="textContent">照片</label>
<label class="totalContent">总数</label>
<label class="lastTextContent">主要情况</label>
</mat-expansion-panel-header>
</mat-expansion-panel>
<mat-expansion-panel *ngFor="let items of item.facilityItems" disabled [expanded]=items.expanded>
<mat-expansion-panel-header>
<label class="textContent">
<label class="firstContent">
<mat-checkbox (change)='checkedCompany($event,item,items)' [disabled]='items.isBuiltin'></mat-checkbox>
</label>
<label class="textContent">{{items.name}}</label>
<label class="textContent"><a href="javascript:void(0)" (click)='previewImg(items)'>查看图片</a></label>
<label class="totalContent">{{items.total ? items.total : '总数: 0'}}</label>
<label class="lastTextContent" *ngIf="items.isBuiltin">{{items.details}}</label>
<label class="lastTextContent" *ngIf="!items.isBuiltin">
<input type="text" [(ngModel)]="items.details" style="width: 80%;">
<label class="lastTextContent">
<textarea maxlength="250" [(ngModel)]="items.details" style="width: 80%;"></textarea>
</label>
<label><mat-icon (click)='SwitchBoard(items)' *ngIf="items.isBuiltin">keyboard_arrow_down</mat-icon></label>
</mat-expansion-panel-header>
<div class="detailsTable">
<table>
<tr>
<th *ngFor="let header of items.header">{{header}}</th>
</tr>
<tr *ngFor="let body of items.body">
<td *ngFor="let header of items.header">{{body[header]}}</td>
</tr>
</table>
</div>
<div *ngFor="let tableMsg of items.loopTable" class="detailsTable">
<p style="text-align: center; font-size: 16px; margin: 5px 0;">{{tableMsg.name}}</p>
<table>
<tr>
<th *ngFor="let header of tableMsg.header">{{header}}</th>
</tr>
<tr *ngFor="let body of tableMsg.body">
<td *ngFor="let header of tableMsg.header">{{body[header]}}</td>
</tr>
</table>
<div class="overflowTable">
<div class="detailsTable">
<table>
<tr>
<th *ngFor="let header of items.header">{{header}}</th>
</tr>
<tr *ngFor="let body of items.body">
<td *ngFor="let header of items.header">{{body[header]? body[header] : '暂无数据'}}</td>
</tr>
</table>
</div>
<div *ngFor="let tableMsg of items.loopTable" class="detailsTable">
<p style="text-align: center; font-size: 16px; margin: 5px 0;">楼层/区域名称: {{tableMsg.name? tableMsg.name: '暂无名称'}}</p>
<table>
<tr>
<th *ngFor="let header of tableMsg.header">{{header}}</th>
</tr>
<tr *ngFor="let body of tableMsg.body">
<td *ngFor="let header of tableMsg.header">{{body[header]? body[header] : '暂无数据'}}</td>
</tr>
</table>
</div>
</div>
</mat-expansion-panel>
@ -106,49 +109,52 @@
<mat-accordion multi>
<mat-expansion-panel disabled>
<mat-expansion-panel-header>
<label class="textContent"></label>
<label class="firstContent"></label>
<label class="textContent">项目</label>
<label class="textContent">照片</label>
<label class="totalContent">总数</label>
<label class="lastTextContent">主要情况</label>
</mat-expansion-panel-header>
</mat-expansion-panel>
<mat-expansion-panel *ngFor="let items of item.facilityItems" disabled [expanded]=items.expanded>
<mat-expansion-panel-header>
<label class="textContent">
<label class="firstContent">
<mat-checkbox (change)='checkedCompany($event,item,items)' [disabled]='items.isBuiltin'></mat-checkbox>
</label>
<label class="textContent">{{items.name}}</label>
<label class="textContent"><a href="javascript:void(0)" (click)='previewBuildingImg(newItem,items)'>查看图片</a></label>
<label class="totalContent">{{items.total ? items.total : '总数: 0'}}</label>
<label class="lastTextContent" *ngIf="items.isBuiltin">{{items.details}}</label>
<label class="lastTextContent" *ngIf="!items.isBuiltin">
<input type="text" [(ngModel)]="items.details" style="width: 80%;">
<label class="lastTextContent">
<textarea maxlength="250" [(ngModel)]="items.details" style="width: 80%;"></textarea>
</label>
<label><mat-icon (click)='SwitchBuildingBoard(newItem,items)' *ngIf="items.isBuiltin">keyboard_arrow_down</mat-icon></label>
</mat-expansion-panel-header>
<div class="detailsTable">
<table>
<tr>
<th *ngFor="let header of items.header">{{header}}</th>
</tr>
<tr *ngFor="let body of items.body">
<td *ngFor="let header of items.header">{{body[header]}}</td>
</tr>
</table>
</div>
<div *ngFor="let tableMsg of items.loopTable" class="detailsTable">
<p style="text-align: center; font-size: 16px; margin: 5px 0;">{{tableMsg.name}}</p>
<table>
<tr>
<th *ngFor="let header of tableMsg.header">{{header}}</th>
</tr>
<tr *ngFor="let body of tableMsg.body">
<td *ngFor="let header of tableMsg.header">{{body[header]}}</td>
</tr>
</table>
<div class="overflowTable">
<div class="detailsTable">
<table>
<tr>
<th *ngFor="let header of items.header">{{header}}</th>
</tr>
<tr *ngFor="let body of items.body">
<td *ngFor="let header of items.header">{{body[header]? body[header] : '暂无数据'}}</td>
</tr>
</table>
</div>
<div *ngFor="let tableMsg of items.loopTable" class="detailsTable">
<p style="text-align: center; font-size: 16px; margin: 5px 0;">楼层/区域名称: {{tableMsg.name? tableMsg.name : '暂无名称'}}</p>
<table>
<tr>
<th *ngFor="let header of tableMsg.header">{{header}}</th>
</tr>
<tr *ngFor="let body of tableMsg.body">
<td *ngFor="let header of tableMsg.header">{{body[header]? body[header] : '暂无数据'}}</td>
</tr>
</table>
</div>
</div>
</mat-expansion-panel>

38
src/app/ui/fire-fighting-device/fire-fighting-device.component.scss
Unescape View File

@ -18,21 +18,33 @@
//可展开面板每一行css
.mat-expansion-panel-header {
padding: 3px 24px;
}
.firstContent {
width: 5%;
}
.textContent {
width: 15%;
width: 10%;
color: black;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.lastTextContent {
.totalContent {
width: 20%;
color: black;
text-align: center;
white-space: pre-line;
max-height: 48px;
overflow-y: auto;
}
.lastTextContent { //textarea多行文本
width: 50%;
color: black;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
input {
height: 22px;
@ -44,6 +56,8 @@ a {
color: #0000ff;
}
//bottom用户输入框
.InputField {
display: inline-block;
@ -62,12 +76,16 @@ textarea {
resize: none;
}
//表格样式
.detailsTable {
.overflowTable {
width: 95%;
margin: 0 auto 10px;
max-height: 300px;
overflow-y: auto;
}
.detailsTable {
margin: 0 auto 10px;
table {
width: 100%;
text-align: center;
@ -84,15 +102,19 @@ textarea {
}
}
//滚动条样式
::-webkit-scrollbar{
width: 8px;
width: 5px;
background-color: white;
}
::-webkit-scrollbar-thumb{
background-color: #999;
}
//img图片列表页面
.imageList {
width: 100%;

111
src/app/ui/fire-fighting-device/fire-fighting-device.component.ts
Unescape View File

@ -47,11 +47,13 @@ export class FireFightingDeviceComponent implements OnInit {
this.companyEachDetails = data[0].eachDetails
this.companyBuiltInGrouping.forEach(element => { //循环单位内置分组项
element.selectBuiltInGrouping = []
element.facilityItems.forEach(elements => {
element.facilityItems.forEach((elements,index) => {
elements.total = element.facilityCount[index]
elements.expanded = false});
});
}) //http
} //if
})
}
@ -66,27 +68,24 @@ export class FireFightingDeviceComponent implements OnInit {
//保存单位消防设施内置分组项
editCompanyGrouping(e) {
let header = {groupId:e.id}
if (e.facilityItems[e.facilityItems.length-1].isBuiltin) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('数据更新成功','确定',config);
} else {
let data = []
e.facilityItems.forEach((element,index) => {
if (!element.isBuiltin) {
data.push(element)
if (index==e.facilityItems.length-1) {
this.http.post('/api/CompanyAccount/CompanyFacilityItems/Batch',data,{params:header}).subscribe(data=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('数据更新成功','确定',config); })
} //if
} //if
}); //forEach
}
let data = []
e.facilityItems.forEach((element,index) => {
let msg = {
isBuiltin: element.isBuiltin,
details: element.details,
name: element.name,
isEachFloor: element.isEachFloor,
order: element.order}
data.push(msg)
if (index==e.facilityItems.length-1) {
this.http.post('/api/CompanyAccount/CompanyFacilityItems/Batch',data,{params:header}).subscribe(data=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('数据更新成功','确定',config);
}) }
}); //forEach
}
//checked单位消防设施内置分组项时
@ -159,8 +158,12 @@ export class FireFightingDeviceComponent implements OnInit {
data[key].forEach(element => { //表格内容
let everyBody = {}
element.propertyInfos.forEach((elements,index) => {
if (elements.propertyType!=3 && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType==6) { everyBody[elements.propertyName] = elements.propertyValue=='1'?'是':'否' }
if (elements.propertyType!=3 && elements.propertyName=='图片') {
let imgLength = []
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
everyBody[elements.propertyName] = imgLength.length+elements.physicalUnit }
});
tableMsg.body.push(everyBody)
});
@ -179,8 +182,12 @@ export class FireFightingDeviceComponent implements OnInit {
data.forEach(element => { //表格内容
let everyBody = {}
element.propertyInfos.forEach((elements,index) => {
if (elements.propertyType!=3 && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType==6) { everyBody[elements.propertyName] = elements.propertyValue=='1'?'是':'否' }
if (elements.propertyType!=3 && elements.propertyName=='图片') {
let imgLength = []
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
everyBody[elements.propertyName] = imgLength.length+elements.physicalUnit }
});
e.body.push(everyBody)
});
@ -213,13 +220,16 @@ export class FireFightingDeviceComponent implements OnInit {
element.buildingOptionalGroups = data[0].summary.buildingOptionalGroups
element.buildingDetails = data[0].details
element.buildingEachDetails = data[0].eachDetails
element.buildingFacilityGroups.forEach(elements => { //循环每个建筑内置分组项
element.buildingFacilityGroups.forEach((elements) => { //循环每个建筑内置分组项
elements.selectBuiltInGrouping = []
elements.facilityItems.forEach(newElement => { newElement.expanded = false });
elements.facilityItems.forEach((newElement,index) => {
newElement.total = elements.facilityCount[index]
newElement.expanded = false });
});
})
});
}
//创建建筑消防设施内置分组项
@ -234,27 +244,24 @@ export class FireFightingDeviceComponent implements OnInit {
//保存建筑消防设施内置分组项
editBuildingGrouping (e,item) {
let header = {buildingId:e.id, groupId:item.id}
if (item.facilityItems[item.facilityItems.length-1].isBuiltin) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('数据更新成功','确定',config);
} else {
let data = []
item.facilityItems.forEach((element,index) => {
if (!element.isBuiltin) {
data.push(element)
if (index==item.facilityItems.length-1) {
this.http.post('/api/CompanyAccount/BuildingFacilityItems/Batch',data,{params:header}).subscribe(data=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('数据更新成功','确定',config); })
} //if
let data = []
item.facilityItems.forEach((element,index) => {
let msg = {
isBuiltin: element.isBuiltin,
details: element.details,
name: element.name,
isEachFloor: element.isEachFloor,
order: element.order}
data.push(msg)
if (index==item.facilityItems.length-1) {
this.http.post('/api/CompanyAccount/BuildingFacilityItems/Batch',data,{params:header}).subscribe(data=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('数据更新成功','确定',config);
}) }
}); //forEach
} //if
}); //forEach
}
}
//删除建筑消防设施内置分组项
@ -318,8 +325,12 @@ export class FireFightingDeviceComponent implements OnInit {
data[key].forEach(element => { //表格内容
let everyBody = {}
element.propertyInfos.forEach((elements,index) => {
if (elements.propertyType!=3 && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType==6) { everyBody[elements.propertyName] = elements.propertyValue=='1'?'是':'否' }
if (elements.propertyType!=3 && elements.propertyName=='图片') {
let imgLength = []
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
everyBody[elements.propertyName] = imgLength.length+elements.physicalUnit }
});
tableMsg.body.push(everyBody)
});
@ -338,8 +349,12 @@ export class FireFightingDeviceComponent implements OnInit {
data.forEach(element => { //表格内容
let everyBody = {}
element.propertyInfos.forEach((elements,index) => {
if (elements.propertyType!=3 && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) { everyBody[elements.propertyName] = elements.propertyValue+elements.physicalUnit }
if (elements.propertyType==6) { everyBody[elements.propertyName] = elements.propertyValue=='1'?'是':'否' }
if (elements.propertyType!=3 && elements.propertyName=='图片') {
let imgLength = []
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} })
everyBody[elements.propertyName] = imgLength.length+elements.physicalUnit }
});
e.body.push(everyBody)
});

2
src/index.html
Unescape View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>数据采集平台</title>

3
src/styles.scss
Unescape View File

@ -57,6 +57,9 @@ table td.mat-footer-cell:last-of-type{
height: 100%;
overflow-y: auto;
}
.mat-content { //可展开面板垂直居中
align-items: center;
}
//x轴滚动条隐藏
.example-sidenav-content {

Write Preview
Loading…
Cancel
Save