Browse Source

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

tangshan
chenjingyu 3 years ago
parent
commit
a3d88ee006
  1. 24
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  2. 50
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
  3. 13
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
  4. 6
      src/app/ui/plan-template/plan-template.component.html
  5. 9
      src/app/ui/plan-template/plan-template.component.ts

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

@ -452,10 +452,32 @@
</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>
<div class="keyImg"

50
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;
}
}
}
}
}

13
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) => {
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 => {
if(i.tableth!=undefined){
i.tableth.json.push('/api/Objects/PlanPlatform/' + res)
}else{
i.imgArr.push('/api/Objects/PlanPlatform/' + res)
}
})
}
}

6
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">

9
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: {
nodeWidth: 90,
nodeHeight: 60
}
name: ''
}
let attrubute={
headName:this.headName,

Loading…
Cancel
Save