|
|
|
|
@ -0,0 +1,527 @@
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
|
import { Card, Row, Col, Select, Table, Pagination, Statistic, Badge } from 'antd';
|
|
|
|
|
import { CaretRightOutlined } from '@ant-design/icons';
|
|
|
|
|
import ReactECharts from 'echarts-for-react';
|
|
|
|
|
import './RiskClassificationControl.less';
|
|
|
|
|
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
|
|
|
|
|
// 模拟风险等级数据
|
|
|
|
|
const riskLevelData = [
|
|
|
|
|
{ level: '极高风险', count: 35, color: '#ff4d4f', icon: '🔴' },
|
|
|
|
|
{ level: '高风险', count: 12, color: '#fa8c16', icon: '🟠' },
|
|
|
|
|
{ level: '中风险', count: 60, color: '#faad14', icon: '🟡' },
|
|
|
|
|
{ level: '低风险', count: 42, color: '#40a9ff', icon: '🔵' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 模拟风险评估分析数据
|
|
|
|
|
const riskAnalysisData = {
|
|
|
|
|
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
|
|
极高风险: [12, 15, 10, 8, 14, 16, 9, 13, 11, 15, 14, 12],
|
|
|
|
|
高风险: [8, 10, 12, 15, 14, 10, 8, 12, 14, 10, 8, 12],
|
|
|
|
|
中风险: [18, 20, 22, 25, 24, 20, 18, 22, 24, 20, 18, 22],
|
|
|
|
|
低风险: [15, 18, 20, 16, 14, 18, 20, 16, 14, 18, 20, 16],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 模拟风险清单数据
|
|
|
|
|
const riskListData = [
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
riskName: '化学品储存区窜雾风险',
|
|
|
|
|
riskType: '设备设施',
|
|
|
|
|
riskLevel: '极高风险',
|
|
|
|
|
assessmentMethod: 'LEC分析',
|
|
|
|
|
area: '生产罐区1',
|
|
|
|
|
department: '设备部',
|
|
|
|
|
responsiblePerson: '张明',
|
|
|
|
|
monitoringFrequency: '每日',
|
|
|
|
|
status: '整改',
|
|
|
|
|
updateTime: '2025-03-01',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
riskName: '化学品储存区泄漏风险',
|
|
|
|
|
riskType: '设备设施',
|
|
|
|
|
riskLevel: '高风险',
|
|
|
|
|
assessmentMethod: 'LEC分析',
|
|
|
|
|
area: '生产罐区1',
|
|
|
|
|
department: '设备部',
|
|
|
|
|
responsiblePerson: '张明',
|
|
|
|
|
monitoringFrequency: '每日',
|
|
|
|
|
status: '预警',
|
|
|
|
|
updateTime: '2025-03-01',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '3',
|
|
|
|
|
riskName: '化学品储存区腐蚀风险',
|
|
|
|
|
riskType: '设备设施',
|
|
|
|
|
riskLevel: '中风险',
|
|
|
|
|
assessmentMethod: 'LEC分析',
|
|
|
|
|
area: '生产罐区1',
|
|
|
|
|
department: '设备部',
|
|
|
|
|
responsiblePerson: '张明',
|
|
|
|
|
monitoringFrequency: '每日',
|
|
|
|
|
status: '预警',
|
|
|
|
|
updateTime: '2025-03-01',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '4',
|
|
|
|
|
riskName: '化学品储存区温湿度异常',
|
|
|
|
|
riskType: '设备设施',
|
|
|
|
|
riskLevel: '低风险',
|
|
|
|
|
assessmentMethod: 'LEC分析',
|
|
|
|
|
area: '生产罐区1',
|
|
|
|
|
department: '设备部',
|
|
|
|
|
responsiblePerson: '张明',
|
|
|
|
|
monitoringFrequency: '每日',
|
|
|
|
|
status: '正常',
|
|
|
|
|
updateTime: '2025-03-01',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '5',
|
|
|
|
|
riskName: '化学品储存区通风不良',
|
|
|
|
|
riskType: '设备设施',
|
|
|
|
|
riskLevel: '低风险',
|
|
|
|
|
assessmentMethod: 'LEC分析',
|
|
|
|
|
area: '生产罐区1',
|
|
|
|
|
department: '设备部',
|
|
|
|
|
responsiblePerson: '张明',
|
|
|
|
|
monitoringFrequency: '每日',
|
|
|
|
|
status: '正常',
|
|
|
|
|
updateTime: '2025-03-01',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 获取风险等级对应的标签样式
|
|
|
|
|
const getRiskLevelTag = (level) => {
|
|
|
|
|
switch (level) {
|
|
|
|
|
case '极高风险':
|
|
|
|
|
return <Badge status="error" text="极高风险" />;
|
|
|
|
|
case '高风险':
|
|
|
|
|
return <Badge status="warning" text="高风险" />;
|
|
|
|
|
case '中风险':
|
|
|
|
|
return <Badge status="processing" text="中风险" />;
|
|
|
|
|
case '低风险':
|
|
|
|
|
return <Badge status="success" text="低风险" />;
|
|
|
|
|
default:
|
|
|
|
|
return level;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 获取状态对应的标签样式
|
|
|
|
|
const getStatusTag = (status) => {
|
|
|
|
|
switch (status) {
|
|
|
|
|
case '整改':
|
|
|
|
|
return <Badge status="error" text="整改" />;
|
|
|
|
|
case '预警':
|
|
|
|
|
return <Badge status="warning" text="预警" />;
|
|
|
|
|
case '正常':
|
|
|
|
|
return <Badge status="success" text="正常" />;
|
|
|
|
|
default:
|
|
|
|
|
return status;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const RiskClassificationControl = () => {
|
|
|
|
|
const [selectedMonth, setSelectedMonth] = useState('月');
|
|
|
|
|
const [selectedRiskLevel, setSelectedRiskLevel] = useState('全部风险等级');
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
const [pageSize, setPageSize] = useState(5);
|
|
|
|
|
|
|
|
|
|
// 风险评估分析图表配置
|
|
|
|
|
const analysisChartOption = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['极高风险', '高风险', '中风险', '低风险'],
|
|
|
|
|
bottom: 0,
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '3%',
|
|
|
|
|
bottom: '15%',
|
|
|
|
|
top: '3%',
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: riskAnalysisData.xAxis,
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
min: 0,
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '极高风险',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: riskAnalysisData.极高风险,
|
|
|
|
|
smooth: false,
|
|
|
|
|
symbolSize: 6,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#ff4d4f',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '高风险',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: riskAnalysisData.高风险,
|
|
|
|
|
smooth: false,
|
|
|
|
|
symbolSize: 6,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#fa8c16',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '中风险',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: riskAnalysisData.中风险,
|
|
|
|
|
smooth: false,
|
|
|
|
|
symbolSize: 6,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#faad14',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '低风险',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: riskAnalysisData.低风险,
|
|
|
|
|
smooth: false,
|
|
|
|
|
symbolSize: 6,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#40a9ff',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// 移除了graphic配置，将使用React组件方式展示风险等级说明
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 风险四色图配置
|
|
|
|
|
const colorChartOption = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
right: 10,
|
|
|
|
|
top: 'center',
|
|
|
|
|
data: ['低风险', '中风险', '高风险', '极高风险'],
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '风险类型',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['40%', '70%'],
|
|
|
|
|
center: ['35%', '50%'],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: 10,
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'center',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{ value: 42, name: '低风险', itemStyle: { color: '#40a9ff' } },
|
|
|
|
|
{ value: 60, name: '中风险', itemStyle: { color: '#faad14' } },
|
|
|
|
|
{ value: 12, name: '高风险', itemStyle: { color: '#fa8c16' } },
|
|
|
|
|
{ value: 35, name: '极高风险', itemStyle: { color: '#ff4d4f' } },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 风险清单表格列配置
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: '风险名称',
|
|
|
|
|
dataIndex: 'riskName',
|
|
|
|
|
key: 'riskName',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '风险类别',
|
|
|
|
|
dataIndex: 'riskType',
|
|
|
|
|
key: 'riskType',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '风险等级',
|
|
|
|
|
dataIndex: 'riskLevel',
|
|
|
|
|
key: 'riskLevel',
|
|
|
|
|
render: (level) => getRiskLevelTag(level),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '评估方法',
|
|
|
|
|
dataIndex: 'assessmentMethod',
|
|
|
|
|
key: 'assessmentMethod',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '所在区域',
|
|
|
|
|
dataIndex: 'area',
|
|
|
|
|
key: 'area',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '责任部门',
|
|
|
|
|
dataIndex: 'department',
|
|
|
|
|
key: 'department',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '责任人',
|
|
|
|
|
dataIndex: 'responsiblePerson',
|
|
|
|
|
key: 'responsiblePerson',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '管控频次',
|
|
|
|
|
dataIndex: 'monitoringFrequency',
|
|
|
|
|
key: 'monitoringFrequency',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '管控状态',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
key: 'status',
|
|
|
|
|
render: (status) => getStatusTag(status),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '更新时间',
|
|
|
|
|
dataIndex: 'updateTime',
|
|
|
|
|
key: 'updateTime',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
key: 'action',
|
|
|
|
|
render: () => (
|
|
|
|
|
<a>
|
|
|
|
|
查看详情 <CaretRightOutlined />
|
|
|
|
|
</a>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="risk-classification-container">
|
|
|
|
|
{/* 风险等级统计 - 整体渐变背景 */}
|
|
|
|
|
<Row gutter={16} style={{ marginBottom: 24 }}>
|
|
|
|
|
<Col xs={24}>
|
|
|
|
|
<Card
|
|
|
|
|
hoverable
|
|
|
|
|
style={{
|
|
|
|
|
background: 'linear-gradient(to right, rgba(255, 245, 244, 1), rgba(240, 255, 250, 1))',
|
|
|
|
|
border: '1px solid #e8f5fd'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
|
|
|
|
|
{/* 左侧标题 */}
|
|
|
|
|
<div style={{
|
|
|
|
|
fontSize: '20px',
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
color: '#333',
|
|
|
|
|
padding: '16px',
|
|
|
|
|
minWidth: 150,
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
}}>
|
|
|
|
|
风险等级
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 右侧四个分散的分数 */}
|
|
|
|
|
<div style={{
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flex: 1,
|
|
|
|
|
justifyContent: 'space-around',
|
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
|
gap: 16
|
|
|
|
|
}}>
|
|
|
|
|
{riskLevelData.map((item, index) => (
|
|
|
|
|
<div
|
|
|
|
|
key={index}
|
|
|
|
|
style={{
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
padding: '16px',
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
|
|
|
|
borderRadius: 8,
|
|
|
|
|
minWidth: 120
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div style={{
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
marginBottom: 8,
|
|
|
|
|
display: 'flex',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
gap: 8
|
|
|
|
|
}}>
|
|
|
|
|
<span>{item.icon}</span>
|
|
|
|
|
<span style={{ color: item.color }}>{item.level}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<Statistic
|
|
|
|
|
value={item.count}
|
|
|
|
|
valueStyle={{ color: item.color }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
{/* 风险评估分析和风险四色图 */}
|
|
|
|
|
<style scoped>
|
|
|
|
|
{`
|
|
|
|
|
.risk-assessment-card .ant-card-head {
|
|
|
|
|
background: linear-gradient(to bottom, rgba(255, 245, 244, 1), rgba(255, 250, 250, 1)) !important;
|
|
|
|
|
}
|
|
|
|
|
.risk-color-chart-card .ant-card-head {
|
|
|
|
|
background: linear-gradient(to bottom left, rgba(255, 245, 244, 1), rgba(247, 250, 257, 1)) !important;
|
|
|
|
|
backgroundSize: '100% 100%';
|
|
|
|
|
}
|
|
|
|
|
`}
|
|
|
|
|
</style>
|
|
|
|
|
<Row gutter={16} style={{ marginBottom: 24 }}>
|
|
|
|
|
<Col xs={24} lg={16} >
|
|
|
|
|
<Card
|
|
|
|
|
title="风险评估分析"
|
|
|
|
|
className="risk-assessment-card"
|
|
|
|
|
style={{
|
|
|
|
|
background: 'linear-gradient(to bottom, rgba(255, 250, 250, 1), rgba(255, 255, 255, 1))',
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
}}
|
|
|
|
|
extra={
|
|
|
|
|
<Select
|
|
|
|
|
value={selectedMonth}
|
|
|
|
|
style={{ width: 60 }}
|
|
|
|
|
onChange={setSelectedMonth}
|
|
|
|
|
>
|
|
|
|
|
<Option value="月">月</Option>
|
|
|
|
|
<Option value="季">季</Option>
|
|
|
|
|
<Option value="年">年</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
}>
|
|
|
|
|
<Row gutter={16}>
|
|
|
|
|
{/* 风险评估分析图表在左边 */}
|
|
|
|
|
<Col xs={24} lg={16}>
|
|
|
|
|
<div style={{ height: 400 }}>
|
|
|
|
|
<ReactECharts option={analysisChartOption} style={{ height: '100%' }} />
|
|
|
|
|
</div>
|
|
|
|
|
</Col>
|
|
|
|
|
{/* 风险等级说明在右边 */}
|
|
|
|
|
<Col xs={24} lg={8}>
|
|
|
|
|
<div style={{ height: 400, padding: 12, borderRadius: 4, overflowY: 'auto' }}>
|
|
|
|
|
{/* <div style={{ fontSize: 14, fontWeight: 'bold', marginBottom: 12 }}>风险等级说明</div> */}
|
|
|
|
|
<div>
|
|
|
|
|
{[
|
|
|
|
|
{ level: '极高风险', months: '4月、7月、10月、12月', color: '#ff4d4f', bgColor: '#fff0f0', borderColor: '#ff4d4f' },
|
|
|
|
|
{ level: '高风险', months: '', color: '#fa8c16', bgColor: '#fff7e6', borderColor: '#fa8c16' },
|
|
|
|
|
{ level: '中风险', months: '', color: '#faad14', bgColor: '#fffbe6', borderColor: '#faad14' },
|
|
|
|
|
{ level: '低风险', months: '', color: '#40a9ff', bgColor: '#e6f7ff', borderColor: '#40a9ff' }
|
|
|
|
|
].map((item, index) => (
|
|
|
|
|
<div
|
|
|
|
|
key={index}
|
|
|
|
|
style={{
|
|
|
|
|
marginBottom: index < 3 ? 12 : 0,
|
|
|
|
|
padding: 12,
|
|
|
|
|
backgroundColor: item.bgColor,
|
|
|
|
|
border: `1px solid ${item.borderColor}`,
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
display: 'flex',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'space-between'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
width: 8,
|
|
|
|
|
height: 8,
|
|
|
|
|
borderRadius: '50%',
|
|
|
|
|
backgroundColor: item.color,
|
|
|
|
|
marginRight: 8
|
|
|
|
|
}}></div>
|
|
|
|
|
<span style={{ fontWeight: 'bold', color: item.color }}>{item.level}</span>
|
|
|
|
|
</div>
|
|
|
|
|
{item.months && (
|
|
|
|
|
<div style={{ fontSize: 12, color: '#666' }}>{item.months}</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col xs={24} lg={8}>
|
|
|
|
|
<Card title="风险四色图" className="risk-color-chart-card"
|
|
|
|
|
style={{
|
|
|
|
|
background: 'linear-gradient(to bottom, rgba(255, 245, 244, 1), rgba(240, 255, 250, 1))'
|
|
|
|
|
}}
|
|
|
|
|
extra={
|
|
|
|
|
<Select
|
|
|
|
|
value={selectedMonth}
|
|
|
|
|
style={{ width: 60 }}
|
|
|
|
|
onChange={setSelectedMonth}
|
|
|
|
|
>
|
|
|
|
|
<Option value="月">月</Option>
|
|
|
|
|
<Option value="季">季</Option>
|
|
|
|
|
<Option value="年">年</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
}>
|
|
|
|
|
<div style={{ height: 400 }}>
|
|
|
|
|
<ReactECharts option={colorChartOption} style={{ height: '100%' }} />
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
{/* 风险清单 */}
|
|
|
|
|
<Card title="风险清单" extra={
|
|
|
|
|
<Select
|
|
|
|
|
value={selectedRiskLevel}
|
|
|
|
|
style={{ width: 150 }}
|
|
|
|
|
onChange={setSelectedRiskLevel}
|
|
|
|
|
>
|
|
|
|
|
<Option value="全部风险等级">全部风险等级</Option>
|
|
|
|
|
<Option value="极高风险">极高风险</Option>
|
|
|
|
|
<Option value="高风险">高风险</Option>
|
|
|
|
|
<Option value="中风险">中风险</Option>
|
|
|
|
|
<Option value="低风险">低风险</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
}>
|
|
|
|
|
<Table
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={riskListData}
|
|
|
|
|
pagination={false}
|
|
|
|
|
scroll={{ x: 1300 }}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ marginTop: 16, textAlign: 'right' }}>
|
|
|
|
|
<Pagination
|
|
|
|
|
current={currentPage}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
total={48}
|
|
|
|
|
onChange={setCurrentPage}
|
|
|
|
|
onShowSizeChange={(_, size) => setPageSize(size)}
|
|
|
|
|
showSizeChanger
|
|
|
|
|
showQuickJumper
|
|
|
|
|
showTotal={(total) => `共 ${total} 条`}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default RiskClassificationControl;
|
