src/pages/business_emergencyPlan/EmergencyPlan.js

@@ -1,74 +1,53 @@
 import React, { useState } from 'react';
-import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
+import { Card, Row, Col, Statistic, Progress, Button, Space, Tabs } from 'antd';
 import styles from './EmergencyPlan.less';
-import ComplianceManagement from './components/ComplianceManagement'; //合规性管理
+import Swhpqy from './components/swhpqy'; //涉危化品企业
-import OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警
+import Whp from './components/whp'; //危化品
-import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonnelManagement'; //环保人员管理
+import Sgla from './components/sgla'; //事故案例
-import EvaluationReport from './components/EvaluationReport'; //评估报告
+import Flfg from './components/flfg'; //法律法规
-import EquipmentManagement from './components/EquipmentManagement'; //环保设备设施管理
-import PollutionSourceManagement from './components/PollutionSourceManagement'; //污染源管理
 
 
 
 const SafeMajorHazardList = () => {
-    const [activeModule, setActiveModule] = useState('organization');
+    const [activeTab, setActiveTab] = useState('swhpqy');
-
-    const handleModuleClick = (module) => {
-        setActiveModule(module)
-    }
 
+    const handleTabChange = (key) => {
+        setActiveTab(key);
+    };
 
-    const renderModule = () => {
+    const tabItems = [
-        switch (activeModule) {
+        {
-            case 'organization':
+            key: 'swhpqy',
-                return <ComplianceManagement />;
+            label: '涉危化品企业',
-            case 'equipment':
+            children: <Swhpqy />
-                return <OnlineMonitoring />;
+        },
-            case 'firefighting':
+        {
-                return <EnvironmentalPersonnelManagement />;
+            key: 'whp',
-            case 'other':
+            label: '危化品',
-                return <EvaluationReport />;
+            children: <Whp />
-            case 'equipmentManagement':
+        },
-                return <EquipmentManagement />;
+        {
-            case 'pollutionSource':
+            key: 'sgla',
-                return <PollutionSourceManagement />;
+            label: '事故案例',
-            default:
+            children: <Sgla />
-                return <ComplianceManagement />;
+        },
+        {
+            key: 'flfg',
+            label: '法律法规',
+            children: <Flfg />
         }
-    };
+    ];
 
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container1}>
             <div className={styles.TopButton}>
-                <Button
+                <Tabs
-                    className={`${styles.TopButtonItem} ${activeModule === "organization" ? styles.active : ""}`}
+                    activeKey={activeTab}
-                    onClick={() => handleModuleClick("organization")}
+                    onChange={handleTabChange}
-                >合规性管理
+                    items={tabItems}
-                </Button>
+                    className={styles.customTabs}
-                <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 : ""}`}
-                    onClick={() => handleModuleClick("pollutionSource")}
-                >污染源管理
-                </Button>
-            </div>
-            <div className={styles.content}>
-                {renderModule()}
             </div>
         </div>
     );

src/pages/business_emergencyPlan/EmergencyPlan.less

@@ -1,22 +1,21 @@
-.container {
+.container1 {
     background-color: transparent;
     width: 100%;
     height: 89vh;
     overflow: hidden;
-    display: flex; 
+    display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 
     .TopButton {
-        background-color: white;
+        background-color: #ebf0fe;
         width: 100%;
-        padding: 8px 30px 5px 30px;
+        height: 50px;
         display: flex;
         gap: 24px;
-        margin-left: 6px;
+        box-sizing: border-box;
 
         .TopButtonItem {
-            background-color: #FFFFFF !important;
+            color: #333333 !important;
-            color: #999999 !important;
             font-family: 'PingFang SC', sans-serif !important;
             font-weight: 500 !important;
             font-size: 14px !important;
@@ -34,29 +33,18 @@
             transition: all 0.3s ease !important;
 
             &:hover {
-                color: #999999 !important;
+                color: #333333 !important;
                 border: none !important;
             }
 
             &:focus {
-                color: #999999 !important;
+                color: #333333 !important;
                 border: none !important;
             }
 
-            &.active {
+            // &.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;
-                    height: 5px;
-                    background-color: #FFFFFF;
-                    border-radius: 6px;
-                    opacity: 1;
-                }
-            }
         }
     }
 
@@ -66,4 +54,72 @@
         overflow-y: auto; // ======== 允许垂直滚动 ========
         padding: 0; // ======== 无内边距 ========
     }
+
+    // ======== 自定义Tabs样式 ========
+    .customTabs {
+        width: 100% !important;
+        
+        :global(.ant-tabs-content-holder) {
+            width: 100% !important;
+        }
+        
+        :global(.ant-tabs-tabpane) {
+            width: 100% !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            max-width: none !important;
+        }
+        
+        :global(.ant-tabs-content) {
+            width: 100% !important;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+        
+        :global(.ant-tabs-tab) {
+            color: #333333 !important;
+            font-family: 'PingFang SC', sans-serif !important;
+            font-weight: 500 !important;
+            font-size: 14px !important;
+            border-radius: 8px !important;
+            padding: 4px 16px !important;
+            margin-right: 24px !important;
+            transition: all 0.3s ease !important;
+        }
+
+        :global(.ant-tabs-tab-active) {
+            color: #ffffff !important;
+            background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
+        }
+
+        :global(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+            color: #ffffff !important;
+            text-shadow: none !important;
+        }
+
+        :global(.ant-tabs-tab:hover) {
+            color: #333333 !important;
+        }
+
+        :global(.ant-tabs-tab-active:hover) {
+            color: #ffffff !important;
+        }
+
+        :global(.ant-tabs-tab-active:hover .ant-tabs-tab-btn) {
+            color: #ffffff !important;
+            text-shadow: none !important;
+        }
+
+        :global(.ant-tabs-ink-bar) {
+            display: none !important;
+        }
+        
+        :global(.ant-tabs-nav-list) {
+            margin-left: 80px !important;
+            // padding-top: 2px !important;
+            // display: flex !important;
+            // align-items: center !important;
+            // text-align: center;
+        }
+    }
 }

src/pages/business_emergencyPlan/components/EmergencyMap.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card } from 'antd';
+import styles from './EmergencyMap.less';
+
+const EmergencyMap = () => {
+    return (
+        <div className={styles.container}>
+            <Card>
+                <div style={{ textAlign: 'center', padding: '50px', fontSize: '18px' }}>
+                    待开发一张图
+                </div>
+            </Card>
+        </div>
+    );
+};
+
+export default EmergencyMap;

src/pages/business_emergencyPlan/components/EmergencyMap.less

@@ -0,0 +1,3 @@
+.container {
+    padding: 20px;
+}

src/pages/business_emergencyPlan/components/EmergencyRescue.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card } from 'antd';
+import styles from './EmergencyRescue.less';
+
+const EmergencyRescue = () => {
+    return (
+        <div className={styles.container}>
+            <Card>
+                <div style={{ textAlign: 'center', padding: '50px', fontSize: '18px' }}>
+                    救援
+                </div>
+            </Card>
+        </div>
+    );
+};
+
+export default EmergencyRescue;

src/pages/business_emergencyPlan/components/EmergencyRescue.less

@@ -0,0 +1,3 @@
+.container {
+    padding: 20px;
+}

src/pages/business_emergencyPlan/components/EmergencyResource.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import styles from './EmergencyResource.less';
+import Yjzbry from './secondary_menu/yjzbry';
+import Yjwz from './secondary_menu/yjwz';
+import Yjdw from './secondary_menu/yjdw';
+import Yjzj from './secondary_menu/yjzj';
+import Yjssd from './secondary_menu/yjssd';
+import Yjxf from './secondary_menu/yjxf';
+import Zbhy from './secondary_menu/zbhy';
+
+const EmergencyResource = () => {
+    const [activeButton, setActiveButton] = useState('应急值班人员');
+
+    const handleButtonClick = (buttonName) => {
+        setActiveButton(buttonName);
+    };
+
+    const buttonList = [
+        '应急值班人员',
+        '应急物资',
+        '应急队伍',
+        '应急专家',
+        '应急疏散点',
+        '应急消防点',
+        '周边医院'
+    ];
+
+    const renderContent = () => {
+        switch (activeButton) {
+            case '应急值班人员':
+                return <Yjzbry />;
+            case '应急物资':
+                return <Yjwz />;
+            case '应急队伍':
+                return <Yjdw />;
+            case '应急专家':
+                return <Yjzj />;
+            case '应急疏散点':
+                return <Yjssd />;
+            case '应急消防点':
+                return <Yjxf />;
+            case '周边医院':
+                return <Zbhy />;
+            default:
+                return <Yjzbry />;
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.buttonRow}>
+                {buttonList.map((buttonName) => (
+                    <div
+                        key={buttonName}
+                        className={`${styles.button} ${activeButton === buttonName ? styles.active : ''}`}
+                        onClick={() => handleButtonClick(buttonName)}
+                    >
+                        {buttonName}
+                    </div>
+                ))}
+            </div>
+            <div className={styles.contentArea}>
+                {renderContent()}
+            </div>
+        </div>
+    );
+};
+
+export default EmergencyResource;

src/pages/business_emergencyPlan/components/EmergencyResource.less

@@ -0,0 +1,42 @@
+.container {
+    background-color: transparent;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.buttonRow {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-left: 5px;
+    padding: 10px 20px 10px 30px;
+    background-color: #EBF0FE;
+}
+
+.button {
+    background-color: transparent;
+    color: #333333;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        background-color: rgba(46, 76, 212, 0.1);
+    }
+
+    &.active {
+        color: #fff;
+        background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
+    }
+}
+
+.contentArea {
+    flex: 1;
+    background-color: #EBF0FE;
+}

src/pages/business_emergencyPlan/components/flfg.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './flfg.less';
+
+const Flfg = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <h3>法律法规</h3>
+                <p>内容待开发</p>
+            </div>
+        </div>
+    );
+};
+
+export default Flfg;

src/pages/business_emergencyPlan/components/flfg.less

@@ -0,0 +1,21 @@
+.container {
+    padding: 20px;
+    
+    .content {
+        background: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        
+        h3 {
+            margin-bottom: 16px;
+            color: #333;
+            font-size: 18px;
+        }
+        
+        p {
+            color: #666;
+            font-size: 14px;
+        }
+    }
+}

src/pages/business_emergencyPlan/components/secondary_menu/yjdw.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjdw.less';
+
+const Yjdw = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急队伍内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjdw;

src/pages/business_emergencyPlan/components/secondary_menu/yjdw.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyPlan/components/secondary_menu/yjssd.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjssd.less';
+
+const Yjssd = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急疏散点内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjssd;

src/pages/business_emergencyPlan/components/secondary_menu/yjssd.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyPlan/components/secondary_menu/yjwz.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjwz.less';
+
+const Yjwz = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急物资内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjwz;

src/pages/business_emergencyPlan/components/secondary_menu/yjwz.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyPlan/components/secondary_menu/yjxf.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjxf.less';
+
+const Yjxf = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急消防点内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjxf;

src/pages/business_emergencyPlan/components/secondary_menu/yjxf.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyPlan/components/secondary_menu/yjzbry.js

@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Select, message, Modal } from 'antd';
+import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './yjzbry.less';
+
+const { Option } = Select;
+
+const Yjzbry = () => {
+    const [loading, setLoading] = useState(false);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    const [pagination, setPagination] = useState({
+        current: 1,
+        pageSize: 10,
+        total: 48,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `共${total}条`,
+    });
+
+    // 模拟数据
+    const [dataSource, setDataSource] = useState([
+        {
+            key: '1',
+            number: '01',
+            unitName: '文登市兴文新材料有限公司',
+            name: '国云海',
+            position: '生产班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '2',
+            number: '02',
+            unitName: '文登市兴文新材料有限公司',
+            name: '陈志强',
+            position: '生产班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '白班',
+        },
+        {
+            key: '3',
+            number: '03',
+            unitName: '合湾新材科技有限公司',
+            name: '侯文涛',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '白班',
+        },
+        {
+            key: '4',
+            number: '04',
+            unitName: '山东万图高分子材料股份有限公司',
+            name: '宋东',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '5',
+            number: '05',
+            unitName: '合鸿新材科技有限公司',
+            name: '王一声',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '6',
+            number: '06',
+            unitName: '山东万图高分子材料股份有限公司',
+            name: '赵小敏',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878987633@qq.com',
+            dutyTime: '夜班',
+        },
+    ]);
+
+    // 表格列配置
+    const columns = [
+        {
+            title: '编号',
+            dataIndex: 'number',
+            key: 'number',
+            width: 80,
+        },
+        {
+            title: '单位名称',
+            dataIndex: 'unitName',
+            key: 'unitName',
+            width: 200,
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 100,
+        },
+        {
+            title: '职务',
+            dataIndex: 'position',
+            key: 'position',
+            width: 120,
+        },
+        {
+            title: '手机号',
+            dataIndex: 'mobile',
+            key: 'mobile',
+            width: 130,
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            key: 'email',
+            width: 180,
+        },
+        {
+            title: '值班时间',
+            dataIndex: 'dutyTime',
+            key: 'dutyTime',
+            width: 100,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 120,
+            render: (text, record) => (
+                <div className={styles.actionButtons}>
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        // icon={<EditOutlined />}
+                        onClick={() => handleEdit(record)}
+                    >
+                        修改
+                    </Button>
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        danger
+                        // icon={<DeleteOutlined />}
+                        onClick={() => handleDelete(record)}
+                    >
+                        删除
+                    </Button>
+                </div>
+            ),
+        },
+    ];
+
+    // 搜索处理
+    const handleSearch = () => {
+        setLoading(true);
+        // 模拟搜索请求
+        setTimeout(() => {
+            setLoading(false);
+            message.success('查询完成');
+        }, 1000);
+    };
+
+    // 新增处理
+    const handleAdd = () => {
+        message.info('新增功能待实现');
+    };
+
+    // 批量删除处理
+    const handleBatchDelete = () => {
+        if (selectedRowKeys.length === 0) {
+            message.warning('请选择要删除的数据');
+            return;
+        }
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
+                setSelectedRowKeys([]);
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 编辑处理
+    const handleEdit = (record) => {
+        message.info(`编辑 ${record.name} 的信息`);
+    };
+
+    // 删除处理
+    const handleDelete = (record) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除 ${record.name} 吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => item.key !== record.key));
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 分页处理
+    const handleTableChange = (pagination) => {
+        setPagination(pagination);
+    };
+
+    return (
+        <div className={styles.container}>
+            {/* 页面标题 */}
+            <div className={styles.header}>
+                <div className={styles.titleBar}></div>
+                <h2 className={styles.title}>应急值班人员</h2>
+            </div>
+
+            {/* 搜索和操作区域 */}
+            <div className={styles.searchBar}>
+                <div className={styles.searchLeft}>
+                    <Select
+                        placeholder="请选择单位名称"
+                        style={{ width: 180 }}
+                        value={searchValue}
+                        onChange={setSearchValue}
+                        allowClear
+                    >
+                        <Option value="文登市兴文新材料有限公司">文登市兴文新材料有限公司</Option>
+                        <Option value="合湾新材科技有限公司">合湾新材科技有限公司</Option>
+                        <Option value="山东万图高分子材料股份有限公司">山东万图高分子材料股份有限公司</Option>
+                        <Option value="合鸿新材科技有限公司">合鸿新材科技有限公司</Option>
+                    </Select>
+                    <Button 
+                        type="primary" 
+                        icon={<SearchOutlined />}
+                        onClick={handleSearch}
+                        loading={loading}
+                    >
+                        查询
+                    </Button>
+                </div>
+                <div className={styles.searchRight}>
+                    <Button 
+                        type="primary" 
+                        icon={<PlusOutlined />}
+                        onClick={handleAdd}
+                    >
+                        新增
+                    </Button>
+                    <Button 
+                        danger
+                        icon={<DeleteOutlined />}
+                        onClick={handleBatchDelete}
+                    >
+                        删除
+                    </Button>
+                </div>
+            </div>
+
+            {/* 数据表格 */}
+            <div className={styles.tableContainer}>
+                <StandardTable
+                    columns={columns}
+                    data={{
+                        list: dataSource,
+                        pagination: pagination
+                    }}
+                    rowKey="key"
+                    selectedRows={selectedRowKeys}
+                    onSelectRow={setSelectedRowKeys}
+                    onChange={handleTableChange}
+                    loading={loading}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Yjzbry;

src/pages/business_emergencyPlan/components/secondary_menu/yjzbry.less

@@ -0,0 +1,106 @@
+.container {
+    padding: 20px;
+    background: #fff;
+    height:100vh;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    
+    .titleBar {
+        width: 3px;
+        height: 16px;
+        background: #2E4CD4;
+        margin-right: 12px;
+    }
+    
+    .title {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+    }
+}
+
+.searchBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 5px;
+
+    
+    .searchLeft {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+    
+    .searchRight {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+}
+
+.tableContainer {
+    background: #fff;
+    border-radius: 0px;
+    overflow: hidden;
+    
+    .actionButtons {
+        display: flex;
+        gap: 8px;
+        font-size: 10px;
+        justify-content: center;
+        
+        .ant-btn-link {
+            padding: 0;
+            height: auto;
+            font-size: 10px;
+        }
+    }
+}
+
+// 表格样式优化
+.tableContainer {
+    :global {
+        .ant-table-thead > tr > th {
+            background: #F5F5FA;
+            font-weight: 500;
+            color: #333333;
+            font-size: 14px;
+            text-align: center;
+        }
+        
+        .ant-table-tbody > tr > td {
+            color: #666666;
+            font-size: 13px;
+            text-align: center;
+        }
+        
+        .ant-table-tbody > tr:hover > td {
+            background: #f5f5f5;
+        }
+        
+        .ant-pagination {
+            margin-top: 10px;
+            text-align: right;
+        }
+        
+        // 覆盖操作列按钮样式
+        .ant-btn.ant-btn-sm {
+            font-size: 13px !important;
+            height: 20px !important;
+            padding: 0px 4px !important;
+        }
+        
+        .ant-btn-link.ant-btn-sm {
+            font-size: 13px !important;
+            height: auto !important;
+            padding: 0 !important;
+        }
+    }
+}

src/pages/business_emergencyPlan/components/secondary_menu/yjzj.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjzj.less';
+
+const Yjzj = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急专家内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjzj;

src/pages/business_emergencyPlan/components/secondary_menu/yjzj.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyPlan/components/secondary_menu/zbhy.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './zbhy.less';
+
+const Zbhy = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                周边医院内容
+            </div>
+        </div>
+    );
+};
+
+export default Zbhy;

src/pages/business_emergencyPlan/components/secondary_menu/zbhy.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyPlan/components/sgla.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './sgla.less';
+
+const Sgla = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <h3>事故案例</h3>
+                <p>内容待开发</p>
+            </div>
+        </div>
+    );
+};
+
+export default Sgla;

src/pages/business_emergencyPlan/components/sgla.less

@@ -0,0 +1,21 @@
+.container {
+    padding: 20px;
+    
+    .content {
+        background: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        
+        h3 {
+            margin-bottom: 16px;
+            color: #333;
+            font-size: 18px;
+        }
+        
+        p {
+            color: #666;
+            font-size: 14px;
+        }
+    }
+}

src/pages/business_emergencyPlan/components/swhpqy.js

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Select, message, Modal } from 'antd';
+import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './swhpqy.less';
+
+const { Option } = Select;
+
+const Swhpqy = () => {
+    const [loading, setLoading] = useState(false);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    const [pagination, setPagination] = useState({
+        current: 1,
+        pageSize: 10,
+        total: 48,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `共${total}条`,
+    });
+
+    // 模拟数据
+    const [dataSource, setDataSource] = useState([
+        {
+            key: '1',
+            number: '01',
+            unitName: '文登市兴文新材料有限公司',
+            name: '国云海',
+            position: '生产班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '2',
+            number: '02',
+            unitName: '文登市兴文新材料有限公司',
+            name: '陈志强',
+            position: '生产班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '白班',
+        },
+        {
+            key: '3',
+            number: '03',
+            unitName: '合湾新材科技有限公司',
+            name: '侯文涛',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '白班',
+        },
+        {
+            key: '4',
+            number: '04',
+            unitName: '山东万图高分子材料股份有限公司',
+            name: '宋东',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '5',
+            number: '05',
+            unitName: '合鸿新材科技有限公司',
+            name: '王一声',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '6',
+            number: '06',
+            unitName: '山东万图高分子材料股份有限公司',
+            name: '赵小敏',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878987633@qq.com',
+            dutyTime: '夜班',
+        },
+    ]);
+
+    // 表格列配置
+    const columns = [
+        {
+            title: '编号',
+            dataIndex: 'number',
+            key: 'number',
+            width: 80,
+        },
+        {
+            title: '单位名称',
+            dataIndex: 'unitName',
+            key: 'unitName',
+            width: 200,
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 100,
+        },
+        {
+            title: '职务',
+            dataIndex: 'position',
+            key: 'position',
+            width: 120,
+        },
+        {
+            title: '手机号',
+            dataIndex: 'mobile',
+            key: 'mobile',
+            width: 130,
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            key: 'email',
+            width: 180,
+        },
+        {
+            title: '值班时间',
+            dataIndex: 'dutyTime',
+            key: 'dutyTime',
+            width: 100,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 120,
+            render: (text, record) => (
+                <div className={styles.actionButtons}>
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        // icon={<EditOutlined />}
+                        onClick={() => handleEdit(record)}
+                    >
+                        修改
+                    </Button>
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        danger
+                        // icon={<DeleteOutlined />}
+                        onClick={() => handleDelete(record)}
+                    >
+                        删除
+                    </Button>
+                </div>
+            ),
+        },
+    ];
+
+    // 搜索处理
+    const handleSearch = () => {
+        setLoading(true);
+        // 模拟搜索请求
+        setTimeout(() => {
+            setLoading(false);
+            message.success('查询完成');
+        }, 1000);
+    };
+
+    // 新增处理
+    const handleAdd = () => {
+        message.info('新增功能待实现');
+    };
+
+    // 批量删除处理
+    const handleBatchDelete = () => {
+        if (selectedRowKeys.length === 0) {
+            message.warning('请选择要删除的数据');
+            return;
+        }
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
+                setSelectedRowKeys([]);
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 编辑处理
+    const handleEdit = (record) => {
+        message.info(`编辑 ${record.name} 的信息`);
+    };
+
+    // 删除处理
+    const handleDelete = (record) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除 ${record.name} 吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => item.key !== record.key));
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 分页处理
+    const handleTableChange = (pagination) => {
+        setPagination(pagination);
+    };
+
+    return (
+        <div className={styles.container}>
+            {/* 页面标题 */}
+            <div className={styles.header}>
+                <div className={styles.titleBar}></div>
+                <h2 className={styles.title}>危化品</h2>
+            </div>
+
+            {/* 搜索和操作区域 */}
+            <div className={styles.searchBar}>
+                <div className={styles.searchLeft}>
+                    <Input
+                        placeholder='请输入危化品名称'
+                        style={{ width: 200 }}
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        allowClear
+                        className={styles.searchInput}
+                    />
+                    <Button 
+                        type="primary" 
+                        icon={<SearchOutlined />}
+                        onClick={handleSearch}
+                        loading={loading}
+                        className={styles.searchButton}
+                    >
+                        查询
+                    </Button>
+                </div>
+            </div>
+
+            {/* 数据表格 */}
+            <div className={styles.tableContainer}>
+                <StandardTable
+                    columns={columns}
+                    data={{
+                        list: dataSource,
+                        pagination: pagination
+                    }}
+                    rowKey="key"
+                    selectedRows={selectedRowKeys}
+                    onSelectRow={setSelectedRowKeys}
+                    onChange={handleTableChange}
+                    loading={loading}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Swhpqy;

src/pages/business_emergencyPlan/components/swhpqy.less

@@ -0,0 +1,120 @@
+.container {
+    padding: 20px;
+    background: #fff;
+    height:100vh;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    max-width: none;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    
+    .titleBar {
+        width: 3px;
+        height: 16px;
+        background: #2E4CD4;
+        margin-right: 12px;
+    }
+    
+    .title {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+    }
+}
+
+.searchBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 5px;
+
+    
+    .searchLeft {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        
+        .searchInput {
+            border-radius: 4px !important;
+        }
+        
+        .searchButton {
+            background-color: #2E4CD4 !important;
+            border-color: #2E4CD4 !important;
+            border-radius: 4px !important;
+            
+            &:hover {
+                background-color: #1e3bb8 !important;
+                border-color: #1e3bb8 !important;
+            }
+        }
+    }
+    
+}
+
+.tableContainer {
+    background: #fff;
+    border-radius: 0px;
+    overflow: hidden;
+    
+    .actionButtons {
+        display: flex;
+        gap: 8px;
+        font-size: 10px;
+        justify-content: center;
+        
+        .ant-btn-link {
+            padding: 0;
+            height: auto;
+            font-size: 10px;
+        }
+    }
+}
+
+// 表格样式优化
+.tableContainer {
+    :global {
+        .ant-table-thead > tr > th {
+            background: #F5F5FA;
+            font-weight: 500;
+            color: #333333;
+            font-size: 14px;
+            text-align: center;
+        }
+        
+        .ant-table-tbody > tr > td {
+            color: #666666;
+            font-size: 13px;
+            text-align: center;
+        }
+        
+        .ant-table-tbody > tr:hover > td {
+            background: #f5f5f5;
+        }
+        
+        .ant-pagination {
+            margin-top: 10px;
+            text-align: right;
+        }
+        
+        // 覆盖操作列按钮样式
+        .ant-btn.ant-btn-sm {
+            font-size: 13px !important;
+            height: 20px !important;
+            padding: 0px 4px !important;
+        }
+        
+        .ant-btn-link.ant-btn-sm {
+            font-size: 13px !important;
+            height: auto !important;
+            padding: 0 !important;
+        }
+    }
+}

src/pages/business_emergencyPlan/components/whp.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './whp.less';
+
+const Whp = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <h3>危化品</h3>
+                <p>内容待开发</p>
+            </div>
+        </div>
+    );
+};
+
+export default Whp;

src/pages/business_emergencyPlan/components/whp.less

@@ -0,0 +1,21 @@
+.container {
+    padding: 20px;
+    
+    .content {
+        background: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        
+        h3 {
+            margin-bottom: 16px;
+            color: #333;
+            font-size: 18px;
+        }
+        
+        p {
+            color: #666;
+            font-size: 14px;
+        }
+    }
+}

src/pages/business_emergencyResource/EmergencyResource.js

@@ -7,6 +7,9 @@ import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonne
 import EvaluationReport from './components/EvaluationReport'; //评估报告
 import EquipmentManagement from './components/EquipmentManagement'; //环保设备设施管理
 import PollutionSourceManagement from './components/PollutionSourceManagement'; //污染源管理
+import EmergencyMap from './components/EmergencyMap'; //应急一张图
+import EmergencyResource from './components/EmergencyResource'; //应急资源
+import EmergencyRescue from './components/EmergencyRescue'; //应急处置救援
 
 
 
@@ -32,6 +35,12 @@ const SafeMajorHazardList = () => {
                 return <EquipmentManagement />;
             case 'pollutionSource':
                 return <PollutionSourceManagement />;
+            case 'emergencyMap':
+                return <EmergencyMap />;
+            case 'emergencyResource':
+                return <EmergencyResource />;
+            case 'emergencyRescue':
+                return <EmergencyRescue />;
             default:
                 return <ComplianceManagement />;
         }
@@ -46,26 +55,41 @@ const SafeMajorHazardList = () => {
                     onClick={() => handleModuleClick("organization")}
                 >合规性管理
                 </Button>
-                <Button 
+                <Button
                     className={`${styles.TopButtonItem} ${activeModule === "firefighting" ? styles.active : ""}`}
                     onClick={() => handleModuleClick("firefighting")}
                 >环保人员管理
                 </Button>
-                <Button 
+                <Button
                     className={`${styles.TopButtonItem} ${activeModule === "other" ? styles.active : ""}`}
                     onClick={() => handleModuleClick("other")}
                 >排污许可管理
                 </Button>
-                <Button 
+                <Button
                     className={`${styles.TopButtonItem} ${activeModule === "equipmentManagement" ? styles.active : ""}`}
                     onClick={() => handleModuleClick("equipmentManagement")}
                 >环保设备设施管理
                 </Button>
-                <Button 
+                <Button
                     className={`${styles.TopButtonItem} ${activeModule === "pollutionSource" ? styles.active : ""}`}
                     onClick={() => handleModuleClick("pollutionSource")}
                 >污染源管理
                 </Button>
+                <Button
+                    className={`${styles.TopButtonItem} ${activeModule === "emergencyMap" ? styles.active : ""}`}
+                    onClick={() => handleModuleClick("emergencyMap")}
+                >应急一张图
+                </Button>
+                <Button
+                    className={`${styles.TopButtonItem} ${activeModule === "emergencyResource" ? styles.active : ""}`}
+                    onClick={() => handleModuleClick("emergencyResource")}
+                >应急资源
+                </Button>
+                <Button
+                    className={`${styles.TopButtonItem} ${activeModule === "emergencyRescue" ? styles.active : ""}`}
+                    onClick={() => handleModuleClick("emergencyRescue")}
+                >应急处置救援
+                </Button>
             </div>
             <div className={styles.content}>
                 {renderModule()}

src/pages/business_emergencyResource/EmergencyResource.less

@@ -3,12 +3,13 @@
     width: 100%;
     height: 89vh;
     overflow: hidden;
-    display: flex; 
+    display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 
     .TopButton {
-        background-color: white;
+        background-color: #FFFFFF;
         width: 100%;
+        height: 42px;
         padding: 8px 30px 5px 30px;
         display: flex;
         gap: 24px;
@@ -16,7 +17,7 @@
 
         .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;
@@ -34,26 +35,27 @@
             transition: all 0.3s ease !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: -5px;
-                    background-color: #FFFFFF;
+                    left: 50%;
-                    border-radius: 6px;
+                    transform: translateX(-50%);
+                    width: 80%;
+                    height: 4px;
+                    background-color: #2E4CD4;
                     opacity: 1;
                 }
             }

src/pages/business_emergencyResource/components/EmergencyMap.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card } from 'antd';
+import styles from './EmergencyMap.less';
+
+const EmergencyMap = () => {
+    return (
+        <div className={styles.container}>
+            <Card>
+                <div style={{ textAlign: 'center', padding: '50px', fontSize: '18px' }}>
+                    待开发一张图
+                </div>
+            </Card>
+        </div>
+    );
+};
+
+export default EmergencyMap;

src/pages/business_emergencyResource/components/EmergencyMap.less

@@ -0,0 +1,3 @@
+.container {
+    padding: 20px;
+}

src/pages/business_emergencyResource/components/EmergencyRescue.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card } from 'antd';
+import styles from './EmergencyRescue.less';
+
+const EmergencyRescue = () => {
+    return (
+        <div className={styles.container}>
+            <Card>
+                <div style={{ textAlign: 'center', padding: '50px', fontSize: '18px' }}>
+                    救援
+                </div>
+            </Card>
+        </div>
+    );
+};
+
+export default EmergencyRescue;

src/pages/business_emergencyResource/components/EmergencyRescue.less

@@ -0,0 +1,3 @@
+.container {
+    padding: 20px;
+}

src/pages/business_emergencyResource/components/EmergencyResource.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import styles from './EmergencyResource.less';
+import Yjzbry from './secondary_menu/yjzbry';
+import Yjwz from './secondary_menu/yjwz';
+import Yjdw from './secondary_menu/yjdw';
+import Yjzj from './secondary_menu/yjzj';
+import Yjssd from './secondary_menu/yjssd';
+import Yjxf from './secondary_menu/yjxf';
+import Zbhy from './secondary_menu/zbhy';
+
+const EmergencyResource = () => {
+    const [activeButton, setActiveButton] = useState('应急值班人员');
+
+    const handleButtonClick = (buttonName) => {
+        setActiveButton(buttonName);
+    };
+
+    const buttonList = [
+        '应急值班人员',
+        '应急物资',
+        '应急队伍',
+        '应急专家',
+        '应急疏散点',
+        '应急消防点',
+        '周边医院'
+    ];
+
+    const renderContent = () => {
+        switch (activeButton) {
+            case '应急值班人员':
+                return <Yjzbry />;
+            case '应急物资':
+                return <Yjwz />;
+            case '应急队伍':
+                return <Yjdw />;
+            case '应急专家':
+                return <Yjzj />;
+            case '应急疏散点':
+                return <Yjssd />;
+            case '应急消防点':
+                return <Yjxf />;
+            case '周边医院':
+                return <Zbhy />;
+            default:
+                return <Yjzbry />;
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.buttonRow}>
+                {buttonList.map((buttonName) => (
+                    <div
+                        key={buttonName}
+                        className={`${styles.button} ${activeButton === buttonName ? styles.active : ''}`}
+                        onClick={() => handleButtonClick(buttonName)}
+                    >
+                        {buttonName}
+                    </div>
+                ))}
+            </div>
+            <div className={styles.contentArea}>
+                {renderContent()}
+            </div>
+        </div>
+    );
+};
+
+export default EmergencyResource;

src/pages/business_emergencyResource/components/EmergencyResource.less

@@ -0,0 +1,42 @@
+.container {
+    background-color: transparent;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.buttonRow {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-left: 5px;
+    padding: 10px 20px 10px 30px;
+    background-color: #EBF0FE;
+}
+
+.button {
+    background-color: transparent;
+    color: #333333;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        background-color: rgba(46, 76, 212, 0.1);
+    }
+
+    &.active {
+        color: #fff;
+        background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
+    }
+}
+
+.contentArea {
+    flex: 1;
+    background-color: #EBF0FE;
+}

src/pages/business_emergencyResource/components/secondary_menu/yjdw.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjdw.less';
+
+const Yjdw = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急队伍内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjdw;

src/pages/business_emergencyResource/components/secondary_menu/yjdw.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyResource/components/secondary_menu/yjssd.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjssd.less';
+
+const Yjssd = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急疏散点内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjssd;

src/pages/business_emergencyResource/components/secondary_menu/yjssd.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyResource/components/secondary_menu/yjwz.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjwz.less';
+
+const Yjwz = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急物资内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjwz;

src/pages/business_emergencyResource/components/secondary_menu/yjwz.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyResource/components/secondary_menu/yjxf.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjxf.less';
+
+const Yjxf = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急消防点内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjxf;

src/pages/business_emergencyResource/components/secondary_menu/yjxf.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyResource/components/secondary_menu/yjzbry.js

@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Select, message, Modal } from 'antd';
+import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './yjzbry.less';
+
+const { Option } = Select;
+
+const Yjzbry = () => {
+    const [loading, setLoading] = useState(false);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    const [pagination, setPagination] = useState({
+        current: 1,
+        pageSize: 10,
+        total: 48,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `共${total}条`,
+    });
+
+    // 模拟数据
+    const [dataSource, setDataSource] = useState([
+        {
+            key: '1',
+            number: '01',
+            unitName: '文登市兴文新材料有限公司',
+            name: '国云海',
+            position: '生产班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '2',
+            number: '02',
+            unitName: '文登市兴文新材料有限公司',
+            name: '陈志强',
+            position: '生产班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '白班',
+        },
+        {
+            key: '3',
+            number: '03',
+            unitName: '合湾新材科技有限公司',
+            name: '侯文涛',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '白班',
+        },
+        {
+            key: '4',
+            number: '04',
+            unitName: '山东万图高分子材料股份有限公司',
+            name: '宋东',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '5',
+            number: '05',
+            unitName: '合鸿新材科技有限公司',
+            name: '王一声',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878967633@qq.com',
+            dutyTime: '夜班',
+        },
+        {
+            key: '6',
+            number: '06',
+            unitName: '山东万图高分子材料股份有限公司',
+            name: '赵小敏',
+            position: '班长',
+            mobile: '17898786567',
+            email: '1878987633@qq.com',
+            dutyTime: '夜班',
+        },
+    ]);
+
+    // 表格列配置
+    const columns = [
+        {
+            title: '编号',
+            dataIndex: 'number',
+            key: 'number',
+            width: 80,
+        },
+        {
+            title: '单位名称',
+            dataIndex: 'unitName',
+            key: 'unitName',
+            width: 200,
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 100,
+        },
+        {
+            title: '职务',
+            dataIndex: 'position',
+            key: 'position',
+            width: 120,
+        },
+        {
+            title: '手机号',
+            dataIndex: 'mobile',
+            key: 'mobile',
+            width: 130,
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            key: 'email',
+            width: 180,
+        },
+        {
+            title: '值班时间',
+            dataIndex: 'dutyTime',
+            key: 'dutyTime',
+            width: 100,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 120,
+            render: (text, record) => (
+                <div className={styles.actionButtons}>
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        // icon={<EditOutlined />}
+                        onClick={() => handleEdit(record)}
+                    >
+                        修改
+                    </Button>
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        danger
+                        // icon={<DeleteOutlined />}
+                        onClick={() => handleDelete(record)}
+                    >
+                        删除
+                    </Button>
+                </div>
+            ),
+        },
+    ];
+
+    // 搜索处理
+    const handleSearch = () => {
+        setLoading(true);
+        // 模拟搜索请求
+        setTimeout(() => {
+            setLoading(false);
+            message.success('查询完成');
+        }, 1000);
+    };
+
+    // 新增处理
+    const handleAdd = () => {
+        message.info('新增功能待实现');
+    };
+
+    // 批量删除处理
+    const handleBatchDelete = () => {
+        if (selectedRowKeys.length === 0) {
+            message.warning('请选择要删除的数据');
+            return;
+        }
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
+                setSelectedRowKeys([]);
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 编辑处理
+    const handleEdit = (record) => {
+        message.info(`编辑 ${record.name} 的信息`);
+    };
+
+    // 删除处理
+    const handleDelete = (record) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除 ${record.name} 吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => item.key !== record.key));
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 分页处理
+    const handleTableChange = (pagination) => {
+        setPagination(pagination);
+    };
+
+    return (
+        <div className={styles.container}>
+            {/* 页面标题 */}
+            <div className={styles.header}>
+                <div className={styles.titleBar}></div>
+                <h2 className={styles.title}>应急值班人员</h2>
+            </div>
+
+            {/* 搜索和操作区域 */}
+            <div className={styles.searchBar}>
+                <div className={styles.searchLeft}>
+                    <Select
+                        placeholder="请选择单位名称"
+                        style={{ width: 180 }}
+                        value={searchValue}
+                        onChange={setSearchValue}
+                        allowClear
+                    >
+                        <Option value="文登市兴文新材料有限公司">文登市兴文新材料有限公司</Option>
+                        <Option value="合湾新材科技有限公司">合湾新材科技有限公司</Option>
+                        <Option value="山东万图高分子材料股份有限公司">山东万图高分子材料股份有限公司</Option>
+                        <Option value="合鸿新材科技有限公司">合鸿新材科技有限公司</Option>
+                    </Select>
+                    <Button 
+                        type="primary" 
+                        icon={<SearchOutlined />}
+                        onClick={handleSearch}
+                        loading={loading}
+                    >
+                        查询
+                    </Button>
+                </div>
+                <div className={styles.searchRight}>
+                    <Button 
+                        type="primary" 
+                        icon={<PlusOutlined />}
+                        onClick={handleAdd}
+                    >
+                        新增
+                    </Button>
+                    <Button 
+                        danger
+                        icon={<DeleteOutlined />}
+                        onClick={handleBatchDelete}
+                    >
+                        删除
+                    </Button>
+                </div>
+            </div>
+
+            {/* 数据表格 */}
+            <div className={styles.tableContainer}>
+                <StandardTable
+                    columns={columns}
+                    data={{
+                        list: dataSource,
+                        pagination: pagination
+                    }}
+                    rowKey="key"
+                    selectedRows={selectedRowKeys}
+                    onSelectRow={setSelectedRowKeys}
+                    onChange={handleTableChange}
+                    loading={loading}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Yjzbry;

src/pages/business_emergencyResource/components/secondary_menu/yjzbry.less

@@ -0,0 +1,106 @@
+.container {
+    padding: 20px;
+    background: #fff;
+    height:100vh;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    
+    .titleBar {
+        width: 3px;
+        height: 16px;
+        background: #2E4CD4;
+        margin-right: 12px;
+    }
+    
+    .title {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+    }
+}
+
+.searchBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 5px;
+
+    
+    .searchLeft {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+    
+    .searchRight {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+}
+
+.tableContainer {
+    background: #fff;
+    border-radius: 0px;
+    overflow: hidden;
+    
+    .actionButtons {
+        display: flex;
+        gap: 8px;
+        font-size: 10px;
+        justify-content: center;
+        
+        .ant-btn-link {
+            padding: 0;
+            height: auto;
+            font-size: 10px;
+        }
+    }
+}
+
+// 表格样式优化
+.tableContainer {
+    :global {
+        .ant-table-thead > tr > th {
+            background: #F5F5FA;
+            font-weight: 500;
+            color: #333333;
+            font-size: 14px;
+            text-align: center;
+        }
+        
+        .ant-table-tbody > tr > td {
+            color: #666666;
+            font-size: 13px;
+            text-align: center;
+        }
+        
+        .ant-table-tbody > tr:hover > td {
+            background: #f5f5f5;
+        }
+        
+        .ant-pagination {
+            margin-top: 10px;
+            text-align: right;
+        }
+        
+        // 覆盖操作列按钮样式
+        .ant-btn.ant-btn-sm {
+            font-size: 13px !important;
+            height: 20px !important;
+            padding: 0px 4px !important;
+        }
+        
+        .ant-btn-link.ant-btn-sm {
+            font-size: 13px !important;
+            height: auto !important;
+            padding: 0 !important;
+        }
+    }
+}

src/pages/business_emergencyResource/components/secondary_menu/yjzj.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './yjzj.less';
+
+const Yjzj = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                应急专家内容
+            </div>
+        </div>
+    );
+};
+
+export default Yjzj;

src/pages/business_emergencyResource/components/secondary_menu/yjzj.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/business_emergencyResource/components/secondary_menu/zbhy.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './zbhy.less';
+
+const Zbhy = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                周边医院内容
+            </div>
+        </div>
+    );
+};
+
+export default Zbhy;

src/pages/business_emergencyResource/components/secondary_menu/zbhy.less

@@ -0,0 +1,10 @@
+.container {
+    padding: 20px;
+    background-color: #EBF0FE;
+    min-height: 100vh;
+}
+
+.content {
+    color: #333333;
+    font-size: 14px;
+}

src/pages/nav_system_content/SystemContentList.js

@@ -115,21 +115,21 @@ const SystemContentList = (props) => {
             // 应急演练管理
             {
                 "path": "/topnavbar00/business/emergencyDrill",
-                icon: <img src={menuicon2} alt="应急演练管理" style={{ width: '16px', height: '16px' }} />,
+                icon: <img src={menuicon3} alt="应急演练管理" style={{ width: '16px', height: '16px' }} />,
                 "key": "/topnavbar00/business/emergencyDrill",
                 "label": "应急演练管理"
             },
             // 应急值班管理
             {
                 "path": "/topnavbar00/business/emergencyDuty",
-                icon: <img src={menuicon2} alt="应急值班管理" style={{ width: '16px', height: '16px' }} />,
+                icon: <img src={menuicon4} alt="应急值班管理" style={{ width: '16px', height: '16px' }} />,
                 "key": "/topnavbar00/business/emergencyDuty",
                 "label": "应急值班管理"
             },
             // 事故接警单
             {
                 "path": "/topnavbar00/business/emergencyAccident",
-                icon: <img src={menuicon2} alt="事故接警单" style={{ width: '16px', height: '16px' }} />,
+                icon: <img src={menuicon1} alt="事故接警单" style={{ width: '16px', height: '16px' }} />,
                 "key": "/topnavbar00/business/emergencyAccident",
                 "label": "事故接警单"
             },