chenjingyu
4 years ago
9 changed files with 467 additions and 24 deletions
@ -0,0 +1,23 @@ |
|||||||
|
<div mat-dialog-title>创建建筑功能分区</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑名称:"> |
||||||
|
<mat-option *ngFor="let item of data" [value]="item.id"> |
||||||
|
{{item.name}} |
||||||
|
</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<p style="font-size: 14px;" *ngIf="!data.length">暂无数据,请您创建基本信息建筑模块</p> |
||||||
|
|
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
<div class="content"> |
||||||
|
<div style="margin-top:16px"> |
||||||
|
<!-- <mat-icon title="创建" (click)='addPartition()'>add_circle_outline</mat-icon> --> |
||||||
|
</div> |
||||||
|
|
||||||
|
<mat-tab-group class="tableContent"> |
||||||
|
|
||||||
|
<mat-tab label="单位功能分区"> |
||||||
|
<div style="overflow: auto; height: 100%;"> |
||||||
|
<div style="margin: 30px 0 25px 5%;"> |
||||||
|
<!-- <mat-icon title="创建" (click)='addCompany()'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="保存" style="margin-left: 25px;" (click)='preservation()'>description</mat-icon> |
||||||
|
<mat-icon title="删除" style="margin-left: 25px;" (click)='delete()'>delete</mat-icon> --> |
||||||
|
</div> |
||||||
|
<table mat-table [dataSource]="companyFunctionalZoning"> |
||||||
|
|
||||||
|
<ng-container matColumnDef="checked"> |
||||||
|
<th mat-header-cell *matHeaderCellDef></th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-checkbox disabled (change)='changeCompany(element,$event)'></mat-checkbox> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="region"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>区域</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input readonly matInput [(ngModel)]="element.region" type="text" maxlength="20"> |
||||||
|
</mat-form-field> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="measure"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>面积</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input readonly matInput type="number" [(ngModel)]="element.area" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入数字"> |
||||||
|
</mat-form-field> |
||||||
|
<label style="margin-left: 5px;">m²</label> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="situation"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>基本情况</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<textarea readonly [(ngModel)]="element.details" maxlength="250"></textarea> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
<p style="width: 100%; margin-top: 30px; text-align: center;" *ngIf="!companyFunctionalZoning.length">暂无数据</p> |
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
<mat-tab label="{{item.name}}" *ngFor="let item of allBuildingFunctionalZoning;let key = index"> |
||||||
|
<div style="overflow: auto; height: 100%;"> |
||||||
|
<div style="margin: 30px 0 25px 5%;"> |
||||||
|
<!-- <mat-icon title="创建" (click)='addBuilding(item,key)'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="保存" (click)='preservationBuilding(item,key)' style="margin-left: 25px;">description</mat-icon> |
||||||
|
<mat-icon title="删除" (click)='deleteBuilding(item,key)' style="margin-left: 25px;">delete</mat-icon> --> |
||||||
|
</div> |
||||||
|
<table mat-table [dataSource]="item.functionalZoning"> |
||||||
|
|
||||||
|
<ng-container matColumnDef="checked"> |
||||||
|
<th mat-header-cell *matHeaderCellDef></th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-checkbox disabled (change)='changeBuilding(element,$event,key)'></mat-checkbox> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="region"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>区域</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input readonly matInput [(ngModel)]="element.region" type="text" maxlength="20"> |
||||||
|
</mat-form-field> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="measure"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>面积</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input readonly matInput type="number" [(ngModel)]="element.area" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入数字"> |
||||||
|
</mat-form-field> |
||||||
|
<label style="margin-left: 5px;">m²</label> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="situation"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>基本情况</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<textarea readonly [(ngModel)]="element.details" maxlength="250"></textarea> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
</div> |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
overflow-y: auto; |
||||||
|
padding: 10px 0 0 10px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.tableContent { |
||||||
|
margin-left: 10px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
table { |
||||||
|
width: 90%; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
textarea { |
||||||
|
border-radius: 5px; |
||||||
|
padding: 5px; |
||||||
|
width: 80%; |
||||||
|
height: 36px; |
||||||
|
resize: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//icon统一样式 |
||||||
|
.mat-icon { |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
@ -0,0 +1,248 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { Router,ActivatedRoute } from '@angular/router'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-function-division-look', |
||||||
|
templateUrl: './function-division.component.html', |
||||||
|
styleUrls: ['./function-division.component.scss'] |
||||||
|
}) |
||||||
|
export class FunctionDivisionLookComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.companyId = this.route.snapshot.queryParams.id |
||||||
|
this.getAllCompany() |
||||||
|
this.getAllBuilding() |
||||||
|
} |
||||||
|
|
||||||
|
displayedColumns: string[] = ['checked', 'region', 'measure', 'situation']; |
||||||
|
|
||||||
|
companyId:any; //单位编号
|
||||||
|
companyFunctionalZoning:any=[]; //所有单位功能分区属性
|
||||||
|
selectFunctionalZoning:any=[]; //选中的单位功能分区属性
|
||||||
|
|
||||||
|
//获得所有单位功能分区属性
|
||||||
|
getAllCompany () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.http.get('/api/CompanyFunctionalDivisions',{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.companyFunctionalZoning = data |
||||||
|
this.selectFunctionalZoning = [] |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//新建单位功能分区属性
|
||||||
|
addCompany () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
let data = {companyId:companyId, region:'', area:0, details:''} |
||||||
|
this.companyFunctionalZoning.push(data) |
||||||
|
this.preservation() |
||||||
|
} |
||||||
|
|
||||||
|
//保存单位功能分区属性
|
||||||
|
preservation () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
// console.log(123,companyId)
|
||||||
|
if (this.companyFunctionalZoning.length) { |
||||||
|
this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe(data=>{ |
||||||
|
this.getAllCompany() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//单位功能分区checked选择
|
||||||
|
changeCompany (ele,e) { |
||||||
|
if (e.checked) { |
||||||
|
this.selectFunctionalZoning.push(ele.id) |
||||||
|
} else { |
||||||
|
this.selectFunctionalZoning.splice(this.selectFunctionalZoning.findIndex(item => item === ele.id), 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//删除单位功能分区属性
|
||||||
|
delete () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
if (this.selectFunctionalZoning.length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe(data=>{ |
||||||
|
const options = { |
||||||
|
headers: new HttpHeaders({'Content-Type': 'application/json',}), |
||||||
|
body:this.selectFunctionalZoning} |
||||||
|
this.http.delete(`/api/CompanyFunctionalDivisions/Batch`,options).subscribe(data=>{ |
||||||
|
this.getAllCompany() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} else if (!this.selectFunctionalZoning.length) { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择单位功能分区','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//建筑功能分区↓
|
||||||
|
allBuilding:any = []; //所有建筑
|
||||||
|
allBuildingFunctionalZoning:any = []; //所有建筑的功能分区
|
||||||
|
selectBuildingFunctionalZoning:any = []; //选中的建筑的功能分区
|
||||||
|
|
||||||
|
//获得所有建筑
|
||||||
|
getAllBuilding () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.http.get(`/api/Buildings`,{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
if (data.length) { |
||||||
|
this.allBuilding = data |
||||||
|
this.allBuilding.forEach(element => { //为每个建筑添加一个 功能分区对象
|
||||||
|
element.functionalZoning = null |
||||||
|
}); |
||||||
|
this.getAllBuildingFunctionalZoning() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获得所有建筑的功能分区
|
||||||
|
getAllBuildingFunctionalZoning () { |
||||||
|
this.selectBuildingFunctionalZoning = [] |
||||||
|
this.allBuildingFunctionalZoning = [] |
||||||
|
this.allBuilding.forEach(element => { |
||||||
|
let data={buildingId: element.id} |
||||||
|
this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ |
||||||
|
if (data.length) { |
||||||
|
element.functionalZoning = data |
||||||
|
this.selectBuildingFunctionalZoning.push([]) //拥有建筑功能分区的提前push空数组
|
||||||
|
this.allBuildingFunctionalZoning.push(element) } |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//封装函数刷新当前建筑功能分区
|
||||||
|
updateCurrent (e,index) { |
||||||
|
let data= {buildingId: e.id} |
||||||
|
this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ |
||||||
|
this.selectBuildingFunctionalZoning[index] = [] |
||||||
|
this.allBuildingFunctionalZoning[index].functionalZoning = data |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//创建建筑功能分区
|
||||||
|
addPartition () { |
||||||
|
} |
||||||
|
|
||||||
|
//创建建筑功能分区属性
|
||||||
|
addBuilding (e,index) { |
||||||
|
let data = {buildingId:e.id, region:'', area:0, details:''} |
||||||
|
this.http.post('/api/BuildingFunctionalDivisions',data).subscribe(data=>{ |
||||||
|
this.preservationBuilding(e,index) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//保存建筑功能分区属性
|
||||||
|
preservationBuilding (e,index) { |
||||||
|
let data ={buildingId:e.id} |
||||||
|
this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ |
||||||
|
this.updateCurrent(e,index) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//建筑功能分区checked选择
|
||||||
|
changeBuilding (ele,e,index) { |
||||||
|
if (e.checked) { |
||||||
|
this.selectBuildingFunctionalZoning[index].push(ele.id) |
||||||
|
} else { |
||||||
|
this.selectBuildingFunctionalZoning[index].splice(this.selectBuildingFunctionalZoning[index].findIndex(item => item === ele.id), 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//删除建筑功能分区
|
||||||
|
deleteBuilding (e,index) { |
||||||
|
if (this.selectBuildingFunctionalZoning[index].length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
let data ={buildingId:e.id} |
||||||
|
this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ |
||||||
|
const options = { |
||||||
|
headers: new HttpHeaders({'Content-Type': 'application/json',}), |
||||||
|
body:this.selectBuildingFunctionalZoning[index], |
||||||
|
params:{buildingId:e.id}} |
||||||
|
this.http.delete(`/api/BuildingFunctionalDivisions/Batch`,options).subscribe(data=>{ |
||||||
|
this.selectBuildingFunctionalZoning[index].forEach((element,newIndex) => { |
||||||
|
this.allBuildingFunctionalZoning[index].functionalZoning.splice(this.allBuildingFunctionalZoning[index].functionalZoning.findIndex(item=>item.id==element),1) |
||||||
|
if (newIndex==this.selectBuildingFunctionalZoning[index].length-1) { |
||||||
|
if (this.allBuildingFunctionalZoning[index].functionalZoning.length) { |
||||||
|
this.updateCurrent(e,index) |
||||||
|
} else { |
||||||
|
this.selectBuildingFunctionalZoning.splice(index,1) |
||||||
|
this.allBuildingFunctionalZoning.splice(index,1)} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} else if (!this.selectBuildingFunctionalZoning[index].length) { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择建筑功能分区','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//暂时无用
|
||||||
|
@Component({ |
||||||
|
selector: 'app-addPartitionAttribute', |
||||||
|
templateUrl: './addPartitionAttribute.html', |
||||||
|
styleUrls: ['./function-division.component.scss'] |
||||||
|
}) |
||||||
|
export class addPartitionAttribute2 { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<addPartitionAttribute2>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue