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.
704 lines
19 KiB
704 lines
19 KiB
import { HttpClient } from '@angular/common/http'; |
|
import { Component, OnInit, ViewContainerRef } from '@angular/core'; |
|
import { Router } from '@angular/router'; |
|
import * as echarts from 'echarts'; |
|
import * as moment from 'moment'; |
|
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component'; |
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
|
@Component({ |
|
selector: 'app-home-page', |
|
templateUrl: './home-page.component.html', |
|
styleUrls: ['./home-page.component.scss'] |
|
}) |
|
export class HomePageComponent implements OnInit { |
|
|
|
constructor(private http: HttpClient, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { } |
|
|
|
warningechartpie//预警饼图 |
|
warningechartpieOption = { |
|
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], |
|
tooltip: { |
|
trigger: 'item'//触发类型 |
|
}, |
|
legend: { |
|
top: '5%', |
|
left: '20%', |
|
itemGap: 8, |
|
itemWidth: 6, |
|
itemHeight: 6, |
|
formatter: (name) => { |
|
return '{a|' + name + '}'; |
|
}, |
|
textStyle: { |
|
color: '#fff', |
|
rich: { |
|
a: { |
|
width: 60 |
|
} |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: ['50%', '60%'], |
|
bottom: '-5%', |
|
right: '77%', |
|
avoidLabelOverlap: false,//防止标签重叠策略 |
|
emphasis: {//中间高亮区域 |
|
show: true, |
|
}, |
|
data: [ |
|
], |
|
tooltip: {//鼠标移入提示 |
|
position: 'right', |
|
padding: [14, 19], |
|
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
textStyle: { |
|
color: '#fff', |
|
fontSize: 12 |
|
}, |
|
formatter: "{b} : {c} ({d}%)" |
|
}, |
|
label: { |
|
normal: { |
|
show: true, |
|
position: 'center', |
|
color: '#4c4a4a', |
|
formatter: '', |
|
rich: { |
|
total: { |
|
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, |
|
textShadowColor: '#8df', |
|
textShadowBlur: 3, |
|
color: '#fff', |
|
|
|
}, |
|
active: { |
|
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, |
|
color: '#fff', |
|
fontFamily: 'Microsoft YaHei', |
|
}, |
|
} |
|
}, |
|
emphasis: {//中间文字显示 |
|
show: true, |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
|
|
warningechartbar//预警折线图 |
|
warningechartbarOption = { |
|
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' |
|
} |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'axis'//触发类型 |
|
}, |
|
// series: [ |
|
// { |
|
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], |
|
// type: 'line', |
|
// smooth: true, |
|
// showSymbol: false, |
|
// label: { |
|
// show: true, |
|
// position: 'top' |
|
// }, |
|
// lineStyle: { |
|
// color: '#46DFFF', |
|
// width: 1 |
|
// }, |
|
// areaStyle: { |
|
// opacity: 0.8, |
|
// color: { |
|
// type: 'linear', |
|
// x: 0, |
|
// y: 0, |
|
// x2: 0, |
|
// y2: 1, |
|
// colorStops: [ |
|
// { |
|
// offset: 0, color: '#46DFFF' // 0% 处的颜色 |
|
// }, |
|
// { |
|
// offset: 0.3, color: '#46DFFF' // 0% 处的颜色 |
|
// }, |
|
// { |
|
// offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 |
|
// }], |
|
// global: false // 缺省为 false |
|
// } |
|
// }, |
|
// } |
|
// ], |
|
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: '35%' |
|
}, |
|
{ |
|
data: [], |
|
type: 'line', |
|
symbol: 'circle', |
|
symbolSize: 5, |
|
label: { |
|
show: true |
|
}, |
|
itemStyle: { |
|
color: '#fff', |
|
shadowColor: '#fff', |
|
shadowBlur: 10 |
|
}, |
|
lineStyle: { |
|
color: '#FFCC8A', |
|
width: 1 |
|
} |
|
} |
|
], |
|
grid: { |
|
left: '18px', |
|
right: '30px', |
|
bottom: '38px', |
|
top: '30px' |
|
} |
|
}; |
|
//一级饼图 |
|
oilchartpieOption = { |
|
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], |
|
tooltip: { |
|
trigger: 'item'//触发类型 |
|
}, |
|
legend: { |
|
top: '5%', |
|
left: '20%', |
|
itemGap: 8, |
|
itemWidth: 6, |
|
itemHeight: 6, |
|
formatter: (name) => { |
|
return '{a|' + name + '}'; |
|
}, |
|
textStyle: { |
|
color: '#fff', |
|
rich: { |
|
a: { |
|
width: 80 |
|
} |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: ['50%', '60%'], |
|
bottom: '-5%', |
|
right: '77%', |
|
avoidLabelOverlap: false,//防止标签重叠策略 |
|
label: { |
|
normal: { |
|
show: true, |
|
position: 'center', |
|
color: '#4c4a4a', |
|
formatter: '', |
|
rich: { |
|
total: { |
|
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, |
|
textShadowColor: '#8df', |
|
textShadowBlur: 3, |
|
color: '#fff' |
|
}, |
|
active: { |
|
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, |
|
color: '#fff', |
|
fontFamily: 'Microsoft YaHei', |
|
}, |
|
} |
|
}, |
|
emphasis: {//中间文字显示 |
|
show: true, |
|
} |
|
}, |
|
data: [], |
|
tooltip: {//鼠标移入提示 |
|
position: 'right', |
|
padding: [14, 19], |
|
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
textStyle: { |
|
color: '#fff', |
|
fontSize: 12 |
|
}, |
|
formatter: "{b} : {c} ({d}%)" |
|
} |
|
} |
|
] |
|
}; |
|
oilchartpieOptionPieData1: any |
|
//一级柱状图 |
|
oilchartbarOption = { |
|
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' |
|
} |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'axis' |
|
}, |
|
series: [ |
|
{ |
|
name: '卸油事件', |
|
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%' |
|
}, |
|
{ |
|
name: '卸油事件', |
|
data: [], |
|
type: 'line', |
|
symbol: 'circle', |
|
symbolSize: 8, |
|
label: { |
|
show: true |
|
}, |
|
itemStyle: { |
|
color: '#fff', |
|
shadowColor: '#fff', |
|
shadowBlur: 10 |
|
}, |
|
lineStyle: { |
|
color: '#FFCC8A', |
|
width: 1 |
|
} |
|
} |
|
], |
|
// legend: { |
|
// data: ['卸油事件'], |
|
// textStyle: { |
|
// color: '#fff' |
|
// }, |
|
// right: 28, |
|
// top: 18, |
|
// itemWidth: 8, |
|
// itemHeight: 8, |
|
// }, |
|
grid: { |
|
left: '36px', |
|
right: '30px', |
|
bottom: '38px', |
|
top: '66px' |
|
} |
|
}; |
|
|
|
oilchartpie//卸油饼图 |
|
oilchartbar//卸油折线图 |
|
userdata |
|
ngOnInit(): void { |
|
|
|
this.userdata = JSON.parse(sessionStorage.getItem('userdata')) |
|
|
|
// 饼图 |
|
// this.equipmentechart = echarts.init(document.getElementById('equipmentechart')); |
|
// 预警饼图 |
|
this.warningechartpie = echarts.init(document.getElementById('eventechartpie')); |
|
// 预警线图 |
|
this.warningechartbar = echarts.init(document.getElementById('eventechartline')); |
|
|
|
|
|
// 卸油饼图 |
|
this.oilchartpie = echarts.init(document.getElementById('oilechartpie')); |
|
// 卸油线图 |
|
this.oilchartbar = echarts.init(document.getElementById('oilechartline')); |
|
|
|
|
|
|
|
window.onresize = () => { |
|
setTimeout(() => { |
|
this.warningechartpie.resize(); |
|
this.warningechartbar.resize(); |
|
this.oilchartpie.resize(); |
|
this.oilchartbar.resize(); |
|
}, 200); |
|
|
|
}; |
|
|
|
this.rollStart() |
|
this.getHomeAggregation() |
|
this.getUnreadNotification() |
|
|
|
// this.getAggregations() |
|
|
|
|
|
} |
|
|
|
//获得所有未读消息 |
|
unreadMessageList: any |
|
getUnreadNotification() { |
|
this.http.get('/api/services/app/Notification/GetUnreadNotification').subscribe((data: any) => { |
|
console.log('获得所有未读消息', data) |
|
this.unreadMessageList = data.result |
|
}) |
|
} |
|
|
|
|
|
|
|
//获得统计信息 |
|
|
|
HomeAggregatioData: any = { |
|
areaAgg: [], |
|
violationType: { |
|
violationTypeAgg: [] |
|
}, |
|
ouViolationType: { |
|
ouCorrectCount: '', |
|
ouNotCorrectCount: '', |
|
ouTotalCount: '' |
|
}, |
|
dev: { |
|
stationCount: '', |
|
violationCount: '', |
|
cameraCount: '' |
|
} |
|
} |
|
totalCount |
|
getHomeAggregation() { |
|
|
|
let organizationUnitId |
|
if (this.router.url.indexOf('petrolStation') != -1) { |
|
organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id |
|
} else { |
|
organizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
} |
|
let body = { |
|
organizationUnitId: organizationUnitId, |
|
isContainsChildren: true |
|
} |
|
this.http.post('/api/services/app/Home/HomeAggregation', body).subscribe((data: any) => { |
|
this.HomeAggregatioData = data.result |
|
this.totalCount = data.result.todayRecordCount |
|
this.equipmentechartdata = [ |
|
{ name: '接入油站数量', value: data.result.dev.stationCount }, |
|
{ name: '摄像头数量', value: data.result.dev.cameraCount }, |
|
{ name: '预警模型数量', value: data.result.dev.violationCount } |
|
] |
|
console.log('图表信息', data.result) |
|
|
|
this.eventEcharts(data.result) |
|
}) |
|
|
|
|
|
// let starttime = moment(new Date()).format('YYYY-MM-DD') + '\xa0' + '00:00' |
|
// let endtime = moment(new Date()).format('YYYY-MM-DD') + '\xa0' + '23:59' |
|
// let params = { |
|
// organizationUnitId: organizationUnitId, |
|
// ViolateTime: [starttime, endtime], |
|
// IsContainsChildren: 'true', |
|
// SkipCount: '0', |
|
// MaxResultCount: '1' |
|
// } |
|
// this.http.get('/api/services/app/ViolateRecord/GetAll', { |
|
// params: params |
|
// }).subscribe((data: any) => { |
|
// this.totalCount = data.result.totalCount |
|
// }) |
|
} |
|
//预警图表 |
|
equipmentechartdata |
|
eventEcharts(data) { |
|
data.violationType.violationTypeAgg.forEach(element => { |
|
// num += element.count |
|
element.name = element.key |
|
element.value = element.count |
|
}); |
|
this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg; |
|
this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + data.recordCount + '}' + '\n\r' + '{active|总数}' |
|
this.warningechartpie.setOption(this.warningechartpieOption); |
|
|
|
|
|
let monthArr = [] |
|
let valuedata = [] |
|
data.violationType.days30ViolationCount.forEach(element => { |
|
monthArr.push(moment(element.key).format('MM.DD')) |
|
valuedata.push(element.count) |
|
}); |
|
this.warningechartbarOption.xAxis.data = monthArr |
|
this.warningechartbarOption.series[0].data = valuedata |
|
this.warningechartbarOption.series[1].data = valuedata |
|
this.warningechartbar.setOption(this.warningechartbarOption); |
|
|
|
|
|
//卸油两个图 |
|
this.refreshEchartsData1(data) |
|
} |
|
|
|
oilDischargeNum: any |
|
refreshEchartsData1(data) { |
|
this.oilDischargeNum = data.totalCount |
|
//饼图 |
|
data.ouViolationType.ouViolationTypeAgg.forEach(element => { |
|
element.name = element.key |
|
element.value = element.count |
|
}); |
|
this.oilchartpieOptionPieData1 = data.ouViolationType.ouViolationTypeAgg |
|
this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.ouRecordCount + '}' + '\n\r' + '{active|总数}' |
|
this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1 |
|
this.oilchartpie.setOption(this.oilchartpieOption); |
|
|
|
//柱状图 |
|
let monthArr = [] |
|
let valuedata = [] |
|
data.ouViolationType.ouDays30ViolationCount.forEach(element => { |
|
monthArr.push(moment(element.key).format('MM.DD')) |
|
valuedata.push(element.count) |
|
}); |
|
this.oilchartbarOption.xAxis.data = monthArr |
|
this.oilchartbarOption.series[0].data = valuedata |
|
this.oilchartbarOption.series[1].data = valuedata |
|
this.oilchartbar.setOption(this.oilchartbarOption); |
|
} |
|
//获取统计信息 |
|
getAggregations() { |
|
let organizationUnitId |
|
if (this.router.url.indexOf('petrolStation') != -1) { |
|
organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id |
|
} else { |
|
organizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
} |
|
let params: any = { |
|
OrganizationUnitId: organizationUnitId, |
|
IsContainsChildren: 'true' |
|
} |
|
this.http.get('/api/services/app/OilUnloadingProcess/GetAllCountByDays', { params: params }).subscribe((data: any) => { |
|
console.log('统计信息', data) |
|
this.refreshEchartsData1(data.result) |
|
}) |
|
} |
|
timer |
|
rollStart() { |
|
var ROLL_SPEED = 100 |
|
var noticeList1 = document.getElementById('notice-list'); |
|
var noticeList2 = document.getElementById('notice-list-2'); |
|
var listWrapper = document.getElementById('list-wrapper'); |
|
noticeList2.innerHTML = noticeList1.innerHTML; |
|
this.timer = setInterval(rollStart, ROLL_SPEED); |
|
|
|
function rollStart() { |
|
if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) { |
|
listWrapper.style.top = '0px' |
|
} else { |
|
var top = listWrapper.style.top |
|
listWrapper.style.top = _subStr(top) - 1 + 'px' |
|
} |
|
} |
|
// 截取px前数值 |
|
function _subStr(str) { |
|
var index = str.indexOf('px'); |
|
if (index > -1) { |
|
return parseFloat(str.substr(0, index + 1)) |
|
} |
|
} |
|
} |
|
mouseEnter() { |
|
// console.log('进入了') |
|
window.clearInterval(this.timer); |
|
} |
|
mouseleave() { |
|
// console.log('离开了') |
|
if (!this.isOpenModel) { |
|
this.rollStart() |
|
} |
|
|
|
} |
|
|
|
|
|
areaList: any = [ |
|
{ name: '加油区', num: 92 }, |
|
{ name: '油罐区', num: 81 }, |
|
{ name: '出入口', num: 66 }, |
|
{ name: '便利店', num: 34 }, |
|
{ name: '办公区', num: 20 }, |
|
{ name: '其他区域', num: 17 } |
|
] |
|
eventList: any = [ |
|
{ name: '员工服务', num: 92 }, |
|
{ name: '监控设备监测', num: 81 }, |
|
{ name: '安全隐患', num: 77 }, |
|
{ name: '车流调查', num: 34 }, |
|
{ name: '员工服务', num: 92 }, |
|
{ name: '监控设备监测', num: 81 }, |
|
{ name: '安全隐患', num: 77 }, |
|
{ name: '车流调查', num: 34 }, |
|
{ name: '安全隐患', num: 77 }, |
|
{ name: '车流调查', num: 34 } |
|
] |
|
stationList: any = [ |
|
{ name: '北京市第十九加油站', num: 92 }, |
|
{ name: '北京市第十九加油站', num: 81 }, |
|
{ name: '北京市第十九加油站', num: 77 }, |
|
{ name: '北京市第十九加油站', num: 34 }, |
|
{ name: '北京市第十九加油站', num: 92 }, |
|
{ name: '北京市第十九加油站', num: 81 }, |
|
{ name: '北京市第十九加油站', num: 77 }, |
|
{ name: '北京市第十九加油站', num: 34 }, |
|
{ name: '北京市第十九加油站', num: 77 }, |
|
{ name: '北京市第十九加油站', num: 34 } |
|
] |
|
width(width: string, denominator: string) { |
|
let style: any = {} |
|
style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + '%'; |
|
return style |
|
} |
|
|
|
|
|
isOpenModel: boolean = false |
|
|
|
look(item) { |
|
// console.log(item) |
|
if (item.notification.data.eventSystemName == '灭火器维护' || item.notification.data.eventSystemName == '证照预警') { |
|
this.message.create('warning', item.notification.data.desc); |
|
} else { |
|
this.isOpenModel = true |
|
let data = { |
|
violateImage: item.notification.data.violateImage, |
|
violateVideo: item.notification.data.violateVideo |
|
} |
|
const modal = this.modal.create({ |
|
nzContent: GetOutOfLineDetailsComponent, |
|
nzWrapClassName: "vertical-center-modal", |
|
nzViewContainerRef: this.viewContainerRef, |
|
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200, |
|
nzBodyStyle: { |
|
'border': '1px solid #6d9cc7', |
|
'border-radius': '0px', |
|
'padding': '0px', |
|
'box-shadow': '0 0 8px 0 #fff', |
|
'background': '#000D21', |
|
}, |
|
nzComponentParams: { |
|
data: data |
|
}, |
|
nzFooter: null, |
|
nzOnOk: async () => { |
|
|
|
} |
|
}); |
|
const instance = modal.getContentComponent(); |
|
modal.afterClose.subscribe(result => { |
|
this.isOpenModel = false |
|
this.rollStart() |
|
}); |
|
this.readMess(item.notification.id) |
|
} |
|
|
|
|
|
} |
|
|
|
//标记为已读 |
|
readMess(id) { |
|
let body = { |
|
id: id |
|
} |
|
this.http.post('/api/services/app/Notification/Read', body).subscribe((data: any) => { |
|
console.log('标记已读成功') |
|
}) |
|
} |
|
|
|
ignore(index) { |
|
this.unreadMessageList.splice(index, 1) |
|
} |
|
}
|
|
|