313 lines
9.0 KiB
JavaScript
313 lines
9.0 KiB
JavaScript
|
// DangerJob.js - 危险作业页面组件
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Table, Select, Pagination } from 'antd';
|
|||
|
|
import styles from './../fullinter.less';
|
|||
|
|
|
|||
|
|
const { Option } = Select;
|
|||
|
|
|
|||
|
|
class DangerJob extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
currentPage: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
};
|
|||
|
|
this.isUnmounted = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成公司选项（与 TrainingContent 保持一致）
|
|||
|
|
getCompanyOptions = () => {
|
|||
|
|
const { companyData } = this.props;
|
|||
|
|
if (!companyData || companyData.length === 0) {
|
|||
|
|
return <Option value="">暂无公司</Option>;
|
|||
|
|
}
|
|||
|
|
return companyData.map((company, index) => (
|
|||
|
|
<Option key={company.ID || index} value={company.ID}>
|
|||
|
|
{' '}
|
|||
|
|
{/* 使用 ID 作为 value，与 TrainingContent 一致 */}
|
|||
|
|
{company.NAME}
|
|||
|
|
</Option>
|
|||
|
|
));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理公司筛选变化
|
|||
|
|
handleCompanyChange = (value) => {
|
|||
|
|
const { onCompanyChange } = this.props;
|
|||
|
|
this.setState({ currentPage: 1 }, () => {
|
|||
|
|
if (onCompanyChange) {
|
|||
|
|
onCompanyChange(value);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理页码变化
|
|||
|
|
handlePageChange = (page, pageSize) => {
|
|||
|
|
this.setState({ currentPage: page, pageSize });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理每页条数变化
|
|||
|
|
handleShowSizeChange = (current, size) => {
|
|||
|
|
this.setState({ currentPage: 1, pageSize: size });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取过滤后的数据（添加类型检查和默认值）
|
|||
|
|
getFilteredData = () => {
|
|||
|
|
const { dangerSubData, selectedCompany, companyData } = this.props;
|
|||
|
|
|
|||
|
|
// 确保 dangerSubData 是数组
|
|||
|
|
let dataArray = Array.isArray(dangerSubData) ? dangerSubData : [];
|
|||
|
|
|
|||
|
|
if (dataArray.length === 0) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据选中的公司进行过滤（使用 ID 进行匹配）
|
|||
|
|
if (selectedCompany) {
|
|||
|
|
// 查找选中的公司名称
|
|||
|
|
const selectedCompanyObj = companyData?.find((company) => company.ID === selectedCompany);
|
|||
|
|
const selectedCompanyName = selectedCompanyObj?.NAME;
|
|||
|
|
|
|||
|
|
if (selectedCompanyName) {
|
|||
|
|
return dataArray.filter((item) => item.companyName === selectedCompanyName);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return dataArray;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取当前页数据
|
|||
|
|
getCurrentPageData = () => {
|
|||
|
|
const { currentPage, pageSize } = this.state;
|
|||
|
|
const filteredData = this.getFilteredData();
|
|||
|
|
// 确保 filteredData 是数组
|
|||
|
|
const dataArray = Array.isArray(filteredData) ? filteredData : [];
|
|||
|
|
const startIndex = (currentPage - 1) * pageSize;
|
|||
|
|
const endIndex = startIndex + pageSize;
|
|||
|
|
return {
|
|||
|
|
data: dataArray.slice(startIndex, endIndex),
|
|||
|
|
total: dataArray.length,
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 渲染危险作业表格
|
|||
|
|
renderDangerTable = () => {
|
|||
|
|
const { selectedCompany, companyData } = this.props;
|
|||
|
|
const { currentPage, pageSize } = this.state;
|
|||
|
|
const { data: tableData, total } = this.getCurrentPageData();
|
|||
|
|
|
|||
|
|
if (!tableData || tableData.length === 0) {
|
|||
|
|
// 获取选中的公司名称用于显示
|
|||
|
|
let companyName = '';
|
|||
|
|
if (selectedCompany && companyData) {
|
|||
|
|
const selectedCompanyObj = companyData.find((company) => company.ID === selectedCompany);
|
|||
|
|
companyName = selectedCompanyObj?.NAME || '';
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '50px', color: '#999' }}>
|
|||
|
|
{selectedCompany ? `${companyName}暂无危险作业数据` : '暂无危险作业数据'}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表格列配置
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: '公司',
|
|||
|
|
dataIndex: 'companyName',
|
|||
|
|
key: 'companyName',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 120,
|
|||
|
|
fixed: 'left',
|
|||
|
|
render: (text) => <strong>{text}</strong>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '开始时间',
|
|||
|
|
dataIndex: 'startDate',
|
|||
|
|
key: 'startDate',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 160,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '结束时间',
|
|||
|
|
dataIndex: 'endDate',
|
|||
|
|
key: 'endDate',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 160,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '作业名称',
|
|||
|
|
dataIndex: 'jobName',
|
|||
|
|
key: 'jobName',
|
|||
|
|
align: 'center',
|
|||
|
|
minWidth: 120,
|
|||
|
|
render: (text) => <span style={{ fontWeight: 'bold' }}>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '作业区域',
|
|||
|
|
dataIndex: 'areaName',
|
|||
|
|
key: 'areaName',
|
|||
|
|
align: 'center',
|
|||
|
|
minWidth: 120,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '作业地点',
|
|||
|
|
dataIndex: 'place',
|
|||
|
|
key: 'place',
|
|||
|
|
align: 'center',
|
|||
|
|
minWidth: 150,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '作业人员',
|
|||
|
|
dataIndex: 'users',
|
|||
|
|
key: 'users',
|
|||
|
|
align: 'center',
|
|||
|
|
minWidth: 150,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '监护人',
|
|||
|
|
dataIndex: 'monitor',
|
|||
|
|
key: 'monitor',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 120,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审批领导',
|
|||
|
|
dataIndex: 'approveUsers',
|
|||
|
|
key: 'approveUsers',
|
|||
|
|
align: 'center',
|
|||
|
|
minWidth: 150,
|
|||
|
|
render: (text) => <span>{text || '-'}</span>,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 计算横向滚动宽度（如果列数过多）
|
|||
|
|
const scrollX = columns.reduce((sum, col) => sum + (col.width || 120), 0);
|
|||
|
|
const scrollConfig = scrollX > 1200 ? { x: scrollX } : {};
|
|||
|
|
|
|||
|
|
// 表格数据转换（添加唯一key）
|
|||
|
|
const dataSource = tableData.map((item, index) => ({
|
|||
|
|
key: `${item.companyName}_${item.startDate}_${index}`,
|
|||
|
|
companyName: item.companyName,
|
|||
|
|
startDate: item.startDate,
|
|||
|
|
endDate: item.endDate,
|
|||
|
|
jobName: item.jobName,
|
|||
|
|
areaName: item.areaName,
|
|||
|
|
place: item.place,
|
|||
|
|
users: item.users,
|
|||
|
|
monitor: item.monitor,
|
|||
|
|
approveUsers: item.approveUsers,
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
textAlign: 'center',
|
|||
|
|
padding: '20px 0 0 0',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
fontSize: '17px',
|
|||
|
|
color: '#000',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
当日各公司危险作业清单
|
|||
|
|
</div>
|
|||
|
|
<div style={{ flex: 1, overflow: 'auto', padding: '10px' }}>
|
|||
|
|
<Table
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={dataSource}
|
|||
|
|
pagination={false}
|
|||
|
|
scroll={scrollConfig}
|
|||
|
|
size="small"
|
|||
|
|
bordered
|
|||
|
|
className={styles.certificateTable}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{/* 分页组件 */}
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'flex-end',
|
|||
|
|
padding: '12px 16px',
|
|||
|
|
borderTop: '1px solid #f0f0f0',
|
|||
|
|
backgroundColor: '#fff',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Pagination
|
|||
|
|
current={currentPage}
|
|||
|
|
pageSize={pageSize}
|
|||
|
|
total={total}
|
|||
|
|
showSizeChanger
|
|||
|
|
showQuickJumper
|
|||
|
|
showTotal={(total) => `共 ${total} 条记录`}
|
|||
|
|
onChange={this.handlePageChange}
|
|||
|
|
onShowSizeChange={this.handleShowSizeChange}
|
|||
|
|
pageSizeOptions={['10', '20', '50']}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
this.isUnmounted = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidUpdate(prevProps) {
|
|||
|
|
// 当筛选条件变化时，重置到第一页
|
|||
|
|
if (prevProps.selectedCompany !== this.props.selectedCompany) {
|
|||
|
|
this.setState({ currentPage: 1 });
|
|||
|
|
}
|
|||
|
|
// 当数据变化时，如果当前页没有数据且不是第一页，重置到第一页
|
|||
|
|
if (prevProps.dangerSubData !== this.props.dangerSubData) {
|
|||
|
|
const { currentPage } = this.state;
|
|||
|
|
const filteredData = this.getFilteredData();
|
|||
|
|
const dataArray = Array.isArray(filteredData) ? filteredData : [];
|
|||
|
|
const maxPage = Math.ceil(dataArray.length / this.state.pageSize) || 1;
|
|||
|
|
if (currentPage > maxPage) {
|
|||
|
|
this.setState({ currentPage: 1 });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillUnmount() {
|
|||
|
|
this.isUnmounted = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const { companyData, selectedCompany } = this.props;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={styles.trainingContentWrapper}>
|
|||
|
|
<div className={styles.trainingGrid}>
|
|||
|
|
<div className={styles.trainingRow}>
|
|||
|
|
<div className={styles.trainingCard}>
|
|||
|
|
{/* 公司筛选器 */}
|
|||
|
|
<div className={styles.monthSelectorWrapper}>
|
|||
|
|
<span className={styles.monthSelectorLabel}>选择公司：</span>
|
|||
|
|
<Select
|
|||
|
|
value={selectedCompany}
|
|||
|
|
onChange={this.handleCompanyChange}
|
|||
|
|
style={{ width: 150 }}
|
|||
|
|
className={styles.monthSelect}
|
|||
|
|
allowClear
|
|||
|
|
placeholder="全部公司"
|
|||
|
|
>
|
|||
|
|
{this.getCompanyOptions()}
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
{this.renderDangerTable()}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default DangerJob;
|