重大危险源框架

src/pages/safe_majorHazard/SafeMajorHazardList.js

@@ -1,24 +1,59 @@
-import React from 'react';
+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'; //评估报告
+
+
 
 const SafeMajorHazardList = () => {
+    const [activeModule, setActiveModule] = useState('responsibility');
+
+    const handleModuleClick = (module) => {
+        setActiveModule(module)
+    }
 
 
+    const renderModule = () => {
+        switch (activeModule) {
+            case 'responsibility':
+                return <ResponsibilityImplementation />;
+            case 'monitoring':
+                return <OnlineMonitoring />;
+            case 'risk':
+                return <RiskAssessment />;
+            case 'evaluation':
+                return <EvaluationReport />;
+            default:
+                return <ResponsibilityImplementation />;
+        }
+    };
+
 
         return (
         <div className={styles.container}>
             <div className={styles.TopButton}>
-                <Button className={styles.TopButtonItem}>责任落实</Button>
-                <Button className={styles.TopButtonItem}>在线监测预警</Button>
-                <Button className={styles.TopButtonItem}>风险管控</Button>
-                <Button className={styles.TopButtonItem}>评估报告及隐患处理</Button>
+                <Button className={styles.TopButtonItem}
+                    onClick={() => handleModuleClick("responsibility")}
+                >责任落实
+                </Button>
+                <Button className={styles.TopButtonItem} 
+                onClick={() => handleModuleClick("monitoring")}
+                >在线监测预警
+                    </Button>
+                <Button className={styles.TopButtonItem}
+                onClick ={() => handleModuleClick("risk")}
+                    >风险管控
+                    </Button>
+                <Button className={styles.TopButtonItem}
+                onClick={() =>handleModuleClick("evaluation")}
+                    >评估报告及隐患处理
+                    </Button>
             </div>
-
             <div className={styles.content}>
-                
-
+                {renderModule()}
             </div>
         </div>
     );

src/pages/safe_majorHazard/module/EvaluationReport.js

@@ -1 +1,18 @@
+import React from 'react';  // ======== 导入React库，用于创建React组件 ========
+import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
 
+const EvaluationReport = () => {  // ======== 定义评估报告及隐患处理组件函数 ========
+    return (  // ======== 返回JSX结构 ========
+        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
+            <Card title="评估报告及隐患处理" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"评估报告及隐患处理"，最小高度400px ========
+                <Result  // ======== Result组件，用于显示状态页面 ========
+                    status="info"  // ======== 设置状态为info（信息类型） ========
+                    title="评估报告及隐患处理模块"  // ======== 设置标题 ========
+                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
+                />  // ======== Result组件结束 ========
+            </Card>  // ======== Card组件结束 ========
+        </div>  // ======== 外层容器结束 ========
+    );  // ======== return语句结束 ========
+};  // ======== 组件函数结束 ========
+
+export default EvaluationReport;  // ======== 导出组件供其他文件使用 ========

src/pages/safe_majorHazard/module/OnlineMonitoring.js

@@ -1 +1,19 @@
 
+import React from 'react';  // ======== 导入React库，用于创建React组件 ========
+import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
+
+const OnlineMonitoring = () => {  // ======== 定义在线监测预警组件函数 ========
+    return (  // ======== 返回JSX结构 ========
+        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
+            <Card title="在线监测预警" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"在线监测预警"，最小高度400px ========
+                <Result  // ======== Result组件，用于显示状态页面 ========
+                    status="info"  // ======== 设置状态为info（信息类型） ========
+                    title="在线监测预警模块"  // ======== 设置标题 ========
+                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
+                />  // ======== Result组件结束 ========
+            </Card>  // ======== Card组件结束 ========
+        </div>  // ======== 外层容器结束 ========
+    );  // ======== return语句结束 ========
+};  // ======== 组件函数结束 ========
+
+export default OnlineMonitoring;  // ======== 导出组件供其他文件使用 ========

src/pages/safe_majorHazard/module/ResponsibilityImplementation.js

@@ -1 +1,19 @@
 
+import React from 'react';  // ======== 导入React库，用于创建React组件 ========
+import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
+
+const ResponsibilityImplementation = () => {  // ======== 定义责任落实组件函数 ========
+    return (  // ======== 返回JSX结构 ========
+        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
+            <Card title="责任落实" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"责任落实"，最小高度400px ========
+                <Result  // ======== Result组件，用于显示状态页面 ========
+                    status="info"  // ======== 设置状态为info（信息类型） ========
+                    title="责任落实模块"  // ======== 设置标题 ========
+                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
+                />  // ======== Result组件结束 ========
+            </Card>  // ======== Card组件结束 ========
+        </div>  // ======== 外层容器结束 ========
+    );  // ======== return语句结束 ========
+};  // ======== 组件函数结束 ========
+
+export default ResponsibilityImplementation;  // ======== 导出组件供其他文件使用 ========

src/pages/safe_majorHazard/module/RiskAssessment.js

@@ -1 +1,19 @@
 
+import React from 'react';  // ======== 导入React库，用于创建React组件 ========
+import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
+
+const RiskAssessment = () => {  // ======== 定义风险管控组件函数 ========
+    return (  // ======== 返回JSX结构 ========
+        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
+            <Card title="风险管控" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"风险管控"，最小高度400px ========
+                <Result  // ======== Result组件，用于显示状态页面 ========
+                    status="info"  // ======== 设置状态为info（信息类型） ========
+                    title="风险管控模块"  // ======== 设置标题 ========
+                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
+                />  // ======== Result组件结束 ========
+            </Card>  // ======== Card组件结束 ========
+        </div>  // ======== 外层容器结束 ========
+    );  // ======== return语句结束 ========
+};  // ======== 组件函数结束 ========
+
+export default RiskAssessment;  // ======== 导出组件供其他文件使用 ========