事故接警单

src/pages/business_emergencyAccident/EmergencyAccident.js

@@ -1,70 +1,41 @@
 import React, { useState } from 'react';
-import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
+import { Button } from 'antd';
 import styles from './EmergencyResource.less';
-import ComplianceManagement from './components/ComplianceManagement'; //合规性管理
+import EventWarningManagement from './components/EventWarningManagement';
-import OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警
+import EventNotification from './components/EventNotification';
-import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonnelManagement'; //环保人员管理
-import EvaluationReport from './components/EvaluationReport'; //评估报告
-import EquipmentManagement from './components/EquipmentManagement'; //环保设备设施管理
-import PollutionSourceManagement from './components/PollutionSourceManagement'; //污染源管理
 
-
+const EmergencyAccident = () => {
-
+    const [activeModule, setActiveModule] = useState('warning');
-const SafeMajorHazardList = () => {
-    const [activeModule, setActiveModule] = useState('organization');
 
     const handleModuleClick = (module) => {
-        setActiveModule(module)
+        setActiveModule(module);
-    }
+    };
-
 
     const renderModule = () => {
         switch (activeModule) {
-            case 'organization':
+            case 'warning':
-                return <ComplianceManagement />;
+                return <EventWarningManagement />;
-            case 'equipment':
+            case 'notification':
-                return <OnlineMonitoring />;
+                return <EventNotification />;
-            case 'firefighting':
-                return <EnvironmentalPersonnelManagement />;
-            case 'other':
-                return <EvaluationReport />;
-            case 'equipmentManagement':
-                return <EquipmentManagement />;
-            case 'pollutionSource':
-                return <PollutionSourceManagement />;
             default:
-                return <ComplianceManagement />;
+                return <EventWarningManagement />;
         }
     };
 
-
     return (
         <div className={styles.container}>
             <div className={styles.TopButton}>
                 <Button
-                    className={`${styles.TopButtonItem} ${activeModule === "organization" ? styles.active : ""}`}
+                    className={`${styles.TopButtonItem} ${activeModule === "warning" ? styles.active : ""}`}
-                    onClick={() => handleModuleClick("organization")}
+                    onClick={() => handleModuleClick("warning")}
-                >合规性管理
+                >
-                </Button>
+                    事件预警管理
-                <Button 
-                    className={`${styles.TopButtonItem} ${activeModule === "firefighting" ? styles.active : ""}`}
-                    onClick={() => handleModuleClick("firefighting")}
-                >环保人员管理
-                </Button>
-                <Button 
-                    className={`${styles.TopButtonItem} ${activeModule === "other" ? styles.active : ""}`}
-                    onClick={() => handleModuleClick("other")}
-                >排污许可管理
-                </Button>
-                <Button 
-                    className={`${styles.TopButtonItem} ${activeModule === "equipmentManagement" ? styles.active : ""}`}
-                    onClick={() => handleModuleClick("equipmentManagement")}
-                >环保设备设施管理
                 </Button>
                 <Button 
-                    className={`${styles.TopButtonItem} ${activeModule === "pollutionSource" ? styles.active : ""}`}
+                    className={`${styles.TopButtonItem} ${activeModule === "notification" ? styles.active : ""}`}
-                    onClick={() => handleModuleClick("pollutionSource")}
+                    onClick={() => handleModuleClick("notification")}
-                >污染源管理
+                >
+                    事件通知
                 </Button>
             </div>
             <div className={styles.content}>
@@ -74,4 +45,4 @@ const SafeMajorHazardList = () => {
     );
 };
 
-export default SafeMajorHazardList;
+export default EmergencyAccident;

src/pages/business_emergencyAccident/EmergencyResource.less

@@ -3,20 +3,20 @@
     width: 100%;
     height: 89vh;
     overflow: hidden;
-    display: flex; 
+    display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 
     .TopButton {
-        background-color: white;
+        background-color: #fff;
         width: 100%;
-        padding: 8px 30px 5px 30px;
+        padding: 8px 30px 10px 30px;
         display: flex;
         gap: 24px;
         margin-left: 6px;
 
         .TopButtonItem {
             background-color: #FFFFFF !important;
-            color: #999999 !important;
+            color: #333333 !important;
             font-family: 'PingFang SC', sans-serif !important;
             font-weight: 500 !important;
             font-size: 14px !important;
@@ -27,33 +27,34 @@
             border: none !important;
             box-shadow: none !important;
             position: relative !important;
-            display: flex !important;
+            display: inline-flex !important;
             flex-direction: column !important;
             align-items: center !important;
             gap: 5px !important;
             transition: all 0.3s ease !important;
+            width: fit-content !important;
 
             &:hover {
-                color: #999999 !important;
+                color: #333333 !important;
                 border: none !important;
             }
 
             &:focus {
-                color: #999999 !important;
+                color: #333333 !important;
                 border: none !important;
             }
 
             &.active {
-                background: linear-gradient(98.03deg, #00E49C 0.68%, #00D841 98.3%) !important;
+                color: #2E4CD4 !important;
-                box-shadow: 0px 2px 2px 0px #AEEDDE !important;
+
-                color: #FFFFFF !important;
-                
                 &::after {
                     content: '';
-                    width: 28px;
+                    position: absolute;
-                    height: 5px;
+                    bottom: -10px;
-                    background-color: #FFFFFF;
+                    left: 14px;
-                    border-radius: 6px;
+                    right: 14px;
+                    height: 4px;
+                    background-color: #2E4CD4;
                     opacity: 1;
                 }
             }

src/pages/business_emergencyAccident/components/EventNotification.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './EventNotification.less';
+
+const EventNotification = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <h2>事件通知</h2>
+                {/* 这里可以添加具体的内容 */}
+            </div>
+        </div>
+    );
+};
+
+export default EventNotification;
+

src/pages/business_emergencyAccident/components/EventNotification.less

@@ -0,0 +1,12 @@
+.container {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    
+    .content {
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+    }
+}
+

src/pages/business_emergencyAccident/components/EventWarningManagement.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './EventWarningManagement.less';
+
+const EventWarningManagement = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <h2>事件预警管理</h2>
+                {/* 这里可以添加具体的内容 */}
+            </div>
+        </div>
+    );
+};
+
+export default EventWarningManagement;
+

src/pages/business_emergencyAccident/components/EventWarningManagement.less

@@ -0,0 +1,12 @@
+.container {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    
+    .content {
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+    }
+}
+