@ -1,5 +1,6 @@
import React , { useEffect , useRef , useState } from 'react' ; import React , { useEffect , useRef , useState } from 'react' ;
import { Skeleton , Button , Pagination , Select , Popconfirm , Table , Tooltip } from '@douyinfe/semi-ui' ; import { Skeleton , Button , Pagination , Select , Popconfirm , Table , Tooltip , Tabs , TabPane } from '@douyinfe/semi-ui' ;
import { IconChevronUpDown , IconChevronUp , IconChevronDown } from '@douyinfe/semi-icons'
import { connect } from 'react-redux' ; import { connect } from 'react-redux' ;
import { push } from 'react-router-redux' ; import { push } from 'react-router-redux' ;
import Header from '../components/header' ; import Header from '../components/header' ;
@ -15,7 +16,7 @@ let interrupt
let repair let repair
let overviewScrollbar ; let overviewScrollbar ;
const Bigscreen = ( props ) => { const Bigscreen = ( props ) => {
const { dispatch , actions , user , match , history , clientHeight , groupStatisticOnline , pomsProjectBasicAll , ... restProps } = props const { dispatch , actions , user , match , history , clientHeight , groupStatisticOnline , pomsProjectBasicAll , ... restProps } = props
const [ InterruptRank , setInterruptRank ] = useState ( [ ] ) const [ InterruptRank , setInterruptRank ] = useState ( [ ] )
const [ online , setOnline ] = useState ( [ ] ) const [ online , setOnline ] = useState ( [ ] )
@ -25,13 +26,15 @@ const Bigscreen = (props) => {
const [ proportion , setProportion ] = useState ( [ ] ) const [ proportion , setProportion ] = useState ( [ ] )
const [ formatter , setFormatter ] = useState ( { } ) const [ formatter , setFormatter ] = useState ( { } )
const [ groupDetail , setGroupDetail ] = useState ( { } ) const [ groupDetail , setGroupDetail ] = useState ( { } )
const [ allProjects , setAllProjects ] = useState ( [ ] ) const [ allProjects , setAllProjects ] = useState ( [ ] )
const [ alarmData , setAlarmData ] = useState ( ) / / 第 三 项 之 后 的 数 据 const [ alarmData , setAlarmData ] = useState ( ) / / 第 三 项 之 后 的 数 据
const [ biggest , setBiggest ] = useState ( ) / / 最 大 的 刻 度 值 const [ biggest , setBiggest ] = useState ( ) / / 最 大 的 刻 度 值
const [ mockData , setMockData ] = useState ( ) / / 所 有 的 告 警 数 据 const [ mockData , setMockData ] = useState ( ) / / 所 有 的 告 警 数 据
const [ xData , setXData ] = useState ( [ ] ) / / 横 坐 标 const [ xData , setXData ] = useState ( [ ] ) / / 横 坐 标
const self = useRef ( { myChart : null } ) ; const self = useRef ( { myChart : null } ) ;
const [ state , setState ] = useState ( 0 )
const [ interruptData , setInterruptData ] = useState ( [ ] )
const [ avgTmes , setAvgTimes ] = useState ( [ ] ) / / 平 均 修 复 时 长 数 组
/ / c o n s t [ q u e r y U s e r I d , s e t Q u e r y U s e r I d ] = u s e S t a t e ( ' ' ) / / c o n s t [ q u e r y U s e r I d , s e t Q u e r y U s e r I d ] = u s e S t a t e ( ' ' )
useEffect ( ( ) => { useEffect ( ( ) => {
@ -65,12 +68,12 @@ const Bigscreen = (props) => {
dispatch ( actions . projectGroup . getProjectGroupDetail ( groupId_ ) ) . then ( res => { dispatch ( actions . projectGroup . getProjectGroupDetail ( groupId_ ) ) . then ( res => {
if ( res . success ) { if ( res . success ) {
setGroupDetail ( res . payload . data ) setGroupDetail ( res . payload . data )
} }
} ) } )
dispatch ( actions . workOrder . getPomsProjectBasicAll ( ) ) . then ( res => { dispatch ( actions . workOrder . getPomsProjectBasicAll ( ) ) . then ( res => {
if ( res . success ) { if ( res . success ) {
setAllProjects ( res . payload . data ) setAllProjects ( res . payload . data )
} }
} ) } )
@ -89,7 +92,7 @@ const Bigscreen = (props) => {
suppressScrollX : true , suppressScrollX : true ,
} ) ; } ) ;
} }
} , [ ] ) } , [ ] )
useEffect ( ( ) => { useEffect ( ( ) => {
@ -143,25 +146,37 @@ const Bigscreen = (props) => {
useEffect ( ( ) => { useEffect ( ( ) => {
if ( groupDetail ? . pomsProjectIds && groupDetail ? . pomsProjectIds . length && allProjects && allProjects . length ) { if ( groupDetail ? . pomsProjectIds && groupDetail ? . pomsProjectIds . length && allProjects && allProjects . length ) {
const query = groupDetail ? . pomsProjectIds + '' const query = groupDetail ? . pomsProjectIds + ''
dispatch ( actions . projectGroup . getProjectWorkOrders ( { projectIds : query } ) ) . then ( res => { dispatch ( actions . projectGroup . getProjectWorkOrders ( { projectIds : query } ) ) . then ( res => {
if ( res . success ) { if ( res . success ) {
setProportion ( [ ... res . payload . data ? . slice ( 0 , 3 ) ? . map ( v => ( { name : allProjects ? . find ( item => item . value === v . projectId ) ? . label , value : Number ( v . count ) } ) ) , setProportion ( [ ... res . payload . data ? . slice ( 0 , 3 ) ? . map ( v => ( { name : allProjects ? . find ( item => item . value === v . projectId ) ? . label , value : Number ( v . count ) } ) ) ,
{ name : '其它' , value : res . payload . data && res . payload . data . length > 3 ? res . payload . data ? . slice ( 3 ) ? . reduce ( ( p , c ) => { {
return p + Number ( c . count ) name : '其它' , value : res . payload . data && res . payload . data . length > 3 ? res . payload . data ? . slice ( 3 ) ? . reduce ( ( p , c ) => {
} , 0 ) : 0 } ] ) return p + Number ( c . count )
} , 0 ) : 0
} ] )
} }
} ) } )
dispatch ( actions . projectGroup . getWorkOrdersRepairRank ( { projectIds : query } ) ) . then ( res => { dispatch ( actions . projectGroup . getWorkOrdersRepairRank ( { projectIds : query } ) ) . then ( res => {
if ( res . success ) { if ( res . success ) {
setGroupProject ( res . payload . data ? . slice ( 0 , 10 ) . map ( v => ( { name : v . formname , startTime : moment ( v ? . startTime ) . format ( 'YYYY-MM-DD' ) , duration : moment ( v ? . endTime ) . add ( 8 , 'hours' ) . diff ( v ? . startTime , 'hours' ) } ) ) || [ ] ) setGroupProject ( res . payload . data ? . slice ( 0 , 10 ) . map ( v => ( { name : v . formname , startTime : moment ( v ? . startTime ) . format ( 'YYYY-MM-DD' ) , duration : moment ( v ? . endTime ) . add ( 8 , 'hours' ) . diff ( v ? . startTime , 'hours' ) } ) ) || [ ] )
} }
} ) } )
/ / 修 复 平 均 时 长
dispatch ( actions . projectGroup . getWorkOrdersAvgTimes ( { projectIds : query } ) ) . then ( res => {
if ( res . success ) {
const data = res . payload . data ? . map ( v => {
return { projectName : allProjects ? . find ( item => item . value == v . project_id ) ? . label ,
avgTime : Math . ceil ( v . avgTime / 60 / 60 ) ,
project_id : v . project_id
}
} )
setAvgTimes ( data )
}
} )
} }
} , [ groupDetail , allProjects ] ) } , [ groupDetail , allProjects ] )
let statisticOnline = ( groupId ) => { let statisticOnline = ( groupId ) => {
dispatch ( actions . projectGroup . groupStatisticOnline ( { groupId } ) ) . then ( res => { dispatch ( actions . projectGroup . groupStatisticOnline ( { groupId } ) ) . then ( res => {
if ( res . success ) { if ( res . success ) {
@ -171,8 +186,9 @@ const Bigscreen = (props) => {
Interrupt . push ( { name : v . name , ... v . offline } ) Interrupt . push ( { name : v . name , ... v . offline } )
} }
} ) } )
Interrupt = Interrupt ? . sort ( ( a , b ) => b . offline - a . offline ) Interrupt = Interrupt ? . sort ( ( a , b ) => a . offnum / a . totnum - b . offnum / b . totnum )
setInterruptRank ( Interrupt ) setInterruptRank ( Interrupt )
setInterruptData ( Interrupt )
setOnline ( res . payload . data ? . slice ( 0 , 10 ) || [ ] ) setOnline ( res . payload . data ? . slice ( 0 , 10 ) || [ ] )
setValue ( res . payload . data ? . map ( v => v . id ) ? . slice ( 0 , 10 ) || [ ] ) setValue ( res . payload . data ? . map ( v => v . id ) ? . slice ( 0 , 10 ) || [ ] )
} }
@ -191,8 +207,41 @@ const Bigscreen = (props) => {
timeRequest ( groupId ) timeRequest ( groupId )
} , 1000 * 60 * ( minuteDifference + 1 || 61 ) ) ; } , 1000 * 60 * ( minuteDifference + 1 || 61 ) ) ;
} }
/ / 中 断 排 名 排 序 相 关
const topClick = ( e ) => {
let data = [ ]
interruptData . map ( v => { data . push ( v ) } )
switch ( e ) {
case 'perBottom' :
setInterruptRank ( data . sort ( ( a , b ) => b . offnum / b . totnum - a . offnum / a . totnum ) )
setState ( 1 )
break ;
case 'perTop' :
setInterruptRank ( data . sort ( ( a , b ) => a . offnum / a . totnum - b . offnum / b . totnum ) )
setState ( 0 )
break ;
case 'timeBottom' :
setInterruptRank ( data . sort ( ( a , b ) => b . offline - a . offline ) )
setState ( 3 )
break ;
case 'timeTop' :
setInterruptRank ( data . sort ( ( a , b ) => a . offline - b . offline ) )
setState ( 2 )
break ;
case 'countBottom' :
setInterruptRank ( data . sort ( ( a , b ) => b . totnum - a . totnum ) )
setState ( 5 )
break ;
case 'countTop' :
setInterruptRank ( data . sort ( ( a , b ) => a . totnum - b . totnum ) )
setState ( 4 )
break ;
default :
return
}
}
/ / c o n s o l e . l o g ( ' s o r t O r d e r ' , s o r t O r d e r )
useEffect ( ( ) => { useEffect ( ( ) => {
let count = 0 ; let count = 0 ;
let currentIndex = - 1 ; let currentIndex = - 1 ;
@ -230,12 +279,97 @@ const Bigscreen = (props) => {
} , [ proportion ] ) ; } , [ proportion ] ) ;
return ( return (
< div className = 'project-group' > < div className = 'project-group' >
< Header match = { match } history = { history } { ...props } groupDetail = { groupDetail } / > < Header match = { match } history = { history } { ...props } groupDetail = { groupDetail } / >
< Body > < Body >
< div style = { { width : "100%" , height : '100%' } } > < div style = { { width : "100%" , height : '100%' } } >
< div style = { { width : '100%' , height : "45%" , display : 'flex' } } > < div style = { { width : '100%' , height : "45%" , display : 'flex' } } >
< div style = { { width : "calc(50% - 8px)" , height : "100%" , marginRight : 16 , display : 'flex' } } > < Card title = '数据在线率' tooltipContent = '在线率计算：设备存活/总设备（存活判断：普通设备2h以内有实时数据，GNSS设备8h以内有实时数据）' style = { { width : "calc(50% - 8px)" , height : "100%" , } } >
< div style = { { height : '100%' , position : 'relative' } } >
{ /* <div > */ }
< Select
showClear
filter
value = { value }
multiple = { true }
maxTagCount = { 1 }
style = { { width : 300 , position : 'absolute' , top : 0 , right : 0 , zIndex : 99 } }
optionList = { groupStatisticOnline ? . map ( v => ( { value : v . id , label : v . name } ) ) || [ ] }
onChange = { v => {
setValue ( v )
setOnline ( groupStatisticOnline ? . filter ( s => v . includes ( s . id ) ) )
} }
/ >
{ /* </div> */ }
< ReactECharts
option = { {
title : {
/ / t e x t : v . n a m e ,
} ,
grid : {
left : 27 ,
right : 10 ,
bottom : 20 ,
} ,
tooltip : {
trigger : 'axis' ,
formatter : function ( params ) {
/ / 自 定 义 提 示 框 内 容
/ / c o n s o l e . l o g ( p a r a m s ) ;
let title = params [ 0 ] . data [ 0 ] + '<br/>' + '<br/>'
params . forEach ( v => {
let find = online ? . find ( s => s . name == v . seriesName ) ? . online ? . find ( d => moment ( d . collect_time ) . format ( 'YYYY-MM-DD HH' ) == v . data [ 0 ] ) || { }
title = title + v . seriesName + "：" + " " + " " + v . data [ 1 ] + "%" + "（" + find ? . online + "/" + find ? . total + "）" + '<br/>'
} )
return title
}
} ,
xAxis : {
type : 'time' ,
/ / n a m e : " 时 间 " ,
boundaryGap : false ,
minInterval : 1000 * 60 * 60 ,
} ,
dataZoom : [
{
show : true ,
realtime : true ,
start : 0 ,
end : 100
} ,
{
type : 'inside' ,
realtime : true ,
start : 0 ,
end : 100
}
] ,
yAxis : {
type : 'value' ,
name : "单位%" ,
areaStyle : {
color : '#FFF' ,
} ,
} ,
series : online ? . map ( v => ( {
type : 'line' ,
name : v . name ,
smooth : true ,
areaStyle : {
color : '#0e9cff26' ,
} ,
data : v . online ? . map ( f => [ moment ( f . collect_time ) . format ( 'YYYY-MM-DD HH' ) , f . rate . toFixed ( 1 ) ] ) || [ ]
} ) ) || [ ]
} }
notMerge = { true }
lazyUpdate = { true }
style = { { width : "100%" , height : "100%" } }
theme = { 'ReactEChart' }
/ >
< / div >
< / Card >
< div style = { { width : "calc(50% - 8px)" , height : "100%" , marginLeft : 16 , display : 'flex' } } >
< Card title = '项目工单占比' tooltipContent = '项目工单占比：一个月内项目发起工单修复的次数占比。' style = { { width : "calc(50% - 8px)" , height : "100%" , marginRight : 16 } } > < Card title = '项目工单占比' tooltipContent = '项目工单占比：一个月内项目发起工单修复的次数占比。' style = { { width : "calc(50% - 8px)" , height : "100%" , marginRight : 16 } } >
< div style = { { height : '100%' , position : 'relative' } } > < div style = { { height : '100%' , position : 'relative' } } >
< div style = { { height : clientHeight * 0.55 - 300 , display : 'flex' , justifyContent : "center" , position : 'relative' } } > < div style = { { height : clientHeight * 0.55 - 300 , display : 'flex' , justifyContent : "center" , position : 'relative' } } >
@ -315,15 +449,18 @@ const Bigscreen = (props) => {
< / div > < / div >
< / Card > < / Card >
< Card title = '修复排名' tooltipContent = '修复时间排名：一个月内，计算每个工单的修复时间' style = { { width : "calc(50% - 8px)" , height : "100%" } } > < Card title = '修复排名' style = { { width : "calc(50% - 8px)" , height : "100%" } } tooltipContent = '修复时间排名：一个月内，计算每个工单的修复时间' >
< Tabs type = "line" >
< TabPane tab = "修复排名" itemKey = "1" >
< div style = { { height : '100%' , fontFamily : 'SourceHanSansCN-Regular' , fontWeight : 400 , fontSize : 14 , } } > < div style = { { height : '100%' , fontFamily : 'SourceHanSansCN-Regular' , fontWeight : 400 , fontSize : 14 , } } >
< div style = { { display : "flex" , background : '#F6F9FF' , height : 40 , alignItems : 'center' } } > < div style = { { display : "flex" , background : '#F6F9FF' , height : 40 , alignItems : 'center' } } >
< div style = { { textAlign : 'center' , width : '25%' } } > 序号 < / div > < div style = { { textAlign : 'center' , width : '25%' } } > 序号 < / div >
< div style = { { textAlign : 'center' , width : '49%' } } > 工单名称 < / div > < div style = { { textAlign : 'center' , width : '49%' } } > 工单名称 < / div >
< div style = { { textAlign : 'center' , width : '25%' } } > 修复时长 < / div > < div style = { { textAlign : 'center' , width : '25%' } } > 修复时长 < / div >
< / div > < / div >
< div id = "repair" style = { { position : 'relative' , height : clientHeight * 0.55 - 220 } } > < div id = "repair" style = { { position : 'relative' , height : clientHeight * 0.55 - 220 - 52 } } >
< AutoRollComponent content = { < > { groupProject ? . map ( ( c , index ) => { < AutoRollComponent content = { < > { groupProject ? . map ( ( c , index ) => {
return index < 10 ? < div style = { { display : "flex" , background : index % 2 == 1 ? "#F6F9FF" : '' , padding : 6 , height : 50 , alignItems : 'center' } } > return index < 10 ? < div style = { { display : "flex" , background : index % 2 == 1 ? "#F6F9FF" : '' , padding : 6 , height : 50 , alignItems : 'center' } } >
< div style = { { textAlign : 'center' , width : '25%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#2C66F3' , fontWeight : 400 } } > < div style = { { textAlign : 'center' , width : '25%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#2C66F3' , fontWeight : 400 } } >
NO . { index + 1 } < / div > NO . { index + 1 } < / div >
@ -332,31 +469,16 @@ const Bigscreen = (props) => {
< div style = { { textAlign : 'center' , width : '25%' , fontFamily : 'SourceHanSansCN-Regular' , fontWeight : 400 } } > < div style = { { textAlign : 'center' , width : '25%' , fontFamily : 'SourceHanSansCN-Regular' , fontWeight : 400 } } >
{ c . duration } h < / div > { c . duration } h < / div >
< / div > : < > < / > < / div > : < > < / >
} ) } < / > } containerStyle = { { position : "relative" , height : "95%" , } } } ) } < / > } containerStyle = { { position : "relative" , height : "95%" , } }
divHeight = { "100%" } divId = { "rank" } / > divHeight = { "100%" } divId = { "rank" } / >
< / div > < / div >
< / div > < / div >
< / Card > < / TabPane >
< / div > < TabPane tab = "项目统计" itemKey = "2" >
< Card title = '数据在线率' tooltipContent = '在线率计算：设备存活/总设备（存活判断：普通设备2h以内有实时数据，GNSS设备8h以内有实时数据）' style = { { width : "calc(50% - 8px)" , height : "100%" , } } > < div style = { { height : clientHeight * 0.55 - 220 - 52 , fontFamily : 'SourceHanSansCN-Regular' , fontSize : 14 , width : '100%' } } >
< div style = { { height : '100%' , position : 'relative' } } >
{ /* <div > */ } < ReactECharts
< Select
showClear
filter
value = { value }
multiple = { true }
maxTagCount = { 1 }
style = { { width : 300 , position : 'absolute' , top : 0 , right : 0 , zIndex : 99 } }
optionList = { groupStatisticOnline ? . map ( v => ( { value : v . id , label : v . name } ) ) || [ ] }
onChange = { v => {
setValue ( v )
setOnline ( groupStatisticOnline ? . filter ( s => v . includes ( s . id ) ) )
} }
/ >
{ /* </div> */ }
< ReactECharts
option = { { option = { {
title : { title : {
/ / t e x t : v . n a m e , / / t e x t : v . n a m e ,
@ -367,54 +489,100 @@ const Bigscreen = (props) => {
bottom : 20 , bottom : 20 ,
} , } ,
tooltip : { tooltip : {
trigger : 'axis' , / / t r i g g e r : ' a x i s ' ,
formatter : function ( params ) { position : [ '5%' , '50%' ] ,
/ / 自 定 义 提 示 框 内 容
/ / c o n s o l e . l o g ( p a r a m s ) ;
let title = params [ 0 ] . data [ 0 ] + '<br/>' + '<br/>'
params . forEach ( v => {
let find = online ? . find ( s => s . name == v . seriesName ) ? . online ? . find ( d => moment ( d . collect_time ) . format ( 'YYYY-MM-DD HH' ) == v . data [ 0 ] ) || { }
title = title + v . seriesName + "：" + " " + " " + v . data [ 1 ] + "%" + "（" + find ? . online + "/" + find ? . total + "）" + '<br/>'
} )
return title
}
} , } ,
xAxis : { xAxis : {
type : 'time' , show : true ,
/ / n a m e : " 时 间 " , type : 'category' ,
boundaryGap : false , data : avgTmes ? . map ( s => s . projectName ) ,
minInterval : 1000 * 60 * 60 , axisLabel : {
formatter : function ( value ) {
/ / 控 制 显 示 前 五 个 字 符 ， 其 余 用 省 略 号 代 替
return value . substring ( 0 , 5 ) + ( value . length > 5 ? '...' : '' ) ;
} ,
} ,
} , } ,
yAxis : { yAxis : {
type : 'value' , type : 'value' ,
name : "单位%" , name : "单位(小时) " ,
areaStyle : { / / a r e a S t y l e : {
color : '#FFF' , / / c o l o r : ' # F F F ' ,
} , / / } ,
} , } ,
series : online ? . map ( v => ( { series : [
type : 'line' , {
name : v . name , type : 'bar' ,
smooth : true , data : avgTmes ? . map ( s => s . avgTime ) ,
areaStyle : { }
color : '#0e9cff26' , ]
} ,
data : v . online ? . map ( f => [ moment ( f . collect_time ) . format ( 'YYYY-MM-DD HH' ) , f . rate . toFixed ( 1 ) ] ) || [ ]
} ) ) || [ ]
} } } }
notMerge = { true } / / n o t M e r g e = { t r u e }
lazyUpdate = { true } lazyUpdate = { true }
style = { { width : "100%" , height : "100%" } } style = { { width : "100%" , height : "100%" } }
theme = { 'ReactEChart' } theme = { 'ReactEChart' }
/ > / >
< / div >
< / div > < / TabPane >
< / Card > < / Tabs >
< / Card >
< / div >
< / div > < / div >
< div style = { { width : '100%' , height : "calc(55% - 24px)" , display : 'flex' , marginTop : 24 } } > < div style = { { width : '100%' , height : "calc(55% - 24px)" , display : 'flex' , marginTop : 24 } } >
< Card title = '中断排名' tooltipContent = '中断时长：当前时间-最后一条数据时间。中断个数：结构物下中断测点个数/结构物总测点个数。' style = { { width : "calc(50% - 8px)" , height : "100%" , } } >
< div style = { { height : '100%' , fontFamily : 'SourceHanSansCN-Regular' , fontWeight : 400 , fontSize : 14 , } } >
< div style = { { display : "flex" , background : '#F6F9FF' , height : 40 , alignItems : 'center' } } >
< div style = { { textAlign : 'center' , width : '33%' } } > 结构物 < / div >
< div style = { { textAlign : 'center' , width : '33%' , position : 'relative' } } > 中断百分比 < i class = "angle_top" id = { state == 0 ? 'angleSelected' : null } onClick = { ( ) => topClick ( 'perTop' ) } > < / i > < i id = { state == 1 ? 'angleSelected' : null } class = "angle_bottom" onClick = { ( ) => topClick ( 'perBottom' ) } > < / i > < / div >
< div style = { { textAlign : 'center' , width : '33%' , position : 'relative' } } > 中断时长 < i class = "angle_top" id = { state == 2 ? 'angleSelected' : null } onClick = { ( ) => topClick ( 'timeTop' ) } > < / i > < i id = { state == 3 ? 'angleSelected' : null } class = "angle_bottom" onClick = { ( ) => topClick ( 'timeBottom' ) } > < / i > < / div >
< div style = { { textAlign : 'center' , width : '33%' , position : 'relative' } } > 中断个数 < i class = "angle_top" id = { state == 4 ? 'angleSelected' : null } onClick = { ( ) => topClick ( 'countTop' ) } > < / i > < i id = { state == 5 ? 'angleSelected' : null } class = "angle_bottom" onClick = { ( ) => topClick ( 'countBottom' ) } > < / i > < / div >
< / div >
< div id = "interrupt" style = { { position : 'relative' , height : clientHeight * 0.55 - 170 } } >
< AutoRollComponent content = { < >
{ InterruptRank ? . map ( ( c , index ) => {
let title
if ( c . offline ) {
if ( c . offline >= 1440 && Math . floor ( c . offline / 1440 ) ) title = Math . floor ( c . offline / 1440 ) + "天"
if ( ( c . offline % 1440 ) >= 60 && Math . floor ( c . offline % 1440 / 60 ) ) {
if ( title ) {
title = title + Math . floor ( c . offline % 1440 / 60 ) + "时"
} else {
title = Math . floor ( c . offline % 1440 / 60 ) + "时"
}
}
if ( c . offline % 1440 % 60 ) {
if ( title ) {
title = title + c . offline % 1440 % 60 + "分"
} else {
title = c . offline % 1440 % 60 + "分"
}
}
}
/ / 判 断 中 断 时 长 是 否 超 过 两 百 天
const cc = title . split ( '天' )
if ( cc . length > 1 ) {
if ( Number ( cc [ 0 ] ) > 200 ) {
return
}
}
return < div style = { { display : "flex" , background : index % 2 == 1 ? "#F6F9FF" : '' , height : 40 , alignItems : 'center' } } >
< div style = { { textAlign : 'center' , width : '33%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#2C66F3' , fontWeight : 400 } } > { c . name } < / div >
< div style = { { textAlign : 'center' , width : '33%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#F33B3B' , fontWeight : 400 } } > { ( ( c . offnum / c . totnum ) * 100 ) . toFixed ( 2 ) } % < / div >
< div style = { { textAlign : 'center' , width : '33%' } } > { title } < / div >
< div style = { { textAlign : 'center' , width : '33%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#F33B3B' , fontWeight : 400 } } > { c . offnum + '/' + c . totnum } < / div >
< / div >
} ) } < / > } containerStyle = { { position : "relative" , height : "85%" , } }
divHeight = { "100%" } divId = { "interruptchart" } / >
< / div >
< / div >
< / Card >
< Card title = '告警排名TOP20' tooltipContent = '(1)超阈值个数：一周内结构物超阈值告警的个数。(2）手动恢复个数：一个月内超阈值告警手动恢复的个数' style = { { < Card title = '告警排名TOP20' tooltipContent = '(1)超阈值个数：一周内结构物超阈值告警的个数。(2）手动恢复个数：一个月内超阈值告警手动恢复的个数' style = { {
width : "calc(50% - 8px)" , height : "100%" , marginRight : 16 width : "calc(50% - 8px)" , height : "100%" , marginLef t : 16
} } > } } >
{ alarmData && alarmData . length > 0 ? ( < div style = { { height : '100%' } } > { alarmData && alarmData . length > 0 ? ( < div style = { { height : '100%' } } >
< div style = { { display : "flex" , justifyContent : 'flex-end' } } > < div style = { { display : "flex" , justifyContent : 'flex-end' } } >
@ -458,46 +626,6 @@ const Bigscreen = (props) => {
< / div > < / div >
< / div > ) : '' } < / div > ) : '' }
< / Card > < / Card >
< Card title = '中断排名' tooltipContent = '中断时长：当前时间-最后一条数据时间。中断个数：结构物下中断测点个数/结构物总测点个数。' style = { { width : "calc(50% - 8px)" , height : "100%" , } } >
< div style = { { height : '100%' , fontFamily : 'SourceHanSansCN-Regular' , fontWeight : 400 , fontSize : 14 , } } >
< div style = { { display : "flex" , background : '#F6F9FF' , height : 40 , alignItems : 'center' } } >
< div style = { { textAlign : 'center' , width : '33%' } } > 结构物 < / div >
< div style = { { textAlign : 'center' , width : '33%' } } > 中断时长 < / div >
< div style = { { textAlign : 'center' , width : '33%' } } > 中断个数 < / div >
< / div >
< div id = "interrupt" style = { { position : 'relative' , height : clientHeight * 0.55 - 170 } } >
< AutoRollComponent content = { < >
{ InterruptRank ? . map ( ( c , index ) => {
let title
if ( c . offline ) {
if ( c . offline >= 1440 && Math . floor ( c . offline / 1440 ) ) title = Math . floor ( c . offline / 1440 ) + "天"
if ( ( c . offline % 1440 ) >= 60 && Math . floor ( c . offline % 1440 / 60 ) ) {
if ( title ) {
title = title + Math . floor ( c . offline % 1440 / 60 ) + "时"
} else {
title = Math . floor ( c . offline % 1440 / 60 ) + "时"
}
}
if ( c . offline % 1440 % 60 ) {
if ( title ) {
title = title + c . offline % 1440 % 60 + "分"
} else {
title = c . offline % 1440 % 60 + "分"
}
}
}
return < div style = { { display : "flex" , background : index % 2 == 1 ? "#F6F9FF" : '' , height : 40 , alignItems : 'center' } } >
< div style = { { textAlign : 'center' , width : '33%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#2C66F3' , fontWeight : 400 } } > { c . name } < / div >
< div style = { { textAlign : 'center' , width : '33%' } } > { title } < / div >
< div style = { { textAlign : 'center' , width : '33%' , fontFamily : 'SourceHanSansCN-Regular' , color : '#F33B3B' , fontWeight : 400 } } > { c . offnum + '/' + c . totnum + ` ( ${ ( ( c . offnum / c . totnum ) * 100 ) . toFixed ( 2 ) } %) ` } < / div >
< / div >
} ) } < / > } containerStyle = { { position : "relative" , height : "85%" , } }
divHeight = { "100%" } divId = { "interruptchart" } / >
< / div >
< / div >
< / Card >
< / div > < / div >
< / d i v > < / d i v >
@ -506,9 +634,9 @@ const Bigscreen = (props) => {
< / d i v > < / d i v >
) )
} }
function mapStateToProps ( state ) { function mapStateToProps ( state ) {
const { auth , global , groupStatisticOnline , pomsProjectBasicAll } = state ; const { auth , global , groupStatisticOnline , pomsProjectBasicAll } = state ;
return { return {
user : auth . user , user : auth . user ,
actions : global . actions , actions : global . actions ,
zhaobing’
1 year ago