调整看板
This commit is contained in:
parent
f761c24893
commit
dcdd7bc7f9
@ -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;
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -75,7 +75,7 @@ class FullScreen extends React.Component {
|
|||||||
|
|
||||||
// 其他页面数据
|
// 其他页面数据
|
||||||
riskSubData: {},
|
riskSubData: {},
|
||||||
classSubData: {},
|
classSubData: [],
|
||||||
dangerSubData: {},
|
dangerSubData: {},
|
||||||
dangerCompanyData: [],
|
dangerCompanyData: [],
|
||||||
selectedDangerCompany: '',
|
selectedDangerCompany: '',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user