613 lines
18 KiB
JavaScript
613 lines
18 KiB
JavaScript
// DangerJob.js - 危险作业页面组件
|
||
import React from 'react';
|
||
import { Table, Select, Pagination, DatePicker } from 'antd';
|
||
import echarts from 'echarts';
|
||
import styles from './../fullinter.less';
|
||
|
||
const { Option } = Select;
|
||
|
||
class DangerJob extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
};
|
||
this.echartsInstances = {
|
||
dangerOperationChart: null, // 当日工作票统计柱状图
|
||
};
|
||
this.chartResizeHandlers = {};
|
||
this.isUnmounted = false;
|
||
// 添加缓存，用于比较数据是否真正变化
|
||
this.lastJobTodayQty = null;
|
||
}
|
||
|
||
// 生成公司选项（与 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}>
|
||
{company.NAME}
|
||
</Option>
|
||
));
|
||
};
|
||
|
||
// 处理公司筛选变化
|
||
handleCompanyChange = (value) => {
|
||
const { onCompanyChange } = this.props;
|
||
this.setState({ currentPage: 1 }, () => {
|
||
if (onCompanyChange) {
|
||
onCompanyChange(value);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 处理开始日期变化
|
||
startChange = (value) => {
|
||
const { onStartChange } = this.props;
|
||
this.setState({ currentPage: 1 }, () => {
|
||
if (onStartChange) {
|
||
onStartChange(value);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 处理结束日期变化
|
||
endChange = (value) => {
|
||
const { onEndChange } = this.props;
|
||
this.setState({ currentPage: 1 }, () => {
|
||
if (onEndChange) {
|
||
onEndChange(value);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 处理页码变化
|
||
handlePageChange = (page, pageSize) => {
|
||
this.setState({ currentPage: page, pageSize });
|
||
};
|
||
|
||
// 等待DOM元素加载完成
|
||
waitForElement = (elementId, maxRetries = 10) => {
|
||
return new Promise((resolve) => {
|
||
let retries = 0;
|
||
const checkInterval = setInterval(() => {
|
||
const element = document.getElementById(elementId);
|
||
if (element || retries >= maxRetries) {
|
||
clearInterval(checkInterval);
|
||
resolve(!!element);
|
||
}
|
||
retries++;
|
||
}, 50);
|
||
});
|
||
};
|
||
|
||
// 设置resize监听
|
||
setupResizeHandler = (chartName, renderMethod) => {
|
||
const resizeHandler = () => {
|
||
if (this.echartsInstances[chartName] && !this.isUnmounted) {
|
||
this.echartsInstances[chartName].resize();
|
||
}
|
||
};
|
||
this.chartResizeHandlers[chartName] = resizeHandler;
|
||
window.addEventListener('resize', resizeHandler);
|
||
};
|
||
|
||
// 图表: 当日工作票统计柱状图
|
||
renderDangerOperationChart = async () => {
|
||
if (this.isUnmounted) return;
|
||
const elementExists = await this.waitForElement('dangerOperationChart');
|
||
if (!elementExists || this.isUnmounted) return;
|
||
|
||
if (this.echartsInstances.dangerOperationChart) {
|
||
this.echartsInstances.dangerOperationChart.dispose();
|
||
this.echartsInstances.dangerOperationChart = null;
|
||
}
|
||
|
||
const chartDom = document.getElementById('dangerOperationChart');
|
||
if (!chartDom) return;
|
||
|
||
this.echartsInstances.dangerOperationChart = echarts.init(chartDom);
|
||
|
||
const { jobTodayQty } = this.props;
|
||
let linkData = jobTodayQty || [];
|
||
|
||
// 如果没有数据，显示“暂无数据”提示
|
||
if (linkData.length === 0) {
|
||
this.echartsInstances.dangerOperationChart.setOption({
|
||
title: {
|
||
text: '当日工作票的统计数量',
|
||
x: 'center',
|
||
y: '25%',
|
||
textStyle: { fontSize: 16, color: '#999' },
|
||
},
|
||
graphic: {
|
||
type: 'text',
|
||
left: 'center',
|
||
top: 'middle',
|
||
style: {
|
||
text: '暂无数据',
|
||
fill: '#999',
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 有数据时正常渲染图表
|
||
const xAxisData = linkData.map((item) => item.name);
|
||
const seriesData = linkData.map((item) => item.qty);
|
||
|
||
const option = {
|
||
title: {
|
||
text: '当日工作票的统计数量',
|
||
x: 'center',
|
||
y: '5%',
|
||
textStyle: { fontSize: 16, color: '#000', fontWeight: 'bold' },
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
formatter: function (params) {
|
||
const color = params[0].color;
|
||
return `<div style="display: flex; align-items: center;">
|
||
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${color}; margin-right: 8px;"></span>
|
||
<span>${params[0].name}:</span>
|
||
<span style="font-weight: bold; margin-left: 8px; font-size: 16px;">${params[0].value}</span>
|
||
</div>`;
|
||
},
|
||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||
borderColor: '#4285F4',
|
||
borderWidth: 1,
|
||
textStyle: { color: '#000', fontSize: 14 },
|
||
},
|
||
grid: {
|
||
left: '8%',
|
||
right: '5%',
|
||
top: '18%',
|
||
bottom: '8%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: xAxisData,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
textStyle: { color: '#000' },
|
||
rotate: xAxisData.length > 4 ? 15 : 0,
|
||
interval: 0,
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
show: true,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: { color: '#000' },
|
||
},
|
||
splitLine: { show: false },
|
||
name: '工作票数量',
|
||
nameTextStyle: { fontSize: 12 },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '危险作业数量',
|
||
type: 'bar',
|
||
data: seriesData,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#4285F4',
|
||
borderRadius: [12, 12, 0, 0],
|
||
},
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: { color: '#4285F4', fontSize: 12, fontWeight: 'bold' },
|
||
formatter: (params) => `${params.value}`,
|
||
},
|
||
barWidth: '50%',
|
||
barMaxWidth: 60,
|
||
},
|
||
],
|
||
};
|
||
|
||
this.echartsInstances.dangerOperationChart.setOption(option);
|
||
this.setupResizeHandler('dangerOperationChart', this.renderDangerOperationChart);
|
||
};
|
||
|
||
// 初始化所有图表
|
||
initAllCharts = () => {
|
||
if (this.isUnmounted) return;
|
||
setTimeout(() => {
|
||
if (this.isUnmounted) return;
|
||
this.renderDangerOperationChart();
|
||
}, 100);
|
||
};
|
||
|
||
// 销毁所有图表
|
||
disposeAllCharts = () => {
|
||
Object.keys(this.echartsInstances).forEach((key) => {
|
||
if (this.echartsInstances[key]) {
|
||
try {
|
||
this.echartsInstances[key].dispose();
|
||
} catch (e) {
|
||
console.warn(`Dispose chart ${key} error:`, e);
|
||
}
|
||
this.echartsInstances[key] = null;
|
||
}
|
||
});
|
||
|
||
Object.keys(this.chartResizeHandlers).forEach((key) => {
|
||
if (this.chartResizeHandlers[key]) {
|
||
window.removeEventListener('resize', this.chartResizeHandlers[key]);
|
||
}
|
||
});
|
||
this.chartResizeHandlers = {};
|
||
};
|
||
|
||
// 获取过滤后的数据（添加类型检查和默认值）
|
||
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,
|
||
};
|
||
};
|
||
|
||
// 添加 shouldComponentUpdate 优化性能
|
||
shouldComponentUpdate(nextProps, nextState) {
|
||
// 检查状态变化
|
||
if (this.state.currentPage !== nextState.currentPage || this.state.pageSize !== nextState.pageSize) {
|
||
return true;
|
||
}
|
||
// 检查 props 变化
|
||
if (
|
||
this.props.jobTodayQty !== nextProps.jobTodayQty ||
|
||
this.props.dangerSubData !== nextProps.dangerSubData ||
|
||
this.props.selectedCompany !== nextProps.selectedCompany ||
|
||
this.props.selectedStartDate !== nextProps.selectedStartDate ||
|
||
this.props.selectedEndDate !== nextProps.selectedEndDate ||
|
||
this.props.companyData !== nextProps.companyData
|
||
) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 渲染危险作业表格
|
||
renderDangerTable = () => {
|
||
const { selectedCompany, companyData } = this.props;
|
||
const { currentPage, pageSize } = this.state;
|
||
const { data: tableData, total } = this.getCurrentPageData();
|
||
|
||
// 如果没有数据，返回空
|
||
if (!tableData || tableData.length === 0) {
|
||
return (
|
||
<div
|
||
style={{
|
||
textAlign: 'center',
|
||
padding: '50px',
|
||
color: '#999',
|
||
fontSize: '20px',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
flex: 1,
|
||
}}
|
||
>
|
||
暂无危险作业数据
|
||
</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>,
|
||
},
|
||
];
|
||
|
||
// 不设置 y 滚动，让表格自然高度，由外层容器控制滚动
|
||
const scrollConfig = { x: columns.length * 100, y: 320 };
|
||
// 表格数据转换（添加唯一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, minHeight: 0, padding: '10px' }}>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={dataSource}
|
||
pagination={false}
|
||
scroll={scrollConfig}
|
||
size="middle"
|
||
bordered
|
||
className={styles.certificateTable}
|
||
/>
|
||
</div>
|
||
{/* 分页组件 */}
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: '12px 16px',
|
||
borderTop: '1px solid #f0f0f0',
|
||
backgroundColor: '#fff',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
<div>
|
||
<span style={{ marginRight: '8px' }}>每页显示：</span>
|
||
<Select
|
||
value={pageSize}
|
||
onChange={(size) => {
|
||
this.setState({ currentPage: 1, pageSize: size });
|
||
}}
|
||
style={{ width: 80 }}
|
||
>
|
||
<Option value={10}>10条</Option>
|
||
<Option value={20}>20条</Option>
|
||
</Select>
|
||
</div>
|
||
<Pagination
|
||
current={currentPage}
|
||
pageSize={pageSize}
|
||
total={total}
|
||
showQuickJumper
|
||
showTotal={(total) => `共 ${total} 条记录`}
|
||
onChange={this.handlePageChange}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
componentDidMount() {
|
||
this.isUnmounted = false;
|
||
this.initAllCharts();
|
||
}
|
||
|
||
componentDidUpdate(prevProps) {
|
||
// 当筛选条件变化时，重置到第一页
|
||
if (prevProps.selectedCompany !== this.props.selectedCompany) {
|
||
this.setState({ currentPage: 1 });
|
||
}
|
||
if (prevProps.selectedStartDate !== this.props.selectedStartDate) {
|
||
this.setState({ currentPage: 1 });
|
||
}
|
||
if (prevProps.selectedEndDate !== this.props.selectedEndDate) {
|
||
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 });
|
||
}
|
||
}
|
||
|
||
// 检查 jobTodayQty 是否变化，只在数据真正变化时重新渲染图表
|
||
const prevJobTodayQty = prevProps.jobTodayQty;
|
||
const currentJobTodayQty = this.props.jobTodayQty;
|
||
const jobTodayQtyChanged = JSON.stringify(prevJobTodayQty) !== JSON.stringify(currentJobTodayQty);
|
||
|
||
if (jobTodayQtyChanged) {
|
||
this.renderDangerOperationChart();
|
||
}
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.isUnmounted = true;
|
||
this.disposeAllCharts();
|
||
}
|
||
disabledCurrentYearDate = (current) => {
|
||
if (!current) return false;
|
||
const currentYear = new Date().getFullYear();
|
||
const selectedYear = current.year();
|
||
// 只能选择当前年份
|
||
return selectedYear !== currentYear;
|
||
};
|
||
|
||
render() {
|
||
const { companyData, selectedCompany, selectedStartDate, selectedEndDate } = 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>
|
||
<span className={styles.monthSelectorLabel} style={{ margin: '0 20px' }}>
|
||
开始日期：
|
||
</span>
|
||
<DatePicker
|
||
value={selectedStartDate}
|
||
format="YYYY-MM-DD"
|
||
onChange={this.startChange}
|
||
disabledDate={this.disabledCurrentYearDate}
|
||
/>
|
||
<span className={styles.monthSelectorLabel} style={{ margin: '0 20px' }}>
|
||
结束日期：
|
||
</span>
|
||
<DatePicker
|
||
value={selectedEndDate}
|
||
format="YYYY-MM-DD"
|
||
onChange={this.endChange}
|
||
disabledDate={this.disabledCurrentYearDate}
|
||
/>
|
||
</div>
|
||
{this.renderDangerTable()}
|
||
</div>
|
||
</div>
|
||
{/* 第二行 - 当日工作票统计柱状图 */}
|
||
<div className={styles.trainingRow}>
|
||
<div className={styles.trainingCard}>
|
||
<div id="dangerOperationChart" className={styles.trainingChartContainer}></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default DangerJob;
|