1532 lines
50 KiB
JavaScript
1532 lines
50 KiB
JavaScript
|
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: '',
|
|||
|
|
riskTypeRate: {}, //风险等级占比
|
|||
|
|
jobTodayTop3: {}, //当日工作票排名前三
|
|||
|
|
hiddenRectifyRate: {}, //隐患整改率
|
|||
|
|
taskTop3: {}, //各事项排名前三
|
|||
|
|
jobFinishRate: {}, //作业现场完成情况统计
|
|||
|
|
safeCheckSum: {}, //各公司安全检查统计
|
|||
|
|
riskChangeData: [
|
|||
|
|
{ name: '隐患数量', value: 103 },
|
|||
|
|
{ name: '延期整改数', value: 18 },
|
|||
|
|
{ name: '按期整改数', value: 85 },
|
|||
|
|
],
|
|||
|
|
configBanner: [
|
|||
|
|
{ name: '首页', value: 103 },
|
|||
|
|
{ name: '风险管控', value: 103 },
|
|||
|
|
{ name: '隐患治理', value: 103 },
|
|||
|
|
{ name: '班组建设', value: 103 },
|
|||
|
|
{ name: '危险作业', value: 103 },
|
|||
|
|
{ name: '安全培训', value: 103 },
|
|||
|
|
],
|
|||
|
|
checkData: [
|
|||
|
|
{ name: '公司检查', value: 103 },
|
|||
|
|
{ name: '部门检查', value: 79 },
|
|||
|
|
{ name: '车间检查', value: 86 },
|
|||
|
|
{ name: '班组检查', value: 94 },
|
|||
|
|
],
|
|||
|
|
widthp: '70%',
|
|||
|
|
scrollConfig: {
|
|||
|
|
header: ['检查类型', '检查次数', '完成率'],
|
|||
|
|
data: [
|
|||
|
|
['巡回检查', '322', '99%'],
|
|||
|
|
['例行检查', '255', '99%'],
|
|||
|
|
['日常检查', '253', '99%'],
|
|||
|
|
['专业检查', '123', '99%'],
|
|||
|
|
['巡回检查', '322', '99%'],
|
|||
|
|
['例行检查', '255', '99%'],
|
|||
|
|
['日常检查', '253', '99%'],
|
|||
|
|
['专业检查', '123', '99%'],
|
|||
|
|
],
|
|||
|
|
waitTime: 200000,
|
|||
|
|
},
|
|||
|
|
safescrollConfig: {
|
|||
|
|
header: ['部门', '车间', '活动', '进度'],
|
|||
|
|
data: [
|
|||
|
|
['矿山部', '穿爆车间', '班前会议', '98%'],
|
|||
|
|
['矿山部', '金宇宁化分公司', '班前会议', '98%'],
|
|||
|
|
['选矿部', '破碎车间', '班前会议', '95%'],
|
|||
|
|
['矿山部', '磨重车间', '班前会议', '92%'],
|
|||
|
|
['矿山部', '机电设备管理科', '班前会议', '83%'],
|
|||
|
|
['矿山部', '钨细泥回收车间', '班前会议', '93%'],
|
|||
|
|
['矿山部', '穿爆车间', '班前会议', '90%'],
|
|||
|
|
['矿山部', '穿爆车间', '班前会议', '90%'],
|
|||
|
|
['矿山部', '穿爆车间', '班前会议', '90%'],
|
|||
|
|
],
|
|||
|
|
index: true,
|
|||
|
|
columnWidth: [80, 200, 300, 200, 200],
|
|||
|
|
align: ['center'],
|
|||
|
|
waitTime: 2000,
|
|||
|
|
},
|
|||
|
|
chartConfig: {
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
name: '电工日常班',
|
|||
|
|
value: 97,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '电工三班',
|
|||
|
|
value: 95,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '破碎一班',
|
|||
|
|
value: 91,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '磨重二班',
|
|||
|
|
value: 86,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '磨重三班',
|
|||
|
|
value: 83,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '电工日常班',
|
|||
|
|
value: 97,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '电工三班',
|
|||
|
|
value: 95,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '破碎一班',
|
|||
|
|
value: 91,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '磨重二班',
|
|||
|
|
value: 86,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '磨重三班',
|
|||
|
|
value: 83,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '电工日常班',
|
|||
|
|
value: 97,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '电工三班',
|
|||
|
|
value: 95,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '破碎一班',
|
|||
|
|
value: 91,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '磨重二班',
|
|||
|
|
value: 86,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '磨重三班',
|
|||
|
|
value: 83,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
showValue: true,
|
|||
|
|
},
|
|||
|
|
riskData: [
|
|||
|
|
{ color: '#c92a2a', value: 2, name: '重大风险' },
|
|||
|
|
{ color: '#FF6710', value: 5, name: '较大风险' },
|
|||
|
|
{ color: '#FFDD1E', value: 15, name: '一般风险' },
|
|||
|
|
{ color: '#0091FF', value: 30, name: '低风险' },
|
|||
|
|
],
|
|||
|
|
WaterLevelPondconfig1: {
|
|||
|
|
data: [75],
|
|||
|
|
shape: 'round',
|
|||
|
|
},
|
|||
|
|
WaterLevelPondconfig2: {
|
|||
|
|
data: [85],
|
|||
|
|
shape: 'round',
|
|||
|
|
},
|
|||
|
|
WaterLevelPondconfig3: {
|
|||
|
|
data: [95],
|
|||
|
|
shape: 'round',
|
|||
|
|
},
|
|||
|
|
completeData: [
|
|||
|
|
{
|
|||
|
|
name: '班组会议完成率',
|
|||
|
|
value: 75,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '岗位交接班完成率',
|
|||
|
|
value: 85,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '岗位当班记录完成率',
|
|||
|
|
value: 95,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
// completeDatatwo: {
|
|||
|
|
// name: "岗位交接班完成率",
|
|||
|
|
// value: 85,
|
|||
|
|
// id: "completetwo",
|
|||
|
|
// },
|
|||
|
|
// completeDatathree: {
|
|||
|
|
// name: "岗位当班记录完成率",
|
|||
|
|
// value: 95,
|
|||
|
|
// id: "completethree",
|
|||
|
|
// },
|
|||
|
|
meetingData: [
|
|||
|
|
{
|
|||
|
|
name: '班前会议',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '班组活动',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '岗位交接班',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '岗位当班',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '班前会议',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '班组活动',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '岗位交接班',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '岗位当班',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
roaData: [
|
|||
|
|
{
|
|||
|
|
name: '总任务数',
|
|||
|
|
value: 1456,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '超时待办数',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '安全检查数',
|
|||
|
|
value: 1456,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '检查完成率',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '职业危害',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '管控措施',
|
|||
|
|
value: 1456,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '安全检查库',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '危险源库',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '培训计划完成率',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '用户活跃度',
|
|||
|
|
value: 1456,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '系统用户数',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '正常已办数',
|
|||
|
|
value: 32,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '未完成数',
|
|||
|
|
value: 132,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
scale: getScale(),
|
|||
|
|
};
|
|||
|
|
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: '首页' });
|
|||
|
|
this.riskLevel();
|
|||
|
|
this.safedanger();
|
|||
|
|
this.completeChart(this.state.completeData);
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.setState({
|
|||
|
|
nowDate: this.getDate(),
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidUpdate(prevProps, prevState) {
|
|||
|
|
// 当从其他tab切换回首页时
|
|||
|
|
if (prevState.activeTab !== this.state.activeTab && this.state.activeTab === '首页') {
|
|||
|
|
console.log('切换到首页，初始化图表');
|
|||
|
|
|
|||
|
|
// 延迟确保DOM已渲染
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.riskLevel();
|
|||
|
|
this.safedanger();
|
|||
|
|
this.completeChart(this.state.completeData);
|
|||
|
|
}, 300); // 稍微增加延迟时间
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 当离开首页时，清理图表
|
|||
|
|
if (prevState.activeTab === '首页' && this.state.activeTab !== '首页') {
|
|||
|
|
console.log('离开首页，清理图表');
|
|||
|
|
this.cleanupCharts();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
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) => {
|
|||
|
|
console.log(ret, '877777');
|
|||
|
|
if (ret) {
|
|||
|
|
console.log('首页标题数据', ret);
|
|||
|
|
this.setState({
|
|||
|
|
riskTypeRate: ret.riskTypeRate,
|
|||
|
|
jobTodayTop3: ret.jobTodayTop3,
|
|||
|
|
hiddenRectifyRate: ret.hiddenRectifyRate,
|
|||
|
|
taskTop3: ret.taskTop3,
|
|||
|
|
jobFinishRate: ret.jobFinishRate,
|
|||
|
|
safeCheckSum: ret.safeCheckSum,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 添加清理方法
|
|||
|
|
cleanupCharts = () => {
|
|||
|
|
// 清理风险分级图表
|
|||
|
|
if (this.echartsInstances.riskLevel) {
|
|||
|
|
this.echartsInstances.riskLevel.dispose();
|
|||
|
|
this.echartsInstances.riskLevel = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清理运行走势图
|
|||
|
|
if (this.echartsInstances.opretionTrend) {
|
|||
|
|
this.echartsInstances.opretionTrend.dispose();
|
|||
|
|
this.echartsInstances.opretionTrend = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清理完成率图表
|
|||
|
|
if (this.echartsInstances.completeone) {
|
|||
|
|
this.echartsInstances.completeone.dispose();
|
|||
|
|
this.echartsInstances.completeone = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移除resize监听器
|
|||
|
|
if (this.riskResizeHandler) {
|
|||
|
|
window.removeEventListener('resize', this.riskResizeHandler);
|
|||
|
|
this.riskResizeHandler = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.trendResizeHandler) {
|
|||
|
|
window.removeEventListener('resize', this.trendResizeHandler);
|
|||
|
|
this.trendResizeHandler = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.completeResizeHandler) {
|
|||
|
|
window.removeEventListener('resize', this.completeResizeHandler);
|
|||
|
|
this.completeResizeHandler = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
handleTabClick = (name) => {
|
|||
|
|
// 如果从首页切换到其他tab，先清理图表
|
|||
|
|
if (this.state.activeTab === '首页' && name !== '首页') {
|
|||
|
|
this.cleanupCharts();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.setState({ activeTab: name });
|
|||
|
|
|
|||
|
|
const tabActions = {
|
|||
|
|
首页: () => {
|
|||
|
|
console.log('跳转到首页');
|
|||
|
|
// 首页图表会在componentDidUpdate中初始化
|
|||
|
|
},
|
|||
|
|
风险管控: () => {
|
|||
|
|
console.log('跳转到风险管控');
|
|||
|
|
},
|
|||
|
|
隐患治理: () => {
|
|||
|
|
console.log('跳转到隐患治理');
|
|||
|
|
},
|
|||
|
|
// ... 其他tab
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (tabActions[name]) {
|
|||
|
|
tabActions[name]();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
componentWillUnmount() {
|
|||
|
|
window.removeEventListener('resize', this.setScale);
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
this.cleanupCharts();
|
|||
|
|
}
|
|||
|
|
getHomeTitle = () => {
|
|||
|
|
console.log('获取首页标题数据');
|
|||
|
|
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
|
|||
|
|
let json = initFilter(orgId);
|
|||
|
|
console.log(json, '首页标题数据');
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: 'app/getDataByPost',
|
|||
|
|
payload: json,
|
|||
|
|
url: 'PF/HomeTitle/OrderPaged',
|
|||
|
|
onComplete: (ret) => {
|
|||
|
|
console.log(ret, '877777');
|
|||
|
|
if (ret) {
|
|||
|
|
console.log('首页标题数据', ret);
|
|||
|
|
this.setState({
|
|||
|
|
safetySloganOne: ret[0].TITLE,
|
|||
|
|
// safetySloganOne: "1.安全方针：以人为本、关注健康、依法治企、安全发展。 2.安全理念：一切风险皆可控，一切事故皆可防！3.安全方针：以人为本、关注健康、依法治企、安全发展。4.安全方针：以人为本、关注健康、依法治企、安全发展。5.安全方针：以人为本、关注健康、依法治企、安全发展。 6.安全理念：一切风险皆可控，一切事故皆可防！7.安全方针：以人为本、关注健康、依法治企、安全发展。8.安全方针：以人为本、关注健康、依法治企、安全发展。",
|
|||
|
|
animationDuration: ret[0].SECOND,
|
|||
|
|
sliderColor: ret[0].COCOR,
|
|||
|
|
sliderSize: ret[0].FONTSIZE,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
callback = (key) => {
|
|||
|
|
console.log(key);
|
|||
|
|
};
|
|||
|
|
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;
|
|||
|
|
};
|
|||
|
|
completeChart = (evt) => {
|
|||
|
|
if (this.echartsInstances.completeone) {
|
|||
|
|
this.echartsInstances.completeone.dispose();
|
|||
|
|
this.echartsInstances.completeone = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let completeCharts = document.getElementById('completeone');
|
|||
|
|
if (!completeCharts) {
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
this.completeChart(evt);
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('初始化完成率图表');
|
|||
|
|
|
|||
|
|
this.echartsInstances.completeone = echarts.init(completeCharts);
|
|||
|
|
let seriesArr = [];
|
|||
|
|
let centerArr = [
|
|||
|
|
['20%', '50%'],
|
|||
|
|
['50%', '50%'],
|
|||
|
|
['80%', '50%'],
|
|||
|
|
];
|
|||
|
|
evt.forEach((item, index) => {
|
|||
|
|
seriesArr.push({
|
|||
|
|
center: centerArr[index],
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: [
|
|||
|
|
[0.25, '#c23531'],
|
|||
|
|
[0.5, '#EFC631'],
|
|||
|
|
[0.75, '#63869e'],
|
|||
|
|
[1, '#91c7ae'],
|
|||
|
|
],
|
|||
|
|
width: 8,
|
|||
|
|
},
|
|||
|
|
radius: '90%', // 控制轴线本身的半径
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
length: 8, // 刻度线长度
|
|||
|
|
distance: 25, // 向内移动距离，负值越大越向内
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff', // 刻度线颜色
|
|||
|
|
width: 2, // 刻度线宽度
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
distance: 15, // 标签与刻度线的距离
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 10,
|
|||
|
|
},
|
|||
|
|
// 调整标签偏移
|
|||
|
|
offset: [0, 0], // [水平偏移, 垂直偏移]
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'auto',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
radius: '80%',
|
|||
|
|
pointer: {
|
|||
|
|
show: true,
|
|||
|
|
width: '8%',
|
|||
|
|
length: '20%',
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
textStyle: {
|
|||
|
|
// fontWeight: 'bolder',
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: '#fff',
|
|||
|
|
},
|
|||
|
|
offsetCenter: [0, '100%'],
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: 'bolder',
|
|||
|
|
fontSize: 20,
|
|||
|
|
color: '#fff',
|
|||
|
|
},
|
|||
|
|
offsetCenter: [0, '68%'],
|
|||
|
|
// 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('初始化运行走势图');
|
|||
|
|
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 = [
|
|||
|
|
'选矿部门',
|
|||
|
|
'矿山部门',
|
|||
|
|
'尾矿部门',
|
|||
|
|
'机电部门',
|
|||
|
|
'安全部门',
|
|||
|
|
'生产部门',
|
|||
|
|
'技术部门',
|
|||
|
|
'维修部门',
|
|||
|
|
'运输部门',
|
|||
|
|
'仓储部门',
|
|||
|
|
'质检部门',
|
|||
|
|
'环保部门',
|
|||
|
|
'研发部门',
|
|||
|
|
'行政部门',
|
|||
|
|
'财务部门',
|
|||
|
|
];
|
|||
|
|
// 生成x轴数据（12个月）
|
|||
|
|
let xAxisData = [];
|
|||
|
|
for (let i = 1; i <= 12; i++) {
|
|||
|
|
xAxisData.push(i.toString());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成15个系列的数据
|
|||
|
|
let seriesArr = [];
|
|||
|
|
for (let i = 0; i < 15; i++) {
|
|||
|
|
let yAxisData = [];
|
|||
|
|
for (let j = 0; j < 12; j++) {
|
|||
|
|
// 生成60-100的随机数据
|
|||
|
|
yAxisData.push(Math.floor(Math.random() * 40) + 60);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
seriesArr.push({
|
|||
|
|
name: seriesNames[i],
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
symbolSize: 6,
|
|||
|
|
data: yAxisData,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
%`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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: {
|
|||
|
|
formatter: '{value}月',
|
|||
|
|
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);
|
|||
|
|
};
|
|||
|
|
riskLevel = () => {
|
|||
|
|
// 如果已有实例，先销毁
|
|||
|
|
if (this.echartsInstances.riskLevel) {
|
|||
|
|
this.echartsInstances.riskLevel.dispose();
|
|||
|
|
this.echartsInstances.riskLevel = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const riskLevels = document.getElementById('riskLevelFull');
|
|||
|
|
if (!riskLevels) {
|
|||
|
|
console.warn('风险分级图表容器未找到');
|
|||
|
|
// 使用requestAnimationFrame而不是setTimeout
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
this.riskLevel();
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('初始化风险分级图表');
|
|||
|
|
|
|||
|
|
// 初始化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,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const width = 1920,
|
|||
|
|
height = 1200;
|
|||
|
|
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
|
|||
|
|
const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize, activeTab } = this.state;
|
|||
|
|
const renderContent = () => {
|
|||
|
|
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 === '较大风险'
|
|||
|
|
? '#FF6710'
|
|||
|
|
: item.riskType === '一般风险'
|
|||
|
|
? '#FFDD1E'
|
|||
|
|
: '#0091FF',
|
|||
|
|
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%',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<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)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ width: '100%', height: '100%' }}></div>
|
|||
|
|
</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%',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className={styles.scrollboard} style={{ marginTop: '20px' }}>
|
|||
|
|
<ScrollBoard config={this.state.safescrollConfig} style={{ width: '100%', height: '100%' }} />
|
|||
|
|
</div>
|
|||
|
|
</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' }}>
|
|||
|
|
{this.state.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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
))}
|
|||
|
|
</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}>
|
|||
|
|
{this.state.riskChangeData.map((item, index) => (
|
|||
|
|
<div className={styles.gradient}>
|
|||
|
|
<div className={styles.gradientNext}>
|
|||
|
|
<div className={styles.gradientNextTwo}>
|
|||
|
|
<div className={styles.gradientName}>{item.name}</div>
|
|||
|
|
<div className={styles.gradientText}>{item.value}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.riskChangeTwo}>
|
|||
|
|
<div className={styles.gradientTwo}>
|
|||
|
|
<div className={styles.gradientNext}>
|
|||
|
|
<div className={styles.gradientNextTwo}>
|
|||
|
|
<div className={styles.gradientNameTwo}>整改率</div>
|
|||
|
|
<div className={styles.gradientTextTwo}>83.98%</div>
|
|||
|
|
</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>
|
|||
|
|
<CapsuleChart config={this.state.chartConfig} style={{ width: '100%', height: '100%' }} />
|
|||
|
|
</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',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.configBanner.slice(0, 3).map((item, index) => (
|
|||
|
|
<div
|
|||
|
|
key={item.id || index}
|
|||
|
|
className={`${styles.configBanners} ${
|
|||
|
|
this.state.activeTab === item.name ? styles.active : ''
|
|||
|
|
}`}
|
|||
|
|
onClick={() => this.handleTabClick(item.name)}
|
|||
|
|
onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item.name)}
|
|||
|
|
tabIndex={0}
|
|||
|
|
title={`点击进入${item.name}`}
|
|||
|
|
role="button"
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
{item.name}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</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' }}>
|
|||
|
|
{this.state.configBanner.slice(3, 6).map((item, index) => (
|
|||
|
|
<div
|
|||
|
|
key={item.id || index}
|
|||
|
|
className={`${styles.configBanners} ${
|
|||
|
|
this.state.activeTab === item.name ? styles.active : ''
|
|||
|
|
}`}
|
|||
|
|
onClick={() => this.handleTabClick(item.name)}
|
|||
|
|
onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item.name)}
|
|||
|
|
tabIndex={0}
|
|||
|
|
title={`点击进入${item.name}`}
|
|||
|
|
role="button"
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
{item.name}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</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));
|