Browse Source

[完善]消防设施和实景图更新版本

master
邵佳豪 4 years ago
parent
commit
8c75906ecd
  1. 99
      src/app/ui/fire-fighting-device/fire-fighting-device.component.html
  2. 1
      src/app/ui/fire-fighting-device/fire-fighting-device.component.scss
  3. 8
      src/app/ui/fire-fighting-device/fire-fighting-device.component.ts
  4. 8
      src/app/ui/realistic-picture/realistic-picture.component.html
  5. 8
      src/app/ui/realistic-picture/realistic-picture.component.scss
  6. 141
      src/app/ui/realistic-picture/realistic-picture.component.ts
  7. 7
      src/styles.scss

99
src/app/ui/fire-fighting-device/fire-fighting-device.component.html

@ -1,101 +1,6 @@
<div class="content">
<div class="content" id="firefightingdevice">
<mat-tab-group (selectedIndexChange)="selectedChange($event)">
<!-- <mat-tab label="单位消防设施">
<div class="contentBox">
<p style="width: 100%; margin: 30px auto; text-align: center;" *ngIf="!companyBuiltInGrouping.length">暂无数据,请完善单位基本信息</p>
<div style="width: 100%;margin-top: 25px;" *ngFor="let item of companyBuiltInGrouping;let key = index">
<h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3>
<div style="margin-bottom: 10px;">
<mat-icon title="创建" (click)='addCompanyGrouping(item)'>add_circle_outline</mat-icon>
<mat-icon title="保存" style="margin-left: 25px;" (click)='editCompanyGrouping(item)'>description</mat-icon>
<mat-icon title="删除" style="margin-left: 25px;" (click)='deleteCompanyGrouping(item)'>delete</mat-icon>
</div>
<div>
<mat-accordion multi>
<mat-expansion-panel disabled>
<mat-expansion-panel-header>
<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="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">
<textarea maxlength="999" [(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="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>
</mat-accordion>
</div>
</div>
<div style="width: 100%;margin-top: 25px;" *ngFor="let item of companyOptionalGrouping;let key = index">
<mat-accordion multi>
<mat-expansion-panel>
<mat-expansion-panel-header>
<h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3>
<mat-icon title="保存" style="margin-left: 25px;" (click)='editCompanyOptional($event,item)'>description</mat-icon>
</mat-expansion-panel-header>
<div *ngFor="let items of item.propertyInfos" class="InputField">
<label>{{items.propertyName}}:</label>
<input type="text" *ngIf="items.propertyType!=1&&items.propertyType!=2&&items.propertyType!=4&&items.propertyType!=6"
[(ngModel)]="items.propertyValue" name="propertyValue">
<textarea maxlength="999" *ngIf="items.propertyType==1" [(ngModel)]="items.propertyValue" name="propertyValue"></textarea>
<input type="number" *ngIf="items.propertyType==2 ||items.propertyType==4" [(ngModel)]="items.propertyValue" name="propertyValue">
<mat-radio-group *ngIf="items.propertyType==6" [(ngModel)]="items.propertyValue" name="propertyValue">
<mat-radio-button style="margin-left: 5px;" [value]='radio.value' *ngFor="let radio of singleElection">{{radio.name}}</mat-radio-button>
</mat-radio-group>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-tab> -->
<mat-tab label="{{newItem.name}}" *ngFor="let newItem of allBuildingGrouping">
<div class="contentBox">
@ -121,7 +26,7 @@
</mat-expansion-panel>
<mat-expansion-panel *ngFor="let items of item.facilityItems" disabled [expanded]=items.expanded>
<mat-expansion-panel-header>
<mat-expansion-panel-header class="expansionheader">
<label class="firstContent">
<mat-checkbox (change)='checkedCompany($event,item,items)' [disabled]='items.isBuiltin'>
</mat-checkbox>

1
src/app/ui/fire-fighting-device/fire-fighting-device.component.scss

@ -38,7 +38,6 @@
color: black;
text-align: center;
white-space: pre-line;
max-height: 48px;
overflow-y: auto;
}
.lastTextContent { //textarea多行文本

8
src/app/ui/fire-fighting-device/fire-fighting-device.component.ts

@ -54,7 +54,6 @@ export class FireFightingDeviceComponent implements OnInit {
});
}) //http
} //if
})
}
@ -484,17 +483,15 @@ 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
count: element.total || '',
description: element.details || ''
})
}
}
}
return body
}
@ -529,6 +526,7 @@ export class FireFightingDeviceComponent implements OnInit {
} else if (item.name == '自动消防设施') {
putBody = returnBody(this.automaticFireProtectionFacility, '自动消防设施')
}
console.log('putBody', putBody)
if (putBody.length != 0) {
this.http.put('/api/CompanyAccount/FacilityStatUpdate', putBody, {
params: {

8
src/app/ui/realistic-picture/realistic-picture.component.html

@ -8,7 +8,7 @@
<mat-icon title="删除" (click)='delete()'>delete</mat-icon>
</div>
</div>
<div>
<div style="box-sizing: border-box;padding-top: 20px;">
<div *ngFor="let item of allRealPicture,let key=index" class="material"
[ngClass]="{'leftFile': selectRealIndex===key}" (click)="changeReal(item,key)">
<mat-icon class="btn">folder</mat-icon><span>{{item.name}}</span>
@ -23,7 +23,7 @@
<div class="topBox">
<div>
<span class="title" *ngIf="selectReal">{{selectReal.name}}</span>
<button mat-raised-button color="primary" class="uploadFileFixed" *ngIf="!isLoading">
<button mat-raised-button color="primary" class="uploadFileFixed" *ngIf="!isLoading && selectReal && selectReal.id != '重点部位' && selectReal.id != '安全出口'">
上传图片
<input type="file" id="uploadFile" class="uploadFile" (change)='uploadFile($event)' ng2FileSelect [uploader]="uploader" accept="image/*">
</button>
@ -42,8 +42,8 @@
<div class="fixedImg"><img [src]="item.newImageUrl" (click)='operation(item,key)' [ngClass]="{'selectImg': item.checked}"></div>
<label style="margin-left: 5px;">图片名称:</label>
<input type="text" style="margin-left: 10px;" [(ngModel)]="item.nameStart" maxlength="20">
<a href="javascript:" style="margin-left: 5px;" (click)='preservationImg(item)'>保存</a>
<a href="javascript:" style="margin-left: 5px;" (click)="deleteImg(item)">删除</a>
<a *ngIf="selectReal.id != '重点部位'&& selectReal.id != '安全出口'" href="javascript:" style="margin-left: 5px;" (click)='preservationImg(item)'>保存</a>
<a *ngIf="selectReal.id != '重点部位'&& selectReal.id != '安全出口'" href="javascript:" style="margin-left: 5px;" (click)="deleteImg(item)">删除</a>
</div>
<p style="width: 100px;margin: 30px auto;" *ngIf="!allImages.length">暂无数据</p>

8
src/app/ui/realistic-picture/realistic-picture.component.scss

@ -49,11 +49,13 @@
.material {
cursor:pointer;
height: 30px;
line-height: 26px;
height: 35px;
line-height: 35px;
font-size: 16px;
margin-top: 10px;
padding-left: 15px;
.mat-icon {
vertical-align:super;
}
span {
max-width: 200px;
display: inline-block;

141
src/app/ui/realistic-picture/realistic-picture.component.ts

@ -29,6 +29,17 @@ export class RealisticPictureComponent implements OnInit {
this.companyId = sessionStorage.getItem('companyId')
this.http.get('/api/CompanyAccount/RealityImageGroups').subscribe((data: any) => {
this.allRealPicture = data
this.allRealPicture.unshift({
companyId: sessionStorage.getItem('companyId'),
id: '重点部位',
name: "重点部位",
realityImages: null
}, {
companyId: sessionStorage.getItem('companyId'),
id: '安全出口',
name: "安全出口",
realityImages: null
})
this.selectReal = data[0]
this.getAllRealPicture()
})
@ -67,25 +78,65 @@ export class RealisticPictureComponent implements OnInit {
//获取实景图分组对应实景图
getAllRealPicture() {
if (this.selectReal) {
let data ={
if (this.selectReal.id == '安全出口') {
let params = {
companyId: this.selectReal.companyId,
PageNumber: this.PageNumber || 1,
pageSize: this.pageSize,
}
this.http.get('/api/CompanyAccount/GetCompanySafetyExitImages', { params: params }).subscribe((data: any) => {
// console.log('当前单位安全出口', data)
this.allImages = data.items
this.length = data.totalCount
this.pageSize = this.pageSize
this.downloadList = []
this.allImages.forEach(element => { //每张图片设置选中状态为false
element.newImageUrl = `${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` //处理图片URL地址
element.nameStart = element.name
element.checked = false //图片是否选中布尔值
});
})
} else {
let data
if (this.selectReal.id == '重点部位') {
data = {
groupId: this.selectReal.id,
// companyId: this.selectReal.companyId,
PageNumber: this.PageNumber || 1,
pageSize: this.pageSize,
}
} else {
data = {
groupId: this.selectReal.id,
PageNumber: this.PageNumber || 1,
pageSize: this.pageSize,
}
}
this.http.get('/api/CompanyAccount/RealityImages', { params: data }).subscribe((data: any) => {
this.allImages = data.items
this.length = data.totalCount
this.pageSize = data.pageSize
this.downloadList = []
this.allImages.forEach(element => { //每张图片设置选中状态为false
// element.newImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` //处理图片URL地址
if (this.selectReal.id == '重点部位') {
element.newImageUrl = `${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
element.nameStart = element.name
} else {
element.newImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` //处理图片URL地址
element.checked = false //图片是否选中布尔值
element.nameStart = element.name.substring(0, element.name.lastIndexOf(".")); //图片名称前缀
}
element.checked = false //图片是否选中布尔值
// element.nameStart = element.name.substring(0,element.name.lastIndexOf(".")); //图片名称前缀
element.nameEnd = element.name.substring(element.name.lastIndexOf("."), element.name.length); //图片名称后缀
});
})
}
}
}
//切换左侧实景图文件
@ -116,11 +167,15 @@ export class RealisticPictureComponent implements OnInit {
else { this.downloadList.splice(this.downloadList.findIndex(item => item.id === e.id), 1) }
} else { //预览图片
let data = {
selectReal: this.selectReal,
allImages: this.allImages,
imgIndex: index}
imgIndex: index
}
let dialogRef = this.dialog.open(previewImg,
{width: '1600px',
height:'900px',data});
{
width: '1600px',
height: '900px', data
});
dialogRef.afterClosed().subscribe();
}
@ -147,12 +202,30 @@ export class RealisticPictureComponent implements OnInit {
//删除实景图文件
delete() {
if(this.selectReal.name == '重点部位' || this.selectReal.name == '安全出口' || this.selectReal.name == '外观'){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('内置项不允许删除', '确定', config);
return
}
if (this.selectReal) {
let isDelete = confirm('您确定要删除吗')
if (isDelete) {
this.http.delete(`/api/CompanyAccount/RealityImageGroups/${this.selectReal.id}`).subscribe(data => {
this.http.get('/api/CompanyAccount/RealityImageGroups').subscribe((data: any) => {
this.allRealPicture = data
this.allRealPicture.unshift({
companyId: sessionStorage.getItem('companyId'),
id: '重点部位',
name: "重点部位",
realityImages: null
}, {
companyId: sessionStorage.getItem('companyId'),
id: '安全出口',
name: "安全出口",
realityImages: null
})
this.selectReal = data[this.selectRealIndex]
this.allImages = []
this.getAllRealPicture()
@ -250,7 +323,8 @@ export class RealisticPictureComponent implements OnInit {
this.addRealImg()
} else { // 上传文件后获取服务器返回的数据错误
let tempRes = JSON.parse(response);
}};
}
};
} else if (file && fileSize > shardSize && fileSize < maxdSize) { //上传文件>5MB时,分块上传
let data = { filename: file.name }
this.isLoading = true
@ -283,7 +357,8 @@ export class RealisticPictureComponent implements OnInit {
this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
let msg = {
"partNumber": data.partNumber || null,
"eTag": data.eTag || null}
"eTag": data.eTag || null
}
resolve(msg) // 调用 promise 内置方法处理成功
})
});
@ -331,28 +406,45 @@ export class RealisticPictureComponent implements OnInit {
this.isLoading = true
for (let i = 0; i < this.downloadList.length; i++) {
let result = await new Promise((result, reject) => {
this.http.get(`/api/Objects/PlanPlatform/${this.downloadList[i].imageUrl}`,{responseType: 'blob'},).subscribe(data=>{
// this.http.get(`/api/Objects/PlanPlatform/${this.downloadList[i].imageUrl}`,{responseType: 'blob'},).subscribe(data=>{
let url
if (this.selectReal.id == '重点部位') {
url = this.downloadList[i].imageUrl
} else {
url = `/api/Objects/PlanPlatform/${this.downloadList[i].imageUrl}`
}
this.http.get(url, { responseType: 'blob' },).subscribe((data: any) => {
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", this.downloadList[i].name);
// link.setAttribute("download", this.downloadList[i].name);
let imgName
if (this.selectReal.id == '重点部位') {
imgName = this.downloadList[i].name + '.' + data.type.split('/')[data.type.split('/').length - 1]
} else {
imgName = this.downloadList[i].name
}
link.setAttribute("download", imgName);
document.body.appendChild(link);
link.click();
result('success')})
result('success')
})
})
if (i == this.downloadList.length - 1) { //判断是否下载完毕
this.isLoading = false
this.isDownload = false
this.allImages.forEach(element => { element.checked = false });
this.downloadList = []}
this.downloadList = []
}
} //for循环
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择图片','确定',config);}
this.snackBar.open('请选择图片', '确定', config);
}
}
@ -378,7 +470,12 @@ export class previewImg {
ngOnInit(): void {
this.allImages = this.data.allImages
this.allImages.forEach(element => {
// element.previewImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/auto-orient,1` //处理图片URL地址
if (this.data.selectReal.id == '重点部位' || this.data.selectReal.id == '安全出口') {
element.previewImageUrl = `${element.imageUrl}` //处理图片URL地址
} else {
element.previewImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/auto-orient,1` //处理图片URL地址
}
});
}
@ -420,7 +517,7 @@ export class previewImg {
})
export class addRealPicture {
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<addRealPicture>) { }
constructor(private http: HttpClient, public dialog: MatDialog, public dialogRef: MatDialogRef<addRealPicture>, public snackBar: MatSnackBar) { }
ngOnInit(): void {
this.companyId = sessionStorage.getItem('companyId')
@ -434,6 +531,12 @@ export class addRealPicture {
name: e.name,
companyId: this.companyId
}
if(e.name == '安全出口' || e.name == '重点部位' || e.name == '外观'){
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('不允许创建名为安全出口、重点部位、外观的文件夹', '确定', config);
}else{
this.http.post('/api/CompanyAccount/RealityImageGroups', data).subscribe(data => {
this.dialogRef.close(data);
})
@ -441,6 +544,8 @@ export class addRealPicture {
}
}
//编辑实景图文件组件
@ -452,7 +557,7 @@ export class addRealPicture {
export class editRealPicture {
constructor(private http: HttpClient, public dialog: MatDialog, public dialogRef: MatDialogRef<editRealPicture>,
@Inject(MAT_DIALOG_DATA) public data) { }
@Inject(MAT_DIALOG_DATA) public data, public snackBar: MatSnackBar) { }
ngOnInit(): void {
this.name = this.data.name
@ -467,9 +572,17 @@ export class editRealPicture {
name: e.name,
companyId: this.data.companyId
}
if(e.name == '安全出口' || e.name == '重点部位'){
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('文件名不允许为安全出口、重点部位、外观', '确定', config);
}else{
this.http.put(`/api/CompanyAccount/RealityImageGroups/${this.data.id}`, data).subscribe(data => {
this.dialogRef.close('success');
})
}
}
}

7
src/styles.scss

@ -176,3 +176,10 @@ table td.mat-footer-cell:last-of-type {
background: #666;
}
}
#firefightingdevice{
.expansionheader{
height: auto!important;
}
}
Loading…
Cancel
Save