23 changed files with 968 additions and 162 deletions
@ -1,15 +1,242 @@ |
|||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||||
|
import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; |
||||||
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||||
|
import * as moment from 'moment'; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-oil-station-info', |
selector: 'app-oil-station-info', |
||||||
templateUrl: './oil-station-info.component.html', |
templateUrl: './oil-station-info.component.html', |
||||||
styleUrls: ['./oil-station-info.component.scss'] |
styleUrls: ['./oil-station-info.component.scss'] |
||||||
}) |
}) |
||||||
export class OilStationInfoComponent implements OnInit { |
export class OilStationInfoComponent implements OnInit { |
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor(private fb: FormBuilder, private objectsSrv: ObjectsSimpleService, private http: HttpClient, private message: NzMessageService) { } |
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
|
userdata: any |
||||||
|
dateFormat = 'yyyy-MM-dd'; |
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
|
this.userdata = JSON.parse(sessionStorage.getItem('userdata')) |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
oilStation: this.fb.group({ |
||||||
|
organization: [this.userdata.organization.displayName], |
||||||
|
startBusinessTime: [null, [Validators.required]], |
||||||
|
oilStationType: [null], |
||||||
|
laneNumber: [null], |
||||||
|
address: [null], |
||||||
|
validityTime: [null, [Validators.required]]//营业执照有效期
|
||||||
|
}), |
||||||
|
policeStation: this.fb.group({ |
||||||
|
name: [null], |
||||||
|
address: [null], |
||||||
|
distance: [null], |
||||||
|
contactInformation: [null] |
||||||
|
}), |
||||||
|
hospital: this.fb.group({ |
||||||
|
name: [null], |
||||||
|
address: [null], |
||||||
|
distance: [null], |
||||||
|
contactInformation: [null] |
||||||
|
}), |
||||||
|
fireBrigade: this.fb.group({ |
||||||
|
name: [null], |
||||||
|
address: [null], |
||||||
|
distance: [null], |
||||||
|
contactInformation: [null] |
||||||
|
}) |
||||||
|
}); |
||||||
|
|
||||||
|
this.getInfo() |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
validityTime: any = []//营业执照有效期
|
||||||
|
|
||||||
|
//获取油站信息
|
||||||
|
getInfo() { |
||||||
|
this.http.get('/api/services/app/GasStation/Get', { |
||||||
|
params: { |
||||||
|
organizationId: this.userdata.organization.id |
||||||
|
} |
||||||
|
}).subscribe((data: any) => { |
||||||
|
console.log('油站信息', data) |
||||||
|
this.httpBody = data.result |
||||||
|
this.httpBody.govUnitDetail = JSON.parse(data.result.govUnitDetail) |
||||||
|
this.policeStation = data.result.govUnitDetail.policeStation |
||||||
|
this.hospital = data.result.govUnitDetail.hospital |
||||||
|
this.fireBrigade = data.result.govUnitDetail.fireBrigade |
||||||
|
this.httpBody.stationType = String(this.httpBody.stationType) |
||||||
|
this.validityTime[0] = data.result.validityStartTime |
||||||
|
this.validityTime[1] = data.result.validityEndTime |
||||||
|
this.validityTime = [...this.validityTime] |
||||||
|
console.log(this.validityTime) |
||||||
|
}, err => { |
||||||
|
console.log('油站错误信息', err.error.error.message) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
policeStation = { |
||||||
|
name: '', |
||||||
|
address: '', |
||||||
|
distance: '', |
||||||
|
contactInformation: '' |
||||||
|
} |
||||||
|
hospital = { |
||||||
|
name: '', |
||||||
|
address: '', |
||||||
|
distance: '', |
||||||
|
contactInformation: '' |
||||||
|
} |
||||||
|
fireBrigade = { |
||||||
|
name: '', |
||||||
|
address: '', |
||||||
|
distance: '', |
||||||
|
contactInformation: '' |
||||||
|
} |
||||||
|
httpBody = { |
||||||
|
id: null, |
||||||
|
stationName: JSON.parse(sessionStorage.getItem('userdata')).organization.displayName, |
||||||
|
organizationId: JSON.parse(sessionStorage.getItem('userdata')).organization.id, |
||||||
|
validityStartTime: '', |
||||||
|
validityEndTime: '', |
||||||
|
openTime: '', |
||||||
|
stationType: '', |
||||||
|
laneCount: '', |
||||||
|
address: '', |
||||||
|
govUnitDetail: { |
||||||
|
policeStation: {}, |
||||||
|
hospital: {}, |
||||||
|
fireBrigade: {} |
||||||
|
}, |
||||||
|
businessLicenseImage: '', |
||||||
|
dangerousChemicalLicenseImage: '', |
||||||
|
gasSellLicenseImage: '' |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
submitForm() { |
||||||
|
|
||||||
|
console.log(this.validateForm) |
||||||
|
console.log(this.httpBody) |
||||||
|
if (this.validateForm.valid) { |
||||||
|
this.isLoadingSave = true |
||||||
|
this.httpBody.openTime = moment(this.httpBody.openTime).format('YYYY-MM-MM')//开业时间格式化
|
||||||
|
this.httpBody.validityStartTime = moment(this.validityTime[0]).format('YYYY-MM-MM')//开业时间格式化
|
||||||
|
this.httpBody.validityEndTime = moment(this.validityTime[1]).format('YYYY-MM-MM')//开业时间格式化
|
||||||
|
this.httpBody.govUnitDetail.policeStation = this.validateForm.value.policeStation |
||||||
|
this.httpBody.govUnitDetail.hospital = this.validateForm.value.hospital |
||||||
|
this.httpBody.govUnitDetail.fireBrigade = this.validateForm.value.fireBrigade |
||||||
|
|
||||||
|
let body = JSON.parse(JSON.stringify(this.httpBody)) |
||||||
|
body.stationType |
||||||
|
body.govUnitDetail = JSON.stringify(this.httpBody.govUnitDetail) |
||||||
|
|
||||||
|
if (this.httpBody.id) { |
||||||
|
this.http.put('/api/services/app/GasStation/Update', body).subscribe((data: any) => { |
||||||
|
this.isLoadingSave = false |
||||||
|
this.message.create('success', '保存成功！'); |
||||||
|
}, err => { |
||||||
|
this.isLoadingSave = false |
||||||
|
this.message.create('error', '保存失败！'); |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.http.post('/api/services/app/GasStation/Create', body).subscribe((data: any) => { |
||||||
|
this.httpBody.id = data.result.id |
||||||
|
this.isLoadingSave = false |
||||||
|
this.message.create('success', '保存成功！'); |
||||||
|
}, err => { |
||||||
|
this.isLoadingSave = false |
||||||
|
this.message.create('error', '保存失败！'); |
||||||
|
}) |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.message.create('warning', '请填写完整！'); |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
isLoadingOne: boolean = false |
||||||
|
isLoadingTwo: boolean = false |
||||||
|
isLoadingThree: boolean = false |
||||||
|
isLoadingSave: boolean = false |
||||||
|
uploadType: string |
||||||
|
filechange(e, type) { |
||||||
|
let file = e.target.files[0] || null //获取上传的文件
|
||||||
|
this.uploadType = type |
||||||
|
if (this.uploadType == 'businessLicense') {//营业执照
|
||||||
|
this.isLoadingOne = true |
||||||
|
} |
||||||
|
if (this.uploadType == 'dangerousChemical') {//危化品销售
|
||||||
|
this.isLoadingTwo = true |
||||||
|
} |
||||||
|
if (this.uploadType == 'retailOfRefinedOil') {//成品油零售
|
||||||
|
this.isLoadingThree = true |
||||||
|
} |
||||||
|
this.openFileSelect(file, `stationPhotos/${this.userdata.organization.id}/`) |
||||||
|
} |
||||||
|
//设置文件路径并上传
|
||||||
|
postFilePath |
||||||
|
openFileSelect(file: File, extensionPath: string) { |
||||||
|
this.postFilePath = extensionPath; |
||||||
|
let fileSize = file.size || null //上传文件的总大小
|
||||||
|
let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
|
||||||
|
if (fileSize >= shardSize) // 超过5MB要分块上传
|
||||||
|
{ |
||||||
|
this.postFileByMul(file); |
||||||
|
} |
||||||
|
else //普通上传
|
||||||
|
{ |
||||||
|
this.postFile(file); |
||||||
|
} |
||||||
|
} |
||||||
|
//上传文件
|
||||||
|
async postFile(file: File) { |
||||||
|
await new Promise((resolve, reject) => { |
||||||
|
this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => { |
||||||
|
let dataObj = data as any; |
||||||
|
let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName; |
||||||
|
if (this.uploadType == 'businessLicense') {//营业执照
|
||||||
|
this.httpBody.businessLicenseImage = filePath |
||||||
|
this.isLoadingOne = false |
||||||
|
} |
||||||
|
if (this.uploadType == 'dangerousChemical') {//危化品
|
||||||
|
this.httpBody.dangerousChemicalLicenseImage = filePath |
||||||
|
this.isLoadingTwo = false |
||||||
|
} |
||||||
|
if (this.uploadType == 'retailOfRefinedOil') {//成品油
|
||||||
|
this.httpBody.gasSellLicenseImage = filePath |
||||||
|
this.isLoadingThree = false |
||||||
|
} |
||||||
|
resolve('success') |
||||||
|
}); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 分块上传 |
||||||
|
* @param file
|
||||||
|
*/ |
||||||
|
postFileByMul(file: File) { |
||||||
|
this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => { |
||||||
|
let dataObj = value as any; |
||||||
|
if (this.uploadType == 'businessLicense') {//营业执照
|
||||||
|
this.httpBody.businessLicenseImage = dataObj.filePath |
||||||
|
this.isLoadingOne = false |
||||||
|
} |
||||||
|
if (this.uploadType == 'dangerousChemical') {//危化品
|
||||||
|
this.httpBody.dangerousChemicalLicenseImage = dataObj.filePath |
||||||
|
this.isLoadingTwo = false |
||||||
|
} |
||||||
|
if (this.uploadType == 'retailOfRefinedOil') {//成品油
|
||||||
|
this.httpBody.gasSellLicenseImage = dataObj.filePath |
||||||
|
this.isLoadingThree = false |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,85 @@ |
|||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class ObjectsSimpleService { |
||||||
|
|
||||||
|
static readonly c_apiRoot = "/api/";//普通上传的API根路径
|
||||||
|
static readonly c_apiRoot_Multipart = "/api/";//分块上传的API根路径
|
||||||
|
|
||||||
|
// static testPath = "f1/f2";//测试路径
|
||||||
|
|
||||||
|
constructor(private http: HttpClient) { } |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//普通上传，单个文件上限5M
|
||||||
|
static baseUrl = ObjectsSimpleService.c_apiRoot + 'Objects/sinochemweb/'; |
||||||
|
postFile(extensionPath: string, file: File): Observable<Object> { |
||||||
|
let formData = new FormData() |
||||||
|
formData.append("file", file, file.name) |
||||||
|
let data = { keepOriginalName: 'true' } |
||||||
|
return this.http.post(ObjectsSimpleService.baseUrl + extensionPath, formData, { params: data }); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//分块上传
|
||||||
|
static baseUrl_MultipartUpload = ObjectsSimpleService.c_apiRoot_Multipart + 'NewMultipartUpload/sinochemweb/'; |
||||||
|
// {
|
||||||
|
// "objectName": "string",
|
||||||
|
// "uploadId": "string"
|
||||||
|
// }
|
||||||
|
postFile_MultipartUpload(extensionPath: string, file: File): Promise<Object> { |
||||||
|
// let formData = new FormData()
|
||||||
|
// formData.append("file", file, file.name)
|
||||||
|
// return this.http.post(ObjectsSimpleService.baseUrl + extensionPath, formData);
|
||||||
|
let data = { keepOriginalName: 'true', filename: file.name } |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
this.http.post(ObjectsSimpleService.baseUrl_MultipartUpload + extensionPath, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
|
||||||
|
let objectName = data.objectName |
||||||
|
let uploadId = data.uploadId |
||||||
|
let PartNumberETag = []; //每次返回需要保存的信息
|
||||||
|
//分块 处理
|
||||||
|
let fileSize = file.size || null //上传文件的总大小
|
||||||
|
let shardSize = 5 * 1024 * 1024 //5MB一个分片
|
||||||
|
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
|
||||||
|
|
||||||
|
for (let i = 0; i < allSlice; i++) { //循环分段上传
|
||||||
|
let start = i * shardSize //切割文件开始位置
|
||||||
|
let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
|
||||||
|
let formData = new FormData() |
||||||
|
formData.append("file", file.slice(start, end)) |
||||||
|
|
||||||
|
//同步写法实现异步调用
|
||||||
|
let result = await new Promise((resolve, reject) => { |
||||||
|
// await 需要后面返回一个 promise 对象
|
||||||
|
this.http.post(ObjectsSimpleService.c_apiRoot_Multipart + `MultipartUpload/sinochemweb/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => { |
||||||
|
let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null } |
||||||
|
resolve(msg) // 调用 promise 内置方法处理成功
|
||||||
|
}) |
||||||
|
}); |
||||||
|
PartNumberETag.push(result) |
||||||
|
|
||||||
|
if (PartNumberETag.length === allSlice) { //分块上传完成
|
||||||
|
let data = PartNumberETag |
||||||
|
let paramsData = { uploadId: uploadId }; |
||||||
|
let path = ObjectsSimpleService.c_apiRoot_Multipart + 'CompleteMultipartUpload/sinochemweb/' + objectName; |
||||||
|
this.http.post(path, data, { params: paramsData }).subscribe(data => { |
||||||
|
let objData: any = new Object(); |
||||||
|
objData.fileName = file.name; |
||||||
|
objData.filePath = (ObjectsSimpleService.baseUrl + objectName).replace(file.name, ""); |
||||||
|
resolve(objData) |
||||||
|
}) |
||||||
|
} |
||||||
|
}//for循环
|
||||||
|
|
||||||
|
//分块 处理
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue