16 changed files with 343 additions and 78 deletions
@ -1 +1,78 @@
|
||||
<p>违规记录</p> |
||||
<div class="recordsbox"> |
||||
<div class="search"> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select id="level" formControlName="level" nzPlaceHolder="请选择级别"> |
||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select id="type" formControlName="type" nzPlaceHolder="请选择事件类型"> |
||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select id="site" formControlName="site" nzPlaceHolder="请选择地点"> |
||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control [nzSm]="16" [nzXs]="24"> |
||||
<nz-date-picker id="datePicker" formControlName="datePicker" nzPlaceHolder="请选择时间"></nz-date-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||
[nzType]="'sync'"></i>重置</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="title"> |
||||
<app-title></app-title> |
||||
</div> |
||||
<div class="chartsbox"> |
||||
<div class="charts"> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="title"> |
||||
<app-title></app-title> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<div class="table"> |
||||
<div class="th"> |
||||
|
||||
</div> |
||||
<div class="tr"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,75 @@
|
||||
.recordsbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
// background-image: radial-gradient(circle,#004078, #012b57, #00142f); |
||||
|
||||
.title { |
||||
margin-bottom: 15px; |
||||
width: 100%; |
||||
height: 64px; |
||||
box-sizing: border-box; |
||||
padding: 0 28px; |
||||
} |
||||
.chartsbox{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
.charts{ |
||||
width: 98%; |
||||
height: 300px; |
||||
border: 1px solid white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 36px; |
||||
width: 100%; |
||||
height: 32px; |
||||
margin: 20px 0px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
|
||||
.searchParams { |
||||
width: 22%; |
||||
} |
||||
|
||||
.btn { |
||||
width: 5%; |
||||
} |
||||
|
||||
nz-select { |
||||
color: #fff; |
||||
} |
||||
|
||||
nz-date-picker { |
||||
|
||||
background-color: #002552; |
||||
width: 145%; |
||||
} |
||||
|
||||
} |
||||
|
||||
.submit { |
||||
background-color: #013064; |
||||
border: 1px solid #4c8ac8; |
||||
color: #86bff3; |
||||
} |
||||
|
||||
.reset { |
||||
background-color: #010d26; |
||||
border: 1px solid #4c8ac8; |
||||
color: #86bff3; |
||||
} |
||||
} |
||||
@ -1,15 +1,37 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
@Component({ |
||||
selector: 'app-criminal-records', |
||||
templateUrl: './criminal-records.component.html', |
||||
styleUrls: ['./criminal-records.component.scss'] |
||||
}) |
||||
export class CriminalRecordsComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
level: [null], |
||||
type: [null], |
||||
site: [null], |
||||
datePicker: [null] |
||||
}); |
||||
} |
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
|
||||
console.log(this.validateForm) |
||||
} |
||||
resetForm(e: MouseEvent): void { |
||||
e.preventDefault(); |
||||
this.validateForm.reset(); |
||||
for (const key in this.validateForm.controls) { |
||||
this.validateForm.controls[key].markAsPristine(); |
||||
this.validateForm.controls[key].updateValueAndValidity(); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
@ -0,0 +1,8 @@
|
||||
<div class="titlebox"> |
||||
<img src="../../../assets/images/AnXinQQ.jpg" alt=""> |
||||
<div class="content"> |
||||
<div class="contentitem"> |
||||
<span>违规类型统计</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,34 @@
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
max-width: 46px; |
||||
max-height: 46px; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
height: 46px; |
||||
display: flex; |
||||
align-items: center; |
||||
background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147); |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 33px; |
||||
line-height: 33px; |
||||
background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147); |
||||
|
||||
span { |
||||
margin-left: 20px; |
||||
color: #bce0ff; |
||||
font-size: 20px; |
||||
font-family: titlefont; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-title', |
||||
templateUrl: './title.component.html', |
||||
styleUrls: ['./title.component.scss'] |
||||
}) |
||||
export class TitleComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue