|
|
|
|
|
import React from 'react';
|
|
|
import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
|
|
|
import { PhoneOutlined, IdcardOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
import styles from './ResponsibilityImplementation.less';
|
|
|
|
|
|
import upload from '@/assets/business_basic/upload.png';
|
|
|
import download from '@/assets/business_basic/download.png';
|
|
|
import import1 from '@/assets/business_basic/import1.png';
|
|
|
import fire_fighting1 from '@/assets/business_basic/fire_fighting1.png';
|
|
|
import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png';
|
|
|
import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png';
|
|
|
import frameIcon from '@/assets/business_basic/Frame.png';
|
|
|
import background1 from '@/assets/business_basic/background1.png';
|
|
|
import export1 from '@/assets/business_basic/export1.png';
|
|
|
|
|
|
|
|
|
|
|
|
const ResponsibilityImplementation = () => {
|
|
|
|
|
|
// 搜索处理函数
|
|
|
const onSearch = (value) => {
|
|
|
console.log('搜索内容:', value);
|
|
|
// 这里可以添加实际的搜索逻辑
|
|
|
};
|
|
|
|
|
|
const columns = [
|
|
|
{
|
|
|
title:"编号",
|
|
|
dataIndex:"id",
|
|
|
key:"id",
|
|
|
width:80,
|
|
|
},
|
|
|
{
|
|
|
title:"组织代码",
|
|
|
dataIndex:"orgCode",
|
|
|
key:"orgCode",
|
|
|
width:120,
|
|
|
},
|
|
|
{
|
|
|
title:"组织类型",
|
|
|
dataIndex:"orgType",
|
|
|
key:"orgType",
|
|
|
width:120,
|
|
|
},
|
|
|
{
|
|
|
title:"负责人",
|
|
|
dataIndex:"manager",
|
|
|
key:"manager",
|
|
|
width:100,
|
|
|
},
|
|
|
{
|
|
|
title:"所属部门",
|
|
|
dataIndex:"department",
|
|
|
key:"department",
|
|
|
width:120,
|
|
|
},
|
|
|
{
|
|
|
title:"创建时间",
|
|
|
dataIndex:"createTime",
|
|
|
key:"createTime",
|
|
|
width:120,
|
|
|
},
|
|
|
{
|
|
|
title:"人员规模",
|
|
|
dataIndex:"staffCount",
|
|
|
key:"staffCount",
|
|
|
width:100,
|
|
|
},
|
|
|
{
|
|
|
title:"状态",
|
|
|
dataIndex:"status",
|
|
|
key:"status",
|
|
|
width:80,
|
|
|
render: (text, record) => {
|
|
|
const getStatusStyle = (status) => {
|
|
|
if (status === '正常') {
|
|
|
return {
|
|
|
color: '#44BB5F',
|
|
|
backgroundColor: '#D8F7DE',
|
|
|
padding: '4px 8px',
|
|
|
borderRadius: '4px',
|
|
|
fontSize: '12px',
|
|
|
display: 'inline-block'
|
|
|
};
|
|
|
} else if (status === '信息不全') {
|
|
|
return {
|
|
|
color: '#FF8800',
|
|
|
backgroundColor: '#FFF3E9',
|
|
|
padding: '4px 8px',
|
|
|
borderRadius: '4px',
|
|
|
fontSize: '12px',
|
|
|
display: 'inline-block'
|
|
|
};
|
|
|
}
|
|
|
return {};
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<span style={getStatusStyle(text)}>
|
|
|
{text}
|
|
|
</span>
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title:"操作",
|
|
|
dataIndex:"action",
|
|
|
key:"action",
|
|
|
width:120,
|
|
|
render: (text, record) => {
|
|
|
const handleEdit = (record) => {
|
|
|
console.log('编辑记录:', record);
|
|
|
};
|
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
console.log('删除记录:', record);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
gap: '8px',
|
|
|
justifyContent: 'center',
|
|
|
alignItems: 'center'
|
|
|
}}>
|
|
|
<Button
|
|
|
onClick={() => handleEdit(record)}
|
|
|
style={{
|
|
|
color: '#2E4CD4',
|
|
|
backgroundColor: 'transparent',
|
|
|
borderColor: '#E6E9FB',
|
|
|
fontSize: '12px',
|
|
|
height: '28px',
|
|
|
padding: '0 12px'
|
|
|
}}
|
|
|
>
|
|
|
编辑
|
|
|
</Button>
|
|
|
<Button
|
|
|
onClick={() => handleDelete(record)}
|
|
|
style={{
|
|
|
color: '#FF2526',
|
|
|
backgroundColor: 'transparent',
|
|
|
borderColor: '#FFE0E2',
|
|
|
fontSize: '12px',
|
|
|
height: '28px',
|
|
|
padding: '0 12px'
|
|
|
}}
|
|
|
>
|
|
|
删除
|
|
|
</Button>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
];
|
|
|
|
|
|
// 固定的假数据
|
|
|
const tableData = [
|
|
|
{
|
|
|
key: '1',
|
|
|
id: '01',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-19 14:32:15',
|
|
|
staffCount: '15人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '2',
|
|
|
id: '02',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-18 09:25:43',
|
|
|
staffCount: '20人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '3',
|
|
|
id: '03',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-17 16:48:22',
|
|
|
staffCount: '25人',
|
|
|
status: '信息不全'
|
|
|
},
|
|
|
{
|
|
|
key: '4',
|
|
|
id: '04',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-16 11:15:37',
|
|
|
staffCount: '18人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '5',
|
|
|
id: '05',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-15 08:42:56',
|
|
|
staffCount: '22人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '6',
|
|
|
id: '06',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-14 13:27:18',
|
|
|
staffCount: '16人',
|
|
|
status: '信息不全'
|
|
|
},
|
|
|
{
|
|
|
key: '7',
|
|
|
id: '07',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-13 15:33:29',
|
|
|
staffCount: '19人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '8',
|
|
|
id: '08',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-12 10:56:44',
|
|
|
staffCount: '21人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '9',
|
|
|
id: '09',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-11 17:19:52',
|
|
|
staffCount: '17人',
|
|
|
status: '信息不全'
|
|
|
},
|
|
|
{
|
|
|
key: '10',
|
|
|
id: '10',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-10 12:41:07',
|
|
|
staffCount: '23人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '11',
|
|
|
id: '11',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-09 14:08:33',
|
|
|
staffCount: '24人',
|
|
|
status: '正常'
|
|
|
},
|
|
|
{
|
|
|
key: '12',
|
|
|
id: '12',
|
|
|
orgCode: 'DH002',
|
|
|
orgType: '义务消防队',
|
|
|
manager: '张明',
|
|
|
department: '安全管理部',
|
|
|
createTime: '2024-12-08 16:52:14',
|
|
|
staffCount: '26人',
|
|
|
status: '信息不全'
|
|
|
}
|
|
|
];
|
|
|
|
|
|
return (
|
|
|
<div className={styles.XcontainerR}>
|
|
|
{/* 警告提示框 */}
|
|
|
<div className={styles.warningBox}>
|
|
|
<img src={frameIcon} alt="警告" className={styles.warningIcon} />
|
|
|
<span className={styles.warningText}>
|
|
|
有5个消防设备需要维护，3个资质证书即将到期，请及时处理。
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.containerOne}>
|
|
|
|
|
|
<div className={styles.containerOneLeft}>
|
|
|
{/* 第一行：标题和按钮 */}
|
|
|
<div className={styles.leftTopSection}>
|
|
|
<div className={styles.titleLeft}>
|
|
|
<div className={styles.titleIcon}></div>
|
|
|
<div>组织架构图预览</div>
|
|
|
</div>
|
|
|
<div className={styles.buttonGroup}>
|
|
|
<Button className={styles.actionBtn}>
|
|
|
<img src={upload} alt="上传图表" className={styles.btnIcon} />
|
|
|
上传图表
|
|
|
</Button>
|
|
|
<Button className={styles.actionBtn}>
|
|
|
<img src={download} alt="下载" className={styles.btnIcon} />
|
|
|
下载
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二行：图片占位 */}
|
|
|
<div className={styles.leftBottomSection}>
|
|
|
<div className={styles.imagePlaceholder}>
|
|
|
<img src={fire_fighting1} alt="消防1" className={styles.imageIcon1} />
|
|
|
<div className={styles.imageRow}>
|
|
|
<img src={fire_fighting2} alt="消防2" className={styles.imageIcon2} />
|
|
|
<img src={fire_fighting3} alt="消防3" className={styles.imageIcon3} />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div className={styles.containerOneRight}>
|
|
|
{/* 第一行：标题 + 搜索栏 + 下拉选择框 */}
|
|
|
<div className={styles.rightTopSection}>
|
|
|
<div className={styles.rightTopLeft}>
|
|
|
<div className={styles.titleLeft}>
|
|
|
<div className={styles.titleIcon}></div>
|
|
|
<div>成员信息管理</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.rightTopRight}>
|
|
|
<div className={styles.searchGroup}>
|
|
|
|
|
|
<Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 200}} />
|
|
|
<Select
|
|
|
defaultValue="全部组织"
|
|
|
className={styles.organizationSelect}
|
|
|
options={[
|
|
|
{ value: '全部组织', label: '全部组织' },
|
|
|
{ value: '技术部', label: '技术部' },
|
|
|
{ value: '生产部', label: '生产部' },
|
|
|
{ value: '安全部', label: '安全部' },
|
|
|
]}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二行：三个小块 */}
|
|
|
<div className={styles.rightBottomSection}>
|
|
|
<div className={styles.threeBlocksContainer}>
|
|
|
<div className={styles.blockItem}>
|
|
|
<div className={styles.blockContent}>
|
|
|
<div className={styles.backgroundContainer}>
|
|
|
{/* 第一个块：姓名和单位 */}
|
|
|
<div className={styles.infoBlock}>
|
|
|
<div className={styles.nameText}>张明</div>
|
|
|
<div className={styles.unitText}>东义区消防队</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二个块：电话 */}
|
|
|
<div className={styles.infoBlock}>
|
|
|
<PhoneOutlined className={styles.infoIcon} />
|
|
|
<span className={styles.infoText}>132****3847</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第三个块：身份证 */}
|
|
|
<div className={styles.infoBlock}>
|
|
|
<IdcardOutlined className={styles.infoIcon} />
|
|
|
<span className={styles.infoText}>1304************10</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第四个块：职位标签 */}
|
|
|
<div className={styles.infoBlock}>
|
|
|
<div className={styles.tagContainer}>
|
|
|
<div className={styles.tagBlue1}>队长</div>
|
|
|
<div className={styles.tagBlue2}>消防工程师</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第五个块：证书状态 */}
|
|
|
<div className={styles.infoBlock}>
|
|
|
<div className={styles.tagContainer}>
|
|
|
<div className={styles.tagBlue3}>消防工程师</div>
|
|
|
<div className={styles.tagYellow}>证书7天后到期</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第六个块：操作按钮 */}
|
|
|
<div className={styles.actionBlock}>
|
|
|
<div className={styles.buttonContainer}>
|
|
|
<Button className={styles.editBtn}>编辑</Button>
|
|
|
<Button className={styles.deleteBtn}>删除</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.blockItem}>
|
|
|
<div className={styles.blockContent}>
|
|
|
<div className={styles.backgroundContainer2}>
|
|
|
{/* 第一个块：姓名和单位 */}
|
|
|
<div className={styles.infoBlock2}>
|
|
|
<span className={styles.nameText2}>李小明</span>
|
|
|
<span className={styles.unitText2}>消防支队</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二个块：电话 */}
|
|
|
<div className={styles.infoBlock2}>
|
|
|
<PhoneOutlined className={styles.infoIcon2} />
|
|
|
<span className={styles.infoText2}>138****5678</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第三个块：身份证 */}
|
|
|
<div className={styles.infoBlock2}>
|
|
|
<IdcardOutlined className={styles.infoIcon2} />
|
|
|
<span className={styles.infoText2}>1304************20</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第四个块：职位标签 */}
|
|
|
<div className={styles.infoBlock2}>
|
|
|
<div className={styles.tagContainer2}>
|
|
|
<div className={styles.tagBlue4}>副队长</div>
|
|
|
<div className={styles.tagBlue5}>安全员</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第五个块：证书状态 */}
|
|
|
<div className={styles.infoBlock2}>
|
|
|
<div className={styles.tagContainer2}>
|
|
|
<div className={styles.tagBlue6}>安全员证</div>
|
|
|
<div className={styles.tagGreen}>证书正常</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第六个块：操作按钮 */}
|
|
|
<div className={styles.actionBlock2}>
|
|
|
<div className={styles.buttonContainer2}>
|
|
|
<Button className={styles.editBtn2}>编辑</Button>
|
|
|
<Button className={styles.deleteBtn2}>删除</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.blockItem}>
|
|
|
<div className={styles.blockContent}>
|
|
|
<div className={styles.backgroundContainer3}>
|
|
|
{/* 第一个块：姓名和单位 */}
|
|
|
<div className={styles.infoBlock3}>
|
|
|
<span className={styles.nameText3}>王小红</span>
|
|
|
<span className={styles.unitText3}>消防中队</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二个块：电话 */}
|
|
|
<div className={styles.infoBlock3}>
|
|
|
<PhoneOutlined className={styles.infoIcon3} />
|
|
|
<span className={styles.infoText3}>139****9012</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第三个块：身份证 */}
|
|
|
<div className={styles.infoBlock3}>
|
|
|
<IdcardOutlined className={styles.infoIcon3} />
|
|
|
<span className={styles.infoText3}>1304************30</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 第四个块：职位标签 */}
|
|
|
<div className={styles.infoBlock3}>
|
|
|
<div className={styles.tagContainer3}>
|
|
|
<div className={styles.tagBlue7}>队员</div>
|
|
|
<div className={styles.tagBlue8}>技术员</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第五个块：证书状态 */}
|
|
|
<div className={styles.infoBlock3}>
|
|
|
<div className={styles.tagContainer3}>
|
|
|
<div className={styles.tagBlue9}>技术员证</div>
|
|
|
<div className={styles.tagOrange}>证书3天后到期</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第六个块：操作按钮 */}
|
|
|
<div className={styles.actionBlock3}>
|
|
|
<div className={styles.buttonContainer3}>
|
|
|
<Button className={styles.editBtn3}>编辑</Button>
|
|
|
<Button className={styles.deleteBtn3}>删除</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.containerTwo}>
|
|
|
{/* 第一块：标题 */}
|
|
|
<div className={styles.containerTwoTitle}>
|
|
|
<div className={styles.titleLeft}>
|
|
|
<div className={styles.titleIcon}></div>
|
|
|
<div>组织架构管理</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二个大块：搜索和按钮 */}
|
|
|
<div className={styles.containerTwoActions}>
|
|
|
<div className={styles.searchSection}>
|
|
|
<Input.Search placeholder="搜索姓名、工号..." onSearch={onSearch} style={{ width: 180 }} />
|
|
|
</div>
|
|
|
<div className={styles.buttonSection}>
|
|
|
<Button className={styles.addBtn}>
|
|
|
<PlusOutlined className={styles.addIcon} />
|
|
|
新增组织
|
|
|
</Button>
|
|
|
<Button className={styles.importBtn}>
|
|
|
<img src={import1} alt="批量导入" className={styles.importIcon} />
|
|
|
批量导入
|
|
|
</Button>
|
|
|
<Button className={styles.exportBtn}>
|
|
|
<img src={export1} alt="批量导出" className={styles.exportIcon} />
|
|
|
批量导出
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第三个大块：表格 */}
|
|
|
<div className={styles.containerTwoTable}>
|
|
|
<StandardTable
|
|
|
columns={columns}
|
|
|
data={{
|
|
|
list: tableData, // ======== 表格数据列表 ========
|
|
|
pagination: { // ======== 分页配置 ========
|
|
|
currentPage: 1, // ======== 当前页码 ========
|
|
|
pageSize: 5, // ======== 每页显示10条数据 ========
|
|
|
total: tableData.length, // ======== 总数据条数 ========
|
|
|
} // ======== 分页配置结束 ========
|
|
|
}} // ======== 数据对象结束 ========
|
|
|
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ========
|
|
|
onSelectRow={() => {}} // ======== 行选择事件处理函数 ========
|
|
|
onChange={() => {}} // ======== 表格变化事件处理函数 ========
|
|
|
pagination={{
|
|
|
currentPage: 1,
|
|
|
pageSize: 5,
|
|
|
total: tableData.length,
|
|
|
showSizeChanger: false,
|
|
|
showQuickJumper: true,
|
|
|
showTotal: (total, range) =>
|
|
|
`共 ${total} 条`,
|
|
|
locale: {
|
|
|
jump_to: '前往',
|
|
|
page: '页',
|
|
|
items_per_page: '条/页',
|
|
|
}
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
export default ResponsibilityImplementation;
|
