风险管控增加小计行
This commit is contained in:
parent
ade4e83da8
commit
670f2bf231
@ -46,7 +46,7 @@ class RiskControl extends React.Component {
|
||||
this.echartsInstances.stackBarChart = echarts.init(chartDom);
|
||||
|
||||
const { riskSubData } = this.props;
|
||||
const riskList = riskSubData?.riskList || [];
|
||||
const riskList = riskSubData?.riskList.filter((item) => item.companyName !== '小计') || [];
|
||||
|
||||
if (riskList.length === 0) {
|
||||
this.echartsInstances.stackBarChart.setOption({
|
||||
@ -324,6 +324,8 @@ class RiskControl extends React.Component {
|
||||
this.setupResizeHandler('typeBarChart', this.renderTypeBarChart);
|
||||
};
|
||||
|
||||
// 表格: 各公司风险统计明细表
|
||||
// 表格: 各公司风险统计明细表
|
||||
// 表格: 各公司风险统计明细表
|
||||
renderRiskTable = () => {
|
||||
const { riskSubData } = this.props;
|
||||
@ -333,100 +335,238 @@ class RiskControl extends React.Component {
|
||||
return <div style={{ textAlign: 'center', padding: '50px', color: '#999' }}>暂无风险数据</div>;
|
||||
}
|
||||
|
||||
// 表格列配置（与 trainingContent 样式保持一致）
|
||||
const columns = [
|
||||
{
|
||||
title: '公司名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
render: (text) => <strong>{text}</strong>,
|
||||
},
|
||||
{
|
||||
title: '重大风险',
|
||||
dataIndex: 'majorCount',
|
||||
key: 'majorCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text) => <span style={{ color: '#c92a2a', fontWeight: 'bold' }}>{text}</span>,
|
||||
},
|
||||
{
|
||||
title: '较大风险',
|
||||
dataIndex: 'largerCount',
|
||||
key: 'largerCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text) => <span style={{ color: '#ffa94d', fontWeight: 'bold' }}>{text}</span>,
|
||||
},
|
||||
{
|
||||
title: '一般风险',
|
||||
dataIndex: 'generalCount',
|
||||
key: 'generalCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text) => <span style={{ color: '#ffe066', fontWeight: 'bold' }}>{text}</span>,
|
||||
},
|
||||
{
|
||||
title: '低风险',
|
||||
dataIndex: 'lowCount',
|
||||
key: 'lowCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text) => <span style={{ color: '#4285F4', fontWeight: 'bold' }}>{text}</span>,
|
||||
},
|
||||
{
|
||||
title: '小计',
|
||||
dataIndex: 'totalCount',
|
||||
key: 'totalCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text) => <strong style={{ color: '#000', fontSize: '14px' }}>{text}</strong>,
|
||||
},
|
||||
];
|
||||
const filteredRiskList = riskList.filter((item) => item.companyName !== '小计');
|
||||
|
||||
const tableData = riskList.map((item, index) => ({
|
||||
key: index,
|
||||
companyName: item.companyName,
|
||||
majorCount: item.majorCount,
|
||||
largerCount: item.largerCount,
|
||||
generalCount: item.generalCount,
|
||||
lowCount: item.lowCount,
|
||||
totalCount: item.totalCount,
|
||||
}));
|
||||
|
||||
// 合计行
|
||||
const summary = {
|
||||
majorTotal: riskList.reduce((sum, item) => sum + (item.majorCount || 0), 0),
|
||||
largerTotal: riskList.reduce((sum, item) => sum + (item.largerCount || 0), 0),
|
||||
generalTotal: riskList.reduce((sum, item) => sum + (item.generalCount || 0), 0),
|
||||
lowTotal: riskList.reduce((sum, item) => sum + (item.lowCount || 0), 0),
|
||||
totalAll: riskList.reduce((sum, item) => sum + (item.totalCount || 0), 0),
|
||||
majorTotal: filteredRiskList.reduce((sum, item) => sum + (item.majorCount || 0), 0),
|
||||
largerTotal: filteredRiskList.reduce((sum, item) => sum + (item.largerCount || 0), 0),
|
||||
generalTotal: filteredRiskList.reduce((sum, item) => sum + (item.generalCount || 0), 0),
|
||||
lowTotal: filteredRiskList.reduce((sum, item) => sum + (item.lowCount || 0), 0),
|
||||
totalAll: filteredRiskList.reduce((sum, item) => sum + (item.totalCount || 0), 0),
|
||||
};
|
||||
const scrollConfig = columns.length > 10 ? { x: columns.length * 100, y: 360 } : { y: 360 };
|
||||
|
||||
const totalWidth = 620;
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
padding: '20px 0 0 0',
|
||||
padding: '16px 0',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '17px',
|
||||
fontSize: '16px',
|
||||
color: '#000',
|
||||
flexShrink: 0,
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
}}
|
||||
>
|
||||
各家公司的风险统计情况
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '10px' }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
pagination={false}
|
||||
scroll={scrollConfig}
|
||||
size="small"
|
||||
bordered
|
||||
className={styles.certificateTable}
|
||||
/>
|
||||
|
||||
{/* 表格滚动区域 */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
minHeight: 0,
|
||||
position: 'relative',
|
||||
marginLeft: '20px',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
fontSize: '14px',
|
||||
minWidth: totalWidth,
|
||||
}}
|
||||
>
|
||||
{/* 表头 - 使用 sticky 固定 */}
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#4285f4', position: 'sticky', top: 0, zIndex: 20 }}>
|
||||
<th
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e8e8e8',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
width: 120,
|
||||
}}
|
||||
>
|
||||
公司名称
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e8e8e8',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
width: 100,
|
||||
}}
|
||||
>
|
||||
重大风险
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e8e8e8',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
width: 100,
|
||||
}}
|
||||
>
|
||||
较大风险
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e8e8e8',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
width: 100,
|
||||
}}
|
||||
>
|
||||
一般风险
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e8e8e8',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
width: 100,
|
||||
}}
|
||||
>
|
||||
低风险
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e8e8e8',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
width: 100,
|
||||
}}
|
||||
>
|
||||
小计
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{filteredRiskList.map((item, index) => (
|
||||
<tr key={index} style={{ backgroundColor: '#fff' }}>
|
||||
<td style={{ padding: '8px', textAlign: 'center', border: '1px solid #f0f0f0' }}>
|
||||
<strong>{item.companyName}</strong>
|
||||
</td>
|
||||
<td style={{ padding: '8px', textAlign: 'center', border: '1px solid #f0f0f0' }}>
|
||||
<span style={{ color: '#c92a2a', fontWeight: 'bold' }}>{item.majorCount}</span>
|
||||
</td>
|
||||
<td style={{ padding: '8px', textAlign: 'center', border: '1px solid #f0f0f0' }}>
|
||||
<span style={{ color: '#ffa94d', fontWeight: 'bold' }}>{item.largerCount}</span>
|
||||
</td>
|
||||
<td style={{ padding: '8px', textAlign: 'center', border: '1px solid #f0f0f0' }}>
|
||||
<span style={{ color: '#ffe066', fontWeight: 'bold' }}>{item.generalCount}</span>
|
||||
</td>
|
||||
<td style={{ padding: '8px', textAlign: 'center', border: '1px solid #f0f0f0' }}>
|
||||
<span style={{ color: '#4285F4', fontWeight: 'bold' }}>{item.lowCount}</span>
|
||||
</td>
|
||||
<td style={{ padding: '8px', textAlign: 'center', border: '1px solid #f0f0f0' }}>
|
||||
<strong>{item.totalCount}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
{/* 合计行 - 使用 sticky 固定在底部 */}
|
||||
<tfoot>
|
||||
<tr style={{ backgroundColor: '#fafafa', position: 'sticky', bottom: 0, zIndex: 10 }}>
|
||||
<td
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #f0f0f0',
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
合计
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #f0f0f0',
|
||||
color: '#c92a2a',
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
{summary.majorTotal}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #f0f0f0',
|
||||
color: '#ffa94d',
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
{summary.largerTotal}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #f0f0f0',
|
||||
color: '#ffe066',
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
{summary.generalTotal}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #f0f0f0',
|
||||
color: '#4285F4',
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
{summary.lowTotal}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #f0f0f0',
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
{summary.totalAll}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user