|
|
@ -94,12 +94,17 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
return combinedMax; |
|
|
|
} |
|
|
|
return max; |
|
|
|
}, -Infinity) |
|
|
|
const bigD = Math.ceil(maxCombinedValue / 50) * 50 |
|
|
|
50, 40, 30, 20, 10, 0 |
|
|
|
setXData([bigD, (bigD - bigD / 5), (bigD - bigD * 2 / 5), (bigD - bigD * 3 / 5), (bigD - bigD * 4 / 5), 0, (bigD - bigD * 4 / 5), (bigD - bigD * 3 / 5), (bigD - bigD * 2 / 5), (bigD - bigD / 5), bigD]) |
|
|
|
setBiggest(bigD) |
|
|
|
}, []) |
|
|
|
}, -Infinity) |
|
|
|
console.log('setAlarmData4',maxCombinedValue) |
|
|
|
const bigD= Math.ceil(maxCombinedValue/50)*50 |
|
|
|
if(bigD==0){ |
|
|
|
setXData([5,4,3,2,1,0,1,2,3,4,5])//最大值为0,默认横坐标 |
|
|
|
}else{ |
|
|
|
setXData([bigD,(bigD-bigD/5),(bigD-bigD*2/5),(bigD-bigD*3/5),(bigD-bigD*4/5),0,(bigD-bigD*4/5),(bigD-bigD*3/5),(bigD-bigD*2/5),(bigD-bigD/5),bigD]) |
|
|
|
} |
|
|
|
setBiggest(bigD) |
|
|
|
},[]) |
|
|
|
|
|
|
|
// const mockData=[ |
|
|
|
// {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23}, |
|
|
|
// {id: 2,name: '测试结构物2',alarmCount: 300,dealAlarmCount: 22}, |
|
|
@ -180,6 +185,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function formatDate (date) { |
|
|
|
var year = date.getFullYear(); |
|
|
|
var month = String(date.getMonth() + 1).padStart(2, '0'); |
|
|
@ -241,6 +247,8 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
}, [proportion]); |
|
|
|
|
|
|
|
|
|
|
|
// console.log('setAlarmData3',alarmData) |
|
|
|
// console.log(groupStatisticOnline); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className='project-group'> |
|
|
@ -423,7 +431,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
|
|
|
|
</div> |
|
|
|
<div style={{ width: '100%', height: "calc(55% - 24px)", display: 'flex', marginTop: 24 }}> |
|
|
|
<Card title='告警排名TOP20' style={{ |
|
|
|
<Card title='告警排名TOP20' style={{ |
|
|
|
width: "calc(50% - 8px)", height: "100%", marginRight: 16 |
|
|
|
}} > |
|
|
|
{mockData && mockData.length > 0 ? (<div style={{ height: '100%' }}> |
|
|
@ -443,10 +451,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
<div class='structDiv'>{mockData[0]?.name?.length > 5 ? <Tooltip content={mockData[0]?.name}>{mockData[0]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> |
|
|
|
<div class='barChartDiv'> |
|
|
|
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> |
|
|
|
<div class='alarms' style={{ width: (mockData[0].alarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='alarms' style={{ width:(biggest>0? ((mockData[0].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '50%', display: 'flex', }}> |
|
|
|
<div class='dealAlarms' style={{ width: (mockData[0].dealAlarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='dealAlarms' style={{ width: (biggest>0? ((mockData[0].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>) : '' |
|
|
@ -458,10 +466,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
<div class='structDiv'>{mockData[1]?.name?.length > 5 ? <Tooltip content={mockData[1]?.name}>{mockData[1]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> |
|
|
|
<div class='barChartDiv'> |
|
|
|
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> |
|
|
|
<div class='alarms' style={{ width: (mockData[1].alarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='alarms' style={{ width: (biggest>0? ((mockData[1].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '50%', display: 'flex', }}> |
|
|
|
<div class='dealAlarms' style={{ width: (mockData[1].dealAlarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='dealAlarms' style={{ width: (biggest>0? ((mockData[1].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>) : '' |
|
|
@ -473,10 +481,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
<div class='structDiv'>{mockData[2]?.name?.length > 5 ? <Tooltip content={mockData[2]?.name}>{mockData[2]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> |
|
|
|
<div class='barChartDiv'> |
|
|
|
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> |
|
|
|
<div class='alarms' style={{ width: (mockData[2].alarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='alarms' style={{ width: (biggest>0? ((mockData[2].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '50%', display: 'flex', }}> |
|
|
|
<div class='dealAlarms' style={{ width: (mockData[2].dealAlarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='dealAlarms' style={{ width:(biggest>0? ((mockData[2].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>) : '' |
|
|
@ -490,10 +498,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
<div class='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div> |
|
|
|
<div class='barChartDiv'> |
|
|
|
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> |
|
|
|
<div class='alarms' style={{ width: (item.alarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='alarms' style={{ width:(biggest>0?((item.alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '50%', display: 'flex', }}> |
|
|
|
<div class='dealAlarms' style={{ width: (item.dealAlarmCount / biggest) * 100 || '%', height: '100%' }}></div> |
|
|
|
<div class='dealAlarms' style={{ width:(biggest>0? ((item.dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|