13 changed files with 867 additions and 24 deletions
@ -1,27 +1,66 @@ |
|||||||
@charset "utf-8"; |
@charset "utf-8"; |
||||||
html,body,ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{ |
html, |
||||||
margin:0; |
body, |
||||||
padding:0; |
ul, |
||||||
font-size:16px; |
ol, |
||||||
|
dl, |
||||||
|
li, |
||||||
|
dt, |
||||||
|
dd, |
||||||
|
p, |
||||||
|
form, |
||||||
|
input, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6, |
||||||
|
section, |
||||||
|
article, |
||||||
|
aside, |
||||||
|
header, |
||||||
|
footer, |
||||||
|
nav, |
||||||
|
figure, |
||||||
|
time, |
||||||
|
mark, |
||||||
|
main, |
||||||
|
canvas { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 16px; |
||||||
} |
} |
||||||
b,strong,i,em,h1,h2,h3,h4,h5,h6{ |
b, |
||||||
font-weight:500; |
strong, |
||||||
font-style:normal; |
i, |
||||||
|
em, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
font-weight: 500; |
||||||
|
font-style: normal; |
||||||
} |
} |
||||||
img{ |
img { |
||||||
border:none; |
border: none; |
||||||
} |
} |
||||||
a{ |
a { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
color:#000; |
color: #000; |
||||||
ul,ol,li{ |
ul, |
||||||
list-style:none; |
ol, |
||||||
|
li { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
} |
} |
||||||
.clearfn:after{ |
.clearfn:after { |
||||||
content:""; |
content: ""; |
||||||
clear:both; |
clear: both; |
||||||
display: block; |
display: block; |
||||||
overflow:hidden; |
overflow: hidden; |
||||||
height:0; |
height: 0; |
||||||
visibility: hidden; |
visibility: hidden; |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,63 @@ |
|||||||
|
<!-- <p>演练记录</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="header"> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||||
|
<div class="queryBox"> |
||||||
|
|
||||||
|
<div class="queryField"> |
||||||
|
<label style="margin-right: 10px;">演练对象:</label> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input matInput placeholder="请输入演练对象" name="companyName" [(ngModel)]="name" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="queryField"> |
||||||
|
<label style="margin-right: 10px;">演练时间:</label> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input matInput placeholder="请选择演练时间" name="companyName" [(ngModel)]="time" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="queryField"> |
||||||
|
<button mat-raised-button color="primary">查询</button> |
||||||
|
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="body"> |
||||||
|
<div class="tablebox"> |
||||||
|
|
||||||
|
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||||
|
<ng-container matColumnDef="name"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>演练对象</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="time1"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>演练时间</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.time1}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="time2"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>演练时段</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.time2}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="type"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>演练形式</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.type}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="operate"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||||
|
<td mat-cell *matCellDef="let element" class="operate"> |
||||||
|
<span>查看</span> |
||||||
|
<span>详情</span> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" |
||||||
|
(page)="chagePage($event)"> |
||||||
|
</mat-paginator> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,171 @@ |
|||||||
|
.box { |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.header { |
||||||
|
width: 100%; |
||||||
|
padding: 12px 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.queryBox { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 5px 0 0 5px; |
||||||
|
// margin-left: 50px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
// justify-content:center; |
||||||
|
.queryField { |
||||||
|
margin: 0 10px; |
||||||
|
|
||||||
|
input { |
||||||
|
width: 180px; |
||||||
|
height: 22px; |
||||||
|
line-height: 22px; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-device-width:1400px)and (min-device-width:1200px) { |
||||||
|
|
||||||
|
//margin: 3px 10px; |
||||||
|
mat-form-field { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-device-width:1200px) { |
||||||
|
|
||||||
|
//margin: 3px 0 3px 10px; |
||||||
|
mat-form-field { |
||||||
|
width: 110px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//queryBox |
||||||
|
.butclass { |
||||||
|
button { |
||||||
|
width: 80px; |
||||||
|
height: 36px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ordiv { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.organizationbox { |
||||||
|
width: 450px; |
||||||
|
height: 200px; |
||||||
|
background: white; |
||||||
|
position: absolute; |
||||||
|
top: 48px; |
||||||
|
left: 77px; |
||||||
|
z-index: 999; |
||||||
|
border: 1px solid grey; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
li { |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
mat-tree-node { |
||||||
|
cursor: pointer; |
||||||
|
white-space: pre; |
||||||
|
} |
||||||
|
|
||||||
|
mat-tree-node:hover { |
||||||
|
background: rgba(225, 225, 225, 0.8); |
||||||
|
} |
||||||
|
|
||||||
|
.closediv { |
||||||
|
z-index: 100; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
cursor: pointer; |
||||||
|
line-height: 30px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.closediv:hover { |
||||||
|
background: rgba(225, 225, 225, 0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.body { |
||||||
|
.buttonbox { |
||||||
|
padding-left: 50px; |
||||||
|
|
||||||
|
button { |
||||||
|
margin: 0 10px |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
.add { |
||||||
|
cursor: auto; |
||||||
|
text-decoration: none; |
||||||
|
display: block; |
||||||
|
width: 40px; |
||||||
|
height: 20px; |
||||||
|
background: #1AE2AC; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 20px; |
||||||
|
color: #FFFFFF; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.weihu { |
||||||
|
cursor: auto; |
||||||
|
text-decoration: none; |
||||||
|
display: block; |
||||||
|
width: 64px; |
||||||
|
height: 20px; |
||||||
|
background: #FFC94B; |
||||||
|
font-size: 12px; |
||||||
|
color: #FFFFFF; |
||||||
|
line-height: 20px; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
// margin-left: 2%; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
mat-paginator { |
||||||
|
width: 100%; |
||||||
|
// margin-left: 2%; |
||||||
|
// margin-top: 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mat-header-cell, |
||||||
|
.mat-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.operate { |
||||||
|
span { |
||||||
|
color: blue; |
||||||
|
margin: 0 3px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { DrillRecordComponent } from './drill-record.component'; |
||||||
|
|
||||||
|
describe('DrillRecordComponent', () => { |
||||||
|
let component: DrillRecordComponent; |
||||||
|
let fixture: ComponentFixture<DrillRecordComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ DrillRecordComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(DrillRecordComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
import { Component, OnInit, ViewChild, Inject } from "@angular/core"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { |
||||||
|
MatTreeFlatDataSource, |
||||||
|
MatTreeFlattener, |
||||||
|
} from "@angular/material/tree"; |
||||||
|
import { MatPaginator } from "@angular/material/paginator"; |
||||||
|
import { FlatTreeControl } from "@angular/cdk/tree"; |
||||||
|
import { FormControl } from "@angular/forms"; |
||||||
|
import { Router, ActivatedRoute } from "@angular/router"; |
||||||
|
import { PageEvent } from "@angular/material/paginator"; |
||||||
|
import { MatDialog } from "@angular/material/dialog"; |
||||||
|
import { MatSnackBar } from "@angular/material/snack-bar"; |
||||||
|
import { TreeService } from "../../http-interceptors/tree.service"; |
||||||
|
@Component({ |
||||||
|
selector: "app-drill-record", |
||||||
|
templateUrl: "./drill-record.component.html", |
||||||
|
styleUrls: ["./drill-record.component.scss"], |
||||||
|
}) |
||||||
|
export class DrillRecordComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
private http: HttpClient, |
||||||
|
private router: Router, |
||||||
|
private route: ActivatedRoute, |
||||||
|
private tree: TreeService, |
||||||
|
public dialog: MatDialog, |
||||||
|
public snackBar: MatSnackBar |
||||||
|
) {} |
||||||
|
|
||||||
|
private _transformer = (node, level: number) => { |
||||||
|
//初始化tree
|
||||||
|
return { |
||||||
|
expandable: !!node.children && node.children.length > 0, |
||||||
|
name: node.name, |
||||||
|
level: level, |
||||||
|
id: node.id, |
||||||
|
parentId: node.parentId, |
||||||
|
children: node.children, |
||||||
|
}; |
||||||
|
}; |
||||||
|
treeControl = new FlatTreeControl<any>( |
||||||
|
(node) => node.level, |
||||||
|
(node) => node.expandable |
||||||
|
); |
||||||
|
treeFlattener = new MatTreeFlattener( |
||||||
|
this._transformer, |
||||||
|
(node) => node.level, |
||||||
|
(node) => node.expandable, |
||||||
|
(node) => node.children |
||||||
|
); |
||||||
|
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||||
|
myControl = new FormControl(); |
||||||
|
hasChild = (_: number, node: any) => node.expandable; |
||||||
|
//分页
|
||||||
|
@ViewChild(MatPaginator, { static: true }) |
||||||
|
pageEvent: PageEvent; |
||||||
|
paginator: MatPaginator; |
||||||
|
length: any = 4; //共多少条数据
|
||||||
|
pageSize: any = 10; //每页条数
|
||||||
|
pageSizeOptions: number[] = [10]; //设置每页条数
|
||||||
|
PageNumber: any = 1; //第几页
|
||||||
|
|
||||||
|
displayedColumns: string[] = ["name", "time1", "time2", "type", "operate"]; |
||||||
|
allorganizations: any; //所有组织机构
|
||||||
|
allunittype: any; //所有单位类型
|
||||||
|
tabledataSource: any; //表格数据
|
||||||
|
IsNewData = ""; //维护更新活新增
|
||||||
|
|
||||||
|
preparelevels: any; |
||||||
|
ngOnInit(): void { |
||||||
|
this.tabledataSource = [ |
||||||
|
{ |
||||||
|
name: "中保大厦有限公司", |
||||||
|
time1: "2023-5-18 07:19", |
||||||
|
time2: "2023.5.18-2023.5.19", |
||||||
|
type: "二维预案演练", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上海通高制造有限公司", |
||||||
|
time1: "2023-5-19 09:09", |
||||||
|
time2: "2023.5.19-2023.5.19", |
||||||
|
type: "二维预案演练", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "怡莲超市", |
||||||
|
time1: "2023-5-20 08:23", |
||||||
|
time2: "2023.5.20-2023.5.21", |
||||||
|
type: "二维预案演练", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "永兴商务广场", |
||||||
|
time1: "2023-5-25 12:50", |
||||||
|
time2: "2023.5.25-2023.5.26", |
||||||
|
type: "二维预案演练", |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
//分页事件
|
||||||
|
chagePage(e) { |
||||||
|
this.PageNumber = e.pageIndex + 1; |
||||||
|
} |
||||||
|
|
||||||
|
name; |
||||||
|
time; |
||||||
|
//查询
|
||||||
|
onSubmit(e) { |
||||||
|
this.PageNumber = 1; |
||||||
|
this.pageEvent.pageIndex = 0; |
||||||
|
} |
||||||
|
|
||||||
|
//重置
|
||||||
|
reset() {} |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
<!-- <p>六熟悉</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="header"> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||||
|
<div class="queryBox"> |
||||||
|
|
||||||
|
<div class="queryField"> |
||||||
|
<label style="margin-right: 10px;">熟悉对象:</label> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input matInput placeholder="请输入熟悉对象" name="companyName" [(ngModel)]="name" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="queryField"> |
||||||
|
<label style="margin-right: 10px;">熟悉时间:</label> |
||||||
|
<mat-form-field class="example-full-width"> |
||||||
|
<input matInput placeholder="请选择熟悉时间" name="companyName" [(ngModel)]="time" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="queryField"> |
||||||
|
<button mat-raised-button color="primary">查询</button> |
||||||
|
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="body"> |
||||||
|
<div class="tablebox"> |
||||||
|
|
||||||
|
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||||
|
<ng-container matColumnDef="name"> |
||||||
|
<th mat-header-cell *matHeaderCellDef style="width: 10%;">熟悉对象</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="time"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>熟悉时间</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.time}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="leader"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>带队领导</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.leader}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="upload"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>上传人员</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.upload}}</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="operate"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||||
|
<td mat-cell *matCellDef="let element" class="operate"> |
||||||
|
<span>查看</span> |
||||||
|
<span>详情</span> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" |
||||||
|
(page)="chagePage($event)"> |
||||||
|
</mat-paginator> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,171 @@ |
|||||||
|
.box { |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.header { |
||||||
|
width: 100%; |
||||||
|
padding: 12px 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.queryBox { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 5px 0 0 5px; |
||||||
|
// margin-left: 50px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
// justify-content:center; |
||||||
|
.queryField { |
||||||
|
margin: 0 10px; |
||||||
|
|
||||||
|
input { |
||||||
|
width: 180px; |
||||||
|
height: 22px; |
||||||
|
line-height: 22px; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-device-width:1400px)and (min-device-width:1200px) { |
||||||
|
|
||||||
|
//margin: 3px 10px; |
||||||
|
mat-form-field { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-device-width:1200px) { |
||||||
|
|
||||||
|
//margin: 3px 0 3px 10px; |
||||||
|
mat-form-field { |
||||||
|
width: 110px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//queryBox |
||||||
|
.butclass { |
||||||
|
button { |
||||||
|
width: 80px; |
||||||
|
height: 36px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ordiv { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.organizationbox { |
||||||
|
width: 450px; |
||||||
|
height: 200px; |
||||||
|
background: white; |
||||||
|
position: absolute; |
||||||
|
top: 48px; |
||||||
|
left: 77px; |
||||||
|
z-index: 999; |
||||||
|
border: 1px solid grey; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
li { |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
mat-tree-node { |
||||||
|
cursor: pointer; |
||||||
|
white-space: pre; |
||||||
|
} |
||||||
|
|
||||||
|
mat-tree-node:hover { |
||||||
|
background: rgba(225, 225, 225, 0.8); |
||||||
|
} |
||||||
|
|
||||||
|
.closediv { |
||||||
|
z-index: 100; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
cursor: pointer; |
||||||
|
line-height: 30px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.closediv:hover { |
||||||
|
background: rgba(225, 225, 225, 0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.body { |
||||||
|
.buttonbox { |
||||||
|
padding-left: 50px; |
||||||
|
|
||||||
|
button { |
||||||
|
margin: 0 10px |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
.add { |
||||||
|
cursor: auto; |
||||||
|
text-decoration: none; |
||||||
|
display: block; |
||||||
|
width: 40px; |
||||||
|
height: 20px; |
||||||
|
background: #1AE2AC; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 20px; |
||||||
|
color: #FFFFFF; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.weihu { |
||||||
|
cursor: auto; |
||||||
|
text-decoration: none; |
||||||
|
display: block; |
||||||
|
width: 64px; |
||||||
|
height: 20px; |
||||||
|
background: #FFC94B; |
||||||
|
font-size: 12px; |
||||||
|
color: #FFFFFF; |
||||||
|
line-height: 20px; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
// margin-left: 2%; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
mat-paginator { |
||||||
|
width: 100%; |
||||||
|
// margin-left: 2%; |
||||||
|
// margin-top: 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mat-header-cell, |
||||||
|
.mat-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.operate { |
||||||
|
span { |
||||||
|
color: blue; |
||||||
|
margin: 0 3px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { SixFamiliarityComponent } from './six-familiarity.component'; |
||||||
|
|
||||||
|
describe('SixFamiliarityComponent', () => { |
||||||
|
let component: SixFamiliarityComponent; |
||||||
|
let fixture: ComponentFixture<SixFamiliarityComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ SixFamiliarityComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(SixFamiliarityComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,166 @@ |
|||||||
|
import { Component, OnInit, ViewChild, Inject } from "@angular/core"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { |
||||||
|
MatTreeFlatDataSource, |
||||||
|
MatTreeFlattener, |
||||||
|
} from "@angular/material/tree"; |
||||||
|
import { MatPaginator } from "@angular/material/paginator"; |
||||||
|
import { FlatTreeControl } from "@angular/cdk/tree"; |
||||||
|
import { FormControl } from "@angular/forms"; |
||||||
|
import { Router, ActivatedRoute } from "@angular/router"; |
||||||
|
import { PageEvent } from "@angular/material/paginator"; |
||||||
|
import { MatDialog } from "@angular/material/dialog"; |
||||||
|
import { MatSnackBar } from "@angular/material/snack-bar"; |
||||||
|
import { TreeService } from "../../http-interceptors/tree.service"; |
||||||
|
@Component({ |
||||||
|
selector: "app-six-familiarity", |
||||||
|
templateUrl: "./six-familiarity.component.html", |
||||||
|
styleUrls: ["./six-familiarity.component.scss"], |
||||||
|
}) |
||||||
|
export class SixFamiliarityComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
private http: HttpClient, |
||||||
|
private router: Router, |
||||||
|
private route: ActivatedRoute, |
||||||
|
private tree: TreeService, |
||||||
|
public dialog: MatDialog, |
||||||
|
public snackBar: MatSnackBar |
||||||
|
) {} |
||||||
|
|
||||||
|
private _transformer = (node, level: number) => { |
||||||
|
//初始化tree
|
||||||
|
return { |
||||||
|
expandable: !!node.children && node.children.length > 0, |
||||||
|
name: node.name, |
||||||
|
level: level, |
||||||
|
id: node.id, |
||||||
|
parentId: node.parentId, |
||||||
|
children: node.children, |
||||||
|
}; |
||||||
|
}; |
||||||
|
treeControl = new FlatTreeControl<any>( |
||||||
|
(node) => node.level, |
||||||
|
(node) => node.expandable |
||||||
|
); |
||||||
|
treeFlattener = new MatTreeFlattener( |
||||||
|
this._transformer, |
||||||
|
(node) => node.level, |
||||||
|
(node) => node.expandable, |
||||||
|
(node) => node.children |
||||||
|
); |
||||||
|
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||||
|
myControl = new FormControl(); |
||||||
|
hasChild = (_: number, node: any) => node.expandable; |
||||||
|
//分页
|
||||||
|
@ViewChild(MatPaginator, { static: true }) |
||||||
|
pageEvent: PageEvent; |
||||||
|
paginator: MatPaginator; |
||||||
|
length: any = 13; //共多少条数据
|
||||||
|
pageSize: any = 10; //每页条数
|
||||||
|
pageSizeOptions: number[] = [10]; //设置每页条数
|
||||||
|
PageNumber: any = 1; //第几页
|
||||||
|
|
||||||
|
displayedColumns: string[] = ["name", "time", "leader", "upload", "operate"]; |
||||||
|
allorganizations: any; //所有组织机构
|
||||||
|
allunittype: any; //所有单位类型
|
||||||
|
tabledataSource: any; //表格数据
|
||||||
|
IsNewData = ""; //维护更新活新增
|
||||||
|
|
||||||
|
preparelevels: any; |
||||||
|
|
||||||
|
arr1 = [ |
||||||
|
{ |
||||||
|
name: "上海百联物业管理有限公司（福兴大厦）", |
||||||
|
time: "2023-5-18 07:19", |
||||||
|
leader: "郑子墨", |
||||||
|
upload: "赵竹林", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "未来资产大厦", |
||||||
|
time: "2023-5-18 08:59", |
||||||
|
leader: "何仙超", |
||||||
|
upload: "何晨", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "星展银行大厦", |
||||||
|
time: "2023-5-18 11:22", |
||||||
|
leader: "吴洁力", |
||||||
|
upload: "赵玉", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "中国金融信息中心", |
||||||
|
time: "2023-5-19 12:29", |
||||||
|
leader: "吴易奚", |
||||||
|
upload: "赵宵蕙", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "中保大厦有限公司", |
||||||
|
time: "2023-5-20 13:07", |
||||||
|
leader: "周伟林", |
||||||
|
upload: "李英顺", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上海国际航运大厦有限公司海神诺富特大酒店", |
||||||
|
time: "2023-5-21 16:16", |
||||||
|
leader: "李琳颖", |
||||||
|
upload: "吴斯怡", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "东方绿舟度假村", |
||||||
|
time: "2023-5-22 15:50", |
||||||
|
leader: "李双秆", |
||||||
|
upload: "钱浩宇", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上海市金山食品工业学校", |
||||||
|
time: "2023-5-22 08:39", |
||||||
|
leader: "孙正容", |
||||||
|
upload: "孙正云", |
||||||
|
}, |
||||||
|
]; |
||||||
|
arr2=[ |
||||||
|
{ |
||||||
|
name: "上海汇资百货有限公司", |
||||||
|
time: "2023-5-23 05:25", |
||||||
|
leader: "王英皓", |
||||||
|
upload: "赵竹林", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上海良骤兴餐饮有限公司", |
||||||
|
time: "2023-5-23 13:14", |
||||||
|
leader: "蔡坤", |
||||||
|
upload: "何晨", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上海红珍娱乐有限公司", |
||||||
|
time: "2023-5-23 18:06", |
||||||
|
leader: "徐皓", |
||||||
|
upload: "赵玉", |
||||||
|
}, |
||||||
|
] |
||||||
|
ngOnInit(): void { |
||||||
|
this.tabledataSource = this.arr1; |
||||||
|
} |
||||||
|
|
||||||
|
//分页事件
|
||||||
|
chagePage(e) { |
||||||
|
console.log(e) |
||||||
|
// this.PageNumber = e.pageIndex + 1;
|
||||||
|
if(e.pageIndex === 1){ |
||||||
|
this.tabledataSource = this.arr2; |
||||||
|
}else{ |
||||||
|
this.tabledataSource = this.arr1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
name; |
||||||
|
time; |
||||||
|
//查询
|
||||||
|
onSubmit(e) { |
||||||
|
this.PageNumber = 1; |
||||||
|
this.pageEvent.pageIndex = 0; |
||||||
|
} |
||||||
|
|
||||||
|
//重置
|
||||||
|
reset() {} |
||||||
|
} |
||||||
Loading…
Reference in new issue