12 changed files with 1468 additions and 788 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,112 @@
|
||||
<h2 mat-dialog-title>上传演练记录</h2> |
||||
<div class="box"> |
||||
<div class="contentItem"> |
||||
<div class="title"> |
||||
单位信息 |
||||
</div> |
||||
<div class="content"> |
||||
<div class="textbox"> |
||||
<span class="name">单位名称:</span> |
||||
<span>{{data.unitInfo.name}}</span> |
||||
</div> |
||||
<div class="textbox"> |
||||
<span class="name">单位地址:</span> |
||||
<span>{{data.unitInfo.address}}</span> |
||||
</div> |
||||
<div class="textbox"> |
||||
<span class="name">联系人:</span> |
||||
<span>{{data.unitInfo.contacts}}</span> |
||||
</div> |
||||
<div class="textbox"> |
||||
<span class="name">联系电话:</span> |
||||
<span>{{data.unitInfo.phone}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="contentItem"> |
||||
<div class="title"> |
||||
调研人员 |
||||
</div> |
||||
<div class="content peoplecontent"> |
||||
<div> |
||||
<span class="name">带队人员:</span> |
||||
<input name="teamLeader" [(ngModel)]="teamLeader" nz-input placeholder="带队人员" /> |
||||
</div> |
||||
<div> |
||||
<span class="name">熟悉时间:</span> |
||||
<nz-range-picker [nzShowTime]="{ nzFormat: 'HH:mm' }" nzFormat="yyyy-MM-dd HH:mm" |
||||
[nzPlaceHolder]="['开始时间', '结束时间']" name="time" [(ngModel)]="time"></nz-range-picker> |
||||
</div> |
||||
<div> |
||||
<span class="name">调研照片:</span> |
||||
<div class="uploadbox"> |
||||
<input type="file" (change)="upload($event,'调研')"> |
||||
<button nz-button nzType="default">上传照片</button> |
||||
<ul class="imgbox"> |
||||
<li *ngFor="let item of surveyPhoto;let key = index"><img [src]="item" alt=""> |
||||
<span class="close material-icons" (click)="deleteImg(surveyPhoto,key)"> |
||||
cancel |
||||
</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="contentItem"> |
||||
<div class="title"> |
||||
熟悉内容 |
||||
</div> |
||||
<div class="content photocontent"> |
||||
<div> |
||||
<span class="name">水源照片:</span> |
||||
<div class="uploadbox"> |
||||
<input type="file" (change)="upload($event,'水源')"> |
||||
<button nz-button nzType="default">上传照片</button> |
||||
<ul class="imgbox"> |
||||
<li *ngFor="let item of waterPhoto;let key = index"><img [src]="item" alt=""> |
||||
<span class="close material-icons" (click)="deleteImg(waterPhoto,key)"> |
||||
cancel |
||||
</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<span class="name">疏散通道:</span> |
||||
<div class="uploadbox"> |
||||
<input type="file" (change)="upload($event,'疏散通道')"> |
||||
<button nz-button nzType="default">上传照片</button> |
||||
<ul class="imgbox"> |
||||
<li *ngFor="let item of routePhoto;let key = index"><img [src]="item" alt=""> |
||||
<span class="close material-icons" (click)="deleteImg(routePhoto,key)"> |
||||
cancel |
||||
</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<span class="name">消控室:</span> |
||||
<div class="uploadbox"> |
||||
<input type="file" (change)="upload($event,'消控室')"> |
||||
<button nz-button nzType="default">上传照片</button> |
||||
<ul class="imgbox"> |
||||
<li *ngFor="let item of fireControlPhoto;let key = index"><img [src]="item" alt=""> |
||||
<span class="close material-icons" (click)="deleteImg(fireControlPhoto,key)"> |
||||
cancel |
||||
</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="mask" *ngIf="isLoading"> |
||||
<mat-spinner [diameter]="30"></mat-spinner> |
||||
</div> |
||||
</div> |
||||
<mat-dialog-actions align="end"> |
||||
<button mat-button mat-dialog-close [disabled]="isLoading || isLoadingSave">取消</button> |
||||
<button mat-button cdkFocusInitial (click)="save()" [disabled]="isLoading || isLoadingSave">确定</button> |
||||
</mat-dialog-actions> |
||||
@ -0,0 +1,120 @@
|
||||
.box { |
||||
width: 100%; |
||||
position: relative; |
||||
|
||||
.contentItem { |
||||
display: flex; |
||||
margin: 6px 0; |
||||
border-bottom: 1px dashed rgb(180, 178, 178); |
||||
|
||||
.title { |
||||
width: 75px; |
||||
color: #1890ff; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
div { |
||||
margin-bottom: 3px; |
||||
|
||||
.name { |
||||
display: inline-block; |
||||
width: 70px; |
||||
margin-right: 3px; |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.peoplecontent, |
||||
.photocontent { |
||||
flex-direction: column; |
||||
|
||||
div { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
input, |
||||
nz-range-picker { |
||||
flex: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.textbox { |
||||
height: 32px; |
||||
line-height: 32px; |
||||
width: 50%; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
|
||||
} |
||||
|
||||
.uploadbox { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
input { |
||||
width: 88px; |
||||
height: 32px; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
opacity: 0; |
||||
z-index: 2; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
button { |
||||
z-index: 1; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.imgbox { |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
} |
||||
|
||||
img { |
||||
width: 50px; |
||||
height: 50px; |
||||
margin: 0 5px; |
||||
cursor: pointer; |
||||
} |
||||
.close{ |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
font-size: 15px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mask { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
left: 0; |
||||
top: 0; |
||||
background: rgba(0, 0, 0, 0.2); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
z-index: 3; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { UploadDrillComponent } from './upload-drill.component'; |
||||
|
||||
describe('UploadDrillComponent', () => { |
||||
let component: UploadDrillComponent; |
||||
let fixture: ComponentFixture<UploadDrillComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ UploadDrillComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(UploadDrillComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,175 @@
|
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { Component, OnInit, Inject } from "@angular/core"; |
||||
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog"; |
||||
import { ObjectsService } from "@src/app/services/objects.service"; |
||||
import { DatePipe } from "@angular/common"; |
||||
import { MatSnackBar } from "@angular/material/snack-bar"; |
||||
@Component({ |
||||
selector: "app-upload-drill", |
||||
templateUrl: "./upload-drill.component.html", |
||||
styleUrls: ["./upload-drill.component.scss"], |
||||
providers: [DatePipe], |
||||
}) |
||||
export class UploadDrillComponent implements OnInit { |
||||
constructor( |
||||
public dialogRef: MatDialogRef<UploadDrillComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data: any, |
||||
private objectsSer: ObjectsService, |
||||
private http: HttpClient, |
||||
private datePipe: DatePipe, |
||||
public snackBar: MatSnackBar |
||||
) {} |
||||
|
||||
ngOnInit(): void { |
||||
console.log(this.data); |
||||
this.getData(); |
||||
} |
||||
|
||||
isHttpPost; |
||||
getData() { |
||||
this.http |
||||
.get("/api/DrillRecords", { |
||||
params: { |
||||
CompanyId: this.data.unitInfo.id, |
||||
}, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
console.log("演练记录数据", data); |
||||
if (data.totalCount === 0) { |
||||
this.isHttpPost = true; |
||||
} else { |
||||
this.isHttpPost = false; |
||||
let item = data.items[0]; |
||||
this.drillId = item.id; |
||||
this.teamLeader = item.teamLeader; |
||||
this.time = [item.startTime, item.endTime]; |
||||
this.surveyPhoto = JSON.parse(item.images); |
||||
this.waterPhoto = JSON.parse(item.waterSource); |
||||
this.routePhoto = JSON.parse(item.escapeRoute); |
||||
this.fireControlPhoto = JSON.parse(item.fireControlRoom); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
surveyPhoto = [ |
||||
// "../../../../assets/images/yiyuan.png",
|
||||
// "../../../../assets/images/homeHeader.png",
|
||||
// "../../../../assets/images/add.png",
|
||||
]; //调研人员照片
|
||||
waterPhoto = []; //水源照片
|
||||
routePhoto = []; //疏散照片
|
||||
fireControlPhoto = []; //消控室照片
|
||||
|
||||
//设置文件路径并上传
|
||||
postFilePath; |
||||
isLoading = false; |
||||
async upload(e, type) { |
||||
this.isLoading = true; |
||||
let file = e.target.files[0] || null; //获取上传的文件
|
||||
let fileSize = file.size || null; //上传文件的总大小
|
||||
let shardSize = 5 * 1024 * 1024; //5MB 超过5MB要分块上传
|
||||
this.postFilePath = "演练记录/" + this.data.unitInfo.id; |
||||
if (fileSize >= shardSize) { |
||||
await this.postFileByMul(file, type); |
||||
} else { |
||||
await this.postFile(file, type); |
||||
} |
||||
this.isLoading = false; |
||||
} |
||||
|
||||
//直接上传
|
||||
async postFile(file: File, type) { |
||||
await new Promise((resolve, reject) => { |
||||
this.objectsSer.postFile(this.postFilePath, file).subscribe((data) => { |
||||
let dataObj = data as any; |
||||
let filePath: string = ObjectsService.baseUrl + dataObj.objectName; |
||||
this.setFileUrl(type, filePath); |
||||
resolve("success"); |
||||
}); |
||||
}); |
||||
} |
||||
//分块上传
|
||||
async postFileByMul(file: File, type) { |
||||
await new Promise((resolve, reject) => { |
||||
this.objectsSer |
||||
.postFile_MultipartUpload(this.postFilePath, file) |
||||
.then((value) => { |
||||
console.log("分块上传成功", value); |
||||
let dataObj = value as any; |
||||
this.setFileUrl(type, dataObj.filePath + dataObj.fileName); |
||||
resolve("success"); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
setFileUrl(type, filePath) { |
||||
switch (type) { |
||||
case "调研": |
||||
this.surveyPhoto.push(filePath); |
||||
break; |
||||
case "水源": |
||||
this.waterPhoto.push(filePath); |
||||
break; |
||||
case "疏散通道": |
||||
this.routePhoto.push(filePath); |
||||
break; |
||||
case "消控室": |
||||
this.fireControlPhoto.push(filePath); |
||||
break; |
||||
} |
||||
} |
||||
deleteImg(arr, key) { |
||||
if (confirm("确认删除此照片吗")) { |
||||
arr.splice(key, 1); |
||||
} |
||||
} |
||||
teamLeader; |
||||
time; |
||||
drillId; |
||||
isLoadingSave = false; |
||||
save() { |
||||
if (!this.teamLeader || !this.time) { |
||||
this.snackBar.open("请输入带队人员和熟悉时间", "确定", { |
||||
verticalPosition: "top", |
||||
duration: 3000, |
||||
}); |
||||
return; |
||||
} |
||||
this.isLoadingSave = true; |
||||
let body: any = { |
||||
companyId: this.data.unitInfo.id, |
||||
teamLeader: this.teamLeader, |
||||
startTime: this.datePipe.transform(this.time[0], "yyyy-MM-ddTHH:mm:ss"), |
||||
endTime: this.datePipe.transform(this.time[1], "yyyy-MM-ddTHH:mm:ss"), |
||||
images: JSON.stringify(this.surveyPhoto), |
||||
waterSource: JSON.stringify(this.waterPhoto), |
||||
escapeRoute: JSON.stringify(this.routePhoto), |
||||
fireControlRoom: JSON.stringify(this.fireControlPhoto), |
||||
}; |
||||
console.log(body); |
||||
if (this.isHttpPost) { |
||||
this.http.post("/api/DrillRecords", body).subscribe((data: any) => { |
||||
this.drillId = data.id; |
||||
this.isHttpPost = false; |
||||
this.isLoadingSave = false; |
||||
this.snackBar.open("保存成功", "确定", { |
||||
verticalPosition: "top", |
||||
duration: 3000, |
||||
}); |
||||
this.dialogRef.close(); |
||||
}); |
||||
} else { |
||||
body.id = this.drillId; |
||||
this.http |
||||
.put(`/api/DrillRecords/${this.drillId}`, body) |
||||
.subscribe((data: any) => { |
||||
this.isLoadingSave = false; |
||||
this.snackBar.open("保存成功", "确定", { |
||||
verticalPosition: "top", |
||||
duration: 3000, |
||||
}); |
||||
this.dialogRef.close(); |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue