完善漏洞中心展示卡样式

This commit is contained in:
吴亚丹 2022-04-12 10:24:39 +08:00
parent e84791ffd0
commit c2e2482cd1
2 changed files with 18 additions and 14 deletions

View File

@ -11,5 +11,7 @@ export default {
'component.ListCard.scan': '一键扫描', 'component.ListCard.scan': '一键扫描',
'component.ListCard.scanning': '扫描中', 'component.ListCard.scanning': '扫描中',
'component.ListCard.success': '扫描成功', 'component.ListCard.success': '扫描成功',
'component.ListCard.failed': '扫描失败' 'component.ListCard.failed': '扫描失败',
'component.ListCard.scan_recent': '数据最近已更新,无需再次更新',
}; };

View File

@ -19,11 +19,13 @@ const ListCard=(props)=> {
let res=await updataApi(); let res=await updataApi();
if(res){ if(res){
setComplete(false); setComplete(false);
if(res.success){ if(res.message == 'success'){
message.success(intl.formatMessage({id:'component.ListCard.success',defaultMessage:'Scan success'})); message.success(intl.formatMessage({id:'component.ListCard.success',defaultMessage:'Scan success'}));
setTimeout(()=>{ setTimeout(()=>{
window.location.reload(); window.location.reload();
},1000) },1000)
}else if(res.message == 'forbidden'){
message.success(intl.formatMessage({id:'component.ListCard.scan_recent',defaultMessage:res.data}));
}else{ }else{
message.error(intl.formatMessage({id:'component.ListCard.failed',defaultMessage:'Scan failed'})); message.error(intl.formatMessage({id:'component.ListCard.failed',defaultMessage:'Scan failed'}));
} }
@ -42,52 +44,52 @@ const ListCard=(props)=> {
setResponsive(offset.width < 596); setResponsive(offset.width < 596);
}}> }}>
<ProCard.Group direction={responsive ? 'column' : 'row'}> <ProCard.Group direction={responsive ? 'column' : 'row'}>
<ProCard> <ProCard bodyStyle={{textAlign:'center'}}>
<Statistic title={intl.formatMessage({ <Statistic title={intl.formatMessage({
id: 'component.ListCard.needed_to_repair', id: 'component.ListCard.needed_to_repair',
defaultMessage: 'Need to repair', defaultMessage: 'Need to repair',
})} })}
value={StatisticList?.cve_count} valueStyle={{ color: "red", textAlign:'center' }} /> value={StatisticList?.cve_count} valueStyle={{ color: "red" }} />
</ProCard> </ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'} /> <Divider type={responsive ? 'horizontal' : 'vertical'} />
<ProCard> <ProCard bodyStyle={{textAlign:'center'}}>
<Statistic title={intl.formatMessage({ <Statistic title={intl.formatMessage({
id: 'component.ListCard.high_needed_to_repair', id: 'component.ListCard.high_needed_to_repair',
defaultMessage: 'High-risk need to Repair', defaultMessage: 'High-risk need to Repair',
})} })}
value={StatisticList?.high_cve_count} valueStyle={{ color: "red", textAlign:'center' }} /> value={StatisticList?.high_cve_count} valueStyle={{ color: "red" }} />
</ProCard> </ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'} /> <Divider type={responsive ? 'horizontal' : 'vertical'} />
<ProCard> <ProCard bodyStyle={{textAlign:'center'}}>
<Statistic title={intl.formatMessage({ <Statistic title={intl.formatMessage({
id: 'component.ListCard.hosts_with_vul', id: 'component.ListCard.hosts_with_vul',
defaultMessage: 'Hosts with vulnerabilities', defaultMessage: 'Hosts with vulnerabilities',
})} })}
value={StatisticList?.affect_host_count} valueStyle={{ color: "red", textAlign:'center' }} /> value={StatisticList?.affect_host_count} valueStyle={{ color: "red" }} />
</ProCard> </ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'} /> <Divider type={responsive ? 'horizontal' : 'vertical'} />
<ProCard> <ProCard bodyStyle={{textAlign:'center'}}>
<Statistic title={intl.formatMessage({ <Statistic title={intl.formatMessage({
id: 'component.ListCard.today_repaired', id: 'component.ListCard.today_repaired',
defaultMessage: 'Today has been repaired', defaultMessage: 'Today has been repaired',
})} })}
value={StatisticList?.cvefix_today_count} valueStyle={{ color: "red", textAlign:'center' }} /> value={StatisticList?.cvefix_today_count} valueStyle={{ color: "red" }} />
</ProCard> </ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'} /> <Divider type={responsive ? 'horizontal' : 'vertical'} />
<ProCard> <ProCard bodyStyle={{textAlign:'center'}}>
<Statistic title={intl.formatMessage({ <Statistic title={intl.formatMessage({
id: 'component.ListCard.cumulate_repaired', id: 'component.ListCard.cumulate_repaired',
defaultMessage: 'Cumulative revision', defaultMessage: 'Cumulative revision',
})} })}
value={StatisticList?.cvefix_all_count} valueStyle={{ color: "red",textAlign:'center' }} /> value={StatisticList?.cvefix_all_count} valueStyle={{ color: "red" }} />
</ProCard> </ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'} /> <Divider type={responsive ? 'horizontal' : 'vertical'} />
<ProCard> <ProCard bodyStyle={{textAlign:'center'}}>
<Statistic title={intl.formatMessage({ <Statistic title={intl.formatMessage({
id: 'component.ListCard.latest_scan_time', id: 'component.ListCard.latest_scan_time',
defaultMessage: 'Latest scan time', defaultMessage: 'Latest scan time',
})} })}
value={StatisticList?.latest_scan_time} valueStyle={{ color: "white",fontSize:13,whiteSpace:'nowrap',textAlign:'center' }} /> value={StatisticList?.latest_scan_time} valueStyle={{ color: "red",fontSize:16,whiteSpace:'nowrap' }} />
</ProCard> </ProCard>
<ProCard> <ProCard>
<Button onClick={Scan} type="primary" loading={complete}>{complete ? <FormattedMessage id="component.ListCard.scanning" defaultMessage="Scanning" /> : <FormattedMessage id="component.ListCard.scan" defaultMessage="Scan" />}</Button> <Button onClick={Scan} type="primary" loading={complete}>{complete ? <FormattedMessage id="component.ListCard.scanning" defaultMessage="Scanning" /> : <FormattedMessage id="component.ListCard.scan" defaultMessage="Scan" />}</Button>