wyw/mh_jy_safe_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
45a2fec144
mh_jy_safe_web/src/layout/FullScreenInter.js

1762 lines
56 KiB
JavaScript
Raw Normal View History

可视化
2026-01-19 08:56:29 +08:00
import React, { useState, useEffect, useMemo, useRef } 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 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;
const getScale = () => {
const width = 1920,
height = 1200; // 此处可以根据实际设计稿尺寸修改
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
};
class FullScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
safetySloganOne: '',
animationDuration: 20,
sliderColor: '#de4e58',
sliderSize: '24px',
nowDate: '',
1
2026-01-19 09:28:06 +08:00
riskTypeRate: [], //风险等级占比
可视化
2026-01-21 14:05:35 +08:00
linkSum: [],
1
2026-01-19 09:28:06 +08:00
jobTodayTop3: [], //当日工作票排名前三
可视化
2026-01-21 14:05:35 +08:00
hiddenRectify: {}, //隐患整改率
1
2026-01-19 09:28:06 +08:00
taskTop3: [], //各事项排名前三
jobFinishRate: [], //作业现场完成情况统计
safeCheckSum: [], //各公司安全检查统计
可视化
2026-01-21 14:05:35 +08:00
listSETrainSum: [], //各公司安全培训统计
可视化
2026-01-19 08:56:29 +08:00
scale: getScale(),
可视化
2026-01-21 14:05:35 +08:00
configBanner: ['首页', '风险管理', '安全检查', '隐患管理', '作业现场', '安全培训'],
可视化
2026-01-19 08:56:29 +08:00
};
this.echartsInstances = {
riskLevel: null,
opretionTrend: null,
completeone: null,
};
}
setScale = debounce(() => {
// debounce节流
// 获取到缩放比，设置它
let scale = getScale();
this.setState({ scale });
}, 500);
componentDidMount() {
window.addEventListener('resize', this.setScale); // 得到呈现的屏幕宽高比
// this.getHomeTitle();
this.getHomeDataArray();
this.setState({ activeTab: '首页' });
可视化
2026-01-21 14:05:35 +08:00
可视化
2026-01-19 08:56:29 +08:00
this.timer = setInterval(() => {
this.setState({
nowDate: this.getDate(),
});
}, 1000);
}
可视化
2026-01-21 14:05:35 +08:00
executionChart = () => {
this.riskLevel();
this.safeCheckChart();
this.dangerOperation();
this.completeChart();
this.backLog();
this.safedanger();
};
可视化
2026-01-19 08:56:29 +08:00
componentDidUpdate(prevProps, prevState) {
// 当从其他tab切换回首页时
if (prevState.activeTab !== this.state.activeTab && this.state.activeTab === '首页') {
// 延迟确保DOM已渲染
setTimeout(() => {
可视化
2026-01-21 14:05:35 +08:00
this.executionChart();
可视化
2026-01-19 08:56:29 +08:00
}, 300); // 稍微增加延迟时间
}
可视化
2026-01-21 14:05:35 +08:00
}
handleTabClick = (name) => {
// 如果从首页切换到其他tab，先清理图表
this.setState({ activeTab: name });
const tabActions = {
首页: () => {
console.log('跳转到首页');
// 首页图表会在componentDidUpdate中初始化
},
风险管控: () => {
console.log('跳转到风险管控');
},
隐患治理: () => {
console.log('跳转到隐患治理');
},
// ... 其他tab
};
可视化
2026-01-19 08:56:29 +08:00
可视化
2026-01-21 14:05:35 +08:00
if (tabActions[name]) {
tabActions[name]();
可视化
2026-01-19 08:56:29 +08:00
}
可视化
2026-01-21 14:05:35 +08:00
};
componentWillUnmount() {
window.removeEventListener('resize', this.setScale);
clearInterval(this.timer);
可视化
2026-01-19 08:56:29 +08:00
}
可视化
2026-01-21 14:05:35 +08:00
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;
};
可视化
2026-01-19 08:56:29 +08:00
getHomeDataArray = () => {
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
let json = initFilter(orgId);
this.props.dispatch({
type: 'app/getDataByPost',
payload: json,
url: 'BI/BIKanBanController/ReturnAllData',
onComplete: (ret) => {
if (ret) {
可视化
2026-01-21 14:05:35 +08:00
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();
}
);
可视化
2026-01-19 08:56:29 +08:00
}
},
});
};
可视化
2026-01-21 14:05:35 +08:00
riskLevel = () => {
// 如果已有实例，先销毁
可视化
2026-01-19 08:56:29 +08:00
if (this.echartsInstances.riskLevel) {
this.echartsInstances.riskLevel.dispose();
this.echartsInstances.riskLevel = null;
}
可视化
2026-01-21 14:05:35 +08:00
const riskLevels = document.getElementById('riskLevelFull');
if (!riskLevels) {
// 使用requestAnimationFrame而不是setTimeout
requestAnimationFrame(() => {
this.executionChart();
});
return;
可视化
2026-01-19 08:56:29 +08:00
}
可视化
2026-01-21 14:05:35 +08:00
// 初始化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 `<div style="display: flex; align-items: center;">
<span style="
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: ${color};
margin-right: 8px;
"></span>
<span>${params.name}:</span>
<span style="
font-weight: bold;
margin-left: 8px;
font-size: 16px;
">${params.value}</span>
</div>`;
},
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 `<div style="display: flex; align-items: center;">
<span style="
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: ${color};
margin-right: 8px;
"></span>
<span>${params.name}:</span>
<span style="
font-weight: bold;
margin-left: 8px;
font-size: 16px;
">${params.value}</span>
</div>`;
},
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,
});
可视化
2026-01-19 08:56:29 +08:00
可视化
2026-01-21 14:05:35 +08:00
// 监听resize
const resizeHandler = () => {
if (this.echartsInstances.backLogChart) {
this.echartsInstances.backLogChart.resize();
}
可视化
2026-01-19 08:56:29 +08:00
};
可视化
2026-01-21 14:05:35 +08:00
if (this.backLogResizeHandler) {
window.removeEventListener('resize', this.backLogResizeHandler);
可视化
2026-01-19 08:56:29 +08:00
}
可视化
2026-01-21 14:05:35 +08:00
this.backLogResizeHandler = resizeHandler;
window.addEventListener('resize', resizeHandler);
可视化
2026-01-19 08:56:29 +08:00
};
可视化
2026-01-21 14:05:35 +08:00
completeChart = () => {
可视化
2026-01-19 08:56:29 +08:00
if (this.echartsInstances.completeone) {
this.echartsInstances.completeone.dispose();
this.echartsInstances.completeone = null;
}
let completeCharts = document.getElementById('completeone');
if (!completeCharts) {
requestAnimationFrame(() => {
可视化
2026-01-21 14:05:35 +08:00
this.completeChart();
可视化
2026-01-19 08:56:29 +08:00
});
return;
}
this.echartsInstances.completeone = echarts.init(completeCharts);
let seriesArr = [];
let centerArr = [
['20%', '50%'],
['50%', '50%'],
['80%', '50%'],
];
可视化
2026-01-21 14:05:35 +08:00
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) => {
可视化
2026-01-19 08:56:29 +08:00
seriesArr.push({
center: centerArr[index],
axisLine: {
show: true,
lineStyle: {
可视化
2026-01-21 14:05:35 +08:00
color: colorArr[index],
可视化
2026-01-19 08:56:29 +08:00
width: 8,
},
radius: '90%', // 控制轴线本身的半径
},
axisTick: {
show: false,
},
splitLine: {
length: 8, // 刻度线长度
distance: 25, // 向内移动距离，负值越大越向内
lineStyle: {
color: '#fff', // 刻度线颜色
可视化
2026-01-21 14:05:35 +08:00
width: 1, // 刻度线宽度
可视化
2026-01-19 08:56:29 +08:00
},
},
axisLabel: {
distance: 15, // 标签与刻度线的距离
textStyle: {
color: '#fff',
fontSize: 10,
},
// 调整标签偏移
offset: [0, 0], // [水平偏移, 垂直偏移]
},
itemStyle: {
normal: {
color: 'auto',
},
},
radius: '80%',
pointer: {
show: true,
width: '8%',
可视化
2026-01-21 14:05:35 +08:00
length: '30%',
可视化
2026-01-19 08:56:29 +08:00
},
title: {
textStyle: {
// fontWeight: 'bolder',
fontSize: 14,
color: '#fff',
},
offsetCenter: [0, '100%'],
},
detail: {
textStyle: {
fontWeight: 'bolder',
可视化
2026-01-21 14:05:35 +08:00
fontSize: 16,
可视化
2026-01-19 08:56:29 +08:00
color: '#fff',
},
offsetCenter: [0, '68%'],
可视化
2026-01-21 14:05:35 +08:00
formatter: '{value}%',
可视化
2026-01-19 08:56:29 +08:00
// 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',
];
可视化
2026-01-21 14:05:35 +08:00
const seriesNames = [];
this.state.listSETrainSum.map((item) => {
seriesNames.push(item.CN);
});
可视化
2026-01-19 08:56:29 +08:00
// 生成x轴数据（12个月）
let xAxisData = [];
可视化
2026-01-21 14:05:35 +08:00
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)); // 按日期升序
可视化
2026-01-19 08:56:29 +08:00
可视化
2026-01-21 14:05:35 +08:00
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]);
可视化
2026-01-19 08:56:29 +08:00
}
可视化
2026-01-21 14:05:35 +08:00
return values;
});
可视化
2026-01-19 08:56:29 +08:00
可视化
2026-01-21 14:05:35 +08:00
// 生成15个系列的数据
let seriesArr = [];
for (let i = 0; i < this.state.listSETrainSum.length; i++) {
可视化
2026-01-19 08:56:29 +08:00
seriesArr.push({
name: seriesNames[i],
type: 'line',
smooth: true,
symbolSize: 6,
可视化
2026-01-21 14:05:35 +08:00
data: yAxisData[i],
可视化
2026-01-19 08:56:29 +08:00
});
}
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 += `<div style="color: #666;font-size: 14px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
color[v.componentIndex]
};"></span>
${v.seriesName}
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
可视化
2026-01-21 14:05:35 +08:00
`;
可视化
2026-01-19 08:56:29 +08:00
});
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);
};
render() {
const width = 1920,
height = 1200;
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize, activeTab } = this.state;
const renderContent = () => {
可视化
2026-01-21 14:05:35 +08:00
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,
}));
可视化
2026-01-19 08:56:29 +08:00
if (activeTab === '首页') {
return (
<>
{/* 首页内容 - 原来的两行布局 */}
<div className={styles.row}>
<Row style={{ width: '100%', height: '100%' }}>
{/* 原第一行内容 */}
<Col span={7} className={styles.boxleft}>
{/* 风险等级基本信息 */}
<div className={styles.risklevel}>
<BorderBox7
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
<Row
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
}}
>
<Col span={8}>
<div>
{this.state.riskTypeRate.map((item, index) => (
<div
key={index}
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
color: '#fff',
backgroundColor:
item.riskType === '重大风险'
? '#c92a2a'
: item.riskType === '较大风险'
可视化
2026-01-21 14:05:35 +08:00
? '#FF6710'
: item.riskType === '一般风险'
? '#FFDD1E'
: '#0091FF',
可视化
2026-01-19 08:56:29 +08:00
margin: '10px 20px',
padding: '5px 10px',
fontSize: '16px',
}}
>
<div style={{ marginBottom: '5px' }}>{item.riskType}</div>
<div>{item.count}</div>
</div>
))}
</div>
</Col>
<Col span={16} style={{ height: '100%' }}>
<div
id="riskLevelFull"
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
minHeight: '200px', // 添加最小高度
}}
></div>
</Col>
</Row>
</BorderBox7>
</div>
<div style={{ height: '10px' }}></div>
<div className={styles.risklevelOne}>
<BorderBox7
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
可视化
2026-01-21 14:05:35 +08:00
padding: '10px',
可视化
2026-01-19 08:56:29 +08:00
}}
>
<div
id="safeCheckChart"
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
minHeight: '200px', // 添加最小高度
}}
></div>
</div>
</BorderBox7>
</div>
</Col>
<Col span={10} className={styles.boxTwo}>
{/* 中间内容 */}
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
// backgroundColor: 'blue',
height: '140px',
marginBottom: '10px',
}}
>
<BorderBox6>
<div
style={{
width: '100%',
height: '100%',
padding: '10px',
boxSizing: 'border-box',
}}
>
<div
style={{
width: '100%',
height: '100%',
backgroundColor: '#121d3f',
color: '#fff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
padding: '10px',
boxSizing: 'border-box',
border: '1px solid rgba(0, 202, 247, 0.2)',
borderRadius: '8px',
background: 'linear-gradient(135deg, #121d3f 0%, #1a2b5a 100%)',
}}
>
<div
style={{
fontSize: '23px', // 响应式字体
fontWeight: 'bold',
marginBottom: '12px',
color: '#fff',
}}
>
安全方针：以人为本、关注健康、依法治企、安全发展。
</div>
<div
style={{
fontSize: '23px',
fontWeight: 'bold',
color: '#fff',
}}
>
安全理念：一切风险皆可控，一切事故皆可防！
</div>
</div>
</div>
</BorderBox6>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
position: 'relative',
width: '100%',
}}
>
<BorderBox6
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
可视化
2026-01-21 14:05:35 +08:00
<div style={{ width: '100%', height: '100%' }}>
<div
id="dangerOperationChart"
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
minHeight: '200px', // 添加最小高度
}}
></div>
</div>
可视化
2026-01-19 08:56:29 +08:00
</BorderBox6>
</div>
</Col>
<Col span={7} className={styles.boxTwo}>
{/* 右边内容 */}
<div className={styles.risklevel}>
<BorderBox7
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
可视化
2026-01-21 14:05:35 +08:00
padding: '10px',
可视化
2026-01-19 08:56:29 +08:00
}}
>
可视化
2026-01-21 14:05:35 +08:00
<div
id="backLogChart"
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
minHeight: '200px', // 添加最小高度
}}
></div>
可视化
2026-01-19 08:56:29 +08:00
</div>
</BorderBox7>
</div>
<div style={{ height: '10px' }}></div>
<div className={styles.risklevelOne}>
<BorderBox7
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
height: '100%',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%',
height: '50%',
justifyContent: 'space-between',
}}
>
<div id="completeone" style={{ width: '100%', height: '100%' }}></div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%',
height: '50%',
justifyContent: 'space-between',
marginBottom: '10px',
}}
>
<Row gutter={[8, 8]} style={{ padding: '0px 10px' }}>
可视化
2026-01-21 14:05:35 +08:00
{meetingData &&
meetingData.map((item, index) => (
<Col span={6} key={index}>
<div className={styles.gradientThree}>
<div className={styles.gradientNext}>
<div className={styles.gradientNextTwo}>
<div className={styles.gradientName}>{item.name}</div>
<div className={styles.gradientText}>
{item.value}
<span
style={{
marginLeft: '10px',
fontSize: '14px',
color: '#fff',
fontFamily: 'PingFang SC',
}}
>
次
</span>
</div>
可视化
2026-01-19 08:56:29 +08:00
</div>
</div>
</div>
可视化
2026-01-21 14:05:35 +08:00
</Col>
))}
可视化
2026-01-19 08:56:29 +08:00
</Row>
</div>
</div>
</BorderBox7>
</div>
</Col>
</Row>
</div>
{/* 第二行内容 */}
<div className={styles.rowTwo}>
<Row style={{ width: '100%', height: '100%' }}>
<Col span={7} className={styles.boxleft}>
<div className={styles.risklevelTwo}>
<BorderBox7
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}}
>
<div className={styles.riskChange}>
可视化
2026-01-21 14:05:35 +08:00
{riskChangeData &&
riskChangeData.map((item, index) => (
<div className={styles.gradient} key={index}>
<div className={styles.gradientNext}>
<div className={styles.gradientNextTwo}>
<div className={styles.gradientName}>{item.name}</div>
<div className={styles.gradientText}>{item.value}</div>
</div>
可视化
2026-01-19 08:56:29 +08:00
</div>
</div>
可视化
2026-01-21 14:05:35 +08:00
))}
可视化
2026-01-19 08:56:29 +08:00
</div>
<div className={styles.riskChangeTwo}>
<div className={styles.gradientTwo}>
<div className={styles.gradientNext}>
<div className={styles.gradientNextTwo}>
<div className={styles.gradientNameTwo}>整改率</div>
可视化
2026-01-21 14:05:35 +08:00
<div className={styles.gradientTextTwo}>{this.state.hiddenRectify.rate}%</div>
可视化
2026-01-19 08:56:29 +08:00
</div>
</div>
</div>
</div>
</div>
</BorderBox7>
</div>
</Col>
<Col span={10} className={styles.boxTwo}>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
width: '100%',
height: '100%',
alignItems: 'center',
padding: '0px 0px 10px 0px',
}}
>
<BorderBox8>
<div
id="opretionTrend"
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}}
></div>
</BorderBox8>
</div>
</Col>
<Col span={7} className={styles.boxTwo}>
<div className={styles.risklevelTwo}>
<BorderBox7
backgroundColor="transparent"
color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
style={{
boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
border: '1px solid rgb(0 99 255)',
}}
>
<div className={styles.capsuleChart}>
<span style={{ fontSize: '16px', color: '#fff', marginBottom: '10px', fontWeight: 'bold' }}>
各家公司安全检查统计
</span>
可视化
2026-01-21 14:05:35 +08:00
<CapsuleChart config={chartConfig} style={{ width: '100%', height: '100%' }} />
可视化
2026-01-19 08:56:29 +08:00
</div>
</BorderBox7>
</div>
</Col>
</Row>
</div>
</>
);
} else {
// 其他tab的内容 - 这里可以替换为你想要的其他内容
return (
<div className={styles.otherTabContent}>
<Row style={{ width: '100%', height: '100%' }}>
<Col
span={24}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
fontSize: '24px',
textAlign: 'center',
padding: '20px',
}}
>
<div style={{ marginBottom: '20px', fontSize: '32px', fontWeight: 'bold' }}>{activeTab} 页面</div>
<div style={{ fontSize: '18px', opacity: 0.8 }}>这里是 {activeTab} 的内容展示区域</div>
<div style={{ marginTop: '30px', fontSize: '16px', opacity: 0.6 }}>请根据实际需求替换此内容</div>
</div>
</Col>
</Row>
</div>
);
}
};
return (
<React.Fragment>
<div
className={styles.box}
style={{
transform: `scale(${scale}) translate(-50%, -50%)`,
WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
width,
height,
}}
>
<div className={styles.blackBack}>
<div className={styles.backImage}>
{/* 头部保持不变 */}
<div className={styles.header}>
<Row style={{ width: '100%', height: '100%' }}>
<Col
span={9}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
width: '100%',
height: '100%',
}}
>
<img
src={logo}
alt="logo"
style={{ height: '50px', width: 'auto', marginRight: 'auto', marginLeft: '50px' }}
></img>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: '100%',
marginLeft: 'auto',
}}
>
可视化
2026-01-21 14:05:35 +08:00
{this.state.configBanner &&
this.state.configBanner.slice(0, 3).map((item, index) => (
<div
key={index}
className={`${styles.configBanners} ${
this.state.activeTab === item ? styles.active : ''
}`}
onClick={() => this.handleTabClick(item)}
onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item)}
tabIndex={0}
title={`点击进入${item}`}
role="button"
style={{ cursor: 'pointer' }}
>
{item}
</div>
))}
可视化
2026-01-19 08:56:29 +08:00
</div>
</div>
</Col>
<Col
span={6}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
>
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div className={styles.headerText}>金源公司安全生产管控平台</div>
</div>
</Col>
<Col
span={9}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}
>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
可视化
2026-01-21 14:05:35 +08:00
{this.state.configBanner &&
this.state.configBanner.slice(3, 6).map((item, index) => (
<div
key={index}
className={`${styles.configBanners} ${this.state.activeTab === item ? styles.active : ''}`}
onClick={() => this.handleTabClick(item)}
onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item)}
tabIndex={0}
title={`点击进入${item}`}
role="button"
style={{ cursor: 'pointer' }}
>
{item}
</div>
))}
可视化
2026-01-19 08:56:29 +08:00
</div>
<div style={{ color: '#fff', fontSize: '20px', marginRight: '20px', fontWeight: 'bold' }}>
{/* <span style={{ marginRight: '20px' }}>{this.state.nowWeek}</span> */}
{this.state.nowDate}
</div>
</Col>
</Row>
</div>
{/* 条件渲染的内容区域 */}
{renderContent()}
</div>
</div>
</div>
</React.Fragment>
);
}
}
export default withRouter(connect(({ login }) => ({ login }))(FullScreen));
Reference in New Issue Copy Permalink