diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html index f9cdac4..f2fed48 100644 --- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html +++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html @@ -51,7 +51,12 @@ *预案级别：
- V级 + + Ⅴ级 + + + Ⅲ级 +
  • @@ -121,9 +126,35 @@
    -
    +
    111
    +
    +
    +
    + + delete +
    +
    + +
    + + +
    + +
    + +
    + +
    + +
    +
    diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss index d026ba2..f2acd35 100644 --- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss +++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss @@ -3,7 +3,7 @@ height: 100%; transform: translate(0, 0); background: #f2f4f5; - .redspan{ + .redspan { color: red; } .titlebox { @@ -117,16 +117,71 @@ } } } - .centerBox{ + .centerBox { width: 100%; height: 100%; - .paneltitle{ + .paneltitle { width: 100%; font-size: 16px; color: #2196f3; display: flex; } } + .keyImg { + div { + width: 100%; + } + .keyImgItem { + border: 1px solid #e8e9e9; + .keyImgTitle { + height: 30px; + border-left: 1px solid #2196F3; + position: relative; + input { + width: 100%; + height: 100%; + background: #e8f4fe; + color: #2196f3; + border: 0; + box-sizing: border-box; + padding: 0 5px; + } + .deleteItem{ + position: absolute; + right: 5px; + top: 3px; + cursor: pointer; + color: #292c2c; + } + .deleteItem:hover{ + color: red; + } + } + .keyImgImg { + .uploadBtn{ + display: flex; + justify-content: center; + margin: 50px 0; + position: relative; + input{ + width: 112px; + height: 36px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + opacity: 0; + cursor: pointer; + } + } + } + } + .addkeyImgItem{ + display: flex; + justify-content: center; + margin: 10px 0; + } + } } } } diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts index 240a1fc..d206397 100644 --- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts +++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts @@ -13,15 +13,18 @@ export class CreatePlanOnlineFiveComponent implements OnInit { planName: string //预案名称 + planLevel: string//预案级别 ngOnInit(): void { this.planName = this.route.snapshot.queryParams.planName + this.planLevel = this.route.snapshot.queryParams.planCategory + console.log('级别', this.planLevel) this.getTemplateData() this.getUnitData() } //获得单位信息 - unitData:any + unitData: any getUnitData() { let paramsdata: any = { Name: this.route.snapshot.queryParams.unitName || '', @@ -51,9 +54,121 @@ export class CreatePlanOnlineFiveComponent implements OnInit { item.completed == true ) console.log(this.planTemplateData) + this.planTemplateData.forEach(element => { + if (element.groupName == '重点图示') { + if (!element.attribute) { + element.attribute = [{ name: '', imgArr: [] }] + } + } + }); + }) + } + + + //重点图示增加分组 + addkeyImgItem() { + this.planTemplateData.forEach(element => { + if (element.groupName == '重点图示') { + element.attribute.push({ name: '', imgArr: [] }) + } + }); + } + //重点图示删除指定分组 + deleteItem(key) { + let isDelete = window.confirm('确定要删除该分组吗?分组下上传的图片将一同被删除!') + if (isDelete) { + this.planTemplateData.forEach(element => { + if (element.groupName == '重点图示') { + element.attribute.splice(key, 1) + } + }); + } + } + + //重点图示上传图片 + file: any + filechange(e) { + this.file = e.target.files[0] || null //上传的文件 + let file = e.target.files[0] || null //获取上传的文件 + let fileSize = file.size || null //上传文件的总大小 + let maxSize = 5 * 1024 * 1024 //5MB一个分片 + let tenSize = 100 * 1024 * 1024 //100MB限制 + if (file && fileSize <= maxSize) { //上传文件<=5MB时 + let upload = this.uploadFile(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.companyId, file) + upload.then(res => { + console.log('小于5M', res) + //图片地址 /api/Objects/PlanPlatform/res.objectName + }) + } else { //上传文件>5MB时 + let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.companyId, file) + upload.then(res => { + // this.renovateBaseMap('/api/Objects/PlanPlatform/' + res, item) + console.log('大于5M', res) + }) + } + // else { + // const config = new MatSnackBarConfig(); + // config.verticalPosition = 'top'; + // config.duration = 3000 + // this.snackBar.open('上传底图需小于100MB', '确定', config); + // } + } + + + + + async uploadFile(companyId: string, planId: string, file) { + let formData = new FormData() + formData.append("file", file) + return new Promise((resolve, reject) => { + this.http.post(`/api/Objects/PlanPlatform/${companyId}/${planId}`, formData).subscribe((data: any) => { + resolve(data) + }) }) } + //分段上传 + sectionUpload(companyId: string, planId: string, file) { + let data = { filename: file.name } + return new Promise((resolve, reject) => { + this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/${planId}`, {}, { 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(`/api/MultipartUpload/PlanPlatform/${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 } + this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`, data, { params: paramsData }).subscribe(data => { + resolve(objectName) + }) + } + }//for循环 + + //分块 处理 + }) + }) + } }