@ -58,7 +58,8 @@ export class HomePageComponent implements OnInit {
textStyle : { textStyle : {
color : '#fff' , color : '#fff' ,
fontSize : 12 fontSize : 12
} } ,
formatter : "{b} : {c} ({d}%)"
} , } ,
label : { label : {
normal : { normal : {
@ -213,173 +214,20 @@ export class HomePageComponent implements OnInit {
top : '30px' top : '30px'
} }
} ; } ;
oilchartpie //卸油饼图
oilchartbar //卸油折线图
ngOnInit ( ) : void {
// 饼图
// 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 ( )
// if (Number(sessionStorage.getItem('zoom')) != 1) {
// console.log('走这里了吗')
// let dom1 = document.getElementById('eventechartpie')
// let dom2 = document.getElementById('eventechartline')
// let dom3 = document.getElementById('oilechartpie')
// let dom4 = document.getElementById('oilechartline')
// let zoom = 1 / Number(sessionStorage.getItem('zoom'))
// let domList = [dom1, dom2, dom3, dom4]
// domList.forEach((item: any) => {
// item.style.zoom = zoom
// item.style.transform = "scale(" + Number(sessionStorage.getItem('zoom')) + ")"
// item.style.transformOrigin = "0%0%"
// item.style.width = 50 + "%"
// })
// }
}
//获得所有未读消息
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 : [ ]
} ,
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 ) ;
}
//一级饼图
//一级饼图
oilchartpieOption = { oilchartpieOption = {
color : [ '#FF4B65 ' , '#36A2FF' ] , color : [ '#91CCFF' , '#46DFFF' , '#36A2FF' , '#FF6181' , '#B4C3FF' , '#FF9963' , '#5A9CFF' , '#4BFFD4' , '#46DFFF' , '#91CCFF' ] ,
tooltip : { tooltip : {
trigger : 'item' //触发类型
trigger : 'item' //触发类型
} , } ,
legend : { legend : {
bottom : '12%' , top : '5%' ,
left : 'center' , left : '20%' ,
itemGap : 10 , itemGap : 8 ,
itemWidth : 8 , itemWidth : 6 ,
itemHeight : 8 , itemHeight : 6 ,
orient : 'vertical' ,
formatter : ( name ) = > { formatter : ( name ) = > {
let data = this . oilchartpieOptionPieData1 return '{a|' + name + '}' ;
let value
for ( var i = 0 , l = data . length ; i < l ; i ++ ) {
if ( data [ i ] . name == name ) {
value = data [ i ] . value ;
}
}
return '{a|' + name + '}' + '{b|' + value + '}' ;
} , } ,
textStyle : { textStyle : {
color : '#fff' , color : '#fff' ,
@ -394,7 +242,8 @@ export class HomePageComponent implements OnInit {
{ {
type : 'pie' , type : 'pie' ,
radius : [ '50%' , '60%' ] , radius : [ '50%' , '60%' ] ,
bottom : '20%' , bottom : '-5%' ,
right : '77%' ,
avoidLabelOverlap : false , //防止标签重叠策略
avoidLabelOverlap : false , //防止标签重叠策略
label : { label : {
normal : { normal : {
@ -428,7 +277,8 @@ export class HomePageComponent implements OnInit {
textStyle : { textStyle : {
color : '#fff' , color : '#fff' ,
fontSize : 12 fontSize : 12
} } ,
formatter : "{b} : {c} ({d}%)"
} }
} }
] ]
@ -534,24 +384,162 @@ export class HomePageComponent implements OnInit {
top : '66px' 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 : [ ]
} ,
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 oilDischargeNum : any
refreshEchartsData1 ( data ) { refreshEchartsData1 ( data ) {
this . oilDischargeNum = data . totalCount this . oilDischargeNum = data . totalCount
//饼图
//饼图
this . oilchartpieOptionPieData1 = [ data . ouViolationType . ouViolationTypeAgg . forEach ( element = > {
{ name : '预警事件' , value : data.notCorrectCount } , element . name = element . key
{ name : '正常操作' , value : data.correctCount } , element . value = element . count
] } ) ;
this . oilchartpieOption . series [ 0 ] . label . normal . formatter = '{total|' + data . totalCount + '}' + '\n\r' + '{active|总数}' 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 . oilchartpieOption . series [ 0 ] . data = this . oilchartpieOptionPieData1
this . oilchartpie . setOption ( this . oilchartpieOption ) ; this . oilchartpie . setOption ( this . oilchartpieOption ) ;
//柱状图
//柱状图
let monthArr = [ ] let monthArr = [ ]
let valuedata = [ ] let valuedata = [ ]
data . list . forEach ( element = > { data . ouVio lat ionType . ouDays30ViolationCoun t. forEach ( element = > {
monthArr . push ( moment ( element . key ) . format ( 'MM.DD' ) ) monthArr . push ( moment ( element . key ) . format ( 'MM.DD' ) )
valuedata . push ( element . totalCount ) valuedata . push ( element . c ount)
} ) ; } ) ;
this . oilchartbarOption . xAxis . data = monthArr this . oilchartbarOption . xAxis . data = monthArr
this . oilchartbarOption . series [ 0 ] . data = valuedata this . oilchartbarOption . series [ 0 ] . data = valuedata
