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