26 changed files with 514 additions and 132 deletions
@ -0,0 +1,153 @@
|
||||
<div class="warningbox"> |
||||
<div class="title"> |
||||
<app-title [name]="'当日违规事件列表'"></app-title> |
||||
</div> |
||||
<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="company" formControlName="company" 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="area" formControlName="area" 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="warningnumber"> |
||||
<span class="num">39</span> |
||||
<span class="today">今日违规</span> |
||||
</div> --> |
||||
<div class="listbox"> |
||||
<div nz-row class="listitem listitemhead"> |
||||
<div nz-col nzSpan="2" style="box-sizing: border-box;padding-left: 10px;"> |
||||
预警级别 |
||||
</div> |
||||
<div nz-col nzSpan="2"> |
||||
预警类型 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
违规信息 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
所属公司 |
||||
</div> |
||||
<div nz-col nzSpan="2"> |
||||
区域 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
站点 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
摄像头 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
违规时间 |
||||
</div> |
||||
<div nz-col nzSpan="2"> |
||||
操作 |
||||
</div> |
||||
</div> |
||||
<div nz-row class="listitem" *ngFor="let item of list"> |
||||
<div nz-col nzSpan="2"> |
||||
<span *ngIf="item.level === 1" style="color: #FF4B65;"> |
||||
<img src="../../../assets/images/level1.png"> |
||||
Ⅰ级 |
||||
</span> |
||||
<span *ngIf="item.level === 2" style="color: #FFBD4B;"> |
||||
<img src="../../../assets/images/level2.png"> |
||||
Ⅱ级 |
||||
</span> |
||||
<span *ngIf="item.level === 3" style="color: #23D9FF;"> |
||||
<img src="../../../assets/images/level3.png"> |
||||
Ⅲ级 |
||||
</span> |
||||
</div> |
||||
<div nz-col nzSpan="2"> |
||||
加油站违规 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
工作人员倚靠加油机或立柱 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
中化北京分公司 |
||||
</div> |
||||
<div nz-col nzSpan="2"> |
||||
北京-朝阳 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
北京市第十九加油站 |
||||
<span class="propsm propsm1" *ngIf="item.prop == 1">自营</span> |
||||
<span class="propsm propsm2" *ngIf="item.prop == 2">加盟</span> |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
加油区2号摄像头 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
2021-10-12 09:28:13 |
||||
</div> |
||||
<div nz-col nzSpan="2"> |
||||
<button nz-button>查看</button> |
||||
<img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,157 @@
|
||||
.warningbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.title { |
||||
box-sizing: border-box; |
||||
padding: 0 20PX; |
||||
width: 100%; |
||||
height: 48px; |
||||
margin: 16px 0; |
||||
} |
||||
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 36px; |
||||
width: 100%; |
||||
height: 32px; |
||||
|
||||
// margin-bottom: 18px; |
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
|
||||
.searchParams { |
||||
width: 14.5%; |
||||
} |
||||
|
||||
.btn { |
||||
width: 5%; |
||||
} |
||||
|
||||
nz-select { |
||||
color: #fff; |
||||
} |
||||
|
||||
nz-date-picker { |
||||
background-color: #002552; |
||||
width: 145%; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.warningnumber { |
||||
position: absolute; |
||||
left: 23px; |
||||
top: -60px; |
||||
|
||||
.num { |
||||
font-size: 50px; |
||||
text-shadow: 0px 0px 6px #8df; |
||||
color: white; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.today { |
||||
font-size: 18px; |
||||
font-family: titlefont; |
||||
color: #D0EAFF; |
||||
} |
||||
} |
||||
|
||||
.listbox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
box-sizing: border-box; |
||||
padding: 20px 47px 20px 39px; |
||||
|
||||
.listitem { |
||||
width: 100%; |
||||
height: 78px; |
||||
display: flex; |
||||
align-items: center; |
||||
border: 1px solid rgba(54, 162, 255, 0.478); |
||||
color: #91CCFF; |
||||
margin-bottom: 12px; |
||||
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); |
||||
box-sizing: border-box; |
||||
padding-left: 20px; |
||||
|
||||
div { |
||||
font-size: 15px; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: flex; |
||||
align-items: center; |
||||
button { |
||||
font-size: 15px; |
||||
background-color: #013064; |
||||
border: 1px solid #4c8ac8; |
||||
color: #91CCFF; |
||||
} |
||||
} |
||||
|
||||
.propsm { |
||||
display: inline-block; |
||||
width: 38px; |
||||
height: 20px; |
||||
line-height: 20px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
border-radius: 2px; |
||||
text-align: center; |
||||
margin-left: 8px; |
||||
} |
||||
.propsm1 { |
||||
background: #2399FF; |
||||
} |
||||
.propsm2 { |
||||
background: #FF9963; |
||||
} |
||||
} |
||||
|
||||
.listitemhead { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
background: rgba(35, 153, 255, 0.22); |
||||
border: 1px solid rgba(35, 217, 255, 0.4); |
||||
color: #23D9FF; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
//遮罩层 |
||||
::ng-deep .vertical-center-modal { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
::ng-deep .ant-modal-body { |
||||
background: #072549; |
||||
height: 660px; |
||||
padding: 5px; |
||||
// border: 1px solid #8eb9e3; |
||||
box-shadow: 0 0 3px #8eb9e3; |
||||
color: #fff; |
||||
} |
||||
|
||||
::ng-deep .ant-modal-close-x { |
||||
width: 36px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
color: white; |
||||
} |
||||
|
||||
::ng-deep .vertical-center-modal .ant-modal { |
||||
top: 0; |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
@Component({ |
||||
selector: 'app-today-warning-admin', |
||||
templateUrl: './today-warning-admin.component.html', |
||||
styleUrls: ['./today-warning-admin.component.scss'] |
||||
}) |
||||
export class TodayWarningAdminComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
level: [null], |
||||
type: [null], |
||||
company: [null], |
||||
area: [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(); |
||||
} |
||||
} |
||||
|
||||
list: any = [ |
||||
{ level: 1, name: '北京市第十九加油站', prop: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 2, name: '北京市第十九加油站', prop: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 3, name: '北京市第十九加油站', prop: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||
{ level: 1, name: '北京市第十九加油站', prop: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', company: '中化北京分公司', area: '北京-朝阳', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' } |
||||
] |
||||
|
||||
isVisible = false; |
||||
showModal(): void { |
||||
this.isVisible = true; |
||||
} |
||||
handleOk(): void { |
||||
console.log('Button ok clicked!'); |
||||
this.isVisible = false; |
||||
} |
||||
handleCancel(): void { |
||||
console.log('Button cancel clicked!'); |
||||
this.isVisible = false; |
||||
} |
||||
|
||||
} |
||||
@ -1,23 +1,27 @@
|
||||
.box{ |
||||
width: 100%; |
||||
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; |
||||
.box { |
||||
width: 100%; |
||||
height: 56px; |
||||
background: linear-gradient(#01142f, #0d2b4f); |
||||
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; |
||||
} |
||||
|
||||
.boxright { |
||||
display: flex; |
||||
align-items: center; |
||||
span { |
||||
font-size: 16px; |
||||
color: #FFFFFF; |
||||
opacity: 0.6; |
||||
} |
||||
|
||||
img { |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
} |
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<div class="titlebox"> |
||||
<img src="../../../assets/images/AnXinQQ.jpg" alt=""> |
||||
<div class="content"> |
||||
<div class="contentitem"> |
||||
<span>{{name}}</span> |
||||
</div> |
||||
<img src="../../../assets/images/logosm.png" alt=""> |
||||
<div class="content"> |
||||
<div class="contentitem"> |
||||
<span>{{name}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
Before Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 619 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in new issue