12 changed files with 697 additions and 15 deletions
@ -0,0 +1,153 @@
|
||||
<div style="height: 100%;overflow-y: auto;"> |
||||
<div class="header" > |
||||
<form #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)]="companyName" autocomplete="off"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField ordiv"> |
||||
<label style="margin-right: 10px;">消防救援站:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js" (focus)="openorganizationbox()"> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox> |
||||
<div class="organizationbox" *ngIf="isorganizationbox"> |
||||
<div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button disabled ></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button |
||||
type="button" |
||||
mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位类型:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择单位类型' name="unittype" [(ngModel)]="unittype"> |
||||
<mat-option *ngFor="let unit of allunittype" [value]="unit.id" > |
||||
{{unit.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">统一社会信用代码:</label> |
||||
<mat-form-field> |
||||
<input matInput placeholder="请输入统一社会信用代码" name="reservePlanType" [(ngModel)]="reservePlanType" autocomplete="off"> |
||||
<!-- <mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型' [multiple]="true"> |
||||
<mat-option value=8>卡片预案</mat-option> |
||||
<mat-option value=1>二维预案</mat-option> |
||||
<mat-option value=2>三维预案</mat-option> |
||||
<mat-option value=4>其他预案</mat-option> |
||||
</mat-select> --> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">维护状态:</label> |
||||
<mat-form-field> |
||||
<mat-select name="toExamine" [(ngModel)]="toExamine" placeholder='请选择审核状态'> |
||||
<mat-option value="8">未提交审核</mat-option> |
||||
<mat-option value="1">审核中</mat-option> |
||||
<mat-option value="2">审核通过</mat-option> |
||||
<mat-option value="4">审核退回</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">添加时间:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime"> |
||||
</mat-form-field> |
||||
🠊 |
||||
<mat-form-field class="example-full-width"> |
||||
<input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">信息完整度排序:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择排序方式' [(ngModel)]="integritySort" name="integritySort"> |
||||
<mat-option value="desc">从高到低</mat-option> |
||||
<mat-option value="asc">从低到高</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="butclass" style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary" type="submit">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" >重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
<div class="newadd"> |
||||
<div> |
||||
<button mat-raised-button color="primary" color="warn">删除</button> |
||||
</div> |
||||
</div> |
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
|
||||
<table mat-table class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="unitname"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.company.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="integrity"> |
||||
<th mat-header-cell *matHeaderCellDef style="text-align: center;">信息完整度</th> |
||||
|
||||
</ng-container> |
||||
<ng-container matColumnDef="jurisdictionsquadron"> |
||||
<th mat-header-cell *matHeaderCellDef>消防救援站</th> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="unittype"> |
||||
<th mat-header-cell *matHeaderCellDef>单位类型</th> |
||||
</ng-container> |
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>统一社会信用代码</th> |
||||
</ng-container> |
||||
<ng-container matColumnDef="time"> |
||||
<th mat-header-cell *matHeaderCellDef>录入时间</th> |
||||
</ng-container> |
||||
<ng-container matColumnDef="passstate"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
|
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator pageEvent [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
> |
||||
|
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,256 @@
|
||||
.header { |
||||
width: 100%; |
||||
padding: 12px 10px; |
||||
// margin-bottom: 10px; |
||||
box-sizing: border-box; |
||||
// border-bottom: 1px solid black; |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 25px 0 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
// justify-content:center; |
||||
.queryField { |
||||
margin: 0 40px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
|
||||
} //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; |
||||
background-color: #fafafa; |
||||
li{ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
background-color: #fafafa; |
||||
} |
||||
mat-tree-node{ |
||||
cursor: pointer; |
||||
white-space:pre; |
||||
background-color: #fafafa; |
||||
} |
||||
mat-tree-node:hover{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
li{ |
||||
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); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.newadd{ |
||||
margin-top: 12px; |
||||
margin-left: 70px; |
||||
display: flex; |
||||
button{ |
||||
font-size: 16px; |
||||
width: 100px; |
||||
height: 36px; |
||||
} |
||||
} |
||||
.body{ |
||||
.buttonbox{ |
||||
padding-left: 50px; |
||||
button{ |
||||
margin:0 10px |
||||
} |
||||
} |
||||
.tablebox{ |
||||
table{ |
||||
width: 100%; |
||||
margin-left: 0%; |
||||
margin-top:15px; |
||||
} |
||||
mat-paginator{ |
||||
width: 100%; |
||||
margin-left: 0%; |
||||
} |
||||
.mat-column-unitname{ |
||||
width: 15%; |
||||
} |
||||
.mat-column-integrity{ |
||||
width: 13%; |
||||
} |
||||
.mat-column-operation{ |
||||
width: 5%; |
||||
} |
||||
.mat-column-jurisdictionsquadron{ |
||||
width: 10%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mat-header-cell{ |
||||
text-align: center; |
||||
} |
||||
.mat-cell{ |
||||
text-align: center; |
||||
span{ |
||||
// color:red; |
||||
// margin: 0 3px; |
||||
cursor: pointer; |
||||
} |
||||
span:hover{ |
||||
text-decoration:underline |
||||
} |
||||
.grey{ |
||||
color: grey; |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
|
||||
//完整度 |
||||
.integrityDiv{ |
||||
width: 70%; |
||||
height: 30px; |
||||
background-color: #e2e7ee; |
||||
// background-image: linear-gradient(to right, #e2e7ee ,#FF4500, #FF8C00,#32cd32); |
||||
margin: 0 auto; |
||||
position: relative; |
||||
.integrityNum{ |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
color: black; |
||||
font-weight: 800; |
||||
font-size: 15px; |
||||
cursor: default; |
||||
} |
||||
.integrityColorDiv{ |
||||
height: 100%; |
||||
} |
||||
.integrityDetails{ |
||||
position: absolute; |
||||
display: none; |
||||
width: 350px; |
||||
height:280px; |
||||
border: 1px solid rgba(0, 0, 0, 0.22); |
||||
background-color: white; |
||||
.integrityDetailsTop{ |
||||
width: 100%; |
||||
height: 23px; |
||||
line-height:23px; |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.22); |
||||
margin-bottom: 1px; |
||||
font-size: 14px; |
||||
span{ |
||||
display: inline-block; |
||||
text-align: center; |
||||
font-weight: 800; |
||||
} |
||||
.span1{ |
||||
width: 25%; |
||||
} |
||||
.span2{ |
||||
width: 60%; |
||||
} |
||||
.span3{ |
||||
width: 15%; |
||||
} |
||||
} |
||||
.integrityDetailsBody{ |
||||
ul{ |
||||
li{ |
||||
width: 100%; |
||||
height: 23px; |
||||
line-height: 23px; |
||||
margin: 3px 0; |
||||
div{ |
||||
float: left; |
||||
font-size: 13px; |
||||
} |
||||
.name{ |
||||
width: 25%; |
||||
height: 100%; |
||||
} |
||||
.colorDiv{ |
||||
width: 60%; |
||||
height: 100%; |
||||
position: relative; |
||||
.colorDivBac{ |
||||
width: 90%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
background-color: #dfe5ec; |
||||
border-radius: 5px; |
||||
.colorDivCon{ |
||||
border-radius: 5px; |
||||
height: 100%; |
||||
background-color: #2398f1; |
||||
} |
||||
} |
||||
span{ |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
// color: white; |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
.number{ |
||||
width: 15%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.bottomposition{ |
||||
top: 2px; |
||||
left: 188px; |
||||
} |
||||
.topposition{ |
||||
top: -252px; |
||||
left: 188px; |
||||
} |
||||
} |
||||
.integrityDiv:hover{ |
||||
.integrityDetails{ |
||||
display: block; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { MaintainUpComponent } from './maintain-up.component'; |
||||
|
||||
describe('MaintainUpComponent', () => { |
||||
let component: MaintainUpComponent; |
||||
let fixture: ComponentFixture<MaintainUpComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ MaintainUpComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(MaintainUpComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,184 @@
|
||||
/* |
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: sueRimn |
||||
* @Date: 2021-01-28 14:13:20 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-01-28 14:53:18 |
||||
*/ |
||||
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 { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { ConstantPool } from '@angular/compiler'; |
||||
|
||||
@Component({ |
||||
selector: 'app-maintain-up', |
||||
templateUrl: './maintain-up.component.html', |
||||
styleUrls: ['./maintain-up.component.scss'] |
||||
}) |
||||
export class MaintainUpComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getunitdata(); |
||||
this.getOrganizations(); |
||||
this.getUnittype(); |
||||
let level = sessionStorage.getItem("level"); |
||||
if(level == "0"){//如果是总队
|
||||
this.preparelevels = [ |
||||
{name:"总队",value:"1"}, |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "1"){//如果是支队
|
||||
this.preparelevels = [ |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "2"){//如果是大队
|
||||
this.preparelevels = [ |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "3"){//如果是中队
|
||||
this.preparelevels = [ |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
} |
||||
|
||||
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; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
PageNumber:any; //第几页
|
||||
|
||||
organizationName:any //当前单位组织机构名称
|
||||
preparelevels:any |
||||
integritySort:any //完整度排序
|
||||
haveyuan//有无预案
|
||||
companyName:any //单位名称
|
||||
js:any //所选组织机构
|
||||
jsId:any //所选组织机构的id
|
||||
jscheck:boolean //所选组织机构勾选框
|
||||
unittype:any //单位类型
|
||||
reservePlanType:any //预案类型
|
||||
toExamine:any //审核状态
|
||||
preparelevel:any //编制级别
|
||||
plcheck:boolean //编制级别勾选框
|
||||
//得到当前单位信息
|
||||
getunitdata(){ |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
} |
||||
) |
||||
} |
||||
treedata:any //组织机构树型数据
|
||||
newArr:any = [] |
||||
newallorganizations:any //用于存储在原始数据基础上的每个机构增加children字段
|
||||
//得到当前单位所在组织机构的tree型数据
|
||||
getpresentOrganization(){ |
||||
this.newallorganizations = this.allorganizations |
||||
|
||||
this.newallorganizations.forEach(item => { |
||||
item.children = [] |
||||
this.newallorganizations.forEach(element => { |
||||
if(element.parentId == item.id){ |
||||
item.children.push(element) |
||||
} |
||||
}); |
||||
}); |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
if(this.organizationName){ |
||||
this.newallorganizations.forEach(item => { |
||||
if(item.name == this.organizationName){ |
||||
this.dataSource.data = [item] |
||||
} |
||||
}); |
||||
}else{ |
||||
this.dataSource.data = this.tree.toTree(this.treedata); |
||||
} |
||||
} |
||||
) |
||||
|
||||
|
||||
} |
||||
//获得所有组织机构
|
||||
getOrganizations(){ |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.allorganizations = data |
||||
this.treedata = this.tree.toTree(data); |
||||
this.getpresentOrganization(); |
||||
} |
||||
) |
||||
} |
||||
//获得所有单位类型
|
||||
getUnittype(){ |
||||
this.http.get('/api/BuildingTypes/Simple').subscribe( |
||||
data=>{ |
||||
this.allunittype = data |
||||
} |
||||
) |
||||
} |
||||
//辖区中队div是否显示
|
||||
isorganizationbox:boolean = false |
||||
//点击辖区中队树，将选择的辖区中队添加到变量
|
||||
add(node) { |
||||
this.isorganizationbox = false |
||||
this.js = node.name |
||||
this.jsId = node.id |
||||
} |
||||
//打开辖区中队隐藏框
|
||||
openorganizationbox() { |
||||
this.isorganizationbox = true |
||||
} |
||||
//关闭出现的组织机构div
|
||||
closediv(){ |
||||
this.isorganizationbox = false |
||||
} |
||||
|
||||
|
||||
|
||||
displayedColumns: string[] = ['unitname','integrity','jurisdictionsquadron', 'unittype','plantype', 'time','passstate','operation']; |
||||
allunittype:any //所有单位类型
|
||||
allorganizations:any //所有组织机构
|
||||
addtime |
||||
endtime |
||||
|
||||
} |
||||
Loading…
Reference in new issue