新增页面

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
-    "@antv/g6": "4.8.0",
+    "@antv/g6": "^5.0.50",
     "@umijs/max": "^4.0.70",
     "antd": "5.6.0",
     "braft-editor": "^2.3.9",

src/pages/safe_majorHazard/SafeMajorHazardList.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
 import styles from './SafeMajorHazardList.less';
-import ResponsibilityImplementation from './module/ResponsibilityImplementation'; //责任落实
-import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警
-import RiskAssessment from './module/RiskAssessment'; //风险管控
-import EvaluationReport from './module/EvaluationReport'; //评估报告
+import ResponsibilityImplementation from './components/ResponsibilityImplementation'; //责任落实
+import OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警
+import RiskAssessment from './components/RiskAssessment'; //风险管控
+import EvaluationReport from './components/EvaluationReport'; //评估报告
 
 const SafeMajorHazardList = () => {
     const [activeModule, setActiveModule] = useState('responsibility');

src/pages/safe_majorHazard/components/ResponsibilityImplementation.js

@@ -1,6 +1,6 @@
 
-import React from 'react';
-import { Card, Result, Timeline, Statistic, Table, Row, Input, Button, Col, Select } from 'antd';
+import React, { useState } from 'react';
+import { Card, Result, Timeline, Statistic, Table, Row, Input, Button, Col, Select, Modal, Form } from 'antd';
 import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
 import StandardTable from '@/components/StandardTable';
 import ReactECharts from 'echarts-for-react';
@@ -10,6 +10,28 @@ import timer_shaft from '@/assets/basic_information/timer_shaft.png'
 
 
 const ResponsibilityImplementation = () => {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [form] = Form.useForm();
+
+    const handleAddResponsible = () => {
+        setIsModalVisible(true);
+    };
+
+    const handleModalCancel = () => {
+        setIsModalVisible(false);
+        form.resetFields();
+    };
+
+    const handleModalOk = () => {
+        form.validateFields().then(values => {
+            console.log('表单数据:', values);
+            // 这里可以添加提交逻辑
+            setIsModalVisible(false);
+            form.resetFields();
+        }).catch(err => {
+            console.log('表单验证失败:', err);
+        });
+    };
 
     const columns = [
         {
@@ -433,6 +455,7 @@ const ResponsibilityImplementation = () => {
                     <div className={styles.buttonSection}>
                         <Button 
                             icon={<PlusOutlined />}
+                            onClick={handleAddResponsible}
                             style={{ 
                                 color: '#2E4CD4', 
                                 backgroundColor: 'transparent', 
@@ -477,6 +500,114 @@ const ResponsibilityImplementation = () => {
                     />
                 </div>
             </div>
+
+            {/* 新增责任人弹窗 */}
+            <Modal
+                title="新增责任人"
+                open={isModalVisible}
+                onCancel={handleModalCancel}
+                onOk={handleModalOk}
+                okText="确定"
+                cancelText="取消"
+                width={800}
+                okButtonProps={{
+                    style: {
+                        backgroundColor: '#2E4CD4',
+                        borderColor: '#2E4CD4'
+                    }
+                }}
+                cancelButtonProps={{
+                    style: {
+                        color: '#666',
+                        borderColor: '#DFE4F6'
+                    }
+                }}
+            >
+                <Form
+                    form={form}
+                    layout="vertical"
+                    style={{ marginTop: '20px' }}
+                >
+                    <Row gutter={24}>
+                        <Col span={12}>
+                            <Form.Item
+                                label="责任人"
+                                name="responsiblePerson"
+                                rules={[{ required: true, message: '请输入姓名' }]}
+                            >
+                                <Input placeholder="输入姓名" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="联系方式"
+                                name="contactMethod"
+                                rules={[
+                                    { required: true, message: '请输入手机号' },
+                                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
+                                ]}
+                            >
+                                <Input placeholder="输入手机号" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={24}>
+                        <Col span={12}>
+                            <Form.Item
+                                label="责任区域"
+                                name="responsibleArea"
+                                rules={[{ required: true, message: '请选择责任区域' }]}
+                            >
+                                <Select placeholder="请选择责任区域">
+                                    <Select.Option value="储罐区A">储罐区A</Select.Option>
+                                    <Select.Option value="储罐区B">储罐区B</Select.Option>
+                                    <Select.Option value="生产区">生产区</Select.Option>
+                                    <Select.Option value="仓储区">仓储区</Select.Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="巡检频率"
+                                name="inspectionFrequency"
+                                rules={[{ required: true, message: '请选择巡检频率' }]}
+                            >
+                                <Select placeholder="请选择巡检频率">
+                                    <Select.Option value="每日一次">每日一次</Select.Option>
+                                    <Select.Option value="每日两次">每日两次</Select.Option>
+                                    <Select.Option value="每周一次">每周一次</Select.Option>
+                                    <Select.Option value="每月一次">每月一次</Select.Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={24}>
+                        <Col span={12}>
+                            <Form.Item
+                                label="设备型号"
+                                name="deviceModel"
+                                rules={[{ required: true, message: '请输入型号' }]}
+                            >
+                                <Input placeholder="输入型号" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="危险源类型"
+                                name="hazardSourceType"
+                                rules={[{ required: true, message: '请选择危险源类型' }]}
+                            >
+                                <Select placeholder="请选择危险源类型">
+                                    <Select.Option value="易燃易爆品存储">易燃易爆品存储</Select.Option>
+                                    <Select.Option value="有毒有害物质">有毒有害物质</Select.Option>
+                                    <Select.Option value="高温高压设备">高温高压设备</Select.Option>
+                                    <Select.Option value="其他">其他</Select.Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal>
         </div>
     );
 };