From c7bf20269d04ef1c868da2513e1205bf93ed9ebd Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Thu, 23 Apr 2026 17:06:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=85=E4=BE=9B=E6=B5=8B=E8=AF=95=EF=BC=8C?= =?UTF-8?q?=E8=AF=B7=E5=8B=BF=E5=8F=91=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI00FullScreen.js | 34 ++-- src/layout/FullOther/TrainingContent.js | 184 ++++++++---------- src/layout/FullScreenInter.js | 14 +- src/layout/fullinter.less | 33 ++++ 4 files changed, 148 insertions(+), 117 deletions(-) diff --git a/src/components/CustomPages/BI/BI00FullScreen.js b/src/components/CustomPages/BI/BI00FullScreen.js index 8af3302..d130906 100644 --- a/src/components/CustomPages/BI/BI00FullScreen.js +++ b/src/components/CustomPages/BI/BI00FullScreen.js @@ -33,33 +33,35 @@ class BI00FullScreen extends React.Component { }; } - componentDidMount() {} + componentDidMount() { + window.open('#/popup', '_blank', 'noreferrer'); + } render() { return (
-

金源公司生产安全管控平台

+ {/*

金源公司生产安全管控平台

+ */}
); } diff --git a/src/layout/FullOther/TrainingContent.js b/src/layout/FullOther/TrainingContent.js index 8327142..3195a60 100644 --- a/src/layout/FullOther/TrainingContent.js +++ b/src/layout/FullOther/TrainingContent.js @@ -1,6 +1,6 @@ // TrainingContent.js - 安全培训页面组件 import React from 'react'; -import { Row, Col, Select } from 'antd'; +import { Row, Col, Select, Table } from 'antd'; import styles from './../fullinter.less'; import echarts from 'echarts'; const { Option } = Select; @@ -12,7 +12,6 @@ class TrainingContent extends React.Component { chart1: null, // 各部门培训统计（柱状图） chart2: null, // 各部门培训完成率 chart3: null, // 培训类型分布 - chart4: null, // 月度培训对比 }; this.chartResizeHandlers = {}; this.isUnmounted = false; @@ -181,6 +180,7 @@ class TrainingContent extends React.Component { this.echartsInstances.chart1.setOption(option); this.setupResizeHandler('chart1', this.renderChart1); }; + // 生成月份选项（1-12月） getMonthOptions = () => { const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; @@ -190,6 +190,7 @@ class TrainingContent extends React.Component { )); }; + getCompanyOptions = () => { const { companyData } = this.props; return companyData.map((company, index) => ( @@ -498,101 +499,75 @@ class TrainingContent extends React.Component { this.setupResizeHandler('chart3', this.renderChart3); }; - // 图表4: 月度培训对比（分组柱状图） - renderChart4 = async () => { - if (this.isUnmounted) return; - const elementExists = await this.waitForElement('trainingChart4'); - if (!elementExists || this.isUnmounted) return; + // 表格4: 特种作业操作证统计表格 + renderCertificateTable = () => { + const { trainingSubIDCard } = this.props; - if (this.echartsInstances.chart4) { - this.echartsInstances.chart4.dispose(); - this.echartsInstances.chart4 = null; + // 如果没有数据，返回空 + if (!trainingSubIDCard || trainingSubIDCard.length === 0) { + return
暂无证书数据
; } - const chartDom = document.getElementById('trainingChart4'); - if (!chartDom) return; - - this.echartsInstances.chart4 = echarts.init(chartDom); - - // 近6个月各部门培训场次对比 - const months = ['1月', '2月', '3月', '4月', '5月', '6月']; - const departments = ['安全部', '生产部', '技术部']; - - const seriesData = [ - { name: '安全部', data: [5, 6, 7, 8, 7, 9], color: '#4285F4' }, - { name: '生产部', data: [8, 9, 10, 11, 12, 13], color: '#66bb6a' }, - { name: '技术部', data: [4, 5, 6, 6, 7, 8], color: '#ffa94d' }, - ]; - - const option = { - title: { - text: '各部门月度培训场次对比', - x: 'center', - y: '5%', - textStyle: { fontSize: 16, color: '#000', fontWeight: 'bold' }, - }, - tooltip: { - trigger: 'axis', - axisPointer: { type: 'shadow' }, - formatter: function (params) { - let result = `${params[0].axisValue}
`; - params.forEach((param) => { - result += `${param.marker}${param.seriesName}: ${param.value}场
`; - }); - return result; - }, - }, - legend: { - data: seriesData.map((s) => s.name), - orient: 'horizontal', - left: 'center', - top: '15%', - itemGap: 20, - itemWidth: 18, - itemHeight: 12, - textStyle: { color: '#333', fontSize: 12 }, - }, - grid: { - left: '8%', - right: '5%', - top: '25%', - bottom: '8%', - containLabel: true, - }, - xAxis: { - type: 'category', - data: months, - axisLine: { lineStyle: { color: '#666' } }, - axisLabel: { textStyle: { color: '#333' } }, - }, - yAxis: { - type: 'value', - name: '培训场次', - axisLabel: { textStyle: { color: '#666' } }, - splitLine: { lineStyle: { color: '#e0e0e0' } }, - }, - series: seriesData.map((s) => ({ - name: s.name, - type: 'bar', - data: s.data, - itemStyle: { - normal: { - color: s.color, - barBorderRadius: [4, 4, 0, 0], - }, - }, - label: { - show: true, - position: 'top', - textStyle: { fontSize: 10 }, - formatter: '{c}', - }, - barWidth: '25%', - })), + // 第一行是表头 + const headers = trainingSubIDCard[0] || []; + // 数据行（从第二行开始） + const dataRows = trainingSubIDCard.slice(1); + // 计算每列的最小宽度（根据表头文字长度） + const getColumnWidth = (header) => { + const chineseCharWidth = 14; // 中文字符宽度(px) + const paddingWidth = 32; // 单元格内边距 + const minWidth = 100; // 最小宽度 + const maxWidth = 200; // 最大宽度 + const textLength = header.length; + const calculatedWidth = textLength * chineseCharWidth + paddingWidth; + return Math.min(Math.max(calculatedWidth, minWidth), maxWidth); }; - this.echartsInstances.chart4.setOption(option); - this.setupResizeHandler('chart4', this.renderChart4); + // 生成表格列配置 + const columns = headers.map((header, index) => ({ + title: header, + dataIndex: `col${index}`, + key: `col${index}`, + align: 'center', + width: getColumnWidth(header), + fixed: index === 0 ? 'left' : index === headers.length - 1 ? 'right' : undefined, + render: (text) => { + if (header === '小计') { + return {text}; + } + // 如果是公司列，加粗显示 + if (header === '公司') { + return {text}; + } + return text; + }, + })); + + // 转换数据格式为表格所需格式 + const tableData = dataRows.map((row, rowIndex) => { + const rowData = { key: rowIndex }; + row.forEach((cell, colIndex) => { + rowData[`col${colIndex}`] = cell; + }); + return rowData; + }); + + // 横向滚动配置（当列数过多时） + const scrollConfig = columns.length > 10 ? { x: columns.length * 100, y: 380 } : {}; + + return ( +
+ + + ); }; setupResizeHandler = (chartName, renderMethod) => { @@ -612,7 +587,6 @@ class TrainingContent extends React.Component { this.renderChart1(); this.renderChart2(); this.renderChart3(); - this.renderChart4(); }, 100); }; @@ -647,16 +621,15 @@ class TrainingContent extends React.Component { prevProps.trainingSubDataMonth !== this.props.trainingSubDataMonth || prevProps.selectedMonth !== this.props.selectedMonth ) { - // this.renderChart1(); this.renderChart2(); } if ( prevProps.trainingSubBSType !== this.props.trainingSubBSType || prevProps.selectedCompany !== this.props.selectedCompany ) { - // this.renderChart1(); this.renderChart3(); } + // 当 trainingSubIDCard 变化时，表格会自动更新，不需要额外处理 } componentWillUnmount() { @@ -690,10 +663,10 @@ class TrainingContent extends React.Component {
- {/* 第二行 - 图表3和图表4 */} + {/* 第二行 - 图表3和表格4 */}
- {/* 添加月份选择器 */} + {/* 添加公司选择器 */}
选择公司： @@ -708,7 +683,20 @@ class TrainingContent extends React.Component {
-
+
+
+ 特种作业操作证统计 +
+
{this.renderCertificateTable()}
+
diff --git a/src/layout/FullScreenInter.js b/src/layout/FullScreenInter.js index 77cfa0b..95a6afe 100644 --- a/src/layout/FullScreenInter.js +++ b/src/layout/FullScreenInter.js @@ -59,7 +59,7 @@ class FullScreen extends React.Component { MonthRecordCount: [], MonthPersonCount: [], }, - trainingSubIDCard: {}, + trainingSubIDCard: [], trainingSubBSType: {}, companyData: [], // 新增：当前选择的月份 @@ -128,6 +128,11 @@ class FullScreen extends React.Component { handleTabClick = (name) => { this.setState({ activeTab: name }); + if (name === '首页') { + this.getYearPXData(); + this.loadMediaFiles(); + this.getAnnouncementData(); + } // 当点击安全培训tab时，获取对应数据 if (name === '安全培训') { this.getHomeSESubYearData(); @@ -290,7 +295,6 @@ class FullScreen extends React.Component { const currentDateStr = `${year}-${month}-${day}`; // 例如：2024-06-15 json.Parameter1 = currentDateStr; // 设置为当前日期 - json.Parameter2 = this.state.selectedCompany.toString(); // 月份 this.props.dispatch({ type: 'app/getDataByPost', payload: json, @@ -314,7 +318,9 @@ class FullScreen extends React.Component { const currentDateStr = `${year}-${month}-${day}`; // 例如：2024-06-15 json.Parameter1 = currentDateStr; // 设置为当前日期 - json.Parameter2 = this.state.selectedCompany; + if (this.state.selectedCompany) { + json.Parameter2 = this.state.selectedCompany; + } this.props.dispatch({ type: 'app/getDataByPost', payload: json, @@ -355,6 +361,7 @@ class FullScreen extends React.Component { selectedCompany, trainingSubBSType, companyData, + trainingSubIDCard, } = this.state; // 如果是安全培训，显示专门的培训页面 if (activeTab === '安全培训') { @@ -369,6 +376,7 @@ class FullScreen extends React.Component { selectedCompany={selectedCompany} onMonthChange={this.handleMonthChange} onCompanyChange={this.handleCompanyChange} + trainingSubIDCard={trainingSubIDCard} /> ); } diff --git a/src/layout/fullinter.less b/src/layout/fullinter.less index 529d8b3..0262ab6 100644 --- a/src/layout/fullinter.less +++ b/src/layout/fullinter.less @@ -673,3 +673,36 @@ } } } +// 证书表格样式 +.certificateTable { + margin-bottom: 20px; + :global { + .ant-table { + font-size: 12px; + } + + .ant-table-thead > tr > th { + background-color: #f5f5f5; + font-weight: bold; + padding: 8px; + white-space: nowrap; + } + + .ant-table-tbody > tr > td { + padding: 6px 8px; + } + + .ant-table-tbody > tr:hover > td { + background-color: #e6f7ff; + } + } +} + +.totalRow { + :global { + td { + background-color: #f0f0f0 !important; + font-weight: bold; + } + } +}