调整看板

This commit is contained in:
yunkexin 2026-05-08 14:30:49 +08:00
parent f761c24893
commit dcdd7bc7f9
7 changed files with 57 additions and 44 deletions

View File

@ -70,8 +70,8 @@ class ClassBuild extends React.Component {
} }
// 注意:数据结构是 { companyName: '邦泰', rate: '52%' } // 注意:数据结构是 { companyName: '邦泰', rate: '52%' }
const companyNames = companyList.map((item) => item.companyName); const companyNames = companyList?.map((item) => item.companyName);
const rates = companyList.map((item) => { const rates = companyList?.map((item) => {
// 处理 rate 可能是字符串带百分号的情况 // 处理 rate 可能是字符串带百分号的情况
const rateValue = typeof item.rate === 'string' ? parseFloat(item.rate.replace('%', '')) : item.rate; const rateValue = typeof item.rate === 'string' ? parseFloat(item.rate.replace('%', '')) : item.rate;
return isNaN(rateValue) ? 0 : rateValue; return isNaN(rateValue) ? 0 : rateValue;

View File

@ -102,7 +102,18 @@ class DangerJob extends React.Component {
companyName = selectedCompanyObj?.NAME || ''; companyName = selectedCompanyObj?.NAME || '';
} }
return ( return (
<div style={{ textAlign: 'center', padding: '50px', color: '#999' }}> <div
style={{
textAlign: 'center',
padding: '50px',
color: '#999',
fontSize: '26px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
}}
>
{selectedCompany ? `${companyName}暂无危险作业数据` : '暂无危险作业数据'} {selectedCompany ? `${companyName}暂无危险作业数据` : '暂无危险作业数据'}
</div> </div>
); );

View File

@ -122,18 +122,17 @@ class HiddenSolve extends React.Component {
}, },
legend: { legend: {
data: ['重大隐患', '一般隐患'], data: ['重大隐患', '一般隐患'],
orient: 'vertical',
right: '3%', right: '3%',
top: '5%', top: '10%',
itemGap: 16, itemGap: 12,
itemWidth: 18, itemWidth: 16,
itemHeight: 12, itemHeight: 10,
textStyle: { color: '#000', fontSize: 14 }, textStyle: { color: '#000', fontSize: 12 },
}, },
grid: { grid: {
left: '8%', left: '8%',
right: '5%', right: '5%',
top: '18%', top: '28%',
bottom: '8%', bottom: '8%',
containLabel: true, containLabel: true,
}, },
@ -275,18 +274,17 @@ class HiddenSolve extends React.Component {
}, },
legend: { legend: {
data: ['重大隐患量', '重大隐患未整改量', '一般隐患量', '一般隐患未整改量'], data: ['重大隐患量', '重大隐患未整改量', '一般隐患量', '一般隐患未整改量'],
orient: 'vertical',
right: '3%', right: '3%',
top: '5%', top: '10%',
itemGap: 12, itemGap: 12,
itemWidth: 18, itemWidth: 16,
itemHeight: 12, itemHeight: 10,
textStyle: { color: '#000', fontSize: 12 }, textStyle: { color: '#000', fontSize: 12 },
}, },
grid: { grid: {
left: '8%', left: '8%',
right: '5%', right: '5%',
top: '18%', top: '28%',
bottom: '8%', bottom: '8%',
containLabel: true, containLabel: true,
}, },

View File

@ -92,7 +92,7 @@ class HomeContent extends React.Component {
label: { label: {
show: true, show: true,
position: 'inside', position: 'inside',
formatter: '{a|{b}{c}}\n\n\n{e|({d}%)}', // 添加 \n 换行符 formatter: '{d}%', // 添加 \n 换行符
color: '#000', color: '#000',
textBorderWidth: 0, textBorderWidth: 0,
rich: { rich: {
@ -194,7 +194,7 @@ class HomeContent extends React.Component {
}, },
legend: { legend: {
data: legendData, data: legendData,
right: 0, right: '3%',
top: '10%', top: '10%',
itemGap: 12, itemGap: 12,
itemWidth: 16, itemWidth: 16,
@ -405,7 +405,7 @@ class HomeContent extends React.Component {
this.echartsInstances.backLogChart = echarts.init(backLogCharts); this.echartsInstances.backLogChart = echarts.init(backLogCharts);
this.echartsInstances.backLogChart.setOption({ this.echartsInstances.backLogChart.setOption({
title: { title: {
text: '当月工作培训统计数量', text: '当月培训统计数量',
x: 'center', x: 'center',
y: '25%', y: '25%',
textStyle: { fontSize: 16, color: '#999' }, textStyle: { fontSize: 16, color: '#999' },
@ -428,7 +428,7 @@ class HomeContent extends React.Component {
const option = { const option = {
title: { title: {
text: '当月工作培训统计数量', text: '当月培训统计数量',
x: 'center', x: 'center',
y: '5%', y: '5%',
textStyle: { fontSize: 16, color: '#000' }, textStyle: { fontSize: 16, color: '#000' },
@ -446,18 +446,17 @@ class HomeContent extends React.Component {
}, },
legend: { legend: {
data: ['培训人次', '培训场次'], data: ['培训人次', '培训场次'],
orient: 'vertical', right: '3%',
right: 0, top: '10%',
top: 'middle', itemGap: 12,
itemGap: 16, itemWidth: 16,
itemWidth: 18, itemHeight: 10,
itemHeight: 12, textStyle: { color: '#000', fontSize: 12 },
textStyle: { color: '#000', fontSize: 14 },
}, },
grid: { grid: {
left: '5%', left: '5%',
right: '5%', right: '5%',
top: '18%', top: '28%',
bottom: '5%', bottom: '5%',
containLabel: true, containLabel: true,
}, },

View File

@ -96,18 +96,17 @@ class RiskControl extends React.Component {
}, },
legend: { legend: {
data: ['重大风险', '较大风险', '一般风险', '低风险'], data: ['重大风险', '较大风险', '一般风险', '低风险'],
orient: 'vertical',
right: '3%', right: '3%',
top: '5%', top: '10%',
itemGap: 16, itemGap: 12,
itemWidth: 18, itemWidth: 16,
itemHeight: 12, itemHeight: 10,
textStyle: { color: '#000', fontSize: 14 }, textStyle: { color: '#000', fontSize: 12 },
}, },
grid: { grid: {
left: '8%', left: '8%',
right: '5%', right: '5%',
top: '18%', top: '28%',
bottom: '8%', bottom: '8%',
containLabel: true, containLabel: true,
}, },
@ -281,7 +280,7 @@ class RiskControl extends React.Component {
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
textStyle: { color: '#000' }, textStyle: { color: '#000' },
// rotate: typeNames.length > 4 ? 15 : 0, rotate: typeNames.length > 4 ? 15 : 0,
interval: 0, interval: 0,
fontSize: 12, fontSize: 12,
}, },

View File

@ -98,7 +98,7 @@ class TrainingContent extends React.Component {
legend: { legend: {
data: ['培训人次', '培训场次'], data: ['培训人次', '培训场次'],
right: '3%', // 靠右 right: '3%', // 靠右
top: '5%', // 垂直居中 top: '10%', // 垂直居中
itemGap: 16, itemGap: 16,
itemWidth: 18, itemWidth: 18,
itemHeight: 12, itemHeight: 12,
@ -107,7 +107,7 @@ class TrainingContent extends React.Component {
grid: { grid: {
left: '5%', left: '5%',
right: '5%', // 为右侧垂直图例留出空间 right: '5%', // 为右侧垂直图例留出空间
top: '18%', top: '28%',
bottom: '8%', bottom: '8%',
containLabel: true, containLabel: true,
}, },
@ -267,7 +267,7 @@ class TrainingContent extends React.Component {
legend: { legend: {
data: ['培训人次', '培训场次'], data: ['培训人次', '培训场次'],
right: '3%', // 靠右 right: '3%', // 靠右
top: '5%', // 垂直居中 top: '10%', // 垂直居中
itemGap: 16, itemGap: 16,
itemWidth: 18, itemWidth: 18,
itemHeight: 12, itemHeight: 12,
@ -276,7 +276,7 @@ class TrainingContent extends React.Component {
grid: { grid: {
left: '5%', left: '5%',
right: '5%', // 为右侧垂直图例留出空间 right: '5%', // 为右侧垂直图例留出空间
top: '18%', top: '28%',
bottom: '8%', bottom: '8%',
containLabel: true, containLabel: true,
}, },
@ -416,7 +416,7 @@ class TrainingContent extends React.Component {
legend: { legend: {
data: ['培训人次', '培训场次'], data: ['培训人次', '培训场次'],
right: '3%', // 靠右 right: '3%', // 靠右
top: '5%', // 垂直居中 top: '10%', // 垂直居中
itemGap: 16, itemGap: 16,
itemWidth: 18, itemWidth: 18,
itemHeight: 12, itemHeight: 12,
@ -425,7 +425,7 @@ class TrainingContent extends React.Component {
grid: { grid: {
left: '5%', left: '5%',
right: '5%', // 为右侧垂直图例留出空间 right: '5%', // 为右侧垂直图例留出空间
top: '18%', top: '28%',
bottom: '8%', bottom: '8%',
containLabel: true, containLabel: true,
}, },
@ -512,6 +512,8 @@ class TrainingContent extends React.Component {
const headers = trainingSubIDCard[0] || []; const headers = trainingSubIDCard[0] || [];
// 数据行(从第二行开始) // 数据行(从第二行开始)
const dataRows = trainingSubIDCard.slice(1); const dataRows = trainingSubIDCard.slice(1);
// 生成稳定的 key当数据变化时强制重新创建表格
const tableKey = `${headers.join('-')}-${dataRows.length}`;
// 计算每列的最小宽度(根据表头文字长度) // 计算每列的最小宽度(根据表头文字长度)
const getColumnWidth = (header) => { const getColumnWidth = (header) => {
const chineseCharWidth = 14; // 中文字符宽度(px) const chineseCharWidth = 14; // 中文字符宽度(px)
@ -530,7 +532,7 @@ class TrainingContent extends React.Component {
key: `col${index}`, key: `col${index}`,
align: 'center', align: 'center',
width: getColumnWidth(header), width: getColumnWidth(header),
fixed: index === 0 ? 'left' : index === headers.length - 1 ? 'right' : undefined, fixed: index === 0 ? 'left' : undefined,
render: (text) => { render: (text) => {
if (header === '小计') { if (header === '小计') {
return <strong style={{ color: '#4285f4' }}>{text}</strong>; return <strong style={{ color: '#4285f4' }}>{text}</strong>;
@ -553,11 +555,12 @@ class TrainingContent extends React.Component {
}); });
// 横向滚动配置(当列数过多时) // 横向滚动配置(当列数过多时)
const scrollConfig = columns.length > 10 ? { x: columns.length * 100, y: 380 } : { y: 380 }; const scrollConfig = { x: columns.length * 100, y: 380 };
return ( return (
<div style={{ height: '100%', overflow: 'hidden', padding: '10px' }}> <div style={{ height: '100%', overflow: 'hidden', padding: '10px' }}>
<Table <Table
key={tableKey} // 添加 key 属性,数据变化时强制重新渲染
columns={columns} columns={columns}
dataSource={tableData} dataSource={tableData}
pagination={false} pagination={false}
@ -617,6 +620,9 @@ class TrainingContent extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
// 当 trainingSubData 或 trainingSubDataMonth 变化时重新渲染图表 // 当 trainingSubData 或 trainingSubDataMonth 变化时重新渲染图表
if (prevProps.trainingSubData !== this.props.trainingSubData) {
this.renderChart1();
}
if ( if (
prevProps.trainingSubDataMonth !== this.props.trainingSubDataMonth || prevProps.trainingSubDataMonth !== this.props.trainingSubDataMonth ||
prevProps.selectedMonth !== this.props.selectedMonth prevProps.selectedMonth !== this.props.selectedMonth

View File

@ -75,7 +75,7 @@ class FullScreen extends React.Component {
// 其他页面数据 // 其他页面数据
riskSubData: {}, riskSubData: {},
classSubData: {}, classSubData: [],
dangerSubData: {}, dangerSubData: {},
dangerCompanyData: [], dangerCompanyData: [],
selectedDangerCompany: '', selectedDangerCompany: '',