You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
522 lines
15 KiB
522 lines
15 KiB
import { HttpClient } from '@angular/common/http'; |
|
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', |
|
styleUrls: ['./criminal-records.component.scss'] |
|
}) |
|
export class CriminalRecordsComponent implements OnInit { |
|
validateForm!: FormGroup; |
|
constructor(private http: HttpClient, private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef) { } |
|
|
|
myChart: any //左侧饼图 |
|
option = { |
|
color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'], |
|
tooltip: { |
|
trigger: 'item'//触发类型 |
|
}, |
|
series: [ |
|
{ |
|
// name: 'Access From', |
|
type: 'pie', |
|
radius: [85, 112],//内半径外，外半径 |
|
left: '-30%', |
|
avoidLabelOverlap: false,//防止标签重叠策略 |
|
label: {//每一个标签外网延伸的引导说明 |
|
show: false, |
|
position: 'outside' |
|
}, |
|
labelLine: {//引导线 |
|
show: true, |
|
showAbove: true |
|
}, |
|
emphasis: {//中间高亮区域 |
|
label: { |
|
show: false, |
|
fontSize: '40', |
|
fontWeight: 'bold' |
|
} |
|
}, |
|
data: [ |
|
], |
|
tooltip: {//鼠标移入提示 |
|
position: 'right', |
|
padding: [14, 19], |
|
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
textStyle: { |
|
color: '#fff', |
|
fontSize: 12 |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
|
|
|
|
mybarChart: any //柱状图 |
|
baroption = { |
|
xAxis: { |
|
type: 'category', |
|
data: [], |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#91CCFF' |
|
} |
|
}, |
|
axisTick: {//刻度线 |
|
show: false |
|
}, |
|
inverse: true |
|
|
|
}, |
|
yAxis: { |
|
type: 'value', |
|
nameTextStyle: { |
|
color: '#C4E2FC' |
|
}, |
|
splitLine: {//分割线 |
|
lineStyle: { |
|
color: ['#0f4374'], |
|
width: 2 |
|
} |
|
}, |
|
axisTick: {//刻度线 |
|
show: false |
|
}, |
|
axisLine: {//轴线 |
|
show: false, |
|
lineStyle: { |
|
color: '#C4E2FC' |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
data: [], |
|
type: 'bar', |
|
itemStyle: { |
|
color: { |
|
type: 'linear', |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [{ |
|
offset: 0, color: '#23F0FF' // 0% 处的颜色 |
|
}, { |
|
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色 |
|
}], |
|
global: false // 缺省为 false |
|
} |
|
}, |
|
barWidth: '25%' |
|
}, |
|
{ |
|
data: [], |
|
type: 'line', |
|
symbol: 'circle', |
|
symbolSize: 8, |
|
label: { |
|
show: true |
|
}, |
|
itemStyle: { |
|
color: '#fff', |
|
shadowColor: '#fff', |
|
shadowBlur: 10 |
|
}, |
|
lineStyle: { |
|
color: '#FFCC8A', |
|
width: 1 |
|
} |
|
} |
|
], |
|
grid: { |
|
left: '36px', |
|
right: '30px', |
|
bottom: '50px', |
|
top: '45px' |
|
} |
|
}; |
|
baroption2 = { |
|
xAxis: { |
|
type: 'value', |
|
show: false |
|
}, |
|
yAxis: { |
|
type: 'category', |
|
data: [], |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#91CCFF', |
|
} |
|
}, |
|
axisTick: {//刻度线 |
|
show: false |
|
}, |
|
axisLabel: { |
|
formatter: function (value, index) { |
|
let newParamsName = ''; |
|
const paramsNameNumber = value.length; |
|
const provideNumber = 10; |
|
const rowNumber = Math.ceil(paramsNameNumber / provideNumber); |
|
if (paramsNameNumber > provideNumber) { |
|
for (let p = 0; p < rowNumber; p++) { |
|
let tempStr = ''; |
|
const start = p * provideNumber; |
|
const end = start + provideNumber; |
|
if (p == rowNumber - 1) { |
|
tempStr = value.substring(start, paramsNameNumber); |
|
} else { |
|
tempStr = value.substring(start, end) + '\n'; |
|
} |
|
newParamsName += tempStr; |
|
} |
|
} else { |
|
newParamsName = value; |
|
} |
|
// 格式化成月/日，只在第一个刻度显示年份 |
|
return '{s|·}' + `{a|${newParamsName}}`; |
|
}, |
|
rich: { |
|
a: { |
|
color: '#C4E2FC', |
|
padding: [0, 0, 0, 8], |
|
}, |
|
s: { |
|
color: '#fff', |
|
borderWidth: 1, |
|
borderColor: '#23D9FF', |
|
backgroundColor: '#fff', |
|
width: 4, |
|
height: 4, |
|
shadowBlur: 3, |
|
shadowColor: "#fff" |
|
} |
|
} |
|
}, |
|
inverse: true |
|
}, |
|
series: |
|
{ |
|
label: { |
|
// 柱图头部显示值 |
|
show: true, |
|
position: "right", |
|
color: "#fff", |
|
fontSize: 12, |
|
formatter: '{c}', |
|
offset: [6, 0] |
|
}, |
|
data: [], |
|
type: 'bar', |
|
itemStyle: { |
|
color: { |
|
type: 'linear', |
|
x: 0, |
|
y: 0, |
|
x2: 1, |
|
y2: 0, |
|
colorStops: [{ |
|
offset: 0, color: '#063d72' // 0% 处的颜色 |
|
}, { |
|
offset: 1, color: '#FF9963' // 100% 处的颜色 |
|
}], |
|
global: false // 缺省为 false |
|
} |
|
}, |
|
barWidth: '36%', |
|
|
|
} |
|
, |
|
grid: { |
|
left: '150px', |
|
right: '80px', |
|
bottom: '3px', |
|
top: '20px' |
|
} |
|
} |
|
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; |
|
} |
|
|
|
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: [[this.startdate, this.enddate]] |
|
}); |
|
// 饼图 |
|
this.myChart = echarts.init(document.getElementById('piechart')); |
|
this.myChart.setOption(this.option); |
|
//柱状折线图 |
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
this.mybarChart.setOption(this.baroption); |
|
|
|
this.warningType() |
|
this.getViolateRecordList() |
|
|
|
|
|
|
|
} |
|
//刷新饼图图表数据 |
|
num |
|
echartsData: any |
|
refreshPieData(data) { |
|
//饼图 |
|
let option = this.myChart.getOption(); |
|
var num = 0 |
|
data.pieTop.forEach(element => { |
|
num += element.count |
|
element.name = element.key |
|
element.value = element.count |
|
}); |
|
this.num = num |
|
option.series[0].data = data.pieTop; |
|
this.myChart.setOption(option); |
|
} |
|
//刷新柱状折线图表数据 |
|
refreshBarLineData(data, type) { |
|
console.log('统计图表数据', data) |
|
//柱状图 |
|
let option = this.mybarChart.getOption(); |
|
console.log('柱图option', option) |
|
if (type == 'month') {//近一个月柱状折线图 |
|
option = this.baroption |
|
let monthArr = [] |
|
let valuedata = [] |
|
data.timeTop.forEach(element => { |
|
monthArr.push(moment(element.key).format('MM.DD')) |
|
valuedata.push(element.count) |
|
}); |
|
option.xAxis.data = monthArr |
|
option.series[0].data = valuedata |
|
option.series[1].data = valuedata |
|
} else if (type == 'eventTop') { |
|
option = this.baroption2 |
|
let ydata = [] |
|
let valuedata = [] |
|
data.eventTop.forEach(element => { |
|
ydata.push(element.key) |
|
valuedata.push(element.count) |
|
}); |
|
option.yAxis.data = ydata |
|
option.series.data = valuedata |
|
} else if (type == 'siteTop') { |
|
option = this.baroption2 |
|
let ydata = [] |
|
let valuedata = [] |
|
data.siteTop.forEach(element => { |
|
ydata.push(element.key) |
|
valuedata.push(element.count) |
|
}); |
|
option.yAxis.data = ydata |
|
option.series.data = valuedata |
|
} |
|
this.mybarChart.setOption(option); |
|
} |
|
//获取统计信息 |
|
getAggregations() { |
|
let ViolationIds = [] |
|
if (this.validateForm.value.type) { |
|
this.warningTypesDetails.forEach(item => { |
|
item.id ? ViolationIds.push(item.id) : null |
|
}); |
|
} |
|
let body: any = { |
|
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 |
|
} |
|
this.validateForm.value.level ? body.level = this.validateForm.value.level : null |
|
this.validateForm.value.site ? body.violateArea = this.validateForm.value.site : null |
|
ViolationIds.length != 0 ? body.violationType = ViolationIds : null |
|
this.http.post('/api/services/app/ViolateRecord/Aggregations', body).subscribe((data: any) => { |
|
this.echartsData = data.result |
|
this.refreshPieData(data.result) |
|
this.refreshBarLineData(this.echartsData, 'month') |
|
}) |
|
} |
|
|
|
//获得违规记录列表 |
|
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) |
|
this.getAggregations() |
|
}) |
|
} |
|
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(); |
|
} |
|
|
|
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({ |
|
datePicker: [this.startdate, 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) { |
|
this.warningTypes.forEach(element => { |
|
if (element.key == e) { |
|
this.warningTypesDetails = element |
|
} |
|
}); |
|
} |
|
selectedType = '分布' |
|
selectedRankingType = '站点排名' |
|
echartClick(type) { |
|
this.selectedType = type |
|
this.mybarChart.dispose() |
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
if (type == '排名') { |
|
console.log(this.selectedRankingType) |
|
this.refreshBarLineData(this.echartsData, 'eventTop') |
|
} else { |
|
this.refreshBarLineData(this.echartsData, 'month') |
|
} |
|
|
|
} |
|
|
|
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(); |
|
|
|
} |
|
}
|
|
|