20 changed files with 254 additions and 87 deletions
@ -1,6 +1,6 @@
|
||||
{ |
||||
"/api": { |
||||
"target": "http://39.106.78.171:9008", |
||||
"target": "http://39.106.78.171:8906", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
} |
||||
|
||||
@ -1 +1 @@
|
||||
<p>plan works!</p> |
||||
<p>三级预案!</p> |
||||
|
||||
@ -0,0 +1,16 @@
|
||||
nz-select { |
||||
margin: 0 8px 10px 0; |
||||
width: 120px; |
||||
// background-color: red; |
||||
} |
||||
|
||||
.logo-self { |
||||
font-size: 50px; |
||||
text-shadow: 0px 0px 6px #8df; |
||||
color: white; |
||||
font-weight: 600; |
||||
} |
||||
.font{ |
||||
font-size: 20px; |
||||
// font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; |
||||
} |
||||
@ -1 +1,58 @@
|
||||
<p>今日预警</p> |
||||
<div class="warningbox"> |
||||
<div class="title"> |
||||
当日违规事件列表 |
||||
</div> |
||||
<div class="search"> |
||||
<form nz-form [nzLayout]="'inline'" [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 style="margin-right: 0;" class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="button" class="reset"><i nz-icon [nzType]="'sync'"></i>重置</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
@ -0,0 +1,39 @@
|
||||
.warningbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
.title{ |
||||
width: 100%; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
.search{ |
||||
box-sizing: border-box; |
||||
padding: 0 36px; |
||||
width: 100%; |
||||
height: 32px; |
||||
form{ |
||||
width: 100%; |
||||
height: 32px; |
||||
} |
||||
.searchParams{ |
||||
width: 21.5%; |
||||
} |
||||
nz-date-picker{ |
||||
width: 145%; |
||||
background-color: #002552; |
||||
color: #8aacce; |
||||
} |
||||
button{ |
||||
width: 84px; |
||||
} |
||||
.submit{ |
||||
background-color: #013064; |
||||
border: 1px solid #4c8ac8; |
||||
color: #86bff3; |
||||
} |
||||
.reset{ |
||||
background-color: #010d26; |
||||
border: 1px solid #4c8ac8; |
||||
} |
||||
} |
||||
} |
||||
@ -1,15 +1,29 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
@Component({ |
||||
selector: 'app-today-warning', |
||||
templateUrl: './today-warning.component.html', |
||||
styleUrls: ['./today-warning.component.scss'] |
||||
}) |
||||
export class TodayWarningComponent 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) |
||||
} |
||||
} |
||||
|
||||
@ -1,9 +1,23 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 62px; |
||||
height: 52px; |
||||
background-image: linear-gradient(#001530, #051C3C ,#162f50, #243c55); |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: #fff; |
||||
box-sizing: border-box; |
||||
padding: 0 20px; |
||||
color: #8aacce; |
||||
} |
||||
.boxleft{ |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
// text-shadow: 0px 0px 2px #8df; |
||||
color: rgb(255, 255, 255); |
||||
} |
||||
.boxright{ |
||||
span{ |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,28 @@
|
||||
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; |
||||
|
||||
// @component-background: #002552; |
||||
|
||||
@border-color-base: #8aacce; |
||||
|
||||
// @text-color: #8aacce; |
||||
@text-color: #8aacce; |
||||
// @select-item-selected-bg: red; |
||||
|
||||
|
||||
|
||||
@select-background:#002552; |
||||
|
||||
.ant-select-arrow { |
||||
color: #8aacce; |
||||
} |
||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{ |
||||
border-radius: 0px; |
||||
} |
||||
.ant-picker{ |
||||
border-radius: 0px; |
||||
} |
||||
|
||||
@input-placeholder-color: #8aacce; |
||||
.ant-picker-suffix{ |
||||
color: #8aacce; |
||||
} |
||||
Loading…
Reference in new issue