@ -1,7 +1,12 @@
import { HttpClient } from '@angular/common/http' ;
import { Component , OnInit } from '@angular/core' ;
import { Component , OnInit , ViewContainerRef , ElementRef } from '@angular/core' ;
import { FormBuilder , FormGroup , Validators } from '@angular/forms' ;
import * as echarts from 'echarts' ;
import { NzModalService } from 'ng-zorro-antd/modal' ;
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component' ;
import * as moment from 'moment' ;
import { fromEvent } from 'rxjs' ;
import { debounceTime } from 'rxjs/operators' ;
@Component ( {
selector : 'app-criminal-records' ,
templateUrl : './criminal-records.component.html' ,
@ -9,7 +14,7 @@ import * as echarts from 'echarts';
} )
export class CriminalRecordsComponent implements OnInit {
validateForm ! : FormGroup ;
constructor ( private http : HttpClient , private fb : FormBuilder ) { }
constructor ( private http : HttpClient , private fb : FormBuilder , private modal : NzModalService , private viewContainerRef : ViewContainerRef , private element : ElementRef ) { }
myChart : any //左侧饼图
option = {
@ -273,16 +278,30 @@ export class CriminalRecordsComponent implements OnInit {
return dateList ;
}
isEcharts :boolean = true
isEchartsShow ( ) {
isEcharts : boolean = true
isEchartsShow() {
this . isEcharts = ! this . isEcharts
}
startdate
enddate
ngOnInit ( ) : void {
//当前日期
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 ] ,
type : [ null ] ,
site : [ null ] ,
datePicker : [ null ]
datePicker : [ [ this . startdate , this . enddate ] ]
} ) ;
// 饼图
this . myChart = echarts . init ( document . getElementById ( 'piechart' ) ) ;
@ -292,14 +311,60 @@ export class CriminalRecordsComponent implements OnInit {
this . mybarChart . setOption ( this . baroption ) ;
this . warningType ( )
this . getViolateRecordList ( )
}
//获得违规记录列表
SkipCount : string = '0'
MaxResultCount : string = '50'
list : any = [ ]
totalCount : string
getViolateRecordList() {
let ViolationIds = [ ]
if ( this . validateForm . value . type ) {
this . warningTypesDetails . forEach ( item = > {
item . id ? ViolationIds . push ( item . id ) : null
} ) ;
}
let params = {
Level : this.validateForm.value.level ,
ViolationIds : ViolationIds ,
ViolateArea : this.validateForm.value.site ,
OrganizationUnitId : JSON.parse ( sessionStorage . getItem ( 'userdataOfgasstation' ) ) . organization . id ,
IsContainsChildren : 'true' ,
ViolateTime : this.validateForm.value.datePicker ? [ moment ( this . validateForm . value . datePicker [ 0 ] ) . format ( 'yyyy-MM-DD' ) , moment ( this . validateForm . value . datePicker [ 1 ] ) . format ( 'yyyy-MM-DD' ) ] : null ,
SkipCount : this.SkipCount ,
MaxResultCount : this.MaxResultCount
}
this . http . get ( '/api/services/app/ViolateRecord/GetAll' , {
params : params
} ) . subscribe ( ( data : any ) = > {
this . list = this . list . concat ( data . result . items ) ;
this . list = [ . . . this . list ]
// this.list = data.result.items
this . totalCount = data . result . totalCount
console . log ( '违规记录列表' , data )
} )
}
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 ) {
console . log ( '需要加载数据了' , event )
this . SkipCount = String ( Number ( this . SkipCount ) + 50 )
this . getViolateRecordList ( )
}
} ) ;
}
submitForm ( ) : void {
for ( const i in this . validateForm . controls ) {
this . validateForm . controls [ i ] . markAsDirty ( ) ;
this . validateForm . controls [ i ] . updateValueAndValidity ( ) ;
}
console . log ( this . validateForm )
this . list = [ ]
this . SkipCount = '0'
this . getViolateRecordList ( )
}
resetForm ( e : MouseEvent ) : void {
e . preventDefault ( ) ;
@ -308,6 +373,12 @@ export class CriminalRecordsComponent implements OnInit {
this . validateForm . controls [ key ] . markAsPristine ( ) ;
this . validateForm . controls [ key ] . updateValueAndValidity ( ) ;
}
this . validateForm . patchValue ( {
datePicker : [ this . startdate , this . enddate ]
} ) ;
this . list = [ ]
this . SkipCount = '0'
this . getViolateRecordList ( )
}
@ -316,14 +387,17 @@ export class CriminalRecordsComponent implements OnInit {
warningTypesDetails : any
warningType() {
this . http . get ( '/api/services/app/Violation/GetAllList' ) . subscribe ( ( data : any ) = > {
this . warningTypesDetails = data . result
// this.warningTypesDetails = data.result
this . warningTypes = ( data . result as any ) . groupBy ( ( t ) = > { return t . violationType } ) ;
} )
}
list : any = [ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ]
typeChange ( e ) {
this . warningTypes . forEach ( element = > {
if ( element . key == e ) {
this . warningTypesDetails = element
}
} ) ;
}
selectedType = '分布'
selectedRankingType = '站点排名'
echartClick ( type ) {
@ -337,7 +411,28 @@ export class CriminalRecordsComponent implements OnInit {
}
}
// echartClick2(type) {
// this.selectedRankingType = type
// }
look ( item ) {
const modal = this . modal . create ( {
nzContent : GetOutOfLineDetailsComponent ,
nzViewContainerRef : this.viewContainerRef ,
nzWidth : 1200 ,
nzBodyStyle : {
'border' : '1px solid #6d9cc7' ,
'border-radius' : '0px' ,
'padding' : '0px' ,
'box-shadow' : '0 0 8px 0 #fff' ,
'background' : '#000D21' ,
} ,
nzComponentParams : {
data : item
} ,
nzFooter : null ,
nzOnOk : async ( ) = > {
}
} ) ;
const instance = modal . getContentComponent ( ) ;
}
}
