0 && col.width, wordWrap: 'break-word', wordBreak: 'break-all' }}>
- {
- this.getControl(col)
- }
-
- }
+ return (
+ 0 && col.width, wordWrap: 'break-word', wordBreak: 'break-all' }}
+ >
+ {this.getControl(col)}
+
+ );
+ };
/*
{
@@ -1089,46 +1116,45 @@ class TableBaseComponent extends ComponentBase {
if (tableConfig.isShowRowNo) {
tmp.push({ title: '序号', key: 'ROW_NO', dataIndex: 'ROW_NO', width: 60 });
}
- columns.forEach(col => {
+ columns.forEach((col) => {
if (col.visible || col.visible === undefined) {
- const isShowCol = col.controlType === null || col.controlType === undefined || col.controlType === 0 || col.controlType > 100;
- const uniqueKey = col.id ? col.id : (col.field ? col.field : col.formatFuncName);
+ const isShowCol =
+ col.controlType === null || col.controlType === undefined || col.controlType === 0 || col.controlType > 100;
+ const uniqueKey = col.id ? col.id : col.field ? col.field : col.formatFuncName;
const columnObj = {
- title: {col.label}
,
+ title: {col.label}
,
key: uniqueKey,
dataIndex: col.field,
- filterDropdown: args => {
- return
+
+ ) : (
+
+ )}
+
+
+ ) : (
+
+ )}
+
+ ) : (
+
+ );
}
-
/*
参数：{
tableCode,tableConfig,record,btnConfig,
@@ -2057,29 +2193,37 @@ class TableBaseComponent extends ComponentBase {
const deleteData = [];
if (btnConfig.isAddLog) {
const tableData = this.getTableData({ tableCode });
- const selectKeys = id.split(',');// this.getTableSelectedRowKeys({ tableCode });
+ const selectKeys = id.split(','); // this.getTableSelectedRowKeys({ tableCode });
if (selectKeys && tableData && tableData.Data) {
- selectKeys.forEach(item => {
- tableData.Data.forEach(t => {
+ selectKeys.forEach((item) => {
+ tableData.Data.forEach((t) => {
if (item.toString().toUpperCase() === t.ID.toString().toUpperCase()) {
deleteData.push(t);
}
- })
+ });
});
}
}
message.success('删除成功');
this.loadTableData({ tableCode });
if (btnConfig.isAddLog) {
- const formId = (tableConfig.formId ? tableConfig.formId : (tableConfig.formData ? tableConfig.formData.ID : this.props.formId));
- const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode);
+ const formId = tableConfig.formId
+ ? tableConfig.formId
+ : tableConfig.formData
+ ? tableConfig.formData.ID
+ : this.props.formId;
+ const formCode = tableConfig.formCode
+ ? tableConfig.formCode
+ : tableConfig.formData
+ ? tableConfig.formData.CODE
+ : this.props.formCode;
const extData = deleteData ? ('删除数据，详情：', JSON.stringify(deleteData)) : null;
this.addDeleteLog({ formCode, ids: id, formId, extData });
}
}
- }
- })
+ },
+ });
}
/*
@@ -2102,7 +2246,7 @@ class TableBaseComponent extends ComponentBase {
this.props.dispatch({
type: 'app/deleteItemBatch',
payload: {
- ids: ids
+ ids: ids,
},
url: delApiUrl,
onComplete: (ret) => {
@@ -2113,15 +2257,15 @@ class TableBaseComponent extends ComponentBase {
const deleteData = [];
if (btnConfig.isAddLog) {
const tableData = this.getTableData({ tableCode });
- const selectKeys = ids.split(',');// this.getTableSelectedRowKeys({ tableCode });
+ const selectKeys = ids.split(','); // this.getTableSelectedRowKeys({ tableCode });
if (selectKeys && tableData && tableData.Data) {
- selectKeys.forEach(item => {
- tableData.Data.forEach(t => {
+ selectKeys.forEach((item) => {
+ tableData.Data.forEach((t) => {
if (item.toString().toUpperCase() === t.ID.toString().toUpperCase()) {
deleteData.push(t);
}
- })
+ });
});
}
}
@@ -2129,29 +2273,45 @@ class TableBaseComponent extends ComponentBase {
message.success('删除成功');
this.setTableSelectedRowKeys({ tableCode, selectedKeys: [] });
if (btnConfig.isAddLog) {
- const formId = (tableConfig.formId ? tableConfig.formId : (tableConfig.formData ? tableConfig.formData.ID : this.props.formId));
- const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode);
+ const formId = tableConfig.formId
+ ? tableConfig.formId
+ : tableConfig.formData
+ ? tableConfig.formData.ID
+ : this.props.formId;
+ const formCode = tableConfig.formCode
+ ? tableConfig.formCode
+ : tableConfig.formData
+ ? tableConfig.formData.CODE
+ : this.props.formCode;
const extData = deleteData ? ('删除数据，详情：', JSON.stringify(deleteData)) : null;
this.addDeleteLog({ formCode, ids, formId: formId, extData });
}
}
- }
- })
+ },
+ });
}
- genDataSource(tableCode, tableData) { // 生产表格的dataSource
+ genDataSource(tableCode, tableData) {
+ // 生产表格的dataSource
const { localSearch = {} } = this.state;
if (tableData.Data) {
if (Object.keys(localSearch).length) {
const tableConfig = this.getTableConfig({ tableCode });
- return tableData.Data.filter(record => {
- const col = tableConfig.columns.filter(t => t.field === localSearch.fields)[0];// '';//localSearch.fields
+ return tableData.Data.filter((record) => {
+ const col = tableConfig.columns.filter((t) => t.field === localSearch.fields)[0]; // '';//localSearch.fields
let val = getDataFieldValue(record, col.field);
- const isShowCol = col.controlType === null || col.controlType === undefined || col.controlType === 0 || col.controlType > 100;
+ const isShowCol =
+ col.controlType === null || col.controlType === undefined || col.controlType === 0 || col.controlType > 100;
if (isShowCol) {
if (col.formatFuncName) {
col.format = (params) => {
- const formatValue = this.onTableRowFormatColumn({ record, text: val, tableCode, tableConfig, colConfig: params.col });
+ const formatValue = this.onTableRowFormatColumn({
+ record,
+ text: val,
+ tableCode,
+ tableConfig,
+ colConfig: params.col,
+ });
setDataFieldValue(record, (col.field ? col.field : col.formatFuncName) + '_formatValue', formatValue);
val = formatValue;
};
@@ -2162,28 +2322,30 @@ class TableBaseComponent extends ComponentBase {
//val = getDataFieldValue(record, col.field);
if (col.field && col.field.indexOf('Nav_SysParams') > -1) {
val = this.getControlValue({
- controlType: col.controlType, value: col.value,
- data: col.data
+ controlType: col.controlType,
+ value: col.value,
+ data: col.data,
});
}
- if (val) { // 值
- if (typeof val === "number") {
- val = val.toString()
+ if (val) {
+ // 值
+ if (typeof val === 'number') {
+ val = val.toString();
}
- if (String(val) === "null") {
- return false
+ if (String(val) === 'null') {
+ return false;
}
return val.indexOf(localSearch.value) >= 0;
}
return false;
- })
+ });
} else {
- return tableData.Data
+ return tableData.Data;
}
} else {
- return []
+ return [];
}
}
@@ -2202,8 +2364,8 @@ class TableBaseComponent extends ComponentBase {
clearCustomConfig={() => this.clearCustomConfig(tableConfig)}
saveCustomConfig={() => this.saveCustomConfig(tableConfig)}
/>
- )
- }
+ );
+ };
if (rowBtns && rowBtns.length) {
let currRecord = {};
@@ -2223,7 +2385,7 @@ class TableBaseComponent extends ComponentBase {
- {
- this.getRenderBtns(tableCode, tableConfig, record, rowBtns, 0)
- }
-
+ return (
+
+ {this.getRenderBtns(tableCode, tableConfig, record, rowBtns, 0)}
+
+ );
}}
/>
- )
+ );
} else {
return (
-
-
- ) : (
- TableHeadBtns && TableHeadBtns.length
- ? (
-
- {TableHeadBtns}
-
- )
- : null
- )
- }
+ : {
+ components: TableResizableCell,
+ onRow: (rowRecord, index) => ({
+ onClick: () => {
+ this.onTableClickRow({ tableCode, tableConfig, rowRecord });
+ },
+ }),
+ };
+ return (
+
+
+
+ ) : TableHeadBtns && TableHeadBtns.length ? (
+ {TableHeadBtns}
+ ) : null}
-
- {
- this.onTableChange(tableCode, pagination, filters, sorter)
- }}
- rowSelection={tableConfig.checked ? rowSelection : null}
- rowClassName={(record, index) => {
- const remoteClass = this.onTableRowClassName({ tableConfig, record })
- const crossClass = index % 2 === 1 ? 'dark-row' : 'light-row'
- if (remoteClass) {
- return classNames(styles[remoteClass]);
+ {
+ return {
+ onDoubleClick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (h.title) {
+ openNotification(h);
+ }
+ },
+ };
+ }}
+ onHeaderCell={(column) => {
+ return {
+ onMouseEnter: () => {
+ // 鼠标移入表头单元格
+ this.setState({
+ showColumnSetting: column.key,
+ });
+ },
+ width: column.width,
+ onResize: this.handleResize(tableCode, column),
+ };
+ }}
+ />
+ );
+ })}
+ {!isBatchAddList ? this.tableOperateColumn(tableCode) : null}
+
+
+ {TableHeadBtns}
-
-
-
-
-
-
- {
- tableDataSource.map((ds, dsIndex) => {
- const actionBtns = this.getRenderBtns(tableCode, tableConfig, ds, tableConfig.rowBtns, 0)
- const thumbCode = get(ds, tableConfig.cardPicField)
+ return (
+
+
+
+ }
+ >
+
+ );
+ })}
+
+ {
+ this.onTableChange(tableCode, { ...paginationConfig, current, pageSize });
+ }}
+ onShowSizeChange={(current, pageSize) => {
+ this.onTableChange(tableCode, { ...paginationConfig, current, pageSize });
+ }}
+ {...paginationConfig}
+ />
+
+ {TableHeadBtns}
+
+
+
+
+
+
+ {tableDataSource.map((ds, dsIndex) => {
+ const actionBtns = this.getRenderBtns(tableCode, tableConfig, ds, tableConfig.rowBtns, 0);
+ const thumbCode = get(ds, tableConfig.cardPicField);
return (
this.handleTableCardSelect(evt, ds, tableCode)}
+ onChange={(evt) => this.handleTableCardSelect(evt, ds, tableCode)}
className={styles.tableCardCheckbox}
/>
- {
- newColumns.map(col => {
- return (
-
- )
- })
- }
-
- {
- this.onTableChange(tableCode, { ...paginationConfig, current, pageSize })
- }}
- onShowSizeChange={(current, pageSize) => {
- this.onTableChange(tableCode, { ...paginationConfig, current, pageSize })
- }}
- {...paginationConfig}
- />
-
-
- {col.title}
- ：
- {col.render ? col.render(ds[col.dataIndex], ds) : ds[col.dataIndex]}
-
- )
- })
- }
+ {newColumns.map((col) => {
+ return (
+
+ {col.title}
+ ：
+ {col.render ? col.render(ds[col.dataIndex], ds) : ds[col.dataIndex]}
+
+ );
+ })}
操作：
@@ -2676,21 +2855,21 @@ class TableBaseComponent extends ComponentBase {
+
+ ${params.name}:
+ ${params.value}
+
`;
+ },
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
+ borderColor: '#FFFFFF',
+ borderWidth: 2,
+ textStyle: { color: '#000', fontSize: 14 },
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ minAngle: 20,
+ radius: ['55%', '80%'],
+ center: ['50%', '50%'],
+ clockwise: true,
+ avoidLabelOverlap: true,
+ hoverOffset: 15,
+ label: {
+ show: true,
+ position: 'inside',
+ formatter: '{a|{b}：{c}}{e|({d}%)}\n',
+ color: '#000',
+ textBorderWidth: 0,
+ rich: {
+ a: { padding: [-15, 0, 0, 0], fontSize: 15, color: '#000', textBorderWidth: 0 },
+ e: { fontSize: 14, color: '#000', padding: [-15, 0, 0, 5], textBorderWidth: 0 },
+ },
+ },
+ labelLine: { normal: { show: false } },
+ data: data.map((item) => ({ name: item.riskType, value: item.count })),
+ },
+ ],
+ };
+
+ this.echartsInstances.riskLevel.setOption(option);
+
+ const resizeHandler = () => {
+ if (this.echartsInstances.riskLevel && !this.isUnmounted) {
+ this.echartsInstances.riskLevel.resize();
+ }
+ };
+ this.chartResizeHandlers.riskLevel = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+
+ transformDat = (originalData, barTopColor, num) => {
+ if (!originalData || !Array.isArray(originalData) || originalData.length === 0) {
+ return { companyNames: [], series: [], legendData: [] };
+ }
+
+ let allTypes = [];
+ if (num == 1) {
+ allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.jobName)))];
+ } else {
+ allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.name)))];
+ }
+
+ allTypes = allTypes.filter(Boolean);
+ const companyNames = originalData?.map((item) => item.company);
+ const series = allTypes?.map((typeName, index) => ({
+ name: typeName,
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ if (num == 1) {
+ return barTopColor[index];
+ } else {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: barTopColor[index][0] },
+ { offset: 1, color: barTopColor[index][1] },
+ ]);
+ }
+ },
+ },
+ },
+ data: originalData?.map((company) => {
+ const detail = company.details?.find((d) => (num == 1 ? d.jobName : d.name) === typeName);
+ return detail ? detail.qty : 0;
+ }),
+ }));
+
+ return { companyNames, series, legendData: allTypes };
+ };
+
+ safeCheckChart = async () => {
+ if (this.isUnmounted) return;
+ const elementExists = await this.waitForElement('safeCheckChart');
+ if (!elementExists || this.isUnmounted) return;
+
+ if (this.echartsInstances.safeCheckChart) {
+ this.echartsInstances.safeCheckChart.dispose();
+ this.echartsInstances.safeCheckChart = null;
+ }
+
+ let safeCheckCharts = document.getElementById('safeCheckChart');
+ if (!safeCheckCharts) return;
+
+ const barTopColor = ['#02c3f1', '#53e568', '#a154e9'];
+ const jobData = this.props.jobTodayTop3 || [];
+
+ if (jobData.length === 0) return;
+
+ this.echartsInstances.safeCheckChart = echarts.init(safeCheckCharts);
+ let xdata = this.transformDat(jobData, barTopColor, 1);
+
+ this.echartsInstances.safeCheckChart.setOption({
+ title: {
+ text: '当日工作票排名前三家的数据',
+ textStyle: { fontSize: 16, color: '#fff' },
+ },
+ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+ legend: {
+ data: xdata.legendData,
+ align: 'right',
+ right: 10,
+ itemGap: 16,
+ itemWidth: 18,
+ itemHeight: 10,
+ textStyle: { color: '#fff', fontSize: 14 },
+ },
+ color: barTopColor,
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+ xAxis: [
+ {
+ type: 'category',
+ data: xdata.companyNames,
+ axisLine: { lineStyle: { color: '#3eb2e8' } },
+ axisLabel: { textStyle: { color: '#fff' } },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLine: { show: false },
+ axisLabel: { textStyle: { color: '#fff' } },
+ splitLine: { lineStyle: { color: '#4784e8' } },
+ },
+ ],
+ series: xdata.series,
+ });
+
+ const resizeHandler = () => {
+ if (this.echartsInstances.safeCheckChart && !this.isUnmounted) {
+ this.echartsInstances.safeCheckChart.resize();
+ }
+ };
+ this.chartResizeHandlers.safeCheckChart = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+
+ dangerOperation = async () => {
+ if (this.isUnmounted) return;
+ const elementExists = await this.waitForElement('dangerOperationChart');
+ if (!elementExists || this.isUnmounted) return;
+
+ if (this.echartsInstances.dangerOperation) {
+ this.echartsInstances.dangerOperation.dispose();
+ this.echartsInstances.dangerOperation = null;
+ }
+
+ const dangerOperationCharts = document.getElementById('dangerOperationChart');
+ if (!dangerOperationCharts) return;
+
+ const linkData = this.props.linkSum || [];
+ if (linkData.length === 0) return;
+
+ this.echartsInstances.dangerOperation = echarts.init(dangerOperationCharts);
+ const xAxisData = linkData.map((item) => item.name);
+ const seriesData = linkData.map((item) => item.qty);
+
+ const option = {
+ color: ['#4285F4'],
+ title: [
+ {
+ text: '当日工作票的统计数量',
+ x: 'center',
+ y: '5%',
+ textStyle: { fontSize: 16, color: '#000' },
+ },
+ ],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter: function (params) {
+ const color = params[0].color;
+ return `
+
+ ${params[0].name}:
+ ${params[0].value}
+
`;
+ },
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
+ borderColor: '#FFFFFF',
+ borderWidth: 2,
+ textStyle: { color: '#000', fontSize: 14 },
+ },
+ grid: { left: '10%', right: '5%', top: '15%', bottom: '10%', containLabel: true },
+ xAxis: [
+ {
+ type: 'category',
+ data: xAxisData,
+ axisLine: { lineStyle: { color: '#000' } },
+ axisTick: { show: false },
+ axisLabel: { textStyle: { color: '#000' }, rotate: 30, interval: 0 },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '',
+ nameTextStyle: { color: '#000' },
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { textStyle: { color: '#000' } },
+ splitLine: { show: false },
+ },
+ ],
+ series: [
+ {
+ name: '危险作业数量',
+ type: 'bar',
+ data: seriesData,
+ itemStyle: {
+ normal: { color: '#4285F4', borderRadius: 12 },
+ emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
+ },
+ label: { show: true, position: 'top', textStyle: { color: '#000', fontSize: 12 }, formatter: '{c}' },
+ barWidth: '60%',
+ },
+ ],
+ };
+
+ this.echartsInstances.dangerOperation.setOption(option);
+
+ const resizeHandler = () => {
+ if (this.echartsInstances.dangerOperation && !this.isUnmounted) {
+ this.echartsInstances.dangerOperation.resize();
+ }
+ };
+ this.chartResizeHandlers.dangerOperation = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+
+ backLog = async () => {
+ if (this.isUnmounted) return;
+ const elementExists = await this.waitForElement('backLogChart');
+ if (!elementExists || this.isUnmounted) return;
+
+ if (this.echartsInstances.backLogChart) {
+ this.echartsInstances.backLogChart.dispose();
+ this.echartsInstances.backLogChart = null;
+ }
+
+ let backLogCharts = document.getElementById('backLogChart');
+ if (!backLogCharts) return;
+
+ const taskData = this.props.taskTop3 || [];
+ if (taskData.length === 0) return;
+
+ const barTopColor = [
+ ['#75baf3', '#2177d5'],
+ ['#ffa94d', '#f76707'],
+ ['#99ca6e', '#48a447'],
+ ];
+
+ this.echartsInstances.backLogChart = echarts.init(backLogCharts);
+ let xdata = this.transformDat(taskData, barTopColor, 2);
+ const legendColors = barTopColor.map((gradient) => gradient[0]);
+
+ this.echartsInstances.backLogChart.setOption({
+ title: {
+ text: '各事项排名前三名统计',
+ x: 'center',
+ y: '5%',
+ textStyle: { fontSize: 16, color: '#000' },
+ },
+ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+ legend: {
+ data: xdata.legendData.map((name, index) => ({
+ name: name,
+ itemStyle: { color: legendColors[index], borderWidth: 0 },
+ textStyle: { color: '#000', fontSize: 14 },
+ })),
+ align: 'right',
+ top: 10,
+ right: 10,
+ itemGap: 16,
+ itemWidth: 18,
+ itemHeight: 12,
+ },
+ color: legendColors,
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+ xAxis: [
+ {
+ type: 'category',
+ data: xdata.companyNames,
+ axisLine: { lineStyle: { color: '#3eb2e8' } },
+ axisLabel: { textStyle: { color: '#000' } },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLine: { show: false },
+ axisLabel: { textStyle: { color: '#000' } },
+ splitLine: { lineStyle: { color: '#4784e8' } },
+ },
+ ],
+ series: xdata.series,
+ });
+
+ const resizeHandler = () => {
+ if (this.echartsInstances.backLogChart && !this.isUnmounted) {
+ this.echartsInstances.backLogChart.resize();
+ }
+ };
+ this.chartResizeHandlers.backLogChart = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+
+ initAllCharts = () => {
+ if (this.isUnmounted) return;
+ setTimeout(() => {
+ if (this.isUnmounted) return;
+ this.riskLevel();
+ this.safeCheckChart();
+ this.dangerOperation();
+ this.backLog();
+ }, 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 = {};
+ };
+
+ handlePrev = () => {
+ if (this.carouselRef.current) {
+ this.carouselRef.current.prev();
+ }
+ };
+
+ handleNext = () => {
+ if (this.carouselRef.current) {
+ this.carouselRef.current.next();
+ }
+ };
+
+ handleCarouselChange = (current) => {
+ this.props.onCarouselChange?.(current);
+ };
+
+ handleDotClick = (index) => {
+ this.props.onDotClick?.(index);
+ if (this.carouselRef.current) {
+ this.carouselRef.current.goTo(index);
+ }
+ };
+
+ componentDidMount() {
+ this.isUnmounted = false;
+ this.initAllCharts();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ prevProps.riskTypeRate !== this.props.riskTypeRate ||
+ prevProps.jobTodayTop3 !== this.props.jobTodayTop3 ||
+ prevProps.linkSum !== this.props.linkSum ||
+ prevProps.taskTop3 !== this.props.taskTop3
+ ) {
+ this.disposeAllCharts();
+ this.initAllCharts();
+ }
+ }
+
+ componentWillUnmount() {
+ this.isUnmounted = true;
+ this.disposeAllCharts();
+ }
+
+ render() {
+ const {
+ riskTypeRate = [],
+ riskTotal = [],
+ mediaList = [],
+ announcementList = [],
+ currentMediaIndex = 0,
+ } = this.props;
+
+ return (
+
+
+ {/* 左侧区域 */}
+
+
+ );
+ }
+}
+
+export default HomeContent;
diff --git a/src/layout/FullScreenInter.js b/src/layout/FullScreenInter.js
index cec0895..60d6efa 100644
--- a/src/layout/FullScreenInter.js
+++ b/src/layout/FullScreenInter.js
@@ -1,34 +1,18 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+// FullScreenInter.js - 主文件保持简洁
+import React from 'react';
import { connect } from 'dva';
-import { withRouter, matchPath } from 'dva/router';
-import { Scrollbars } from 'react-custom-scrollbars';
-import { Icon, Row, Col, Progress, Tabs } from 'antd';
-import EnergyIcon from '../utils/energyIcon';
-import { $consts } from '../plugins';
+import { withRouter } from 'dva/router';
+import { Icon, Row, Col } from 'antd';
import styles from './fullinter.less';
-import echarts from 'echarts';
-import realGif from '../assets/layout/mofang.png';
import logo from '../assets/layout/headerno-logo-new.png';
import debounce from 'lodash.debounce';
import storage from '../utils/storage';
import { initFilter } from '../utils/common';
-import {
- FullScreenContainer,
- BorderBox8,
- BorderBox10,
- ScrollBoard,
- CapsuleChart,
- WaterLevelPond,
- BorderBox7,
- BorderBox6,
-} from '@jiaminghi/data-view-react';
-import { color } from 'echarts/lib/export';
-import { title } from 'process';
-const { TabPane } = Tabs;
+import HomeContent from './FullOther/HomeContent';
const getScale = () => {
const width = 1920,
- height = 1080; // 此处可以根据实际设计稿尺寸修改
+ height = 1080;
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
@@ -38,1722 +22,228 @@ class FullScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
- safetySloganOne: '',
- animationDuration: 20,
- sliderColor: '#de4e58',
- sliderSize: '24px',
nowDate: '',
- riskTypeRate: [], //风险等级占比
+ riskTypeRate: [],
+ riskTotal: [
+ { name: '年度重大隐患数', value: 1 },
+ { name: '年度一般隐患数量', value: 89 },
+ { name: '未整改隐患数量', value: 18 },
+ ],
linkSum: [],
- jobTodayTop3: [], //当日工作票排名前三
- hiddenRectify: {}, //隐患整改率
- taskTop3: [], //各事项排名前三
- jobFinishRate: [], //作业现场完成情况统计
- safeCheckSum: [], //各公司安全检查统计
- listSETrainSum: [], //各公司安全培训统计
+ jobTodayTop3: [],
+ taskTop3: [],
scale: getScale(),
- configBanner: ['首页', '风险管理', '安全检查', '隐患管理', '作业现场', '安全培训'],
- };
- this.echartsInstances = {
- riskLevel: null,
- opretionTrend: null,
- completeone: null,
+ configBanner: ['首页', '风险管控', '隐患治理', '班组建设', '危险作业', '安全培训'],
+ mediaList: [],
+ currentMediaIndex: 0,
+ announcementList: [],
+ activeTab: '首页',
};
+ this.isUnmounted = false;
}
setScale = debounce(() => {
- // debounce节流
- // 获取到缩放比，设置它
- let scale = getScale();
- this.setState({ scale });
+ if (this.isUnmounted) return;
+ this.setState({ scale: getScale() });
}, 500);
+ toggleFullscreen = () => {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen?.();
+ } else {
+ document.exitFullscreen?.();
+ }
+ };
+
componentDidMount() {
- window.addEventListener('resize', this.setScale); // 得到呈现的屏幕宽高比
- // this.getHomeTitle();
+ this.isUnmounted = false;
+ window.addEventListener('resize', this.setScale);
this.getHomeDataArray();
- this.setState({ activeTab: '首页' });
+ this.loadMediaFiles();
+ this.getAnnouncementData();
this.timer = setInterval(() => {
- this.setState({
- nowDate: this.getDate(),
- });
+ if (!this.isUnmounted) this.setState({ nowDate: this.getDate() });
}, 1000);
+
+ document.addEventListener('fullscreenchange', this.handleFullscreenChange);
}
- executionChart = () => {
- this.riskLevel();
- this.safeCheckChart();
- this.dangerOperation();
- this.completeChart();
- this.backLog();
- this.safedanger();
+
+ getAnnouncementData = () => {
+ this.setState({
+ announcementList: [
+ { id: 1, title: '关于2024年安全生产月活动的通知', publishTime: '2024-06-01', url: '' },
+ { id: 2, title: '公司第三季度安全培训安排', publishTime: '2024-05-28', url: '' },
+ { id: 3, title: '关于开展安全隐患排查整治工作的通知', publishTime: '2024-05-20', url: '' },
+ { id: 4, title: '安全生产标准化建设阶段性总结', publishTime: '2024-05-15', url: '' },
+ { id: 5, title: '关于表彰2024年第一季度安全生产先进单位的决定', publishTime: '2024-05-10', url: '' },
+ ],
+ });
+ };
+
+ loadMediaFiles = () => {
+ this.setState({
+ mediaList: [
+ { type: 'image', url: 'http://10.2.7.18:28028//WZ_Images/static/smyzw@2x.png' },
+ { type: 'video', url: 'http://10.2.7.18:28028/WZ_Images/Img_JFSC/welcom/1.mp4' },
+ ],
+ });
+ };
+
+ handleCarouselChange = (current) => {
+ this.setState({ currentMediaIndex: current });
+ };
+
+ handleDotClick = (index) => {
+ this.setState({ currentMediaIndex: index });
};
- componentDidUpdate(prevProps, prevState) {
- // 当从其他tab切换回首页时
- if (prevState.activeTab !== this.state.activeTab && this.state.activeTab === '首页') {
- // 延迟确保DOM已渲染
- setTimeout(() => {
- this.executionChart();
- }, 300); // 稍微增加延迟时间
- }
- }
handleTabClick = (name) => {
- // 如果从首页切换到其他tab，先清理图表
-
this.setState({ activeTab: name });
-
- const tabActions = {
- 首页: () => {
- console.log('跳转到首页');
- // 首页图表会在componentDidUpdate中初始化
- },
- 风险管控: () => {
- console.log('跳转到风险管控');
- },
- 隐患治理: () => {
- console.log('跳转到隐患治理');
- },
- // ... 其他tab
- };
-
- if (tabActions[name]) {
- tabActions[name]();
- }
};
+
+ handleFullscreenChange = () => {
+ this.forceUpdate();
+ };
+
componentWillUnmount() {
+ this.isUnmounted = true;
window.removeEventListener('resize', this.setScale);
- clearInterval(this.timer);
+ if (this.timer) clearInterval(this.timer);
+ document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
}
+
getDate = () => {
- var myDate = new Date();
- var year = myDate.getFullYear(); //获取当前年
- var mon = myDate.getMonth() + 1; //获取当前月
- var date = myDate.getDate(); //获取当前日
- // var hours = myDate.getHours(); //获取当前小时
- // var minutes = myDate.getMinutes(); //获取当前分钟
-
- if (myDate.getHours() < 10) {
- var hours = '0' + myDate.getHours();
- } else {
- hours = myDate.getHours(); //获取当前小时
- }
- if (myDate.getMinutes() < 10) {
- var minutes = '0' + myDate.getMinutes();
- } else {
- minutes = myDate.getMinutes(); //获取当前分钟
- }
- if (myDate.getSeconds() < 10) {
- var seconds = '0' + myDate.getSeconds();
- } else {
- seconds = myDate.getSeconds(); //获取当前秒
- }
-
- var now = year + ' 年 ' + mon + ' 月 ' + date + ' 日 ' + '\t\t\t' + hours + ' : ' + minutes + ' : ' + seconds;
- return now;
+ const myDate = new Date();
+ const year = myDate.getFullYear();
+ const mon = myDate.getMonth() + 1;
+ const date = myDate.getDate();
+ let hours = myDate.getHours();
+ let minutes = myDate.getMinutes();
+ let seconds = myDate.getSeconds();
+ hours = hours < 10 ? '0' + hours : hours;
+ minutes = minutes < 10 ? '0' + minutes : minutes;
+ seconds = seconds < 10 ? '0' + seconds : seconds;
+ return `${year} 年 ${mon} 月 ${date} 日 \t\t\t${hours} : ${minutes} : ${seconds}`;
};
+
getHomeDataArray = () => {
- var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
- let json = initFilter(orgId);
+ const orgId = storage('lacal').getItem('webOrgId')?.val;
+ const json = initFilter(orgId);
this.props.dispatch({
type: 'app/getDataByPost',
payload: json,
url: 'BI/BIKanBanController/ReturnAllData',
onComplete: (ret) => {
- if (ret) {
- this.setState(
- {
- riskTypeRate: ret.riskTypeRate,
- linkSum: ret.linkSum,
- jobTodayTop3: ret.jobTodayTop3,
- hiddenRectify: ret.hiddenRectify,
- taskTop3: ret.taskTop3,
- jobFinishRate: ret.jobFinishRate,
- safeCheckSum: ret.safeCheckSum,
- listSETrainSum: ret.listSETrainSum,
- },
- () => {
- this.executionChart();
- }
- );
+ if (ret && !this.isUnmounted) {
+ this.setState({
+ riskTypeRate: ret.riskTypeRate || [],
+ linkSum: ret.linkSum || [],
+ jobTodayTop3: ret.jobTodayTop3 || [],
+ taskTop3: ret.taskTop3 || [],
+ });
}
},
});
};
- riskLevel = () => {
- // 如果已有实例，先销毁
- if (this.echartsInstances.riskLevel) {
- this.echartsInstances.riskLevel.dispose();
- this.echartsInstances.riskLevel = null;
- }
- const riskLevels = document.getElementById('riskLevelFull');
- if (!riskLevels) {
- // 使用requestAnimationFrame而不是setTimeout
- requestAnimationFrame(() => {
- this.executionChart();
- });
- return;
- }
- // 初始化echarts实例并保存引用
- this.echartsInstances.riskLevel = echarts.init(riskLevels);
- const option = {
- color: ['#c92a2a', '#FF6710', '#FFDD1E', '#0091FF', '#fa8a89'],
- title: [
- {
- text: '风险分级占比',
- x: 'center',
- y: '5%',
- textStyle: {
- fontSize: 16,
- color: '#fff',
- },
- },
- ],
- tooltip: {
- trigger: 'item',
- formatter: function (params) {
- const color = params.color;
- return `
+
+
+
+
+
+
+
+
+ ))}
+
+ {item.riskType}
+ {item.count}
+
+
+
+
+
+
+ {/* 中间区域 */}
+ 年度隐患数据
+ {riskTotal.map((item, index) => (
+
+
+ ))}
+
+ {item.name}
+ {item.value}
+
+
+
+ 安全方针：以人为本、关注健康、依法治企、安全发展。
+ 安全理念：一切风险皆可控，一切事故皆可防！
+
+
+
+
+
+ {mediaList.map((item, index) => (
+
+
+
+ {item.type === 'video' ? (
+
+ ) : (
+ 
+ )}
+
+ ))}
+
+
+
+
+
+ {mediaList.map((_, index) => (
+ this.handleDotClick(index)}
+ />
+ ))}
+
+
+
+
+
+ {/* 右侧区域 */}
+
+
+
+
+ 共 {announcementList.length} 条公告
+
+ {announcementList.length > 0 ? (
+
+ -
+ {announcementList.map((item, index) => (
+
- item.url && window.open(item.url)} + > + + {item.title} + + + {item.publishTime || item.createTime || item.date} + + + ))} +
+
+ )}
+
+
+
+
+
+
+
+ 年度培训数据
+ {riskTotal.map((item, index) => (
+
+
+ ))}
+
+ {item.name}
+ {item.value}
+
+
+
+
+
-
- ${params.name}:
- ${params.value}
-
`;
- },
- backgroundColor: 'rgba(255, 255, 255, 0.5)',
- borderColor: '#FFFFFF',
- borderWidth: 2,
- textStyle: {
- color: '#000',
- fontSize: 14,
- fontWeight: 'normal',
- },
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- minAngle: 20,
- radius: ['40%', '60%'],
- center: ['50%', '50%'],
- clockwise: true,
- avoidLabelOverlap: true,
- hoverOffset: 15,
- label: {
- show: true,
- position: 'inside',
- formatter: '{a|{b}：{c}}{e|({d}%)}\n',
- color: '#FFFFFF',
- textBorderWidth: 0,
- rich: {
- a: {
- padding: [-15, 0, 0, 0],
- fontSize: 15,
- color: '#FFFFFF',
- textBorderWidth: 0,
- textShadow: 'none',
- },
- e: {
- fontSize: 14,
- color: '#FFFFFF',
- padding: [-15, 0, 0, 5],
- textBorderWidth: 0,
- textShadow: 'none',
- },
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- },
- data: this.state.riskTypeRate.map((item) => ({
- name: item.riskType,
- value: item.count,
- })),
- },
- ],
- };
-
- this.echartsInstances.riskLevel.setOption(option);
-
- // 监听窗口大小变化
- const resizeHandler = () => {
- if (this.echartsInstances.riskLevel) {
- this.echartsInstances.riskLevel.resize();
- }
- };
-
- // 移除旧的监听器
- if (this.riskResizeHandler) {
- window.removeEventListener('resize', this.riskResizeHandler);
- }
-
- this.riskResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
- };
- transformDat = (originalData, barTopColor, num) => {
- // 添加空值检查
- if (!originalData || !Array.isArray(originalData) || originalData.length === 0) {
- return {
- companyNames: [],
- series: [],
- legendData: [],
- };
- }
- // 获取所有的类型名称（去重）
- let allTypes = [];
- if (num == 1) {
- allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.jobName)))];
- } else {
- allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.name)))];
- }
-
- // 获取所有的公司名称（作为 x 轴标签）
- const companyNames = originalData?.map((item) => item.company);
-
- // 为每个类型创建数据系列
- const series = allTypes?.map((typeName, index) => {
- return {
- name: typeName,
- type: 'bar',
- itemStyle: {
- normal: {
- color: function (params) {
- if (num == 1) {
- return barTopColor[index];
- } else {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: barTopColor[index][0],
- },
- {
- offset: 1,
- color: barTopColor[index][1],
- },
- ]);
- }
- },
- },
- },
- data: originalData?.map((company) => {
- // 找到该公司对应类型的数据，如果没有则返回 0
- const detail = company.details?.find((d) => (num == 1 ? d.jobName : d.name) === typeName);
- return detail ? detail.qty : 0;
- }),
- };
- });
-
- return {
- companyNames, // x 轴数据
- series, // 系列数据
- legendData: allTypes, // legend 的 data
- };
- };
-
- safeCheckChart = () => {
- if (this.echartsInstances.safeCheckChart) {
- this.echartsInstances.safeCheckChart.dispose();
- this.echartsInstances.safeCheckChart = null;
- }
-
- let safeCheckCharts = document.getElementById('safeCheckChart');
- if (!safeCheckCharts) {
- requestAnimationFrame(() => {
- this.safeCheckChart();
- });
- return;
- }
- const barTopColor = ['#02c3f1', '#53e568', '#a154e9'];
-
- this.echartsInstances.safeCheckChart = echarts.init(safeCheckCharts);
- let xdata = [];
- xdata = this.transformDat(this.state.jobTodayTop3, barTopColor, 1);
- this.echartsInstances.safeCheckChart.setOption({
- title: {
- text: '当日工作票排名前三家的数据',
- textStyle: {
- fontSize: 16,
- color: '#fff',
- },
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- // 坐标轴指示器，坐标轴触发有效
- type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
- },
- },
- legend: {
- data: xdata.legendData,
- align: 'right',
- right: 10,
- itemGap: 16,
- itemWidth: 18,
- itemHeight: 10,
- textStyle: {
- color: '#fff',
- fontStyle: 'normal',
- fontFamily: '微软雅黑',
- fontSize: 14,
- },
- },
- color: barTopColor,
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- data: xdata.companyNames,
- textStyle: {
- fontSize: 18,
- color: '#ffffff',
- },
- //坐标轴
- axisLine: {
- lineStyle: {
- color: '#3eb2e8',
- },
- },
- //坐标值标注
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- },
- },
- },
- ],
- yAxis: [
- {
- type: 'value',
- textStyle: {
- fontSize: 14,
- color: '#ffffff',
- },
- //坐标轴
- axisLine: {
- show: false,
- },
- //坐标值标注
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- },
- },
- //分格线
- splitLine: {
- lineStyle: {
- color: '#4784e8',
- },
- },
- },
- ],
- series: xdata.series,
- });
-
- // 监听resize
- const resizeHandler = () => {
- if (this.echartsInstances.safeCheckChart) {
- this.echartsInstances.safeCheckChart.resize();
- }
- };
-
- if (this.safeCheckResizeHandler) {
- window.removeEventListener('resize', this.safeCheckResizeHandler);
- }
-
- this.safeCheckResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
- };
- dangerOperation = () => {
- // 如果已有实例，先销毁
- if (this.echartsInstances.dangerOperation) {
- this.echartsInstances.dangerOperation.dispose();
- this.echartsInstances.dangerOperation = null;
- }
-
- const dangerOperationCharts = document.getElementById('dangerOperationChart');
- if (!dangerOperationCharts) {
- // 使用requestAnimationFrame而不是setTimeout
- requestAnimationFrame(() => {
- this.executionChart();
- });
- return;
- }
-
- let legendData = [];
- (this.state.linkSum.map((item) => {
- legendData.push(item.name);
- }),
- // 初始化echarts实例并保存引用
- (this.echartsInstances.dangerOperation = echarts.init(dangerOperationCharts)));
-
- const option = {
- color: [
- '#0090FF',
- '#36CE9E',
- '#e690d1',
- '#FF515A',
- '#8B5CFF',
- '#00CA69',
- '#FFC107',
- '#E91E63',
- '#9C27B0',
- '#3F51B5',
- '#2196F3',
- '#4CAF50',
- '#FF9800',
- '#795548',
- '#607D8B',
- ],
- title: [
- {
- text: '各公司危险作业分类统计',
- x: 'center',
- y: '5%',
- textStyle: {
- fontSize: 16,
- color: '#fff',
- },
- },
- ],
- legend: {
- type: 'scroll',
- orient: 'vertical',
- left: '5%',
- align: 'left',
- top: '5%',
- textStyle: {
- color: '#fff',
- },
- height: 250,
- },
- tooltip: {
- trigger: 'item',
- formatter: function (params) {
- const color = params.color;
- return `
-
- ${params.name}:
- ${params.value}
-
`;
- },
- backgroundColor: 'rgba(255, 255, 255, 0.5)',
- borderColor: '#FFFFFF',
- borderWidth: 2,
- textStyle: {
- color: '#000',
- fontSize: 14,
- fontWeight: 'normal',
- },
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- minAngle: 20,
- center: ['55%', '50%'],
- radius: ['40%', '65%'],
- clockwise: true,
- avoidLabelOverlap: true,
- hoverOffset: 15,
- label: {
- show: true,
- position: 'outside',
- formatter: '{a|{b}：{c}}{e|({d}%)}\n',
- // color: '#FFFFFF',
- textBorderWidth: 0,
- rich: {
- a: {
- padding: [-15, 0, 0, 0],
- fontSize: 15,
- // color: '#FFFFFF',
- textBorderWidth: 0,
- textShadow: 'none',
- },
- e: {
- fontSize: 14,
- // color: '#FFFFFF',
- padding: [-15, 0, 0, 5],
- textBorderWidth: 0,
- textShadow: 'none',
- },
- },
- },
- labelLine: {
- normal: {
- length: 5,
- length2: 3,
- smooth: true,
- },
- },
- data: this.state.linkSum.map((item) => ({
- name: item.name,
- value: item.qty,
- })),
- },
- ],
- };
-
- this.echartsInstances.dangerOperation.setOption(option);
-
- // 监听窗口大小变化
- const resizeHandler = () => {
- if (this.echartsInstances.dangerOperation) {
- this.echartsInstances.dangerOperation.resize();
- }
- };
-
- // 移除旧的监听器
- if (this.dangerOperationResizeHandler) {
- window.removeEventListener('resize', this.dangerOperationResizeHandler);
- }
-
- this.dangerOperationResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
- };
- backLog = () => {
- if (this.echartsInstances.backLogChart) {
- this.echartsInstances.backLogChart.dispose();
- this.echartsInstances.backLogChart = null;
- }
-
- let backLogCharts = document.getElementById('backLogChart');
- if (!backLogCharts) {
- requestAnimationFrame(() => {
- this.backLogChart();
- });
- return;
- }
- const barTopColor = [
- ['#75baf3', '#2177d5'],
- ['#ffa94d', '#f76707'],
- ['#99ca6e', '#48a447'],
- ];
-
- this.echartsInstances.backLogChart = echarts.init(backLogCharts);
- let xdata = [];
- xdata = this.transformDat(this.state.taskTop3, barTopColor, 2);
- // 创建图例的渐变色块
- const legendColors = barTopColor.map((gradient) => gradient[0]);
- this.echartsInstances.backLogChart.setOption({
- title: {
- text: '各事项排名前三名统计',
- textStyle: {
- fontSize: 16,
- color: '#fff',
- },
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- // 坐标轴指示器，坐标轴触发有效
- type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
- },
- },
- legend: {
- data: xdata.legendData.map((name, index) => ({
- name: name,
- // 使用渐变的起始颜色作为图例颜色
- // icon: 'rect',
- itemStyle: {
- color: legendColors[index],
- borderWidth: 0,
- },
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- })),
- align: 'right',
- right: 10,
- itemGap: 16,
- itemWidth: 18,
- itemHeight: 12,
- textStyle: {
- color: '#fff',
- fontStyle: 'normal',
- fontFamily: '微软雅黑',
- fontSize: 14,
- },
- },
- color: legendColors, // 设置全局颜色
-
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- data: xdata.companyNames,
- textStyle: {
- fontSize: 18,
- color: '#ffffff',
- },
- //坐标轴
- axisLine: {
- lineStyle: {
- color: '#3eb2e8',
- },
- },
- //坐标值标注
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- },
- },
- },
- ],
- yAxis: [
- {
- type: 'value',
- textStyle: {
- fontSize: 14,
- color: '#ffffff',
- },
- //坐标轴
- axisLine: {
- show: false,
- },
- //坐标值标注
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- },
- },
- //分格线
- splitLine: {
- lineStyle: {
- color: '#4784e8',
- },
- },
- },
- ],
- series: xdata.series,
- });
-
- // 监听resize
- const resizeHandler = () => {
- if (this.echartsInstances.backLogChart) {
- this.echartsInstances.backLogChart.resize();
- }
- };
-
- if (this.backLogResizeHandler) {
- window.removeEventListener('resize', this.backLogResizeHandler);
- }
-
- this.backLogResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
- };
- completeChart = () => {
- if (this.echartsInstances.completeone) {
- this.echartsInstances.completeone.dispose();
- this.echartsInstances.completeone = null;
- }
-
- let completeCharts = document.getElementById('completeone');
- if (!completeCharts) {
- requestAnimationFrame(() => {
- this.completeChart();
- });
- return;
- }
-
- this.echartsInstances.completeone = echarts.init(completeCharts);
- let seriesArr = [];
- let centerArr = [
- ['20%', '50%'],
- ['50%', '50%'],
- ['80%', '50%'],
- ];
- const completeData = this.state.jobFinishRate
- .filter((item) => item.name === '班前会议' || item.name === '岗位当班' || item.name === '岗位交接班')
- .map((item) => {
- return {
- name: item.name,
- value: item.rate,
- };
- });
- const colorArr = [
- [
- [0.2, '#2ec7c9'],
- [0.8, '#b6a2de'],
- [1, '#5ab1ef'],
- ],
- [
- [0.2, '#5470c6'],
- [0.8, '#91cc75'],
- [1, '#fac858'],
- ],
- [
- [0.2, '#4ea397'],
- [0.8, '#22c3aa'],
- [1, '#7bd9a5'],
- ],
- ];
- completeData.forEach((item, index) => {
- seriesArr.push({
- center: centerArr[index],
- axisLine: {
- show: true,
- lineStyle: {
- color: colorArr[index],
- width: 8,
- },
- radius: '90%', // 控制轴线本身的半径
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- length: 8, // 刻度线长度
- distance: 25, // 向内移动距离，负值越大越向内
- lineStyle: {
- color: '#fff', // 刻度线颜色
- width: 1, // 刻度线宽度
- },
- },
- axisLabel: {
- distance: 15, // 标签与刻度线的距离
- textStyle: {
- color: '#fff',
- fontSize: 10,
- },
- // 调整标签偏移
- offset: [0, 0], // [水平偏移, 垂直偏移]
- },
- itemStyle: {
- normal: {
- color: 'auto',
- },
- },
- radius: '80%',
- pointer: {
- show: true,
- width: '8%',
- length: '30%',
- },
- title: {
- textStyle: {
- // fontWeight: 'bolder',
- fontSize: 14,
- color: '#fff',
- },
- offsetCenter: [0, '100%'],
- },
- detail: {
- textStyle: {
- fontWeight: 'bolder',
- fontSize: 16,
- color: '#fff',
- },
- offsetCenter: [0, '68%'],
- formatter: '{value}%',
- // formatter: '{value}万\n(5048人)',
- },
- min: 0,
- max: 100,
- // name: '米类仪表盘',
- type: 'gauge',
- show: false,
- splitNumber: 10,
- data: [
- {
- name: item.name,
- value: item.value,
- },
- ],
- });
- });
- this.echartsInstances.completeone.setOption({
- series: seriesArr,
- });
-
- // 监听resize
- const resizeHandler = () => {
- if (this.echartsInstances.completeone) {
- this.echartsInstances.completeone.resize();
- }
- };
-
- if (this.completeResizeHandler) {
- window.removeEventListener('resize', this.completeResizeHandler);
- }
-
- this.completeResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
- };
- safedanger = () => {
- if (this.echartsInstances.opretionTrend) {
- this.echartsInstances.opretionTrend.dispose();
- this.echartsInstances.opretionTrend = null;
- }
-
- const opretionTrends = document.getElementById('opretionTrend');
- if (!opretionTrends) {
- requestAnimationFrame(() => {
- this.safedanger();
- });
- return;
- }
-
- this.echartsInstances.opretionTrend = echarts.init(opretionTrends);
-
- // ... 原有配置代码
- let bgColor = '#000';
- let color = [
- '#0090FF',
- '#36CE9E',
- '#e690d1',
- '#FF515A',
- '#8B5CFF',
- '#00CA69',
- '#FFC107',
- '#E91E63',
- '#9C27B0',
- '#3F51B5',
- '#2196F3',
- '#4CAF50',
- '#FF9800',
- '#795548',
- '#607D8B',
- ];
- const seriesNames = [];
- this.state.listSETrainSum.map((item) => {
- seriesNames.push(item.CN);
- });
-
- // 生成x轴数据（12个月）
- let xAxisData = [];
- xAxisData = Object.keys(
- this.state.listSETrainSum[0] === undefined || this.state.listSETrainSum[0] === null
- ? {}
- : this.state.listSETrainSum[0]
- )
- .filter((key) => key.startsWith('dtNowYM'))
- .map((key) => this.state.listSETrainSum[0][key].substring(0, 7))
- .sort((a, b) => new Date(a) - new Date(b)); // 按日期升序
-
- let yAxisData = [];
- yAxisData = this.state.listSETrainSum.map((item) => {
- const values = [];
- for (let i = 0; i <= 5; i++) {
- const key = i === 0 ? 'SUM_TRAIN_HOUR' : `SUM_TRAIN_HOUR_${i}`;
- values.push(item[key]);
- }
- return values;
- });
-
- // 生成15个系列的数据
- let seriesArr = [];
- for (let i = 0; i < this.state.listSETrainSum.length; i++) {
- seriesArr.push({
- name: seriesNames[i],
- type: 'line',
- smooth: true,
- symbolSize: 6,
- data: yAxisData[i],
- });
- }
-
- const hexToRgba = (hex, opacity) => {
- let rgbaColor = '';
- let reg = /^#[\da-f]{6}$/i;
- if (reg.test(hex)) {
- rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
- '0x' + hex.slice(5, 7)
- )},${opacity})`;
- }
- return rgbaColor;
- };
- const option = {
- title: [
- {
- text: '各家公司的安全教育培训学时统计',
- x: 'center',
- y: '5%',
- textStyle: {
- fontSize: 16,
- color: '#fff',
- },
- },
- ],
- backgroundColor: '',
- color: color,
- legend: {
- type: 'scroll', // 如果项目多可以使用滚动
- orient: 'vertical', // 设置为垂直排列
- right: 10, // 距离右侧的距离
- top: 'center', // 垂直居中
- align: 'left', // 文本左对齐
- textStyle: {
- color: '#fff', // 文字颜色
- fontSize: 12,
- },
- itemStyle: {
- color: 'inherit',
- borderWidth: 0,
- opacity: 1,
- },
- symbol: 'rect', // 实心矩形
- symbolSize: [12, 8], // 大小
- itemWidth: 10, // 图例标记的宽度
- itemHeight: 10, // 图例标记的高度
- itemGap: 15, // 图例每项之间的间隔
- pageButtonItemGap: 3,
- pageButtonGap: 5,
- pageButtonPosition: 'end',
- pageIconColor: '#00caf7',
- width: 100, // 限制宽度
- height: 250, // 限制高度，超出就会显示滚动
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- let html = '';
- params.forEach((v) => {
- html += `
-
- ${v.seriesName}
- ${v.value}
- `;
- });
-
- return html;
- },
- extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
- axisPointer: {
- type: 'shadow',
- shadowStyle: {
- // color: "#ffffff",
- shadowColor: 'rgba(225,225,225,1)',
- shadowBlur: 5,
- },
- },
- },
- grid: {
- top: '15%',
- left: '5%',
- right: '15%', // 为图例留出空间
- bottom: '15%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- axisLabel: {
- textStyle: {
- color: '#fff',
- },
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: '#fff',
- },
- },
- data: xAxisData,
- },
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- textStyle: {
- color: '#fff',
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 12,
- lineHeight: 40,
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#fff',
- },
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#00c7ff',
- width: 1,
- type: 'solid',
- },
- },
- axisTick: {
- show: false,
- },
- },
- ],
- series: seriesArr,
- };
-
- this.echartsInstances.opretionTrend.setOption(option);
- // 监听resize
- const resizeHandler = () => {
- if (this.echartsInstances.opretionTrend) {
- this.echartsInstances.opretionTrend.resize();
- }
- };
-
- if (this.trendResizeHandler) {
- window.removeEventListener('resize', this.trendResizeHandler);
- }
-
- this.trendResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
+ renderOtherTabContent = () => {
+ const { activeTab } = this.state;
+ return (
+
-
+
+ );
};
render() {
const width = 1920,
height = 1080;
- // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
- const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize, activeTab } = this.state;
- const renderContent = () => {
- const riskChangeData = [
- {
- name: '隐患数',
- value: this.state.hiddenRectify.qty,
- },
- {
- name: '按期整改数',
- value: this.state.hiddenRectify.ontimeQty,
- },
- {
- name: '延期整改数',
- value: this.state.hiddenRectify.delayQty,
- },
- ];
- const chartConfig = {
- data: this.state.safeCheckSum.map((item) => ({
- name: item.company,
- value: item.qty,
- })),
- showValue: true,
- };
- const meetingData = this.state.jobFinishRate.map((item) => ({
- name: item.name,
- value: item.qty,
- }));
- if (activeTab === '首页') {
- return (
- <>
- {/* 首页内容 - 原来的两行布局 */}
-
+
+ {activeTab} 页面
+ 这里是 {activeTab} 的内容展示区域
+ 请根据实际需求替换此内容
+
-
- {/* 原第一行内容 */}
-
-
-
- {/* 第二行内容 */}
-
-
-
-
-
-
+ const {
+ scale,
+ activeTab,
+ riskTypeRate,
+ riskTotal,
+ jobTodayTop3,
+ linkSum,
+ taskTop3,
+ mediaList,
+ announcementList,
+ currentMediaIndex,
+ } = this.state;
-
-
- {this.state.riskTypeRate.map((item, index) => (
-
-
-
-
- ))}
- {item.riskType}
- {item.count}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 安全方针：以人为本、关注健康、依法治企、安全发展。
-
-
- 安全理念：一切风险皆可控，一切事故皆可防！
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {meetingData &&
- meetingData.map((item, index) => (
-
-
-
-
-
- ))}
-
-
-
-
- {item.name}
-
- {item.value}
-
- 次
-
-
-
-
-
-
-
- );
- } else {
- // 其他tab的内容 - 这里可以替换为你想要的其他内容
- return (
-
-
-
-
-
-
-
-
- {riskChangeData &&
- riskChangeData.map((item, index) => (
-
-
-
- ))}
-
-
-
-
- {item.name}
- {item.value}
-
-
-
-
-
-
-
-
- 整改率
- {this.state.hiddenRectify.rate}%
-
-
-
-
-
-
-
-
-
-
-
-
-
- 各家公司安全检查统计
-
-
-
-
-
-
- );
- }
- };
return (
-
-
-
- {activeTab} 页面
- 这里是 {activeTab} 的内容展示区域
- 请根据实际需求替换此内容
-
-
-
- {/* 头部保持不变 */}
-
`; + params.forEach((param) => { + result += `${param.marker}${param.seriesName}: ${param.value}
`; + }); + return result; + }, + }, legend: { - data: xdata.legendData.map((name, index) => ({ - name: name, - itemStyle: { color: legendColors[index], borderWidth: 0 }, - textStyle: { color: '#000', fontSize: 14 }, - })), - align: 'right', - top: 10, - right: 10, - itemGap: 16, + data: ['培训人次', '培训场次'], + orient: 'vertical', // 垂直排列 + right: 0, // 水平居中 + top: 'middle', // 垂直居中 + itemGap: 16, // 图例项间隔 itemWidth: 18, itemHeight: 12, + textStyle: { color: '#000', fontSize: 14 }, + }, + grid: { + left: '5%', + right: '5%', // 为右侧垂直图例留出空间 + top: '18%', + bottom: '5%', + containLabel: true, }, - color: legendColors, - grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', - data: xdata.companyNames, - axisLine: { lineStyle: { color: '#3eb2e8' } }, - axisLabel: { textStyle: { color: '#000' } }, + data: listNAME, + axisLine: { show: false }, // 隐藏x轴线 + axisTick: { show: false }, // 隐藏x轴刻度线 + axisLabel: { + textStyle: { color: '#000' }, + rotate: listNAME.length > 4 ? 15 : 0, + interval: 0, + }, }, ], yAxis: [ { type: 'value', - axisLine: { show: false }, - axisLabel: { textStyle: { color: '#000' } }, - splitLine: { lineStyle: { color: '#4784e8' } }, + show: true, // 显示y轴 + axisLine: { show: false }, // 隐藏y轴线 + axisTick: { show: false }, // 隐藏y轴刻度线 + axisLabel: { + show: true, // 显示数值标签 + textStyle: { color: '#000' }, + }, + splitLine: { show: false }, // 隐藏横向网格线 + name: '', // 不显示单位名称 + nameTextStyle: { show: false }, // 隐藏单位文字 }, ], - series: xdata.series, - }); + series: [ + { + name: '培训人次', + type: 'bar', + data: monthPersonCount, + itemStyle: { + normal: { + color: '#4285F4', // 蓝色 + barBorderRadius: 12, // 柱体圆角 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#4285F4', fontSize: 12 }, + formatter: '{c}', + }, + barWidth: '35%', + }, + { + name: '培训场次', + type: 'bar', + data: monthRecordCount, + itemStyle: { + normal: { + color: '#ffe066', // 黄色 + barBorderRadius: 12, // 柱体圆角（上左、上右、下右、下左） + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#ffe066', fontSize: 12 }, + formatter: '{c}', + }, + barWidth: '35%', + }, + ], + }; + + this.echartsInstances.backLogChart.setOption(option); const resizeHandler = () => { if (this.echartsInstances.backLogChart && !this.isUnmounted) { @@ -451,7 +532,8 @@ class HomeContent extends React.Component { prevProps.riskTypeRate !== this.props.riskTypeRate || prevProps.jobTodayTop3 !== this.props.jobTodayTop3 || prevProps.linkSum !== this.props.linkSum || - prevProps.taskTop3 !== this.props.taskTop3 + prevProps.taskTop3 !== this.props.taskTop3 || + prevProps.trainingData !== this.props.trainingData // 新增 ) { this.disposeAllCharts(); this.initAllCharts(); @@ -602,12 +684,16 @@ class HomeContent extends React.Component {
`; + params.forEach((param) => { + const unit = param.seriesName === '培训人次' ? '人次' : '场次'; + result += `${param.marker}${param.seriesName}: ${param.value}${unit}
`; + }); + return result; + }, + }, + legend: { + data: ['培训人次', '培训场次'], + right: '3%', // 靠右 + top: '5%', // 垂直居中 + itemGap: 16, + itemWidth: 18, + itemHeight: 12, + textStyle: { color: '#000', fontSize: 14 }, + }, + grid: { + left: '5%', + right: '5%', // 为右侧垂直图例留出空间 + top: '18%', + bottom: '8%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: companyNames, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + textStyle: { color: '#000' }, + rotate: companyNames.length > 4 ? 15 : 0, + interval: 0, + }, + }, + ], + yAxis: [ + { + type: 'value', + show: true, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + show: true, + textStyle: { color: '#000' }, + }, + splitLine: { show: false }, + name: '', + nameTextStyle: { show: false }, + }, + ], + series: [ + { + name: '培训人次', + type: 'bar', + data: personCounts, + itemStyle: { + normal: { + color: '#4285F4', // 蓝色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#4285F4', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + { + name: '培训场次', + type: 'bar', + data: recordCounts, + itemStyle: { + normal: { + color: '#ffe066', // 黄色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#d4a000', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + ], + }; + + 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月']; + return months.map((month, index) => ( + + )); + }; + + // 图表2: 各部门培训完成率（横向柱状图） + renderChart2 = async () => { + if (this.isUnmounted) return; + const elementExists = await this.waitForElement('trainingChart2'); + if (!elementExists || this.isUnmounted) return; + + if (this.echartsInstances.chart2) { + this.echartsInstances.chart2.dispose(); + this.echartsInstances.chart2 = null; + } + + const chartDom = document.getElementById('trainingChart2'); + if (!chartDom) return; + + this.echartsInstances.chart2 = echarts.init(chartDom); + + // 使用 props 传入的 trainingSubData 数据（来自 getHomeSESubYear 接口） + const { trainingSubDataMonth } = this.props; + const companyNames = trainingSubDataMonth?.listNAME || []; // CName 数组 + const personCounts = trainingSubDataMonth?.MonthPersonCount || []; // PCount 数组（培训人次） + const recordCounts = trainingSubDataMonth?.MonthRecordCount || []; // RCount 数组（培训场次） + + // 如果没有数据，显示暂无数据提示 + if (companyNames.length === 0) { + this.echartsInstances.chart2.setOption({ + title: { + text: '本年度各公司培训分析', + x: 'center', + y: 'center', + textStyle: { fontSize: 16, color: '#999' }, + }, + graphic: { + type: 'text', + left: 'center', + top: 'middle', + style: { + text: '暂无培训数据', + fill: '#999', + fontSize: 14, + }, + }, + }); + return; + } + + 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) => { + const unit = param.seriesName === '培训人次' ? '人次' : '场次'; + result += `${param.marker}${param.seriesName}: ${param.value}${unit}
`; + }); + return result; + }, + }, + legend: { + data: ['培训人次', '培训场次'], + right: '3%', // 靠右 + top: '5%', // 垂直居中 + itemGap: 16, + itemWidth: 18, + itemHeight: 12, + textStyle: { color: '#000', fontSize: 14 }, + }, + grid: { + left: '5%', + right: '5%', // 为右侧垂直图例留出空间 + top: '18%', + bottom: '8%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: companyNames, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + textStyle: { color: '#000' }, + rotate: companyNames.length > 4 ? 15 : 0, + interval: 0, + }, + }, + ], + yAxis: [ + { + type: 'value', + show: true, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + show: true, + textStyle: { color: '#000' }, + }, + splitLine: { show: false }, + name: '', + nameTextStyle: { show: false }, + }, + ], + series: [ + { + name: '培训人次', + type: 'bar', + data: personCounts, + itemStyle: { + normal: { + color: '#4285F4', // 蓝色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#4285F4', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + { + name: '培训场次', + type: 'bar', + data: recordCounts, + itemStyle: { + normal: { + color: '#ffe066', // 黄色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#d4a000', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + ], + }; + + this.echartsInstances.chart2.setOption(option); + this.setupResizeHandler('chart2', this.renderChart2); + }; + + // 图表3: 培训类型分布（饼图） + renderChart3 = async () => { + if (this.isUnmounted) return; + const elementExists = await this.waitForElement('trainingChart3'); + if (!elementExists || this.isUnmounted) return; + + if (this.echartsInstances.chart3) { + this.echartsInstances.chart3.dispose(); + this.echartsInstances.chart3 = null; + } + + const chartDom = document.getElementById('trainingChart3'); + if (!chartDom) return; + + this.echartsInstances.chart3 = echarts.init(chartDom); + + // 培训类型分布数据 + const trainingTypes = [ + { name: '安全法规培训', value: 35 }, + { name: '操作规程培训', value: 28 }, + { name: '应急演练培训', value: 20 }, + { name: '职业健康培训', value: 12 }, + { name: '其他培训', value: 5 }, + ]; + + const option = { + title: { + text: '培训类型分布', + x: 'center', + y: '5%', + textStyle: { fontSize: 16, color: '#000', fontWeight: 'bold' }, + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + return `${params.name}: ${params.value}场 (${params.percent}%)`; + }, + }, + legend: { + orient: 'vertical', + right: '5%', + top: 'middle', + itemGap: 12, + itemWidth: 14, + itemHeight: 10, + textStyle: { color: '#333', fontSize: 11 }, + formatter: function (name) { + const item = trainingTypes.find((t) => t.name === name); + return `${name} ${item?.value || 0}场`; + }, + }, + color: ['#4285F4', '#66bb6a', '#ffa94d', '#ab47bc', '#ef5350'], + series: [ + { + name: '培训场次', + type: 'pie', + radius: ['45%', '70%'], + center: ['40%', '55%'], + avoidLabelOverlap: false, + label: { + show: true, + position: 'outside', + formatter: '{b}: {d}%', + textStyle: { fontSize: 11, color: '#333' }, + }, + emphasis: { + label: { show: true, fontSize: 14, fontWeight: 'bold' }, + }, + labelLine: { length: 8, length2: 8, smooth: true }, + data: trainingTypes, + }, + ], + }; + + this.echartsInstances.chart3.setOption(option); + this.setupResizeHandler('chart3', this.renderChart3); + }; + + // 图表4: 月度培训对比（分组柱状图） + renderChart4 = async () => { + if (this.isUnmounted) return; + const elementExists = await this.waitForElement('trainingChart4'); + if (!elementExists || this.isUnmounted) return; + + if (this.echartsInstances.chart4) { + this.echartsInstances.chart4.dispose(); + this.echartsInstances.chart4 = null; + } + + 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%', + })), + }; + + this.echartsInstances.chart4.setOption(option); + this.setupResizeHandler('chart4', this.renderChart4); + }; + + setupResizeHandler = (chartName, renderMethod) => { + const resizeHandler = () => { + if (this.echartsInstances[chartName] && !this.isUnmounted) { + this.echartsInstances[chartName].resize(); + } + }; + this.chartResizeHandlers[chartName] = resizeHandler; + window.addEventListener('resize', resizeHandler); + }; + + initAllCharts = () => { + if (this.isUnmounted) return; + setTimeout(() => { + if (this.isUnmounted) return; + this.renderChart1(); + this.renderChart2(); + this.renderChart3(); + this.renderChart4(); + }, 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 = {}; + }; + + componentDidMount() { + this.isUnmounted = false; + this.initAllCharts(); + } + + componentDidUpdate(prevProps) { + // 当 trainingSubData 或 trainingSubDataMonth 变化时重新渲染图表 + if ( + prevProps.trainingSubData !== this.props.trainingSubData || + prevProps.trainingSubDataMonth !== this.props.trainingSubDataMonth || + prevProps.selectedMonth !== this.props.selectedMonth + ) { + // this.renderChart1(); + this.renderChart2(); + } + } + + componentWillUnmount() { + this.isUnmounted = true; + this.disposeAllCharts(); + } + + render() { + const { selectedMonth = 1, onMonthChange } = this.props; + return ( +
-
-
);
}
}
diff --git a/src/layout/fullinter.less b/src/layout/fullinter.less
index 78156c9..0e7a020 100644
--- a/src/layout/fullinter.less
+++ b/src/layout/fullinter.less
@@ -1,3 +1,4 @@
+// fullinter.less - 修复后的完整样式
@font-face {
font-family: pangmenzhengdao;
src: url('../assets/fonts/pangmenzhengdao.ttf');
@@ -16,6 +17,7 @@
font-display: swap;
}
+// 主容器
.box {
transform-origin: 0 0;
position: absolute;
@@ -25,76 +27,72 @@
}
.blackBack {
- background-image: url('../assets/login/bg.png');
width: 100%;
- // height: calc(100% - 10px); // 进入全屏
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
+
.backImage {
- background-color: #021428; //021428
+ background-color: #f2f5f9;
width: 100%;
height: 100%;
- opacity: 0.9;
display: flex;
flex-direction: column;
overflow: hidden;
}
+
+// 头部
.header {
- // background-image: url('../assets/layout/full-header.png');
- // background-size: cover;
- // background-position: center;
- // background-repeat: no-repeat;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin: 10px;
- background-color: rgba(73, 122, 175, 0.3);
+ background-color: #fff;
+ flex-shrink: 0;
}
+
.headerText {
- color: GoldenRod;
+ color: #000;
font-size: 32px;
white-space: nowrap;
- // font-weight: bold;
- // margin-top: 10px;
- font-family: 'pangmenzhengdao';
+ font-weight: bold;
}
+
.configBanners {
- // height: 100%;
width: 110px;
height: 48px;
- font-size: 20px; // 适当减小字体大小
+ font-size: 20px;
margin: 0px 10px;
font-style: italic;
font-weight: bold;
- color: #fff;
- border: 1px solid transparent; // 默认透明边框
- // border: 1px solid #00caf7;
+ color: #000;
+ border: 1px solid transparent;
white-space: nowrap;
- background: linear-gradient(to bottom, #01408e, #07295e);
- display: flex; // 使用flex布局
- align-items: center; // 垂直居中
- justify-content: center; // 水平居中
- text-align: center; // 文字居中
- box-sizing: border-box; // 确保边框计算在内
- padding: 0 2px; // 如果需要可以添加内边距
- overflow: hidden; // 防止内容溢出
- text-overflow: ellipsis; // 文字过长显示省略号
- position: relative;
+ background: #e3f2e9;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ box-sizing: border-box;
+ padding: 0 2px;
overflow: hidden;
+ text-overflow: ellipsis;
+ position: relative;
+ cursor: pointer;
+
&:hover {
- border-color: #00caf7; // 悬停效果
+ border-color: #00caf7;
opacity: 0.9;
}
&.active {
border: 1px solid #00caf7 !important;
- background: linear-gradient(to bottom, #0150a0, #083070); // 激活时背景加深
- box-shadow: 0 0 10px rgba(0, 202, 247, 0.5); // 可选：添加发光效果
+ background: linear-gradient(to bottom, #01408e, #07295e);
+ color: #fff;
}
&::after {
@@ -116,6 +114,7 @@
animation: pulse 2s infinite;
}
}
+
@keyframes pulse {
0% {
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
@@ -127,18 +126,10 @@
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
}
}
-.boxBack {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- flex-direction: column;
- padding: 0px 20px;
-}
+
+// 其他tab内容
.otherTabContent {
- flex: 1; // 占据剩余空间
- // width: 100%;
- height: 100%;
+ flex: 1;
display: flex;
align-items: center;
justify-content: center;
@@ -147,405 +138,455 @@
margin: 0px 10px 10px 10px;
border: 1px solid rgba(0, 202, 247, 0.3);
}
-.row {
- // height: calc(65% - 200px);
+
+// ========== HomeContent 组件样式 ==========
+.homeContentWrapper {
flex: 1;
width: 100%;
+ overflow: hidden;
+ padding: 0 10px 10px 10px;
+ box-sizing: border-box;
}
-.rowTwo {
- height: 30%;
+
+.homeContentRow {
+ height: 100%;
width: 100%;
+}
+
+// 左右列通用样式
+.leftCol,
+.rightCol,
+.middleCol {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+// 左侧和右侧卡片样式
+.riskCard {
+ flex: 1;
+ background-color: #fff;
+ border-radius: 4px;
+ overflow: hidden;
+ min-height: 0;
+}
+
+.hiddenCard {
+ flex: 1;
+ background-color: #fff;
+ border-radius: 4px;
+ overflow: hidden;
margin-top: 10px;
+ min-height: 0;
}
-.boxleft {
+
+.dangerCard {
+ flex: 1;
+ background-color: #fff;
+ border-radius: 4px;
+ overflow: hidden;
+ min-height: 0;
+}
+
+.spacer {
+ height: 10px;
+ flex-shrink: 0;
+}
+
+.riskRow {
height: 100%;
- // width: 100%;
+ width: 100%;
+}
+
+.riskStatsCol,
+.hiddenStatsCol,
+.trainingStatsCol {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 10px 0;
+}
+
+.chartCol {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.chartContainer {
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+}
+
+.fullChartContainer {
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+}
+
+// 风险等级统计项
+.riskStatItem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
-}
-.fullBorderBox {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 10px; // 如果需要内边距
- box-sizing: border-box; // 确保内边距计算在内
-}
-.risklevel {
- height: 50%;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0px 10px;
-}
-.risklevelOne {
- height: 50%;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0px 10px;
-}
-.risklevelTwo {
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0px 10px 10px 10px;
-}
-.riskChange {
- width: 30%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- padding: 20px 10px;
-}
-.riskChangeTwo {
- width: 70%;
- height: 100%;
- padding: 26px 10px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-.gradient {
- background-image: linear-gradient(
- 250deg,
- rgba(47, 109, 255, 1) 0%,
- rgba(255, 255, 255, 54) 50%,
- rgba(47, 109, 255, 1) 100%
- );
- width: 100%;
- height: 30%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 2px;
- // margin: 10px;
-}
-.gradientTwo {
- background-image: linear-gradient(
- 250deg,
- rgba(47, 109, 255, 1) 0%,
- rgba(255, 255, 255, 54) 50%,
- rgba(47, 109, 255, 1) 100%
- );
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- padding: 2px;
-}
-.gradientThree {
- background-image: linear-gradient(
- 275deg,
- rgba(47, 109, 255, 1) 0%,
- rgba(255, 255, 255, 54) 50%,
- rgba(47, 109, 255, 1) 100%
- );
- display: flex;
- align-items: center;
- justify-content: space-around;
- padding: 2px;
-}
-.gradientNext {
- width: 100%;
- height: 100%;
- background-color: #021428;
- // z-index: 999;
-}
-.gradientNextTwo {
- width: 100%;
- height: 100%;
- background-color: rgba(47, 109, 255, 0.1);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 5px;
- color: #fff;
-}
-.gradientText {
- font-size: 34px;
font-weight: bold;
- color: #49ebff;
- font-style: italic;
- font-family: '站酷庆科黄油体';
-}
-.gradientName {
- font-size: 12px;
-}
-.gradientTextTwo {
- font-size: 86px;
- font-weight: bold;
- // color: #ef595a;
- color: #12f714;
-}
-.gradientNameTwo {
- font-size: 28px;
-}
-.title {
- background-image: url('../assets/layout/title.png');
- background-size: cover;
- background-position: bottom;
- background-repeat: no-repeat;
- width: 90%;
- height: 25px;
- padding-bottom: 10px;
- display: flex;
- flex-direction: row;
- align-items: center;
- // justify-content: center;
-}
-.circle {
- width: 12px;
- height: 12px;
- background: #021428;
- border-radius: 50%;
- border: 3px solid #fff;
- margin-right: 5px;
-}
-.titlename {
color: #fff;
- font-size: 16px;
- font-family: '站酷庆科黄油体';
- letter-spacing: 3px;
-}
-// .risklevelOne {
-// height: 60%;
-// width: 90%;
-// }
-.boxTwo {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- // width: 100%;
-}
-.capsuleChart {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- flex-direction: column;
- padding: 20px;
-}
-.scrollboard {
- width: 90%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0px 20px 20px 20px;
+ margin: 10px 20px;
+ padding: 5px 10px;
+ border-radius: 4px;
flex: 1;
}
-.scrollboard :global(.header) {
- height: auto;
+
+.riskStatName {
+ margin-bottom: 5px;
+ font-size: 16px;
+}
+
+.riskStatValue {
+ font-size: 26px;
+}
+
+// 风险等级背景色
+.riskLevel重大风险 {
+ background-color: #c92a2a;
+}
+.riskLevel较大风险 {
+ background-color: #ffa94d;
+}
+.riskLevel一般风险 {
+ background-color: #ffe066;
+}
+.riskLevel低风险 {
+ background-color: #4285f4;
+}
+
+// 隐患统计样式
+.hiddenTitle {
+ color: #000;
+ font-size: 16px;
+ margin: 10px 0;
+ font-weight: bold;
+ text-align: center;
+}
+
+.hiddenStatItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ color: #fff;
+ background-color: #1e2a3a;
+ margin: 10px 20px;
+ padding: 5px 10px;
+ border-radius: 4px;
+ flex: 1;
+}
+
+.hiddenStatName {
+ margin-bottom: 5px;
+ font-size: 14px;
+}
+
+.hiddenStatValue {
+ font-size: 36px;
+}
+
+// 培训统计样式
+.trainingTitle {
+ color: #000;
+ font-size: 16px;
+ margin: 10px 0;
+ font-weight: bold;
+ text-align: center;
+}
+
+.trainingStatItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ color: #fff;
+ background-color: #1e2a3a;
+ margin: 10px 20px;
+ padding: 5px 10px;
+ border-radius: 4px;
+ flex: 1;
+}
+
+.trainingStatName {
+ margin-bottom: 5px;
+ font-size: 14px;
+}
+
+.trainingStatValue {
+ font-size: 36px;
+}
+
+// 中间区域样式
+.middleCol {
+ padding: 0 10px;
+}
+
+.sloganCard {
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 15px;
+ text-align: center;
+ flex-shrink: 0;
+}
+
+.sloganText {
+ font-size: 20px;
+ font-weight: bold;
+ margin-bottom: 8px;
+ color: #000;
+}
+
+.sloganSubText {
+ font-size: 20px;
+ font-weight: bold;
+ color: #000;
+}
+
+.carouselCard {
+ flex: 4;
+ background-color: #fff;
+ border-radius: 4px;
+ margin-top: 10px;
+ overflow: hidden;
+ min-height: 0;
+}
+
+.carouselWrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.carousel {
+ width: 100%;
+ height: 100%;
+}
+
+.carouselItem {
+ width: 100%;
+ height: 100%;
+}
+
+.mediaVideo {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.mediaImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.announcementCard {
+ flex: 3;
+ background-color: #fff;
+ border-radius: 4px;
+ margin-top: 10px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ min-height: 0;
+}
+
+.announcementHeader {
+ width: 100%;
+ padding: 12px 16px;
+ border-bottom: 2px solid #1890ff;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-shrink: 0;
+}
+
+.announcementTitle {
+ display: flex;
+ align-items: center;
+}
+
+.announcementIcon {
+ font-size: 20px;
+ color: #1890ff;
+ margin-right: 8px;
+}
+
+.announcementTitle span {
+ font-size: 20px;
+ font-weight: bold;
+ color: #1890ff;
+}
+
+.announcementCount {
+ font-size: 14px;
+ color: #999;
+}
+
+.announcementList {
+ flex: 1;
+ overflow-y: auto;
+ padding: 8px 0;
+}
+
+.announcementUl {
+ list-style: none;
+ margin: 0;
padding: 0;
}
-.scrollboard :global(.dv-scroll-board .rows .ceil) {
- text-align: center;
-}
-.scrollboard :global(.dv-scroll-board .header .header-item) {
- text-align: center;
+
+.announcementItem {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 16px;
+ border-bottom: 1px solid #f0f0f0;
+ cursor: pointer;
+ transition: background-color 0.3s;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
}
-.scoreBox {
- // background-image: url("../assets/layout/score-box.png");
- // background-size: cover;
- // background-position: center;
- // background-repeat: no-repeat;
- width: 100%;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20px;
+.announcementItemTitle {
+ font-size: 18px;
+ color: #333;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ text-align: left;
}
-.scoreBox1 {
- background-image: url('../assets/layout/score-box.png');
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- width: 100%;
- // height: 140px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- margin-bottom: 20px;
- padding: 5px;
+
+.announcementItemTime {
+ font-size: 16px;
+ color: #999;
+ margin-left: 16px;
+ white-space: nowrap;
}
-.score {
- display: flex;
- flex-direction: row;
- // align-items: center;
- // justify-content: space-between;
- background-image: url('../assets/layout/ks.png');
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- object-fit: cover;
- // width: 230px;
- width: 33%;
- height: auto;
- margin: 10px;
-}
-.score2 {
- display: flex;
- flex-direction: row;
- // align-items: center;
- // justify-content: space-between;
- background-image: url('../assets/layout/xk.png');
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- object-fit: cover;
- width: 33%;
- height: auto;
- margin: 10px;
-}
-.score3 {
- display: flex;
- flex-direction: row;
- // align-items: center;
- // justify-content: space-between;
- background-image: url('../assets/layout/wk.png');
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- object-fit: cover;
- width: 33%;
- height: auto;
- margin: 10px;
-}
-.score4 {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- background-image: url('../assets/layout/score.png');
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- width: 30%;
- padding: 0px 15px;
- // height: 100%;
- // margin: 10px;
-}
-.scoreRight {
+
+.emptyAnnouncement {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- width: 40%;
- margin-left: 50%;
-}
-.scoreLeft {
- font-size: 12px;
- font-weight: bold;
- color: #6cc8d9;
- margin-top: 5px;
-}
-.scoreText {
- font-size: 13px;
- font-weight: bold;
- color: #6cc8d9;
-}
-.scoreText2 {
- font-size: 33px;
- color: #7fffff;
- font-weight: bold;
- // font-style: oblique;
-}
-.scoreText3 {
- font-size: 12px;
- color: #6cc8d9;
- font-weight: bold;
-}
-.ulData {
- li {
- // transform: rotate(45deg);
- position: absolute;
- left: 50%;
- top: 50%;
- // margin-left: -20px;
- // margin-right: -20px;
- transform: translate(-50%, -50%);
- }
- li:nth-of-type(1) {
- // transform: rotate(45deg);
- transform: translate(-50%, -50%) rotate(12deg) translate(-280px) rotate(-12deg);
- // transform-origin: 20px 220px;
- }
- li:nth-of-type(2) {
- transform: translate(-50%, -50%) rotate(38deg) translate(-280px) rotate(-38deg);
- }
- li:nth-of-type(3) {
- transform: translate(-50%, -50%) rotate(64deg) translate(-280px) rotate(-64deg);
- }
- li:nth-of-type(4) {
- transform: translate(-50%, -50%) rotate(90deg) translate(-280px) rotate(-90deg);
- }
- li:nth-of-type(5) {
- transform: translate(-50%, -50%) rotate(116deg) translate(-280px) rotate(-116deg);
- }
- li:nth-of-type(6) {
- transform: translate(-50%, -50%) rotate(142deg) translate(-280px) rotate(-142deg);
- }
- li:nth-of-type(7) {
- transform: translate(-50%, -50%) rotate(168deg) translate(-280px) rotate(-168deg);
- }
- li:nth-of-type(8) {
- transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) rotate(12deg);
- }
- li:nth-of-type(9) {
- transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) rotate(38deg);
- }
- li:nth-of-type(10) {
- transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) rotate(64deg);
- }
- li:nth-of-type(11) {
- transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) rotate(116deg);
- }
-
- li:nth-of-type(12) {
- transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) rotate(142deg);
- }
- li:nth-of-type(13) {
- transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) rotate(168deg);
- }
+ height: 100%;
+ color: #999;
}
-.roateData {
- background-image: linear-gradient(
- 275deg,
- rgba(47, 109, 255, 1) 0%,
- rgba(255, 255, 255, 54) 50%,
- rgba(47, 109, 255, 1) 100%
- );
+.emptyIcon {
+ font-size: 48px;
+ margin-bottom: 16px;
+}
+
+// 轮播图控件
+.customArrowLeft,
+.customArrowRight {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 40px;
+ height: 60px;
display: flex;
align-items: center;
- justify-content: space-around;
- padding: 2px;
- // background-color: rgba(47, 109, 255, 0.1);
+ justify-content: center;
+ cursor: pointer;
+ z-index: 10;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(4px);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ transform: translateY(-50%) scale(1.1);
+ }
+
+ &:active {
+ transform: translateY(-50%) scale(0.95);
+ }
}
-.roatBack {
- background-color: #021428;
- width: 100%;
- height: 100%;
- padding: 5px;
+
+.customArrowLeft {
+ left: 20px;
+}
+
+.customArrowRight {
+ right: 20px;
+}
+
+.customDots {
+ position: absolute;
+ bottom: 16px;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ z-index: 10;
+}
+
+.dot {
+ width: 24px;
+ height: 6px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 0.5);
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.8);
+ transform: scale(1.2);
+ }
+}
+
+.activeDot {
+ width: 24px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
+// 全局 Carousel 样式
+:global {
+ .ant-carousel {
+ height: 100%;
+ width: 100%;
+ }
+ .slick-slider {
+ height: 100%;
+ width: 100%;
+ }
+ .slick-list {
+ height: 100%;
+ }
+ .slick-track {
+ height: 100%;
+ }
+ .slick-slider > div,
+ .slick-list > div,
+ .slick-track > div,
+ .slick-slide > div {
+ height: 100%;
+ }
+ .slick-slide,
+ .slick-slide > div {
+ height: 100%;
+ }
+ .slick-slider div,
+ .slick-list div,
+ .slick-track div {
+ height: 100%;
+ }
}
From 32c619a778d44c7f5c817d3ea8e5a377feb28057 Mon Sep 17 00:00:00 2001
From: yunkexin <760754045@qq.com>
Date: Wed, 22 Apr 2026 16:14:55 +0800
Subject: [PATCH 8/8] =?UTF-8?q?=E5=AE=89=E5=85=A8=E5=9F=B9=E8=AE=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layout/FullOther/HomeContent.js | 158 ++++--
src/layout/FullOther/TrainingContent.js | 623 ++++++++++++++++++++++++
src/layout/FullScreenInter.js | 138 +++++-
src/layout/fullinter.less | 83 ++++
4 files changed, 964 insertions(+), 38 deletions(-)
create mode 100644 src/layout/FullOther/TrainingContent.js
diff --git a/src/layout/FullOther/HomeContent.js b/src/layout/FullOther/HomeContent.js
index acfb817..15bff2e 100644
--- a/src/layout/FullOther/HomeContent.js
+++ b/src/layout/FullOther/HomeContent.js
@@ -290,7 +290,7 @@ class HomeContent extends React.Component {
type: 'bar',
data: seriesData,
itemStyle: {
- normal: { color: '#4285F4', borderRadius: 12 },
+ normal: { color: '#4285F4', barBorderRadius: 12 },
emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
},
label: { show: true, position: 'top', textStyle: { color: '#000', fontSize: 12 }, formatter: '{c}' },
@@ -323,60 +323,141 @@ class HomeContent extends React.Component {
let backLogCharts = document.getElementById('backLogChart');
if (!backLogCharts) return;
- const taskData = this.props.taskTop3 || [];
- if (taskData.length === 0) return;
+ // 使用培训数据
+ const { trainingData } = this.props;
+ const listNAME = trainingData?.listNAME || [];
+ const monthRecordCount = trainingData?.MonthRecordCount || []; // 培训场次
+ const monthPersonCount = trainingData?.MonthPersonCount || []; // 培训人次
- const barTopColor = [
- ['#75baf3', '#2177d5'],
- ['#ffa94d', '#f76707'],
- ['#99ca6e', '#48a447'],
- ];
+ if (listNAME.length === 0) {
+ this.echartsInstances.backLogChart = echarts.init(backLogCharts);
+ this.echartsInstances.backLogChart.setOption({
+ title: {
+ text: '当月工作培训统计数量',
+ x: 'center',
+ y: 'center',
+ textStyle: { fontSize: 16, color: '#999' },
+ },
+ graphic: {
+ type: 'text',
+ left: 'center',
+ top: 'middle',
+ style: {
+ text: '暂无培训数据',
+ fill: '#999',
+ fontSize: 14,
+ },
+ },
+ });
+ return;
+ }
this.echartsInstances.backLogChart = echarts.init(backLogCharts);
- let xdata = this.transformDat(taskData, barTopColor, 2);
- const legendColors = barTopColor.map((gradient) => gradient[0]);
- this.echartsInstances.backLogChart.setOption({
+ const option = {
title: {
- text: '各事项排名前三名统计',
+ text: '当月工作培训统计数量',
x: 'center',
y: '5%',
textStyle: { fontSize: 16, color: '#000' },
},
- tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter: function (params) {
+ let result = `${params[0].axisValue}
- 
+
-
+
+
+
+
+ {/* 内容区域 */}
+ {activeTab === '首页' ? (
+
+ {/* 头部 */}
+
+
+
+
+
-
-
- {/* 条件渲染的内容区域 */}
- {renderContent()}
+ ))}
+
+ {this.state.configBanner.slice(0, 3).map((item, index) => (
-
- this.handleTabClick(item)}
>
- {this.state.configBanner &&
- this.state.configBanner.slice(0, 3).map((item, index) => (
-
- this.handleTabClick(item)}
- onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item)}
- tabIndex={0}
- title={`点击进入${item}`}
- role="button"
- style={{ cursor: 'pointer' }}
- >
- {item}
-
- ))}
+ {item}
-
-
- 金源公司安全生产管控平台
-
- {this.state.configBanner &&
- this.state.configBanner.slice(3, 6).map((item, index) => (
-
- this.handleTabClick(item)}
- onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item)}
- tabIndex={0}
- title={`点击进入${item}`}
- role="button"
- style={{ cursor: 'pointer' }}
- >
- {item}
-
- ))}
-
- {/* {this.state.nowWeek} */}
- {this.state.nowDate}
-
-
- 金源公司安全生产管控平台
+
+
+ {this.state.configBanner.slice(3, 6).map((item, index) => (
+
+ this.handleTabClick(item)}
+ >
+ {item}
+
+ ))}
+
+ {this.state.nowDate}
+
+
+
`; + params.forEach((param) => { + result += `${param.marker}${param.seriesName}: ${param.value}
`; + }); + return result; + }, + }, legend: { - data: xdata.legendData.map((name, index) => ({ - name: name, - itemStyle: { color: legendColors[index], borderWidth: 0 }, - textStyle: { color: '#000', fontSize: 14 }, - })), - align: 'right', - top: 10, - right: 10, - itemGap: 16, + data: ['培训人次', '培训场次'], + orient: 'vertical', // 垂直排列 + right: 0, // 水平居中 + top: 'middle', // 垂直居中 + itemGap: 16, // 图例项间隔 itemWidth: 18, itemHeight: 12, + textStyle: { color: '#000', fontSize: 14 }, + }, + grid: { + left: '5%', + right: '5%', // 为右侧垂直图例留出空间 + top: '18%', + bottom: '5%', + containLabel: true, }, - color: legendColors, - grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', - data: xdata.companyNames, - axisLine: { lineStyle: { color: '#3eb2e8' } }, - axisLabel: { textStyle: { color: '#000' } }, + data: listNAME, + axisLine: { show: false }, // 隐藏x轴线 + axisTick: { show: false }, // 隐藏x轴刻度线 + axisLabel: { + textStyle: { color: '#000' }, + rotate: listNAME.length > 4 ? 15 : 0, + interval: 0, + }, }, ], yAxis: [ { type: 'value', - axisLine: { show: false }, - axisLabel: { textStyle: { color: '#000' } }, - splitLine: { lineStyle: { color: '#4784e8' } }, + show: true, // 显示y轴 + axisLine: { show: false }, // 隐藏y轴线 + axisTick: { show: false }, // 隐藏y轴刻度线 + axisLabel: { + show: true, // 显示数值标签 + textStyle: { color: '#000' }, + }, + splitLine: { show: false }, // 隐藏横向网格线 + name: '', // 不显示单位名称 + nameTextStyle: { show: false }, // 隐藏单位文字 }, ], - series: xdata.series, - }); + series: [ + { + name: '培训人次', + type: 'bar', + data: monthPersonCount, + itemStyle: { + normal: { + color: '#4285F4', // 蓝色 + barBorderRadius: 12, // 柱体圆角 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#4285F4', fontSize: 12 }, + formatter: '{c}', + }, + barWidth: '35%', + }, + { + name: '培训场次', + type: 'bar', + data: monthRecordCount, + itemStyle: { + normal: { + color: '#ffe066', // 黄色 + barBorderRadius: 12, // 柱体圆角（上左、上右、下右、下左） + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#ffe066', fontSize: 12 }, + formatter: '{c}', + }, + barWidth: '35%', + }, + ], + }; + + this.echartsInstances.backLogChart.setOption(option); const resizeHandler = () => { if (this.echartsInstances.backLogChart && !this.isUnmounted) { @@ -451,7 +532,8 @@ class HomeContent extends React.Component { prevProps.riskTypeRate !== this.props.riskTypeRate || prevProps.jobTodayTop3 !== this.props.jobTodayTop3 || prevProps.linkSum !== this.props.linkSum || - prevProps.taskTop3 !== this.props.taskTop3 + prevProps.taskTop3 !== this.props.taskTop3 || + prevProps.trainingData !== this.props.trainingData // 新增 ) { this.disposeAllCharts(); this.initAllCharts(); @@ -602,12 +684,16 @@ class HomeContent extends React.Component {
年度培训数据
- {riskTotal.map((item, index) => (
+ {this.props.trainingData?.listNAME?.map((name, index) => (
-
))}
+ {/* 如果 listNAME 为空，显示默认提示 */}
+ {(!this.props.trainingData?.listNAME || this.props.trainingData.listNAME.length === 0) && (
+ {item.name}
- {item.value}
+ {name}
+ {this.props.trainingData?.YearCount?.[index] || 0}
暂无培训数据
+ )}
`; + params.forEach((param) => { + const unit = param.seriesName === '培训人次' ? '人次' : '场次'; + result += `${param.marker}${param.seriesName}: ${param.value}${unit}
`; + }); + return result; + }, + }, + legend: { + data: ['培训人次', '培训场次'], + right: '3%', // 靠右 + top: '5%', // 垂直居中 + itemGap: 16, + itemWidth: 18, + itemHeight: 12, + textStyle: { color: '#000', fontSize: 14 }, + }, + grid: { + left: '5%', + right: '5%', // 为右侧垂直图例留出空间 + top: '18%', + bottom: '8%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: companyNames, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + textStyle: { color: '#000' }, + rotate: companyNames.length > 4 ? 15 : 0, + interval: 0, + }, + }, + ], + yAxis: [ + { + type: 'value', + show: true, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + show: true, + textStyle: { color: '#000' }, + }, + splitLine: { show: false }, + name: '', + nameTextStyle: { show: false }, + }, + ], + series: [ + { + name: '培训人次', + type: 'bar', + data: personCounts, + itemStyle: { + normal: { + color: '#4285F4', // 蓝色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#4285F4', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + { + name: '培训场次', + type: 'bar', + data: recordCounts, + itemStyle: { + normal: { + color: '#ffe066', // 黄色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#d4a000', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + ], + }; + + 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月']; + return months.map((month, index) => ( + + )); + }; + + // 图表2: 各部门培训完成率（横向柱状图） + renderChart2 = async () => { + if (this.isUnmounted) return; + const elementExists = await this.waitForElement('trainingChart2'); + if (!elementExists || this.isUnmounted) return; + + if (this.echartsInstances.chart2) { + this.echartsInstances.chart2.dispose(); + this.echartsInstances.chart2 = null; + } + + const chartDom = document.getElementById('trainingChart2'); + if (!chartDom) return; + + this.echartsInstances.chart2 = echarts.init(chartDom); + + // 使用 props 传入的 trainingSubData 数据（来自 getHomeSESubYear 接口） + const { trainingSubDataMonth } = this.props; + const companyNames = trainingSubDataMonth?.listNAME || []; // CName 数组 + const personCounts = trainingSubDataMonth?.MonthPersonCount || []; // PCount 数组（培训人次） + const recordCounts = trainingSubDataMonth?.MonthRecordCount || []; // RCount 数组（培训场次） + + // 如果没有数据，显示暂无数据提示 + if (companyNames.length === 0) { + this.echartsInstances.chart2.setOption({ + title: { + text: '本年度各公司培训分析', + x: 'center', + y: 'center', + textStyle: { fontSize: 16, color: '#999' }, + }, + graphic: { + type: 'text', + left: 'center', + top: 'middle', + style: { + text: '暂无培训数据', + fill: '#999', + fontSize: 14, + }, + }, + }); + return; + } + + 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) => { + const unit = param.seriesName === '培训人次' ? '人次' : '场次'; + result += `${param.marker}${param.seriesName}: ${param.value}${unit}
`; + }); + return result; + }, + }, + legend: { + data: ['培训人次', '培训场次'], + right: '3%', // 靠右 + top: '5%', // 垂直居中 + itemGap: 16, + itemWidth: 18, + itemHeight: 12, + textStyle: { color: '#000', fontSize: 14 }, + }, + grid: { + left: '5%', + right: '5%', // 为右侧垂直图例留出空间 + top: '18%', + bottom: '8%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: companyNames, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + textStyle: { color: '#000' }, + rotate: companyNames.length > 4 ? 15 : 0, + interval: 0, + }, + }, + ], + yAxis: [ + { + type: 'value', + show: true, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + show: true, + textStyle: { color: '#000' }, + }, + splitLine: { show: false }, + name: '', + nameTextStyle: { show: false }, + }, + ], + series: [ + { + name: '培训人次', + type: 'bar', + data: personCounts, + itemStyle: { + normal: { + color: '#4285F4', // 蓝色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#4285F4', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + { + name: '培训场次', + type: 'bar', + data: recordCounts, + itemStyle: { + normal: { + color: '#ffe066', // 黄色 + }, + }, + label: { + show: true, + position: 'top', + textStyle: { color: '#d4a000', fontSize: 12 }, + formatter: (params) => `${params.value}`, + }, + barWidth: '35%', + }, + ], + }; + + this.echartsInstances.chart2.setOption(option); + this.setupResizeHandler('chart2', this.renderChart2); + }; + + // 图表3: 培训类型分布（饼图） + renderChart3 = async () => { + if (this.isUnmounted) return; + const elementExists = await this.waitForElement('trainingChart3'); + if (!elementExists || this.isUnmounted) return; + + if (this.echartsInstances.chart3) { + this.echartsInstances.chart3.dispose(); + this.echartsInstances.chart3 = null; + } + + const chartDom = document.getElementById('trainingChart3'); + if (!chartDom) return; + + this.echartsInstances.chart3 = echarts.init(chartDom); + + // 培训类型分布数据 + const trainingTypes = [ + { name: '安全法规培训', value: 35 }, + { name: '操作规程培训', value: 28 }, + { name: '应急演练培训', value: 20 }, + { name: '职业健康培训', value: 12 }, + { name: '其他培训', value: 5 }, + ]; + + const option = { + title: { + text: '培训类型分布', + x: 'center', + y: '5%', + textStyle: { fontSize: 16, color: '#000', fontWeight: 'bold' }, + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + return `${params.name}: ${params.value}场 (${params.percent}%)`; + }, + }, + legend: { + orient: 'vertical', + right: '5%', + top: 'middle', + itemGap: 12, + itemWidth: 14, + itemHeight: 10, + textStyle: { color: '#333', fontSize: 11 }, + formatter: function (name) { + const item = trainingTypes.find((t) => t.name === name); + return `${name} ${item?.value || 0}场`; + }, + }, + color: ['#4285F4', '#66bb6a', '#ffa94d', '#ab47bc', '#ef5350'], + series: [ + { + name: '培训场次', + type: 'pie', + radius: ['45%', '70%'], + center: ['40%', '55%'], + avoidLabelOverlap: false, + label: { + show: true, + position: 'outside', + formatter: '{b}: {d}%', + textStyle: { fontSize: 11, color: '#333' }, + }, + emphasis: { + label: { show: true, fontSize: 14, fontWeight: 'bold' }, + }, + labelLine: { length: 8, length2: 8, smooth: true }, + data: trainingTypes, + }, + ], + }; + + this.echartsInstances.chart3.setOption(option); + this.setupResizeHandler('chart3', this.renderChart3); + }; + + // 图表4: 月度培训对比（分组柱状图） + renderChart4 = async () => { + if (this.isUnmounted) return; + const elementExists = await this.waitForElement('trainingChart4'); + if (!elementExists || this.isUnmounted) return; + + if (this.echartsInstances.chart4) { + this.echartsInstances.chart4.dispose(); + this.echartsInstances.chart4 = null; + } + + 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%', + })), + }; + + this.echartsInstances.chart4.setOption(option); + this.setupResizeHandler('chart4', this.renderChart4); + }; + + setupResizeHandler = (chartName, renderMethod) => { + const resizeHandler = () => { + if (this.echartsInstances[chartName] && !this.isUnmounted) { + this.echartsInstances[chartName].resize(); + } + }; + this.chartResizeHandlers[chartName] = resizeHandler; + window.addEventListener('resize', resizeHandler); + }; + + initAllCharts = () => { + if (this.isUnmounted) return; + setTimeout(() => { + if (this.isUnmounted) return; + this.renderChart1(); + this.renderChart2(); + this.renderChart3(); + this.renderChart4(); + }, 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 = {}; + }; + + componentDidMount() { + this.isUnmounted = false; + this.initAllCharts(); + } + + componentDidUpdate(prevProps) { + // 当 trainingSubData 或 trainingSubDataMonth 变化时重新渲染图表 + if ( + prevProps.trainingSubData !== this.props.trainingSubData || + prevProps.trainingSubDataMonth !== this.props.trainingSubDataMonth || + prevProps.selectedMonth !== this.props.selectedMonth + ) { + // this.renderChart1(); + this.renderChart2(); + } + } + + componentWillUnmount() { + this.isUnmounted = true; + this.disposeAllCharts(); + } + + render() { + const { selectedMonth = 1, onMonthChange } = this.props; + return ( +
+
+ );
+ }
+}
+
+export default TrainingContent;
diff --git a/src/layout/FullScreenInter.js b/src/layout/FullScreenInter.js
index 60d6efa..123da73 100644
--- a/src/layout/FullScreenInter.js
+++ b/src/layout/FullScreenInter.js
@@ -9,6 +9,7 @@ import debounce from 'lodash.debounce';
import storage from '../utils/storage';
import { initFilter } from '../utils/common';
import HomeContent from './FullOther/HomeContent';
+import TrainingContent from './FullOther/TrainingContent'; // 新增导入
const getScale = () => {
const width = 1920,
@@ -38,6 +39,28 @@ class FullScreen extends React.Component {
currentMediaIndex: 0,
announcementList: [],
activeTab: '首页',
+ // 新增：培训数据
+ trainingData: {
+ listNAME: [],
+ YearCount: [],
+ MonthRecordCount: [],
+ MonthPersonCount: [],
+ },
+ // 新增：安全培训页面专用数据
+ trainingSubData: {
+ listNAME: [],
+ YearCount: [],
+ MonthRecordCount: [],
+ MonthPersonCount: [],
+ },
+ trainingSubDataMonth: {
+ listNAME: [],
+ YearCount: [],
+ MonthRecordCount: [],
+ MonthPersonCount: [],
+ },
+ // 新增：当前选择的月份
+ selectedMonth: new Date().getMonth() + 1, // 默认当前月份，1-12
};
this.isUnmounted = false;
}
@@ -58,7 +81,8 @@ class FullScreen extends React.Component {
componentDidMount() {
this.isUnmounted = false;
window.addEventListener('resize', this.setScale);
- this.getHomeDataArray();
+ // this.getHomeDataArray();
+ this.getYearPXData();
this.loadMediaFiles();
this.getAnnouncementData();
@@ -100,6 +124,11 @@ class FullScreen extends React.Component {
handleTabClick = (name) => {
this.setState({ activeTab: name });
+ // 当点击安全培训tab时，获取对应数据
+ if (name === '安全培训') {
+ this.getHomeSESubYearData();
+ this.getHomeSESubYearMonthData();
+ }
};
handleFullscreenChange = () => {
@@ -146,9 +175,112 @@ class FullScreen extends React.Component {
},
});
};
+ getYearPXData = () => {
+ const orgId = storage('lacal').getItem('webOrgId')?.val;
+ const json = initFilter(orgId);
+ this.props.dispatch({
+ type: 'app/getDataByPost',
+ payload: json,
+ url: 'BI/BIHeadSE/SEtrInfo',
+ onComplete: (ret) => {
+ if (ret && !this.isUnmounted) {
+ this.setState({
+ trainingData: {
+ listNAME: ret.listNAME || [],
+ YearCount: ret.YearCount || [],
+ MonthRecordCount: ret.MonthRecordCount || [],
+ MonthPersonCount: ret.MonthPersonCount || [],
+ },
+ });
+ }
+ },
+ });
+ };
+ // 获取安全培训页面数据
+ getHomeSESubYearData = () => {
+ const orgId = storage('lacal').getItem('webOrgId')?.val;
+ const json = initFilter(orgId);
+ const currentYear = new Date().getFullYear(); // 获取当前年份
+ json.Parameter1 = currentYear.toString(); // 设置为当前年份
+ this.props.dispatch({
+ type: 'app/getDataByPost',
+ payload: json,
+ url: 'BI/BIHeadSE/HomeSESubYear',
+ onComplete: (ret) => {
+ if (ret && !this.isUnmounted) {
+ // ret 是数组格式: [{ CName: "邦泰", PCount: 0, RCount: 13 }, ...]
+ const listNAME = ret.map((item) => item.CName);
+ const MonthPersonCount = ret.map((item) => item.PCount); // 培训人次
+ const MonthRecordCount = ret.map((item) => item.RCount); // 培训场次
+ // YearCount 暂时用 PCount 的总和或保持为空数组
+ const YearCount = ret.map((item) => item.PCount);
+
+ this.setState({
+ trainingSubData: {
+ listNAME: listNAME,
+ YearCount: YearCount,
+ MonthRecordCount: MonthRecordCount,
+ MonthPersonCount: MonthPersonCount,
+ },
+ });
+ }
+ },
+ });
+ };
+ // 新增：处理月份变化
+ handleMonthChange = (month) => {
+ this.setState({ selectedMonth: month }, () => {
+ // 重新获取月份数据
+ this.getHomeSESubYearMonthData();
+ });
+ };
+ // 获取安全培训页面数据
+ getHomeSESubYearMonthData = () => {
+ const orgId = storage('lacal').getItem('webOrgId')?.val;
+ const json = initFilter(orgId);
+ const currentYear = new Date().getFullYear(); // 获取当前年份
+ json.Parameter1 = currentYear.toString(); // 设置为当前年份
+ json.Parameter2 = this.state.selectedMonth.toString(); // 月份
+ this.props.dispatch({
+ type: 'app/getDataByPost',
+ payload: json,
+ url: 'BI/BIHeadSE/HomeSESubYear',
+ onComplete: (ret) => {
+ if (ret && !this.isUnmounted) {
+ // ret 是数组格式: [{ CName: "邦泰", PCount: 0, RCount: 13 }, ...]
+ const listNAME = ret.map((item) => item.CName);
+ const MonthPersonCount = ret.map((item) => item.PCount); // 培训人次
+ const MonthRecordCount = ret.map((item) => item.RCount); // 培训场次
+ // YearCount 暂时用 PCount 的总和或保持为空数组
+ const YearCount = ret.map((item) => item.PCount);
+
+ this.setState({
+ trainingSubDataMonth: {
+ listNAME: listNAME,
+ YearCount: YearCount,
+ MonthRecordCount: MonthRecordCount,
+ MonthPersonCount: MonthPersonCount,
+ },
+ });
+ }
+ },
+ });
+ };
renderOtherTabContent = () => {
- const { activeTab } = this.state;
+ const { activeTab, trainingData, trainingSubData, trainingSubDataMonth, selectedMonth } = this.state;
+ // 如果是安全培训，显示专门的培训页面
+ if (activeTab === '安全培训') {
+ return (
+
+ {/* 第一行 - 图表1和图表2 */}
+
+
+
+ {/* 第二行 - 图表3和图表4 */}
+
+
+
+
+ {/* 添加月份选择器 */}
+
+
+ 选择月份：
+
+
+
+
+
+
+
+
+
+
+
+
@@ -174,6 +306,7 @@ class FullScreen extends React.Component {
mediaList,
announcementList,
currentMediaIndex,
+ trainingData,
} = this.state;
return (
@@ -237,6 +370,7 @@ class FullScreen extends React.Component {
currentMediaIndex={currentMediaIndex}
onCarouselChange={this.handleCarouselChange}
onDotClick={this.handleDotClick}
+ trainingData={trainingData} // 新增传递
/>
) : (
this.renderOtherTabContent()
diff --git a/src/layout/fullinter.less b/src/layout/fullinter.less
index 0e7a020..7905938 100644
--- a/src/layout/fullinter.less
+++ b/src/layout/fullinter.less
@@ -590,3 +590,86 @@
height: 100%;
}
}
+// fullinter.less - 在文件末尾添加以下样式
+
+// ========== TrainingContent 组件样式 ==========
+.trainingContentWrapper {
+ flex: 1;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ padding: 0 10px 10px 10px;
+ box-sizing: border-box;
+}
+
+.trainingGrid {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.trainingRow {
+ flex: 1;
+ display: flex;
+ gap: 10px;
+ min-height: 0;
+}
+
+.trainingCard {
+ flex: 1;
+ min-width: 0; // 防止内容溢出
+ background-color: #fff;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ transition: box-shadow 0.3s ease;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+
+ position: relative;
+ overflow: hidden;
+
+ &:hover {
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+ }
+}
+
+.trainingChartContainer {
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+}
+// 月份选择器样式
+.monthSelectorWrapper {
+ position: absolute;
+ top: 15px;
+ left: 20px;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ background: rgba(255, 255, 255, 0.9);
+ padding: 4px 12px;
+ border-radius: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.monthSelectorLabel {
+ font-size: 13px;
+ color: #333;
+ margin-right: 8px;
+ font-weight: 500;
+}
+
+.monthSelect {
+ .ant-select-selector {
+ border-radius: 16px !important;
+ border-color: #4285f4 !important;
+
+ &:hover {
+ border-color: #66bb6a !important;
+ }
+ }
+}