32 changed files with 619 additions and 70 deletions
@ -0,0 +1,29 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-18 15:09:43 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-18 15:25:35 |
||||
--> |
||||
|
||||
<div class="bigimgbox"> |
||||
<!-- <div mat-dialog-title>图片详情</div> --> |
||||
<div class="swiper-container"> |
||||
<div class="swiper-wrapper"> |
||||
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
||||
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy" |
||||
[attr.data-src]="item"> |
||||
<div class="swiper-lazy-preloader"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<div class="swiper-button-prev"></div> |
||||
<div class="swiper-button-next"></div> |
||||
</div> |
||||
|
||||
<div class="previewImgBottom"> |
||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,35 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-20 16:11:57 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 17:05:21 |
||||
--> |
||||
<div class="box"> |
||||
<div class="top"> |
||||
<span style="font-size: 20px;">新增预案模板</span> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案名称:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请输入预案名称" name="companyName" autocomplete="off" [(ngModel)]="unitname" required> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案级别:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择预案级别' name="unittype" [(ngModel)]="level" required> |
||||
<mat-option value="Ⅲ级">Ⅲ级</mat-option> |
||||
<mat-option value="Ⅳ级">Ⅳ级</mat-option> |
||||
<mat-option value="Ⅴ级">Ⅴ级</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="bottom"> |
||||
<button mat-raised-button color="primary" (click)='newplan()'>确定</button> |
||||
<button mat-raised-button style="margin-left: 50px;" (click)="close()">取消</button> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,77 @@
|
||||
.box{ |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.queryField { |
||||
margin: 3px 5px; |
||||
input { |
||||
width: 100%; |
||||
height: 18px; |
||||
line-height: 18px; |
||||
border-radius: 3px;} |
||||
button{ |
||||
width: 140px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.top{ |
||||
width: 100%; |
||||
margin-bottom: 20px; |
||||
span{ |
||||
color: #2196F3; |
||||
margin-left: 100px; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
.bottom{ |
||||
margin: 10% 30px; |
||||
button{ |
||||
width: 80px; |
||||
height: 36px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.fileinput-button { |
||||
width: 148px; |
||||
height: 36px; |
||||
top: 10px; |
||||
position: relative; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
background-color: #2196F3; |
||||
color: #FFFFFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.fileinput-button input{ |
||||
position: absolute; |
||||
right: 0px; |
||||
top: 0px; |
||||
opacity: 0; |
||||
-ms-filter: 'alpha(opacity=0)'; |
||||
} |
||||
|
||||
.uping{ |
||||
display:flex; |
||||
.upclass{ |
||||
margin-left: 3px; |
||||
height: 30px; |
||||
} |
||||
.progress{ |
||||
position: relative; |
||||
top:3% |
||||
} |
||||
button{ |
||||
width: 80px; |
||||
height: 30px; |
||||
font-size: 10px; |
||||
margin-top: 5px; |
||||
} |
||||
span{ |
||||
font-size: 10px; |
||||
position: relative; |
||||
top: 8px; |
||||
} |
||||
} |
||||
@ -0,0 +1,34 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-19 15:50:20 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 17:03:52 |
||||
--> |
||||
<div class="box"> |
||||
<div class="boxleft"> |
||||
<div class="lefthead"> |
||||
<div class="leftheadone"> |
||||
<span>预案列表</span> |
||||
</div> |
||||
<div class="leftheadtwo" (click)='addKeyunit()'> |
||||
<img src="../../../assets/images/add.png"> |
||||
<span>新增</span> |
||||
</div> |
||||
</div> |
||||
<div class="leftbox"> |
||||
<div class="leftbody" *ngFor="let item of newleftTabledata"> |
||||
<div class="bodyname"> |
||||
<span>{{item.name}}</span> |
||||
</div> |
||||
<div class="bodycz"> |
||||
<span>{{item.level}}</span> |
||||
<img src="../../../assets/images/updatehui.png"> |
||||
<img src="../../../assets/images/deletehui.png"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="boxright"></div> |
||||
</div> |
||||
@ -0,0 +1,97 @@
|
||||
/* |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-19 15:50:20 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 15:46:44 |
||||
*/ |
||||
.box{ |
||||
height: 97%; |
||||
width: 100%; |
||||
padding: 10px; |
||||
background-color: #F7F8FA; |
||||
display: flex; |
||||
.boxleft{ |
||||
width: 20%; |
||||
height: 100%; |
||||
background-color: #FFFFFF; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.lefthead{ |
||||
height: 50px; |
||||
width: 100%; |
||||
display: flex; |
||||
border-bottom: 1px solid #F7F8FA; |
||||
span{ |
||||
font-size: 16px; |
||||
} |
||||
.leftheadone{ |
||||
width: 40%; |
||||
height: 100%; |
||||
span{ |
||||
margin: 10px 10px; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
.leftheadtwo{ |
||||
width: 20%; |
||||
height: 100%; |
||||
margin-left: 50%; |
||||
cursor: pointer; |
||||
img{ |
||||
position: relative; |
||||
top: 2px; |
||||
} |
||||
span{ |
||||
//margin-left: 70%; |
||||
//margin: 10px 10px; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
} |
||||
.leftbox{ |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.leftbody{ |
||||
width: 100%; |
||||
height: 40px; |
||||
display: flex; |
||||
.bodyname{ |
||||
height: 40px; |
||||
width: 60%; |
||||
span{ |
||||
font-size: 16px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
.bodycz{ |
||||
height: 40px; |
||||
width: 40%; |
||||
img{ |
||||
margin-left: 10px; |
||||
} |
||||
span{ |
||||
color: #B2BEC7; |
||||
font-size: 16px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
margin-left: 30%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.boxright{ |
||||
margin-left: 10px; |
||||
height: 100%; |
||||
width: 78%; |
||||
background-color: #FFFFFF; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PlanTemplateComponent } from './plan-template.component'; |
||||
|
||||
describe('PlanTemplateComponent', () => { |
||||
let component: PlanTemplateComponent; |
||||
let fixture: ComponentFixture<PlanTemplateComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PlanTemplateComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PlanTemplateComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,81 @@
|
||||
/* |
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-19 15:50:20 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 17:02:03 |
||||
*/ |
||||
import { Component, Inject, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
|
||||
@Component({ |
||||
selector: 'app-plan-template', |
||||
templateUrl: './plan-template.component.html', |
||||
styleUrls: ['./plan-template.component.scss'] |
||||
}) |
||||
export class PlanTemplateComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
//获取左侧单位信息
|
||||
newleftTabledata=[] |
||||
getLeftdata(){ |
||||
/* this.http.get("/api/PlanTemplate").subscribe((data:any)=>{ |
||||
this.leftTabledata=data |
||||
console.log(this.leftTabledata) |
||||
}) */ |
||||
} |
||||
//新建预案弹窗
|
||||
addKeyunit(){ |
||||
const dialogRef = this.dialog.open(addPlanname, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '340px', |
||||
height:'330px', |
||||
disableClose:true |
||||
|
||||
}); |
||||
dialogRef.afterClosed().subscribe(result => { |
||||
this.newleftTabledata.push(result) |
||||
console.log(this.newleftTabledata);
|
||||
}); |
||||
} |
||||
|
||||
} |
||||
//新建预案
|
||||
@Component({ |
||||
selector: 'addPlanname', |
||||
templateUrl: './addKeyname.html', |
||||
styleUrls: ['./addKeyname.scss'] |
||||
}) |
||||
export class addPlanname{ |
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<addPlanname>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {} |
||||
unitname//预案名称
|
||||
level//预案级别
|
||||
//取消按钮
|
||||
close(){ |
||||
this.dialogRef.close(); |
||||
} |
||||
newplan(){ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
if(this.unitname==undefined||this.unitname==''){ |
||||
this.snackBar.open('请输入预案名称!','确定',config); |
||||
} |
||||
else if(this.level==undefined||this.level==''){ |
||||
this.snackBar.open('请输入预案级别!','确定',config); |
||||
}else{ |
||||
let planData={ |
||||
name:this.unitname, |
||||
level:this.level |
||||
} |
||||
this.dialogRef.close(planData) |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 553 B |
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 335 B |
|
After Width: | Height: | Size: 345 B |
Loading…
Reference in new issue