diff --git a/src/pages/business_emergencyPlan/EmergencyPlan.js b/src/pages/business_emergencyPlan/EmergencyPlan.js index 9c373f3..17244b0 100644 --- a/src/pages/business_emergencyPlan/EmergencyPlan.js +++ b/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 OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警 -import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonnelManagement'; //环保人员管理 -import EvaluationReport from './components/EvaluationReport'; //评估报告 -import EquipmentManagement from './components/EquipmentManagement'; //环保设备设施管理 -import PollutionSourceManagement from './components/PollutionSourceManagement'; //污染源管理 +import Swhpqy from './components/swhpqy'; //涉危化品企业 +import Whp from './components/whp'; //危化品 +import Sgla from './components/sgla'; //事故案例 +import Flfg from './components/flfg'; //法律法规 const SafeMajorHazardList = () => { - const [activeModule, setActiveModule] = useState('organization'); - - const handleModuleClick = (module) => { - setActiveModule(module) - } + const [activeTab, setActiveTab] = useState('swhpqy'); + const handleTabChange = (key) => { + setActiveTab(key); + }; - const renderModule = () => { - switch (activeModule) { - case 'organization': - return ; - case 'equipment': - return ; - case 'firefighting': - return ; - case 'other': - return ; - case 'equipmentManagement': - return ; - case 'pollutionSource': - return ; - default: - return ; + const tabItems = [ + { + key: 'swhpqy', + label: '涉危化品企业', + children: + }, + { + key: 'whp', + label: '危化品', + children: + }, + { + key: 'sgla', + label: '事故案例', + children: + }, + { + key: 'flfg', + label: '法律法规', + children: } - }; + ]; return ( -
+
- - - - - -
-
- {renderModule()} +
); diff --git a/src/pages/business_emergencyPlan/EmergencyPlan.less b/src/pages/business_emergencyPlan/EmergencyPlan.less index 08e9b05..1233504 100644 --- a/src/pages/business_emergencyPlan/EmergencyPlan.less +++ b/src/pages/business_emergencyPlan/EmergencyPlan.less @@ -1,22 +1,21 @@ -.container { +.container1 { background-color: transparent; width: 100%; height: 89vh; overflow: hidden; - display: flex; - flex-direction: column; + display: flex; + 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: #999999 !important; + color: #333333 !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 { - background: linear-gradient(98.03deg, #00E49C 0.68%, #00D841 98.3%) !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; - } - } + // &.active { + // color: #2E4CD4 !important; + // } } } @@ -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; + } + } } \ No newline at end of file diff --git a/src/pages/business_emergencyPlan/components/EmergencyMap.js b/src/pages/business_emergencyPlan/components/EmergencyMap.js new file mode 100644 index 0000000..aaa53a0 --- /dev/null +++ b/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 ( +
+ +
+ 待开发一张图 +
+
+
+ ); +}; + +export default EmergencyMap; diff --git a/src/pages/business_emergencyPlan/components/EmergencyMap.less b/src/pages/business_emergencyPlan/components/EmergencyMap.less new file mode 100644 index 0000000..163500c --- /dev/null +++ b/src/pages/business_emergencyPlan/components/EmergencyMap.less @@ -0,0 +1,3 @@ +.container { + padding: 20px; +} diff --git a/src/pages/business_emergencyPlan/components/EmergencyRescue.js b/src/pages/business_emergencyPlan/components/EmergencyRescue.js new file mode 100644 index 0000000..2fb2045 --- /dev/null +++ b/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 ( +
+ +
+ 救援 +
+
+
+ ); +}; + +export default EmergencyRescue; diff --git a/src/pages/business_emergencyPlan/components/EmergencyRescue.less b/src/pages/business_emergencyPlan/components/EmergencyRescue.less new file mode 100644 index 0000000..163500c --- /dev/null +++ b/src/pages/business_emergencyPlan/components/EmergencyRescue.less @@ -0,0 +1,3 @@ +.container { + padding: 20px; +} diff --git a/src/pages/business_emergencyPlan/components/EmergencyResource.js b/src/pages/business_emergencyPlan/components/EmergencyResource.js new file mode 100644 index 0000000..ac40473 --- /dev/null +++ b/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 ; + case '应急物资': + return ; + case '应急队伍': + return ; + case '应急专家': + return ; + case '应急疏散点': + return ; + case '应急消防点': + return ; + case '周边医院': + return ; + default: + return ; + } + }; + + return ( +
+
+ {buttonList.map((buttonName) => ( +
handleButtonClick(buttonName)} + > + {buttonName} +
+ ))} +
+
+ {renderContent()} +
+
+ ); +}; + +export default EmergencyResource; diff --git a/src/pages/business_emergencyPlan/components/EmergencyResource.less b/src/pages/business_emergencyPlan/components/EmergencyResource.less new file mode 100644 index 0000000..7c83a57 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/business_emergencyPlan/components/flfg.js b/src/pages/business_emergencyPlan/components/flfg.js new file mode 100644 index 0000000..e665054 --- /dev/null +++ b/src/pages/business_emergencyPlan/components/flfg.js @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './flfg.less'; + +const Flfg = () => { + return ( +
+
+

法律法规

+

内容待开发

+
+
+ ); +}; + +export default Flfg; diff --git a/src/pages/business_emergencyPlan/components/flfg.less b/src/pages/business_emergencyPlan/components/flfg.less new file mode 100644 index 0000000..4c5baa2 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjdw.js b/src/pages/business_emergencyPlan/components/secondary_menu/yjdw.js new file mode 100644 index 0000000..9a9ef1f --- /dev/null +++ b/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 ( +
+
+ 应急队伍内容 +
+
+ ); +}; + +export default Yjdw; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjdw.less b/src/pages/business_emergencyPlan/components/secondary_menu/yjdw.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjssd.js b/src/pages/business_emergencyPlan/components/secondary_menu/yjssd.js new file mode 100644 index 0000000..a98df6a --- /dev/null +++ b/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 ( +
+
+ 应急疏散点内容 +
+
+ ); +}; + +export default Yjssd; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjssd.less b/src/pages/business_emergencyPlan/components/secondary_menu/yjssd.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjwz.js b/src/pages/business_emergencyPlan/components/secondary_menu/yjwz.js new file mode 100644 index 0000000..a2ca013 --- /dev/null +++ b/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 ( +
+
+ 应急物资内容 +
+
+ ); +}; + +export default Yjwz; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjwz.less b/src/pages/business_emergencyPlan/components/secondary_menu/yjwz.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjxf.js b/src/pages/business_emergencyPlan/components/secondary_menu/yjxf.js new file mode 100644 index 0000000..42ecc10 --- /dev/null +++ b/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 ( +
+
+ 应急消防点内容 +
+
+ ); +}; + +export default Yjxf; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjxf.less b/src/pages/business_emergencyPlan/components/secondary_menu/yjxf.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjzbry.js b/src/pages/business_emergencyPlan/components/secondary_menu/yjzbry.js new file mode 100644 index 0000000..659d641 --- /dev/null +++ b/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) => ( +
+ + +
+ ), + }, + ]; + + // 搜索处理 + 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 ( +
+ {/* 页面标题 */} +
+
+

应急值班人员

+
+ + {/* 搜索和操作区域 */} +
+
+ + +
+
+ + +
+
+ + {/* 数据表格 */} +
+ +
+
+ ); +}; + +export default Yjzbry; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjzbry.less b/src/pages/business_emergencyPlan/components/secondary_menu/yjzbry.less new file mode 100644 index 0000000..cd006e3 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjzj.js b/src/pages/business_emergencyPlan/components/secondary_menu/yjzj.js new file mode 100644 index 0000000..3da64e2 --- /dev/null +++ b/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 ( +
+
+ 应急专家内容 +
+
+ ); +}; + +export default Yjzj; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/yjzj.less b/src/pages/business_emergencyPlan/components/secondary_menu/yjzj.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/zbhy.js b/src/pages/business_emergencyPlan/components/secondary_menu/zbhy.js new file mode 100644 index 0000000..1ddae32 --- /dev/null +++ b/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 ( +
+
+ 周边医院内容 +
+
+ ); +}; + +export default Zbhy; diff --git a/src/pages/business_emergencyPlan/components/secondary_menu/zbhy.less b/src/pages/business_emergencyPlan/components/secondary_menu/zbhy.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyPlan/components/sgla.js b/src/pages/business_emergencyPlan/components/sgla.js new file mode 100644 index 0000000..f6e397f --- /dev/null +++ b/src/pages/business_emergencyPlan/components/sgla.js @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './sgla.less'; + +const Sgla = () => { + return ( +
+
+

事故案例

+

内容待开发

+
+
+ ); +}; + +export default Sgla; diff --git a/src/pages/business_emergencyPlan/components/sgla.less b/src/pages/business_emergencyPlan/components/sgla.less new file mode 100644 index 0000000..4c5baa2 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/business_emergencyPlan/components/swhpqy.js b/src/pages/business_emergencyPlan/components/swhpqy.js new file mode 100644 index 0000000..cc36fed --- /dev/null +++ b/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) => ( +
+ + +
+ ), + }, + ]; + + // 搜索处理 + 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 ( +
+ {/* 页面标题 */} +
+
+

危化品

+
+ + {/* 搜索和操作区域 */} +
+
+ setSearchValue(e.target.value)} + allowClear + className={styles.searchInput} + /> + +
+
+ + {/* 数据表格 */} +
+ +
+
+ ); +}; + +export default Swhpqy; diff --git a/src/pages/business_emergencyPlan/components/swhpqy.less b/src/pages/business_emergencyPlan/components/swhpqy.less new file mode 100644 index 0000000..9e46a34 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/business_emergencyPlan/components/whp.js b/src/pages/business_emergencyPlan/components/whp.js new file mode 100644 index 0000000..623383b --- /dev/null +++ b/src/pages/business_emergencyPlan/components/whp.js @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './whp.less'; + +const Whp = () => { + return ( +
+
+

危化品

+

内容待开发

+
+
+ ); +}; + +export default Whp; diff --git a/src/pages/business_emergencyPlan/components/whp.less b/src/pages/business_emergencyPlan/components/whp.less new file mode 100644 index 0000000..4c5baa2 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/business_emergencyResource/EmergencyResource.js b/src/pages/business_emergencyResource/EmergencyResource.js index 07ab758..6e4f908 100644 --- a/src/pages/business_emergencyResource/EmergencyResource.js +++ b/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 ; case 'pollutionSource': return ; + case 'emergencyMap': + return ; + case 'emergencyResource': + return ; + case 'emergencyRescue': + return ; default: return ; } @@ -46,26 +55,41 @@ const SafeMajorHazardList = () => { onClick={() => handleModuleClick("organization")} >合规性管理 - - - - + + +
{renderModule()} diff --git a/src/pages/business_emergencyResource/EmergencyResource.less b/src/pages/business_emergencyResource/EmergencyResource.less index 08e9b05..8ecfb57 100644 --- a/src/pages/business_emergencyResource/EmergencyResource.less +++ b/src/pages/business_emergencyResource/EmergencyResource.less @@ -3,12 +3,13 @@ width: 100%; height: 89vh; overflow: hidden; - display: flex; - flex-direction: column; + display: flex; + 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; - box-shadow: 0px 2px 2px 0px #AEEDDE !important; - color: #FFFFFF !important; - + color: #2E4CD4 !important; + &::after { content: ''; - width: 28px; - height: 5px; - background-color: #FFFFFF; - border-radius: 6px; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 4px; + background-color: #2E4CD4; opacity: 1; } } diff --git a/src/pages/business_emergencyResource/components/EmergencyMap.js b/src/pages/business_emergencyResource/components/EmergencyMap.js new file mode 100644 index 0000000..aaa53a0 --- /dev/null +++ b/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 ( +
+ +
+ 待开发一张图 +
+
+
+ ); +}; + +export default EmergencyMap; diff --git a/src/pages/business_emergencyResource/components/EmergencyMap.less b/src/pages/business_emergencyResource/components/EmergencyMap.less new file mode 100644 index 0000000..163500c --- /dev/null +++ b/src/pages/business_emergencyResource/components/EmergencyMap.less @@ -0,0 +1,3 @@ +.container { + padding: 20px; +} diff --git a/src/pages/business_emergencyResource/components/EmergencyRescue.js b/src/pages/business_emergencyResource/components/EmergencyRescue.js new file mode 100644 index 0000000..2fb2045 --- /dev/null +++ b/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 ( +
+ +
+ 救援 +
+
+
+ ); +}; + +export default EmergencyRescue; diff --git a/src/pages/business_emergencyResource/components/EmergencyRescue.less b/src/pages/business_emergencyResource/components/EmergencyRescue.less new file mode 100644 index 0000000..163500c --- /dev/null +++ b/src/pages/business_emergencyResource/components/EmergencyRescue.less @@ -0,0 +1,3 @@ +.container { + padding: 20px; +} diff --git a/src/pages/business_emergencyResource/components/EmergencyResource.js b/src/pages/business_emergencyResource/components/EmergencyResource.js new file mode 100644 index 0000000..ac40473 --- /dev/null +++ b/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 ; + case '应急物资': + return ; + case '应急队伍': + return ; + case '应急专家': + return ; + case '应急疏散点': + return ; + case '应急消防点': + return ; + case '周边医院': + return ; + default: + return ; + } + }; + + return ( +
+
+ {buttonList.map((buttonName) => ( +
handleButtonClick(buttonName)} + > + {buttonName} +
+ ))} +
+
+ {renderContent()} +
+
+ ); +}; + +export default EmergencyResource; diff --git a/src/pages/business_emergencyResource/components/EmergencyResource.less b/src/pages/business_emergencyResource/components/EmergencyResource.less new file mode 100644 index 0000000..7c83a57 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjdw.js b/src/pages/business_emergencyResource/components/secondary_menu/yjdw.js new file mode 100644 index 0000000..9a9ef1f --- /dev/null +++ b/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 ( +
+
+ 应急队伍内容 +
+
+ ); +}; + +export default Yjdw; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjdw.less b/src/pages/business_emergencyResource/components/secondary_menu/yjdw.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjssd.js b/src/pages/business_emergencyResource/components/secondary_menu/yjssd.js new file mode 100644 index 0000000..a98df6a --- /dev/null +++ b/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 ( +
+
+ 应急疏散点内容 +
+
+ ); +}; + +export default Yjssd; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjssd.less b/src/pages/business_emergencyResource/components/secondary_menu/yjssd.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjwz.js b/src/pages/business_emergencyResource/components/secondary_menu/yjwz.js new file mode 100644 index 0000000..a2ca013 --- /dev/null +++ b/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 ( +
+
+ 应急物资内容 +
+
+ ); +}; + +export default Yjwz; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjwz.less b/src/pages/business_emergencyResource/components/secondary_menu/yjwz.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjxf.js b/src/pages/business_emergencyResource/components/secondary_menu/yjxf.js new file mode 100644 index 0000000..42ecc10 --- /dev/null +++ b/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 ( +
+
+ 应急消防点内容 +
+
+ ); +}; + +export default Yjxf; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjxf.less b/src/pages/business_emergencyResource/components/secondary_menu/yjxf.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjzbry.js b/src/pages/business_emergencyResource/components/secondary_menu/yjzbry.js new file mode 100644 index 0000000..659d641 --- /dev/null +++ b/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) => ( +
+ + +
+ ), + }, + ]; + + // 搜索处理 + 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 ( +
+ {/* 页面标题 */} +
+
+

应急值班人员

+
+ + {/* 搜索和操作区域 */} +
+
+ + +
+
+ + +
+
+ + {/* 数据表格 */} +
+ +
+
+ ); +}; + +export default Yjzbry; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjzbry.less b/src/pages/business_emergencyResource/components/secondary_menu/yjzbry.less new file mode 100644 index 0000000..cd006e3 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjzj.js b/src/pages/business_emergencyResource/components/secondary_menu/yjzj.js new file mode 100644 index 0000000..3da64e2 --- /dev/null +++ b/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 ( +
+
+ 应急专家内容 +
+
+ ); +}; + +export default Yjzj; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/yjzj.less b/src/pages/business_emergencyResource/components/secondary_menu/yjzj.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/business_emergencyResource/components/secondary_menu/zbhy.js b/src/pages/business_emergencyResource/components/secondary_menu/zbhy.js new file mode 100644 index 0000000..1ddae32 --- /dev/null +++ b/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 ( +
+
+ 周边医院内容 +
+
+ ); +}; + +export default Zbhy; diff --git a/src/pages/business_emergencyResource/components/secondary_menu/zbhy.less b/src/pages/business_emergencyResource/components/secondary_menu/zbhy.less new file mode 100644 index 0000000..2714b8d --- /dev/null +++ b/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; +} diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index 602b2dc..8af3e3a 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -115,21 +115,21 @@ const SystemContentList = (props) => { // 应急演练管理 { "path": "/topnavbar00/business/emergencyDrill", - icon: 应急演练管理, + icon: 应急演练管理, "key": "/topnavbar00/business/emergencyDrill", "label": "应急演练管理" }, // 应急值班管理 { "path": "/topnavbar00/business/emergencyDuty", - icon: 应急值班管理, + icon: 应急值班管理, "key": "/topnavbar00/business/emergencyDuty", "label": "应急值班管理" }, // 事故接警单 { "path": "/topnavbar00/business/emergencyAccident", - icon: 事故接警单, + icon: 事故接警单, "key": "/topnavbar00/business/emergencyAccident", "label": "事故接警单" },