main
wangyunfei
7 days ago
parent
b9b83e5c60
commit
468145cf43
@ -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;
|
||||
@ -0,0 +1,3 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,3 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,3 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,3 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #EBF0FE;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
Loading…
Reference in New Issue