Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/ShangHaiYuan-AnXin

4 years ago · 151deb2469
3 changed files with 204 additions and 4 deletions
--- 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 @@
                            <span class="redspan">*</span>预案级别：
                        </div>
                        <div>
-                            V级
+                            <ng-container *ngIf="planLevel == '5'; else elseTemplate">
+                                Ⅴ级
+                            </ng-container>
+                            <ng-template #elseTemplate>
+                                Ⅲ级
+                            </ng-template>
                        </div>
                    </li>
                    <li>
@ -168,6 +173,31 @@
                            </div>
                        </div>
                    </div>
+                    <div class="keyImg" *ngIf="item.groupName == '重点图示'">
+                        <div class="keyImgItem" *ngFor="let i of item.attribute;let key = index">
+                            <div class="keyImgTitle">
+                                <input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
+                                <mat-icon class="deleteItem" *ngIf="key != 0" (click)="deleteItem(key)">delete</mat-icon>
+                            </div>
+                            <div class="keyImgImg">
+
+                                <div class="uploadBtn">
+                                    <button mat-stroked-button>
+                                        <mat-icon>add</mat-icon>上传图片
+                                    </button>
+                                    <input (change)="filechange($event)" type="file" name="" id="">
+                                </div>
+                               
+                            </div>
+                            
+                        </div>
+                        <!-- 增加分组 -->
+                        <div class="addkeyImgItem">
+                            <button mat-flat-button color="primary" (click)="addkeyImgItem()">
+                                增加分组
+                            </button>
+                        </div>
+                    </div>
                </div>
            </div>
        </div>
--- 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,7 +117,7 @@
                    }
                }
            }
-            .centerBox{
+            .centerBox {
                width: 100%;
                height: 100%;
                display: flex;
@ -226,6 +226,61 @@
                    }
                }
            }
+            .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;
+                }
+            }
        }
    }
 }
--- 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
@ -22,15 +22,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 || '',
@ -61,6 +64,76 @@ 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)
+      })
    })
  }
  //input key值，一个字符焦点消失问题
@ -103,6 +176,48 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
    
  }

+  //分段上传
+  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循环
+
+        //分块 处理
+      })
+    })
+  }
 }