|
|
import React, { useState, useEffect } from 'react';
|
|
|
import { Card, Table, Button, Modal, Form, Input, Select, message, Space, Tag, Rate, Progress } from 'antd';
|
|
|
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
|
|
|
import './RiskAssessment.less';
|
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
|
const RiskAssessment = () => {
|
|
|
const [form] = Form.useForm();
|
|
|
const [dataSource, setDataSource] = useState([]);
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
|
const [editingRecord, setEditingRecord] = useState(null);
|
|
|
const [pagination, setPagination] = useState({
|
|
|
current: 1,
|
|
|
pageSize: 10,
|
|
|
total: 0,
|
|
|
});
|
|
|
|
|
|
// 模拟数据
|
|
|
const mockData = [
|
|
|
{
|
|
|
id: 1,
|
|
|
riskName: '化学品泄漏风险',
|
|
|
riskType: '环境风险',
|
|
|
riskLevel: '高',
|
|
|
probability: 4,
|
|
|
impact: 5,
|
|
|
riskScore: 20,
|
|
|
assessor: '张三',
|
|
|
assessDate: '2024-01-15',
|
|
|
status: '待处理',
|
|
|
description: '生产过程中化学品可能发生泄漏，造成环境污染',
|
|
|
controlMeasures: '加强设备维护，安装泄漏检测装置',
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
riskName: '设备故障风险',
|
|
|
riskType: '设备风险',
|
|
|
riskLevel: '中',
|
|
|
probability: 3,
|
|
|
impact: 3,
|
|
|
riskScore: 9,
|
|
|
assessor: '李四',
|
|
|
assessDate: '2024-01-10',
|
|
|
status: '已处理',
|
|
|
description: '关键设备可能发生故障，影响生产安全',
|
|
|
controlMeasures: '定期维护保养，建立备件库存',
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
riskName: '人员操作风险',
|
|
|
riskType: '人员风险',
|
|
|
riskLevel: '低',
|
|
|
probability: 2,
|
|
|
impact: 2,
|
|
|
riskScore: 4,
|
|
|
assessor: '王五',
|
|
|
assessDate: '2024-01-08',
|
|
|
status: '监控中',
|
|
|
description: '操作人员误操作可能导致安全事故',
|
|
|
controlMeasures: '加强培训，完善操作规程',
|
|
|
},
|
|
|
];
|
|
|
|
|
|
useEffect(() => {
|
|
|
fetchData();
|
|
|
}, [pagination.current, pagination.pageSize]);
|
|
|
|
|
|
const fetchData = async () => {
|
|
|
setLoading(true);
|
|
|
try {
|
|
|
// 模拟API调用
|
|
|
setTimeout(() => {
|
|
|
setDataSource(mockData);
|
|
|
setPagination(prev => ({ ...prev, total: mockData.length }));
|
|
|
setLoading(false);
|
|
|
}, 500);
|
|
|
} catch (error) {
|
|
|
message.error('获取数据失败');
|
|
|
setLoading(false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleAdd = () => {
|
|
|
setEditingRecord(null);
|
|
|
form.resetFields();
|
|
|
setModalVisible(true);
|
|
|
};
|
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
setEditingRecord(record);
|
|
|
form.setFieldsValue(record);
|
|
|
setModalVisible(true);
|
|
|
};
|
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
Modal.confirm({
|
|
|
title: '确认删除',
|
|
|
content: `确定要删除风险评估"${record.riskName}"吗？`,
|
|
|
onOk: () => {
|
|
|
setDataSource(dataSource.filter(item => item.id !== record.id));
|
|
|
message.success('删除成功');
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const handleView = (record) => {
|
|
|
Modal.info({
|
|
|
title: '查看风险评估详情',
|
|
|
content: (
|
|
|
<div>
|
|
|
<p><strong>风险名称：</strong>{record.riskName}</p>
|
|
|
<p><strong>风险类型：</strong>{record.riskType}</p>
|
|
|
<p><strong>风险等级：</strong>
|
|
|
<Tag color={record.riskLevel === '高' ? 'red' : record.riskLevel === '中' ? 'orange' : 'green'}>
|
|
|
{record.riskLevel}
|
|
|
</Tag>
|
|
|
</p>
|
|
|
<p><strong>发生概率：</strong>
|
|
|
<Rate disabled value={record.probability} />
|
|
|
<span style={{ marginLeft: 8 }}>({record.probability}/5)</span>
|
|
|
</p>
|
|
|
<p><strong>影响程度：</strong>
|
|
|
<Rate disabled value={record.impact} />
|
|
|
<span style={{ marginLeft: 8 }}>({record.impact}/5)</span>
|
|
|
</p>
|
|
|
<p><strong>风险评分：</strong>{record.riskScore}</p>
|
|
|
<p><strong>评估人：</strong>{record.assessor}</p>
|
|
|
<p><strong>评估日期：</strong>{record.assessDate}</p>
|
|
|
<p><strong>处理状态：</strong>
|
|
|
<Tag color={record.status === '已处理' ? 'green' : record.status === '待处理' ? 'red' : 'blue'}>
|
|
|
{record.status}
|
|
|
</Tag>
|
|
|
</p>
|
|
|
<p><strong>风险描述：</strong>{record.description}</p>
|
|
|
<p><strong>控制措施：</strong>{record.controlMeasures}</p>
|
|
|
</div>
|
|
|
),
|
|
|
width: 700,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const handleSubmit = async (values) => {
|
|
|
try {
|
|
|
const riskScore = values.probability * values.impact;
|
|
|
const riskLevel = riskScore >= 16 ? '高' : riskScore >= 9 ? '中' : '低';
|
|
|
|
|
|
const formData = {
|
|
|
...values,
|
|
|
riskScore,
|
|
|
riskLevel,
|
|
|
};
|
|
|
|
|
|
if (editingRecord) {
|
|
|
// 编辑
|
|
|
setDataSource(dataSource.map(item =>
|
|
|
item.id === editingRecord.id ? { ...item, ...formData } : item
|
|
|
));
|
|
|
message.success('编辑成功');
|
|
|
} else {
|
|
|
// 新增
|
|
|
const newRecord = {
|
|
|
id: Date.now(),
|
|
|
...formData,
|
|
|
assessor: '当前用户',
|
|
|
assessDate: new Date().toISOString().split('T')[0],
|
|
|
status: '待处理',
|
|
|
};
|
|
|
setDataSource([...dataSource, newRecord]);
|
|
|
message.success('添加成功');
|
|
|
}
|
|
|
setModalVisible(false);
|
|
|
form.resetFields();
|
|
|
} catch (error) {
|
|
|
message.error('操作失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const getRiskLevelColor = (level) => {
|
|
|
switch (level) {
|
|
|
case '高': return 'red';
|
|
|
case '中': return 'orange';
|
|
|
case '低': return 'green';
|
|
|
default: return 'default';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const getStatusColor = (status) => {
|
|
|
switch (status) {
|
|
|
case '已处理': return 'green';
|
|
|
case '待处理': return 'red';
|
|
|
case '监控中': return 'blue';
|
|
|
default: return 'default';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '风险名称',
|
|
|
dataIndex: 'riskName',
|
|
|
key: 'riskName',
|
|
|
width: 150,
|
|
|
},
|
|
|
{
|
|
|
title: '风险类型',
|
|
|
dataIndex: 'riskType',
|
|
|
key: 'riskType',
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '风险等级',
|
|
|
dataIndex: 'riskLevel',
|
|
|
key: 'riskLevel',
|
|
|
width: 100,
|
|
|
render: (level) => (
|
|
|
<Tag color={getRiskLevelColor(level)}>
|
|
|
{level}
|
|
|
</Tag>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '风险评分',
|
|
|
dataIndex: 'riskScore',
|
|
|
key: 'riskScore',
|
|
|
width: 100,
|
|
|
render: (score) => (
|
|
|
<div>
|
|
|
<Progress
|
|
|
percent={(score / 25) * 100}
|
|
|
size="small"
|
|
|
status={score >= 16 ? 'exception' : score >= 9 ? 'active' : 'success'}
|
|
|
showInfo={false}
|
|
|
/>
|
|
|
<span style={{ fontSize: '12px' }}>{score}</span>
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '发生概率',
|
|
|
dataIndex: 'probability',
|
|
|
key: 'probability',
|
|
|
width: 120,
|
|
|
render: (probability) => (
|
|
|
<div>
|
|
|
<Rate disabled value={probability} style={{ fontSize: '12px' }} />
|
|
|
<span style={{ marginLeft: 4, fontSize: '12px' }}>({probability}/5)</span>
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '影响程度',
|
|
|
dataIndex: 'impact',
|
|
|
key: 'impact',
|
|
|
width: 120,
|
|
|
render: (impact) => (
|
|
|
<div>
|
|
|
<Rate disabled value={impact} style={{ fontSize: '12px' }} />
|
|
|
<span style={{ marginLeft: 4, fontSize: '12px' }}>({impact}/5)</span>
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '处理状态',
|
|
|
dataIndex: 'status',
|
|
|
key: 'status',
|
|
|
width: 100,
|
|
|
render: (status) => (
|
|
|
<Tag color={getStatusColor(status)}>
|
|
|
{status}
|
|
|
</Tag>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '评估人',
|
|
|
dataIndex: 'assessor',
|
|
|
key: 'assessor',
|
|
|
width: 100,
|
|
|
},
|
|
|
{
|
|
|
title: '评估日期',
|
|
|
dataIndex: 'assessDate',
|
|
|
key: 'assessDate',
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
key: 'action',
|
|
|
width: 200,
|
|
|
render: (_, record) => (
|
|
|
<Space size="small">
|
|
|
<Button
|
|
|
type="link"
|
|
|
icon={<EyeOutlined />}
|
|
|
onClick={() => handleView(record)}
|
|
|
>
|
|
|
查看
|
|
|
</Button>
|
|
|
<Button
|
|
|
type="link"
|
|
|
icon={<EditOutlined />}
|
|
|
onClick={() => handleEdit(record)}
|
|
|
>
|
|
|
编辑
|
|
|
</Button>
|
|
|
<Button
|
|
|
type="link"
|
|
|
danger
|
|
|
icon={<DeleteOutlined />}
|
|
|
onClick={() => handleDelete(record)}
|
|
|
>
|
|
|
删除
|
|
|
</Button>
|
|
|
</Space>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
return (
|
|
|
<div className="risk-assessment">
|
|
|
<Card
|
|
|
title="风险评估管理"
|
|
|
extra={
|
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
|
|
新增评估
|
|
|
</Button>
|
|
|
}
|
|
|
>
|
|
|
<Table
|
|
|
columns={columns}
|
|
|
dataSource={dataSource}
|
|
|
loading={loading}
|
|
|
rowKey="id"
|
|
|
pagination={{
|
|
|
...pagination,
|
|
|
showSizeChanger: true,
|
|
|
showQuickJumper: true,
|
|
|
showTotal: (total, range) =>
|
|
|
`第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
|
|
|
onChange: (page, pageSize) => {
|
|
|
setPagination(prev => ({
|
|
|
...prev,
|
|
|
current: page,
|
|
|
pageSize: pageSize || prev.pageSize,
|
|
|
}));
|
|
|
},
|
|
|
}}
|
|
|
/>
|
|
|
</Card>
|
|
|
|
|
|
<Modal
|
|
|
title={editingRecord ? '编辑风险评估' : '新增风险评估'}
|
|
|
open={modalVisible}
|
|
|
onCancel={() => {
|
|
|
setModalVisible(false);
|
|
|
form.resetFields();
|
|
|
}}
|
|
|
onOk={() => form.submit()}
|
|
|
width={700}
|
|
|
>
|
|
|
<Form
|
|
|
form={form}
|
|
|
layout="vertical"
|
|
|
onFinish={handleSubmit}
|
|
|
>
|
|
|
<Form.Item
|
|
|
name="riskName"
|
|
|
label="风险名称"
|
|
|
rules={[{ required: true, message: '请输入风险名称' }]}
|
|
|
>
|
|
|
<Input placeholder="请输入风险名称" />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
name="riskType"
|
|
|
label="风险类型"
|
|
|
rules={[{ required: true, message: '请选择风险类型' }]}
|
|
|
>
|
|
|
<Select placeholder="请选择风险类型">
|
|
|
<Option value="环境风险">环境风险</Option>
|
|
|
<Option value="设备风险">设备风险</Option>
|
|
|
<Option value="人员风险">人员风险</Option>
|
|
|
<Option value="管理风险">管理风险</Option>
|
|
|
<Option value="技术风险">技术风险</Option>
|
|
|
</Select>
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
name="probability"
|
|
|
label="发生概率 (1-5分)"
|
|
|
rules={[{ required: true, message: '请选择发生概率' }]}
|
|
|
>
|
|
|
<Rate />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
name="impact"
|
|
|
label="影响程度 (1-5分)"
|
|
|
rules={[{ required: true, message: '请选择影响程度' }]}
|
|
|
>
|
|
|
<Rate />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
name="description"
|
|
|
label="风险描述"
|
|
|
rules={[{ required: true, message: '请输入风险描述' }]}
|
|
|
>
|
|
|
<Input.TextArea rows={3} placeholder="请输入风险描述" />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
name="controlMeasures"
|
|
|
label="控制措施"
|
|
|
rules={[{ required: true, message: '请输入控制措施' }]}
|
|
|
>
|
|
|
<Input.TextArea rows={3} placeholder="请输入控制措施" />
|
|
|
</Form.Item>
|
|
|
</Form>
|
|
|
</Modal>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default RiskAssessment;
|
