|
|
@ -198,7 +198,6 @@ const Bigscreen = (props) => { |
|
|
|
clearInterval(timer); |
|
|
|
}; |
|
|
|
}, [proportion]); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className='project-group'> |
|
|
|
<Header match={match} history={history} {...props} groupDetail={groupDetail} /> |
|
|
@ -387,31 +386,31 @@ const Bigscreen = (props) => { |
|
|
|
{alarmData && alarmData.length > 0 ? (<div style={{ height: '100%' }}> |
|
|
|
<div style={{ display: "flex", justifyContent: 'flex-end' }}> |
|
|
|
<div style={{ display: "flex", alignItems: 'center' }}> |
|
|
|
<div class='alarmDiv'></div><div class='alarm'>超阈值个数</div> |
|
|
|
<div className='alarmDiv'></div><div className='alarm'>超阈值个数</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: "flex", alignItems: 'center' }}> |
|
|
|
<div class='dealAlarmCountDiv'></div><div class='alarmCount'>手动恢复个数</div> |
|
|
|
<div className='dealAlarmCountDiv'></div><div className='alarmCount'>手动恢复个数</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id='alarmRank' style={{ height: clientHeight * 0.55 - 150, position: 'relative' }}> |
|
|
|
<AutoRollComponent content={<>{alarmData?.map((item, index) => { |
|
|
|
return (<div style={{ display: 'flex', marginTop: 15, alignItems: 'center' }}> |
|
|
|
<div class='rankDiv'> |
|
|
|
<div className='rankDiv'> |
|
|
|
{index === 0 ? <img src='/assets/images/projectGroup/first.png'></img> : |
|
|
|
index === 1 ? <img src='/assets/images/projectGroup/second.png'></img> : |
|
|
|
index === 2 ? <img src='/assets/images/projectGroup/third.png'></img> : |
|
|
|
index > 2 ? <span>{index + 1}</span> : '' |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div class='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div> |
|
|
|
<div class='barChartDiv'> |
|
|
|
<div className='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div> |
|
|
|
<div className='barChartDiv'> |
|
|
|
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end', position: 'relative' }}> |
|
|
|
<span style={{ position: 'absolute', left: 0, zIndex: 2 }}> {item.dealAlarmCount}</span> |
|
|
|
<div class='alarms' style={{ width: (biggest > 0 ? ((item.dealAlarmCount / biggest) * 100 + '%') : 0), height: '100%', zIndex: 2 }}> </div> |
|
|
|
<div className='alarms' style={{ width: (biggest > 0 ? ((item.dealAlarmCount / biggest) * 100 + '%') : 0), height: '100%', zIndex: 2 }}> </div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '50%', display: 'flex', position: 'relative' }}> |
|
|
|
<span style={{ position: 'absolute', right: 0, zIndex: 2 }}> {item.alarmCount}</span> |
|
|
|
<div class='dealAlarms' style={{ width: (biggest > 0 ? ((item.alarmCount / biggest) * 100 + '%') : 0), height: '100%', zIndex: 2 }}> </div> |
|
|
|
<div className='dealAlarms' style={{ width: (biggest > 0 ? ((item.alarmCount / biggest) * 100 + '%') : 0), height: '100%', zIndex: 2 }}> </div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>) |
|
|
@ -419,7 +418,7 @@ const Bigscreen = (props) => { |
|
|
|
divHeight={"100%"} divId={"chart"} /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="scale"> |
|
|
|
<div className="scale"> |
|
|
|
{xData?.map(item => { |
|
|
|
return <div >{item}</div> |
|
|
|
})} |
|
|
@ -454,13 +453,15 @@ const Bigscreen = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
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}</div> |
|
|
|
</div> |
|
|
|
})}</>} containerStyle={{ position: "relative", height: "85%", }} |
|
|
|
divHeight={"100%"} divId={"chart"} /> |
|
|
|
|
|
|
|
|
|
|
|
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}</div> |
|
|
|
</div> |
|
|
|
})}</> } containerStyle={{ position: "relative", height: "85%", }} |
|
|
|
divHeight={"100%"} divId={"interruptchart"}/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Card> |
|
|
|