[修改]在线编制属性结构改为上传图片

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

@@ -452,9 +452,31 @@
                                 </div>
                                 
                                 <!--树形图-->
-                                <div style="height: 300px;width: 100%;" *ngIf="element.level==4">
+                                <!-- <div style="height: 300px;width: 100%;" *ngIf="element.level==4">
                                     <tree-diagram [data]="element.tableth"></tree-diagram>
+                                </div> -->
+                                <div class="keyImg" *ngIf="element.level==4">
+                                    
+                            <div class="keyImgImg">
+                                <div style="margin-top: 10px;
+                                text-align: center;
+                                position: relative;" class="imgbox" *ngFor="let imgUrl of element.tableth.json;let imgkey = index">
+                                    <mat-icon *ngIf="pattern == 'edit'" class="deleteImg"
+                                        (click)="deleteImgItem(element.tableth.json,imgkey)">delete
+                                    </mat-icon>
+                                    <img style="max-width: 100%;
+                                    width: auto;
+                                    height: auto;" [src]="imgUrl" alt="">
+                                </div>
+                                <div class="uploadBtn" *ngIf="pattern == 'edit'&&element.tableth.json.length<=0">
+                                    <button mat-stroked-button>
+                                        <mat-icon>add</mat-icon>上传图片
+                                    </button>
+                                    <input (change)="filechange($event,element)" type="file" name="" id="">
+                                </div>
+                            </div>
                                 </div>
+                                
                             </div>
                         </div>
                     </div>

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss

@@ -378,7 +378,55 @@
                                 display: flex;
                             }
                         }
-                        
+                        .keyImg {
+                            width: 100%;
+                            height: 100%;
+                            .keyImgImg {
+                                .imgbox {
+                                    margin-top: 10px;
+                                    text-align: center;
+                                    position: relative;
+                                    img {
+                                        max-width: 100%;
+                                        width: auto;
+                                        height: auto;
+                                    }
+                                    .deleteImg {
+                                        display: none;
+                                        cursor: pointer;
+                                        position: absolute;
+                                        right: 0px;
+                                        top: 0px;
+                                    }
+                                }
+                                .imgbox:hover {
+                                    .deleteImg {
+                                        display: block;
+                                    }
+                                }
+                                .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;
+                            }
+                        }
                     }
                 }
             }

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-06-16 13:56:54
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-06-30 14:01:35
+ * @LastEditTime: 2021-07-02 14:28:59
  */
 import { HttpClient } from '@angular/common/http';
 import { Component, Inject, OnInit, Renderer2, ViewChild, Input } from '@angular/core';
@@ -270,6 +270,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
   }
   //重点图示上传图片
   filechange(e, i) {
+    console.log(i)
     let file = e.target.files[0] || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
     let maxSize = 5 * 1024 * 1024 //5MB一个分片
@@ -277,12 +278,22 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
     if (file && fileSize <= maxSize) { //上传文件<=5MB时
       let upload = this.uploadFile(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file)
       upload.then((res: any) => {
-        i.imgArr.push('/api/Objects/PlanPlatform/' + res.objectName)
+        if(i.tableth!=undefined){
+          i.tableth.json.push('/api/Objects/PlanPlatform/' + res.objectName)
+        }else{
+          i.imgArr.push('/api/Objects/PlanPlatform/' + res.objectName)
+        }
+        
       })
     } else { //上传文件>5MB时
       let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file)
       upload.then(res => {
-        i.imgArr.push('/api/Objects/PlanPlatform/' + res)
+        if(i.tableth!=undefined){
+          i.tableth.json.push('/api/Objects/PlanPlatform/' + res)
+        }else{
+          i.imgArr.push('/api/Objects/PlanPlatform/' + res)
+        }
+        
       })
     }
   }

src/app/ui/plan-template/plan-template.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-19 15:50:20
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-06-18 10:55:32
+ * @LastEditTime: 2021-07-02 14:46:11
 -->
 <div class="box">
   <div class="boxleft">
@@ -250,9 +250,9 @@
               </div>
             </div>
             <!--树形图-->
-            <div style="height: 500px;width: 100%;" *ngIf="element.level==4">
+            <!-- <div style="height: 500px;width: 100%;" *ngIf="element.level==4">
               <tree-diagram [data]="element.tableth" ></tree-diagram>
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="attackRight">

src/app/ui/plan-template/plan-template.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-31 10:40:01
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-06-30 14:45:53
+ * @LastEditTime: 2021-07-02 14:21:31
  */
 
 import { Component, Inject, OnInit,ViewEncapsulation } from '@angular/core';
@@ -482,7 +482,7 @@ export class PlanTemplateComponent implements OnInit {
   }
   //保存
   save(){
-    console.log(this.newleftTabledata,this.tree)
+    console.log(this.newleftTabledata)
     const config = new MatSnackBarConfig();
     config.verticalPosition = 'top';
     config.duration = 3000
@@ -899,10 +899,7 @@ export class disaster{
     }else{
       let tree={
         json:[],
-        config: {
+        name: ''
-          nodeWidth: 90,
-          nodeHeight: 60
-        }
       }
       let attrubute={
         headName:this.headName,