18 changed files with 1858 additions and 19 deletions
@ -1,19 +1,37 @@
|
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import { NgModule } from '@angular/core'; |
||||
import { AuthGuard } from '../auth.guard' |
||||
import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component'; |
||||
import { OilUnloadingProcessListComponent } from './oil-unloading-process-list/oil-unloading-process-list.component'; |
||||
import { HistoriesComponent } from './histories/histories.component'; |
||||
import { Routes, RouterModule } from "@angular/router"; |
||||
import { NgModule } from "@angular/core"; |
||||
import { AuthGuard } from "../auth.guard"; |
||||
import { CriminalRecordsAdminComponent } from "./criminal-records-admin/criminal-records-admin.component"; |
||||
import { OilUnloadingProcessListComponent } from "./oil-unloading-process-list/oil-unloading-process-list.component"; |
||||
import { HistoriesComponent } from "./histories/histories.component"; |
||||
import { StatisticsComponent } from "./statistics/statistics.component"; |
||||
import { BgStationComponent } from "./statistics/bg-station/bg-station.component"; |
||||
import { BgViolationComponent } from "./statistics/bg-violation/bg-violation.component"; |
||||
|
||||
const routes: Routes = [ |
||||
{ path: 'records', component: CriminalRecordsAdminComponent }, |
||||
{ path: 'histories', component: HistoriesComponent }, |
||||
// { path: 'records/oliunloadinglist', component: OilUnloadingProcessListComponent },
|
||||
// { path: 'records/petrolStation/oliunloadinglist', component: OilUnloadingProcessListComponent },
|
||||
{ path: "records", component: CriminalRecordsAdminComponent }, |
||||
{ path: "histories", component: HistoriesComponent }, |
||||
// { path: 'records/oliunloadinglist', component: OilUnloadingProcessListComponent },
|
||||
// { path: 'records/petrolStation/oliunloadinglist', component: OilUnloadingProcessListComponent },
|
||||
{ |
||||
path: "statistics", |
||||
component: StatisticsComponent, |
||||
children: [ |
||||
{ path: '', redirectTo: 'bgStation', pathMatch: 'full' }, |
||||
{ |
||||
path: "bgStation", |
||||
component: BgStationComponent, |
||||
}, |
||||
{ |
||||
path: "bgViolation", |
||||
component: BgViolationComponent, |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule], |
||||
}) |
||||
export class PagesRoutingModule { } |
||||
export class PagesRoutingModule {} |
||||
|
||||
@ -0,0 +1,149 @@
|
||||
<div class="recordsboxadmin" id="recordsboxadmin"> |
||||
<div class="content"> |
||||
<div class="search"> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<!-- <nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear 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-option nzValue="4" nzLabel="四级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams searchParamsLong"> |
||||
<nz-form-control> |
||||
<nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" |
||||
nzShowSearch [(ngModel)]="defaultOrId" formControlName="organization" [nzNodes]="nodes" |
||||
nzPlaceHolder="请选择所属机构" [nzExpandedIcon]="multiExpandedIconTpl"> |
||||
</nz-tree-select> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||
|
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||
class="ant-tree-switcher-line-icon"></i> |
||||
</ng-template> |
||||
</ng-template> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear id="type" (ngModelChange)="typeChange($event)" formControlName="type" |
||||
nzPlaceHolder="请选择预警类型"> |
||||
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"> |
||||
</nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="event" nzPlaceHolder="请选择预警事件"> |
||||
<nz-option *ngFor="let item of warningTypesDetails" [nzValue]="item.id" |
||||
[nzLabel]="item.eventSystemName"> |
||||
</nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear id="site" formControlName="site" nzPlaceHolder="请选择区域"> |
||||
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option> |
||||
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option> |
||||
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option> |
||||
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option> |
||||
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option> |
||||
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="manufacturer" nzPlaceHolder="请选择产品型号"> |
||||
<nz-option nzValue="警棋1" nzLabel="警棋1"></nz-option> |
||||
<nz-option nzValue="警棋2" nzLabel="警棋2"></nz-option> |
||||
<nz-option nzValue="警棋3" nzLabel="警棋3"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="operation" nzPlaceHolder="请选择操作记录"> |
||||
<nz-option nzValue="HandlerNotified" nzLabel="已推送"></nz-option> |
||||
<nz-option nzValue="VerifierNotified" nzLabel="标记误报"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="disposalState" nzPlaceHolder="请选择处置状态"> |
||||
<nz-option nzValue="true" nzLabel="已通过"></nz-option> |
||||
<nz-option nzValue="false" nzLabel="误报"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
<nz-form-item class="searchParams searchParams2"> |
||||
<nz-form-control> |
||||
<nz-range-picker [nzAllowClear]="false" formControlName="datePicker"></nz-range-picker> |
||||
<br /> |
||||
</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="tablebox" id="tablebox"> |
||||
<nz-table [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list" |
||||
[nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' |
||||
nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th> |
||||
序号 |
||||
</th> |
||||
<th>油站名称</th> |
||||
<th>推送数</th> |
||||
<th>误报数</th> |
||||
<th>总数</th> |
||||
<th>准确率</th> |
||||
|
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td nzEllipsis [title]="key+1">{{key+1}}</td> |
||||
<td nzEllipsis [title]="item.stationName">{{item.stationName}}</td> |
||||
<td nzEllipsis [title]="item.positiveCount"> {{item.positiveCount}}</td> |
||||
<td nzEllipsis [title]="item.totalCount - item.positiveCount"> {{item.totalCount - |
||||
item.positiveCount}} |
||||
</td> |
||||
<td nzEllipsis [title]="item.totalCount"> {{item.totalCount}} |
||||
</td> |
||||
<td nzEllipsis [title]="item.positiveCount/item.totalCount"> |
||||
{{item.positiveCount/item.totalCount}}</td> |
||||
|
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,278 @@
|
||||
.recordsboxadmin { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 36px; |
||||
width: 100%; |
||||
min-height: 32px; |
||||
margin-bottom: 4px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
min-height: 32px; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
flex-wrap: wrap; |
||||
|
||||
.searchParams, |
||||
.btn { |
||||
margin: 0 3px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.searchParams { |
||||
// flex: 5; |
||||
margin-bottom: 12px; |
||||
width: 150px; |
||||
} |
||||
|
||||
.searchParamsLong { |
||||
width: 250px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.searchParams2 { |
||||
width: 220px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.btn { |
||||
// flex: 1; |
||||
} |
||||
|
||||
nz-select { |
||||
color: rgba(145, 204, 255, 0.95); |
||||
} |
||||
|
||||
nz-tree-select { |
||||
color: rgba(145, 204, 255, 0.95); |
||||
} |
||||
|
||||
nz-range-picker { |
||||
background-color: rgba(0, 0, 0, 0); |
||||
width: 100%; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
height: 64px; |
||||
box-sizing: border-box; |
||||
padding: 0 28px; |
||||
margin: 13px 0; |
||||
position: relative; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 65px; |
||||
height: 65px; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
height: 48px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
// background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
align-items: center; |
||||
// background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
span { |
||||
margin-left: 10px; |
||||
color: #bce0ff; |
||||
font-size: 20px; |
||||
font-family: titlefont; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 12px; |
||||
} |
||||
|
||||
.grey { |
||||
color: #68829F; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 16px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
padding: 0 38px; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// 适配125% |
||||
@media screen and (max-height: 750px) { |
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 30px; |
||||
height: 32px; |
||||
margin-bottom: 12px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
|
||||
.title { |
||||
height: 42px; |
||||
padding: 0 20px; |
||||
margin: 8px 0; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 46px; |
||||
height: 46px; |
||||
} |
||||
|
||||
.content { |
||||
height: 36px; |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 25px; |
||||
|
||||
span { |
||||
margin-left: 6px; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 8px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 4px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
// 适配150% |
||||
@media screen and (max-height: 600px) { |
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 22px; |
||||
height: 32px; |
||||
margin-bottom: 6px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
.title { |
||||
height: 36px; |
||||
padding: 0 20px; |
||||
margin: 3px 0; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
|
||||
.content { |
||||
height: 30px; |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 22px; |
||||
|
||||
span { |
||||
margin-left: 6px; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 12px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 2px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { BgStationComponent } from './bg-station.component'; |
||||
|
||||
describe('BgStationComponent', () => { |
||||
let component: BgStationComponent; |
||||
let fixture: ComponentFixture<BgStationComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ BgStationComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(BgStationComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,325 @@
|
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { Component, ElementRef, OnInit, ViewContainerRef } from "@angular/core"; |
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||
import { Router } from "@angular/router"; |
||||
import { fromEvent } from "rxjs"; |
||||
import { debounceTime } from "rxjs/operators"; |
||||
import * as moment from "moment"; |
||||
import { NzModalService } from "ng-zorro-antd/modal"; |
||||
import { NzMessageService } from "ng-zorro-antd/message"; |
||||
import { TreeService } from "src/app/service/tree.service"; |
||||
declare var abp: any; |
||||
import "linqjs"; |
||||
@Component({ |
||||
selector: "app-bg-station", |
||||
templateUrl: "./bg-station.component.html", |
||||
styleUrls: ["./bg-station.component.scss"], |
||||
}) |
||||
export class BgStationComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
constructor( |
||||
private element: ElementRef, |
||||
private toTree: TreeService, |
||||
private http: HttpClient, |
||||
private fb: FormBuilder, |
||||
private router: Router, |
||||
private modal: NzModalService, |
||||
private viewContainerRef: ViewContainerRef, |
||||
private message: NzMessageService |
||||
) {} |
||||
tableScrollHeight; |
||||
resizeListener; |
||||
startdate; |
||||
enddate; |
||||
ngOnInit(): void { |
||||
this.tableScrollHeight = "100px"; |
||||
// 页面监听
|
||||
this.resizeListener = fromEvent(window, "resize") |
||||
.pipe(debounceTime(100)) |
||||
.subscribe((event) => { |
||||
let tableHeader = |
||||
this.element.nativeElement.querySelector( |
||||
`.ant-table-header` |
||||
).clientHeight; |
||||
this.tableScrollHeight = |
||||
document.getElementById("tablebox").clientHeight - |
||||
tableHeader - |
||||
10 + |
||||
"px"; |
||||
}); |
||||
//当前日期
|
||||
let myDate: any = new Date(); |
||||
let nowY = myDate.getFullYear(); |
||||
let nowM = myDate.getMonth() + 1; |
||||
let nowD = myDate.getDate(); |
||||
this.enddate = |
||||
nowY + |
||||
"-" + |
||||
(nowM < 10 ? "0" + nowM : nowM) + |
||||
"-" + |
||||
(nowD < 10 ? "0" + nowD : nowD); //当前日期
|
||||
//获取三十天前日期
|
||||
let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
|
||||
let lastY = lw.getFullYear(); |
||||
let lastM = lw.getMonth() + 1; |
||||
let lastD = lw.getDate(); |
||||
this.startdate = |
||||
lastY + |
||||
"-" + |
||||
(lastM < 10 ? "0" + lastM : lastM) + |
||||
"-" + |
||||
(lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
|
||||
|
||||
this.validateForm = this.fb.group({ |
||||
// level: [null],
|
||||
// organization: [null],
|
||||
// type: [null],
|
||||
// event: [null],
|
||||
// site: [null],
|
||||
// manufacturer: [null], //厂商
|
||||
// operation: [null], //操作记录
|
||||
// disposalState: [null],
|
||||
datePicker: [[this.enddate, this.enddate]], |
||||
}); |
||||
|
||||
this.warningType(); |
||||
this.tableSpin = true; |
||||
this.getAllOrganization(); |
||||
} |
||||
ngOnDestroy(): void { |
||||
this.resizeListener.unsubscribe(); |
||||
} |
||||
defaultOrId: string; |
||||
//获取所有组织机构
|
||||
nodes: any = []; |
||||
getAllOrganization() { |
||||
let OrganizationUnitId = |
||||
sessionStorage.getItem("isGasStation") == "true" |
||||
? JSON.parse(sessionStorage.getItem("userdataOfgasstation")) |
||||
.organization.id |
||||
: JSON.parse(sessionStorage.getItem("userdata")).organization.id; |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true", |
||||
}; |
||||
this.http |
||||
.get("/api/services/app/Organization/GetAll", { |
||||
params: params, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
data.result.items.forEach((element) => { |
||||
if (element.id == OrganizationUnitId) { |
||||
element.parentId = null; |
||||
} |
||||
element.key = element.id; |
||||
element.title = element.displayName; |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.result.items)]; |
||||
this.defaultOrId = JSON.parse( |
||||
sessionStorage.getItem("userdata") |
||||
).organization.id; |
||||
this.validateForm.value.organization = this.defaultOrId; |
||||
this.getViolateRecordList(); |
||||
}); |
||||
} |
||||
|
||||
//获得违规记录列表
|
||||
SkipCount: string = "0"; |
||||
MaxResultCount: string = "50"; |
||||
list: any = []; |
||||
totalCount: string; |
||||
tableSpin: boolean = false; |
||||
getViolateRecordList() { |
||||
let ViolationIds = []; |
||||
if (this.validateForm.value.event) { |
||||
ViolationIds.push(this.validateForm.value.event); |
||||
} |
||||
if (this.validateForm.value.type && !this.validateForm.value.event) { |
||||
this.warningTypesDetails.forEach((item) => { |
||||
item.id ? ViolationIds.push(item.id) : null; |
||||
}); |
||||
} |
||||
let VendorName: any = null; |
||||
if (this.validateForm.value.manufacturer) { |
||||
VendorName = this.validateForm.value.manufacturer; |
||||
} |
||||
let NotificationState: any = "All"; |
||||
if (this.validateForm.value.operation) { |
||||
if (this.validateForm.value.operation === "null") { |
||||
NotificationState = null; |
||||
} else { |
||||
NotificationState = this.validateForm.value.operation; |
||||
} |
||||
} |
||||
let params = { |
||||
// Level: this.validateForm.value.level,
|
||||
// ViolationIds: ViolationIds,
|
||||
// ViolateArea: this.validateForm.value.site,
|
||||
// OrganizationUnitId: this.validateForm.value.organization,
|
||||
// IsContainsChildren: "true",
|
||||
// CanVerify: "false",
|
||||
ViolateTime: this.validateForm.value.datePicker |
||||
? [ |
||||
moment(this.validateForm.value.datePicker[0]).format("yyyy-MM-DD") + |
||||
" 00:00:00", |
||||
moment(this.validateForm.value.datePicker[1]).format("yyyy-MM-DD") + |
||||
" 23:59:59", |
||||
] |
||||
: null, |
||||
// SkipCount: this.SkipCount,
|
||||
// MaxResultCount: this.MaxResultCount, //每页50条
|
||||
// Positive: this.validateForm.value.disposalState,
|
||||
// VendorName: VendorName,
|
||||
// NotificationState: NotificationState,
|
||||
}; |
||||
this.tableSpin = true; |
||||
this.http |
||||
.get( |
||||
"/api/services/app/ViolateRecordVerification/GetPositiveRateByStation", |
||||
{ |
||||
params: params, |
||||
} |
||||
) |
||||
.subscribe( |
||||
(data: any) => { |
||||
this.tableSpin = false; |
||||
console.log("列表数据", data); |
||||
this.list = [...data.result.items]; |
||||
this.totalCount = data.result.totalCount; |
||||
setTimeout(() => { |
||||
let tableHeader = |
||||
this.element.nativeElement.querySelector( |
||||
`.ant-table-header` |
||||
).clientHeight; |
||||
this.tableScrollHeight = |
||||
document.getElementById("tablebox").clientHeight - |
||||
tableHeader - |
||||
10 + |
||||
"px"; |
||||
}, 0); |
||||
// console.log("违规记录列表", data);
|
||||
// this.tableSpin = false;
|
||||
// console.log(this.list.length);
|
||||
}, |
||||
(err) => { |
||||
this.tableSpin = false; |
||||
this.message.create("error", err.error.error.details); |
||||
} |
||||
); |
||||
} |
||||
|
||||
ngAfterViewInit(): void { |
||||
fromEvent( |
||||
this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, |
||||
"scroll" |
||||
) |
||||
.pipe(debounceTime(100)) |
||||
.subscribe((event: any) => { |
||||
//监听 DOM 滚动事件
|
||||
if ( |
||||
event.target.scrollHeight - |
||||
(event.target.scrollTop + event.target.clientHeight) <= |
||||
10 |
||||
) { |
||||
if (this.totalCount > this.list.length) { |
||||
console.log("需要加载数据了", event); |
||||
this.SkipCount = String(Number(this.SkipCount) + 50); |
||||
this.getViolateRecordList(); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
getThirtyDays() { |
||||
//获取当前日期
|
||||
let myDate = new Date(); |
||||
var nowY = myDate.getFullYear(); |
||||
var nowM = myDate.getMonth() + 1; |
||||
var nowD = myDate.getDate(); |
||||
var enddateStr = |
||||
nowY + |
||||
"-" + |
||||
(nowM < 10 ? "0" + nowM : nowM) + |
||||
"-" + |
||||
(nowD < 10 ? "0" + nowD : nowD); //当前日期
|
||||
var enddate = new Date(enddateStr); |
||||
|
||||
//获取三十天前日期
|
||||
var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
|
||||
var lastY = lw.getFullYear(); |
||||
var lastM = lw.getMonth() + 1; |
||||
var lastD = lw.getDate(); |
||||
var startdateStr = |
||||
lastY + |
||||
"-" + |
||||
(lastM < 10 ? "0" + lastM : lastM) + |
||||
"-" + |
||||
(lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
|
||||
var startDate = new Date(startdateStr); |
||||
|
||||
const dateList = []; |
||||
while (true) { |
||||
startDate.setDate(startDate.getDate() + 1); |
||||
if (startDate.getTime() <= enddate.getTime()) { |
||||
if (startDate.getDate() < 10) { |
||||
// startDate.getFullYear() 获取年，此处没加上年份
|
||||
dateList.push(startDate.getMonth() + 1 + ".0" + startDate.getDate()); |
||||
} else { |
||||
dateList.push(startDate.getMonth() + 1 + "." + startDate.getDate()); |
||||
} |
||||
} else { |
||||
break; |
||||
} |
||||
} |
||||
return dateList; |
||||
} |
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.list = []; |
||||
this.SkipCount = "0"; |
||||
this.getViolateRecordList(); |
||||
} |
||||
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(); |
||||
} |
||||
this.validateForm.patchValue({ |
||||
// organization: JSON.parse(sessionStorage.getItem("userdata")).organization
|
||||
// .id,
|
||||
datePicker: [this.enddate, this.enddate], |
||||
}); |
||||
this.list = []; |
||||
this.SkipCount = "0"; |
||||
this.getViolateRecordList(); |
||||
} |
||||
|
||||
//预警类型接口
|
||||
warningTypes: any; //预警接口数据
|
||||
warningTypesDetails: any; |
||||
warningType() { |
||||
this.http |
||||
.get("/api/services/app/Violation/GetAllList") |
||||
.subscribe((data: any) => { |
||||
this.warningTypesDetails = data.result; |
||||
this.warningTypes = (data.result as any).groupBy((t) => { |
||||
return t.violationType; |
||||
}); |
||||
}); |
||||
} |
||||
typeChange(e: any) { |
||||
this.warningTypes.forEach((element) => { |
||||
if (element.key == e) { |
||||
this.warningTypesDetails = element; |
||||
} |
||||
}); |
||||
this.validateForm.patchValue({ |
||||
event: null, |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,147 @@
|
||||
<div class="recordsboxadmin" id="recordsboxadmin"> |
||||
<div class="content"> |
||||
<div class="search"> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<!-- <nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear 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-option nzValue="4" nzLabel="四级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams searchParamsLong"> |
||||
<nz-form-control> |
||||
<nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" |
||||
nzShowSearch [(ngModel)]="defaultOrId" formControlName="organization" [nzNodes]="nodes" |
||||
nzPlaceHolder="请选择所属机构" [nzExpandedIcon]="multiExpandedIconTpl"> |
||||
</nz-tree-select> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||
|
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||
class="ant-tree-switcher-line-icon"></i> |
||||
</ng-template> |
||||
</ng-template> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear id="type" (ngModelChange)="typeChange($event)" formControlName="type" |
||||
nzPlaceHolder="请选择预警类型"> |
||||
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"> |
||||
</nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="event" nzPlaceHolder="请选择预警事件"> |
||||
<nz-option *ngFor="let item of warningTypesDetails" [nzValue]="item.id" |
||||
[nzLabel]="item.eventSystemName"> |
||||
</nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear id="site" formControlName="site" nzPlaceHolder="请选择区域"> |
||||
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option> |
||||
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option> |
||||
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option> |
||||
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option> |
||||
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option> |
||||
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="manufacturer" nzPlaceHolder="请选择产品型号"> |
||||
<nz-option nzValue="警棋1" nzLabel="警棋1"></nz-option> |
||||
<nz-option nzValue="警棋2" nzLabel="警棋2"></nz-option> |
||||
<nz-option nzValue="警棋3" nzLabel="警棋3"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="operation" nzPlaceHolder="请选择操作记录"> |
||||
<nz-option nzValue="HandlerNotified" nzLabel="已推送"></nz-option> |
||||
<nz-option nzValue="VerifierNotified" nzLabel="标记误报"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select nzAllowClear formControlName="disposalState" nzPlaceHolder="请选择处置状态"> |
||||
<nz-option nzValue="true" nzLabel="已通过"></nz-option> |
||||
<nz-option nzValue="false" nzLabel="误报"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
<nz-form-item class="searchParams searchParams2"> |
||||
<nz-form-control> |
||||
<nz-range-picker [nzAllowClear]="false" formControlName="datePicker"></nz-range-picker> |
||||
<br /> |
||||
</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="tablebox" id="tablebox"> |
||||
<nz-table [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list" |
||||
[nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' |
||||
nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th> |
||||
序号 |
||||
</th> |
||||
<th>预警名称</th> |
||||
<th>推送数</th> |
||||
<th>误报数</th> |
||||
<th>总数</th> |
||||
<th>准确率</th> |
||||
|
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td nzEllipsis>{{key+1}}</td> |
||||
<td nzEllipsis [title]="item.violationName">{{item.violationName}}</td> |
||||
<td nzEllipsis [title]="item.positiveCount"> {{item.positiveCount}}</td> |
||||
<td nzEllipsis [title]="item.totalCount - item.positiveCount"> {{item.totalCount - item.positiveCount}} |
||||
</td> |
||||
<td nzEllipsis [title]="item.totalCount"> {{item.totalCount}} |
||||
</td> |
||||
<td nzEllipsis [title]="item.positiveCount/item.totalCount"> {{item.positiveCount/item.totalCount}}</td> |
||||
|
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,279 @@
|
||||
.recordsboxadmin { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 36px; |
||||
width: 100%; |
||||
min-height: 32px; |
||||
margin-bottom: 4px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
min-height: 32px; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
flex-wrap: wrap; |
||||
|
||||
.searchParams, |
||||
.btn { |
||||
margin: 0 3px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.searchParams { |
||||
// flex: 5; |
||||
margin-bottom: 12px; |
||||
width: 150px; |
||||
} |
||||
|
||||
.searchParamsLong { |
||||
width: 250px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.searchParams2 { |
||||
width: 220px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.btn { |
||||
// flex: 1; |
||||
} |
||||
|
||||
nz-select { |
||||
color: rgba(145, 204, 255, 0.95); |
||||
} |
||||
|
||||
nz-tree-select { |
||||
color: rgba(145, 204, 255, 0.95); |
||||
} |
||||
|
||||
nz-range-picker { |
||||
background-color: rgba(0, 0, 0, 0); |
||||
width: 100%; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
height: 64px; |
||||
box-sizing: border-box; |
||||
padding: 0 28px; |
||||
margin: 13px 0; |
||||
position: relative; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 65px; |
||||
height: 65px; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
height: 48px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
// background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
align-items: center; |
||||
// background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
span { |
||||
margin-left: 10px; |
||||
color: #bce0ff; |
||||
font-size: 20px; |
||||
font-family: titlefont; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 12px; |
||||
} |
||||
|
||||
.grey { |
||||
color: #68829F; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 16px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
padding: 0 38px; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// 适配125% |
||||
@media screen and (max-height: 750px) { |
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 30px; |
||||
height: 32px; |
||||
margin-bottom: 12px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
|
||||
.title { |
||||
height: 42px; |
||||
padding: 0 20px; |
||||
margin: 8px 0; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 46px; |
||||
height: 46px; |
||||
} |
||||
|
||||
.content { |
||||
height: 36px; |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 25px; |
||||
|
||||
span { |
||||
margin-left: 6px; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 8px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 4px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
// 适配150% |
||||
@media screen and (max-height: 600px) { |
||||
.search { |
||||
box-sizing: border-box; |
||||
padding: 0 22px; |
||||
height: 32px; |
||||
margin-bottom: 6px; |
||||
|
||||
form { |
||||
width: 100%; |
||||
height: 32px; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
.title { |
||||
height: 36px; |
||||
padding: 0 20px; |
||||
margin: 3px 0; |
||||
|
||||
.titlebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
|
||||
.content { |
||||
height: 30px; |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 22px; |
||||
|
||||
span { |
||||
margin-left: 6px; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-left: 12px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.packup { |
||||
position: absolute; |
||||
right: 33px; |
||||
top: 2px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { BgViolationComponent } from './bg-violation.component'; |
||||
|
||||
describe('BgViolationComponent', () => { |
||||
let component: BgViolationComponent; |
||||
let fixture: ComponentFixture<BgViolationComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ BgViolationComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(BgViolationComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,325 @@
|
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { Component, ElementRef, OnInit, ViewContainerRef } from "@angular/core"; |
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||
import { Router } from "@angular/router"; |
||||
import { fromEvent } from "rxjs"; |
||||
import { debounceTime } from "rxjs/operators"; |
||||
import * as moment from "moment"; |
||||
import { NzModalService } from "ng-zorro-antd/modal"; |
||||
import { NzMessageService } from "ng-zorro-antd/message"; |
||||
import { TreeService } from "src/app/service/tree.service"; |
||||
declare var abp: any; |
||||
import "linqjs"; |
||||
@Component({ |
||||
selector: "app-bg-violation", |
||||
templateUrl: "./bg-violation.component.html", |
||||
styleUrls: ["./bg-violation.component.scss"], |
||||
}) |
||||
export class BgViolationComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
constructor( |
||||
private element: ElementRef, |
||||
private toTree: TreeService, |
||||
private http: HttpClient, |
||||
private fb: FormBuilder, |
||||
private router: Router, |
||||
private modal: NzModalService, |
||||
private viewContainerRef: ViewContainerRef, |
||||
private message: NzMessageService |
||||
) {} |
||||
tableScrollHeight; |
||||
resizeListener; |
||||
startdate; |
||||
enddate; |
||||
ngOnInit(): void { |
||||
this.tableScrollHeight = "100px"; |
||||
// 页面监听
|
||||
this.resizeListener = fromEvent(window, "resize") |
||||
.pipe(debounceTime(100)) |
||||
.subscribe((event) => { |
||||
let tableHeader = |
||||
this.element.nativeElement.querySelector( |
||||
`.ant-table-header` |
||||
).clientHeight; |
||||
this.tableScrollHeight = |
||||
document.getElementById("tablebox").clientHeight - |
||||
tableHeader - |
||||
10 + |
||||
"px"; |
||||
}); |
||||
//当前日期
|
||||
let myDate: any = new Date(); |
||||
let nowY = myDate.getFullYear(); |
||||
let nowM = myDate.getMonth() + 1; |
||||
let nowD = myDate.getDate(); |
||||
this.enddate = |
||||
nowY + |
||||
"-" + |
||||
(nowM < 10 ? "0" + nowM : nowM) + |
||||
"-" + |
||||
(nowD < 10 ? "0" + nowD : nowD); //当前日期
|
||||
//获取三十天前日期
|
||||
let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
|
||||
let lastY = lw.getFullYear(); |
||||
let lastM = lw.getMonth() + 1; |
||||
let lastD = lw.getDate(); |
||||
this.startdate = |
||||
lastY + |
||||
"-" + |
||||
(lastM < 10 ? "0" + lastM : lastM) + |
||||
"-" + |
||||
(lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
|
||||
|
||||
this.validateForm = this.fb.group({ |
||||
// level: [null],
|
||||
// organization: [null],
|
||||
// type: [null],
|
||||
// event: [null],
|
||||
// site: [null],
|
||||
// manufacturer: [null], //厂商
|
||||
// operation: [null], //操作记录
|
||||
// disposalState: [null],
|
||||
datePicker: [[this.enddate, this.enddate]], |
||||
}); |
||||
|
||||
this.warningType(); |
||||
this.tableSpin = true; |
||||
this.getAllOrganization(); |
||||
} |
||||
ngOnDestroy(): void { |
||||
this.resizeListener.unsubscribe(); |
||||
} |
||||
defaultOrId: string; |
||||
//获取所有组织机构
|
||||
nodes: any = []; |
||||
getAllOrganization() { |
||||
let OrganizationUnitId = |
||||
sessionStorage.getItem("isGasStation") == "true" |
||||
? JSON.parse(sessionStorage.getItem("userdataOfgasstation")) |
||||
.organization.id |
||||
: JSON.parse(sessionStorage.getItem("userdata")).organization.id; |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true", |
||||
}; |
||||
this.http |
||||
.get("/api/services/app/Organization/GetAll", { |
||||
params: params, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
data.result.items.forEach((element) => { |
||||
if (element.id == OrganizationUnitId) { |
||||
element.parentId = null; |
||||
} |
||||
element.key = element.id; |
||||
element.title = element.displayName; |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.result.items)]; |
||||
this.defaultOrId = JSON.parse( |
||||
sessionStorage.getItem("userdata") |
||||
).organization.id; |
||||
this.validateForm.value.organization = this.defaultOrId; |
||||
this.getViolateRecordList(); |
||||
}); |
||||
} |
||||
|
||||
//获得违规记录列表
|
||||
SkipCount: string = "0"; |
||||
MaxResultCount: string = "50"; |
||||
list: any = []; |
||||
totalCount: string; |
||||
tableSpin: boolean = false; |
||||
getViolateRecordList() { |
||||
let ViolationIds = []; |
||||
if (this.validateForm.value.event) { |
||||
ViolationIds.push(this.validateForm.value.event); |
||||
} |
||||
if (this.validateForm.value.type && !this.validateForm.value.event) { |
||||
this.warningTypesDetails.forEach((item) => { |
||||
item.id ? ViolationIds.push(item.id) : null; |
||||
}); |
||||
} |
||||
let VendorName: any = null; |
||||
if (this.validateForm.value.manufacturer) { |
||||
VendorName = this.validateForm.value.manufacturer; |
||||
} |
||||
let NotificationState: any = "All"; |
||||
if (this.validateForm.value.operation) { |
||||
if (this.validateForm.value.operation === "null") { |
||||
NotificationState = null; |
||||
} else { |
||||
NotificationState = this.validateForm.value.operation; |
||||
} |
||||
} |
||||
let params = { |
||||
// Level: this.validateForm.value.level,
|
||||
// ViolationIds: ViolationIds,
|
||||
// ViolateArea: this.validateForm.value.site,
|
||||
// OrganizationUnitId: this.validateForm.value.organization,
|
||||
// IsContainsChildren: "true",
|
||||
// CanVerify: "false",
|
||||
ViolateTime: this.validateForm.value.datePicker |
||||
? [ |
||||
moment(this.validateForm.value.datePicker[0]).format("yyyy-MM-DD") + |
||||
" 00:00:00", |
||||
moment(this.validateForm.value.datePicker[1]).format("yyyy-MM-DD") + |
||||
" 23:59:59", |
||||
] |
||||
: null, |
||||
// SkipCount: this.SkipCount,
|
||||
// MaxResultCount: this.MaxResultCount, //每页50条
|
||||
// Positive: this.validateForm.value.disposalState,
|
||||
// VendorName: VendorName,
|
||||
// NotificationState: NotificationState,
|
||||
}; |
||||
this.tableSpin = true; |
||||
this.http |
||||
.get( |
||||
"/api/services/app/ViolateRecordVerification/GetPositiveRateByViolation", |
||||
{ |
||||
params: params, |
||||
} |
||||
) |
||||
.subscribe( |
||||
(data: any) => { |
||||
this.tableSpin = false; |
||||
console.log("列表数据", data); |
||||
this.list = [...data.result.items]; |
||||
this.totalCount = data.result.totalCount; |
||||
setTimeout(() => { |
||||
let tableHeader = |
||||
this.element.nativeElement.querySelector( |
||||
`.ant-table-header` |
||||
).clientHeight; |
||||
this.tableScrollHeight = |
||||
document.getElementById("tablebox").clientHeight - |
||||
tableHeader - |
||||
10 + |
||||
"px"; |
||||
}, 0); |
||||
// console.log("违规记录列表", data);
|
||||
// this.tableSpin = false;
|
||||
// console.log(this.list.length);
|
||||
}, |
||||
(err) => { |
||||
this.tableSpin = false; |
||||
this.message.create("error", err.error.error.details); |
||||
} |
||||
); |
||||
} |
||||
|
||||
ngAfterViewInit(): void { |
||||
fromEvent( |
||||
this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, |
||||
"scroll" |
||||
) |
||||
.pipe(debounceTime(100)) |
||||
.subscribe((event: any) => { |
||||
//监听 DOM 滚动事件
|
||||
if ( |
||||
event.target.scrollHeight - |
||||
(event.target.scrollTop + event.target.clientHeight) <= |
||||
10 |
||||
) { |
||||
if (this.totalCount > this.list.length) { |
||||
console.log("需要加载数据了", event); |
||||
this.SkipCount = String(Number(this.SkipCount) + 50); |
||||
this.getViolateRecordList(); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
getThirtyDays() { |
||||
//获取当前日期
|
||||
let myDate = new Date(); |
||||
var nowY = myDate.getFullYear(); |
||||
var nowM = myDate.getMonth() + 1; |
||||
var nowD = myDate.getDate(); |
||||
var enddateStr = |
||||
nowY + |
||||
"-" + |
||||
(nowM < 10 ? "0" + nowM : nowM) + |
||||
"-" + |
||||
(nowD < 10 ? "0" + nowD : nowD); //当前日期
|
||||
var enddate = new Date(enddateStr); |
||||
|
||||
//获取三十天前日期
|
||||
var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
|
||||
var lastY = lw.getFullYear(); |
||||
var lastM = lw.getMonth() + 1; |
||||
var lastD = lw.getDate(); |
||||
var startdateStr = |
||||
lastY + |
||||
"-" + |
||||
(lastM < 10 ? "0" + lastM : lastM) + |
||||
"-" + |
||||
(lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
|
||||
var startDate = new Date(startdateStr); |
||||
|
||||
const dateList = []; |
||||
while (true) { |
||||
startDate.setDate(startDate.getDate() + 1); |
||||
if (startDate.getTime() <= enddate.getTime()) { |
||||
if (startDate.getDate() < 10) { |
||||
// startDate.getFullYear() 获取年，此处没加上年份
|
||||
dateList.push(startDate.getMonth() + 1 + ".0" + startDate.getDate()); |
||||
} else { |
||||
dateList.push(startDate.getMonth() + 1 + "." + startDate.getDate()); |
||||
} |
||||
} else { |
||||
break; |
||||
} |
||||
} |
||||
return dateList; |
||||
} |
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.list = []; |
||||
this.SkipCount = "0"; |
||||
this.getViolateRecordList(); |
||||
} |
||||
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(); |
||||
} |
||||
this.validateForm.patchValue({ |
||||
// organization: JSON.parse(sessionStorage.getItem("userdata")).organization
|
||||
// .id,
|
||||
datePicker: [this.enddate, this.enddate], |
||||
}); |
||||
this.list = []; |
||||
this.SkipCount = "0"; |
||||
this.getViolateRecordList(); |
||||
} |
||||
|
||||
//预警类型接口
|
||||
warningTypes: any; //预警接口数据
|
||||
warningTypesDetails: any; |
||||
warningType() { |
||||
this.http |
||||
.get("/api/services/app/Violation/GetAllList") |
||||
.subscribe((data: any) => { |
||||
this.warningTypesDetails = data.result; |
||||
this.warningTypes = (data.result as any).groupBy((t) => { |
||||
return t.violationType; |
||||
}); |
||||
}); |
||||
} |
||||
typeChange(e: any) { |
||||
this.warningTypes.forEach((element) => { |
||||
if (element.key == e) { |
||||
this.warningTypesDetails = element; |
||||
} |
||||
}); |
||||
this.validateForm.patchValue({ |
||||
event: null, |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
|
||||
<div class="box"> |
||||
<div class="titlebox"> |
||||
<img src="../../../assets/images/logosm.png" alt=""> |
||||
<div class="content"> |
||||
<div class="contentitem"> |
||||
<span [routerLink]="['/statistics/bgStation']" routerLinkActive="router-link-active">油站统计</span> |
||||
<span [routerLink]="['/statistics/bgViolation']" routerLinkActive="router-link-active">预警统计</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="content"> |
||||
<router-outlet></router-outlet> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
} |
||||
|
||||
.titlebox { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 64px; |
||||
box-sizing: border-box; |
||||
padding: 0 28px; |
||||
margin: 13px 0; |
||||
|
||||
img { |
||||
width: 65px; |
||||
height: 65px; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
height: 48px; |
||||
display: flex; |
||||
align-items: center; |
||||
// background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
.contentitem { |
||||
width: 100%; |
||||
height: 32px; |
||||
display: flex; |
||||
align-items: center; |
||||
// background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147); |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%); |
||||
|
||||
span { |
||||
margin-left: 10px; |
||||
color: gray; |
||||
font-size: 20px; |
||||
font-family: titlefont; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.router-link-active { |
||||
color: #bce0ff; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
// 适配125% |
||||
@media screen and (max-height: 750px) { |
||||
.titlebox { |
||||
img { |
||||
width: 46px; |
||||
height: 46px; |
||||
} |
||||
|
||||
.content { |
||||
height: 36px; |
||||
|
||||
.contentitem { |
||||
height: 25px; |
||||
|
||||
span { |
||||
margin-left: 6px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// 适配150% |
||||
@media screen and (max-height: 600px) { |
||||
.titlebox { |
||||
img { |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
|
||||
.content { |
||||
height: 28px; |
||||
|
||||
.contentitem { |
||||
height: 20px; |
||||
|
||||
span { |
||||
margin-left: 6px; |
||||
font-size: 13px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { StatisticsComponent } from './statistics.component'; |
||||
|
||||
describe('StatisticsComponent', () => { |
||||
let component: StatisticsComponent; |
||||
let fixture: ComponentFixture<StatisticsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ StatisticsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(StatisticsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-statistics', |
||||
templateUrl: './statistics.component.html', |
||||
styleUrls: ['./statistics.component.scss'] |
||||
}) |
||||
export class StatisticsComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue