1455 lines
48 KiB
JavaScript
1455 lines
48 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 } from 'antd';
|
||
import EnergyIcon from '../utils/energyIcon';
|
||
import { $consts } from '../plugins';
|
||
import styles from './full.less';
|
||
import echarts from 'echarts';
|
||
import realGif from '../assets/layout/mofang.png';
|
||
import storage from '../utils/storage';
|
||
import { initFilter } from '../utils/common';
|
||
import logo from '../assets/layout/headerno-logo-new.png';
|
||
import {
|
||
FullScreenContainer,
|
||
BorderBox8,
|
||
BorderBox10,
|
||
ScrollBoard,
|
||
CapsuleChart,
|
||
WaterLevelPond,
|
||
} from '@jiaminghi/data-view-react';
|
||
import { text } from '@jiaminghi/data-view-react/lib/index-cd27b7f6';
|
||
|
||
const stud = (eve) => {
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
||
<div
|
||
style={{
|
||
width: '70%',
|
||
backgroundColor: '#ec1c24',
|
||
height: '30%',
|
||
borderRadius: '10px',
|
||
position: 'relative',
|
||
top: '50%',
|
||
transform: 'translateY(-50%)',
|
||
}}
|
||
></div>
|
||
<div>90</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
class FullScreen extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
safetySloganOne: '',
|
||
animationDuration: 20,
|
||
sliderColor: '#de4e58',
|
||
sliderSize: '24px',
|
||
screenWidh: window.screen.width > 2000 ? true : false,
|
||
nowDate: '',
|
||
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,
|
||
},
|
||
],
|
||
showValue: true,
|
||
},
|
||
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,
|
||
},
|
||
],
|
||
};
|
||
// this.scrollConfig = {
|
||
// header: ["检查类型", "检查次数", "完成率"],
|
||
// data: [
|
||
// ["巡回检查", "322", "行1列3"],
|
||
// ["例行检查", "255", "行2列3"],
|
||
// ["日常检查", "253", "行3列3"],
|
||
// ["专业检查", "123", "行4列3"],
|
||
// ["巡回检查", "322", "行1列3"],
|
||
// ["例行检查", "255", "行2列3"],
|
||
// ["日常检查", "253", "行3列3"],
|
||
// ["专业检查", "123", "行4列3"],
|
||
// ],
|
||
// waitTime: 200000,
|
||
// };
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.riskLevel();
|
||
this.safedanger();
|
||
const eve = () => {
|
||
return <div>11111</div>;
|
||
};
|
||
// setInterval(this.getDate(), 1000);
|
||
this.timer = setInterval(() => {
|
||
this.setState({
|
||
nowDate: this.getDate(),
|
||
});
|
||
}, 1000);
|
||
// setTimeout(()=>{
|
||
// this.setState({
|
||
// nowDate:this.getDate()
|
||
// })
|
||
// },1000)
|
||
this.getHomeTitle();
|
||
this.completeChart(this.state.completeData);
|
||
// this.completeChart(this.state.completeDatatwo);
|
||
// this.completeChart(this.state.completeDatathree);
|
||
// this.setState({
|
||
// scrollConfig: {
|
||
// header: ["检查类型", "检查次数", "完成率"],
|
||
// data: [
|
||
// [
|
||
// "巡回检查",
|
||
// "322",
|
||
// "<div style='width:`{this.state.widthp}`;height:30%;background-color:#ec1c24;border-radius:10px;position:relative;top:50%;transform:translateY(-50%);'></div>",
|
||
// ],
|
||
// ["例行检查", "255", eve],
|
||
// ["日常检查", "253", "99%"],
|
||
// ["专业检查", "123", "99%"],
|
||
// ["巡回检查", "322", "99%"],
|
||
// ["例行检查", "255", "99%"],
|
||
// ["日常检查", "253", "99%"],
|
||
// ["专业检查", "123", "99%"],
|
||
// ],
|
||
// waitTime: 2000,
|
||
// },
|
||
// });
|
||
}
|
||
componentWillUnmount() {
|
||
clearInterval(this.timer);
|
||
}
|
||
getHomeTitle = () => {
|
||
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
|
||
let json = initFilter(orgId);
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
payload: json,
|
||
url: 'PF/HomeTitle/OrderPaged',
|
||
onComplete: (ret) => {
|
||
if (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,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
};
|
||
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) => {
|
||
let seriesArr = [];
|
||
let centerArr = [
|
||
['17%', '50%'],
|
||
['50%', '50%'],
|
||
['83%', '50%'],
|
||
];
|
||
evt.forEach((item, index) => {
|
||
seriesArr.push(
|
||
{
|
||
name: '统计',
|
||
type: 'gauge',
|
||
radius: '75%', //图表尺寸
|
||
center: centerArr[index],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
shadowBlur: 0,
|
||
color: [
|
||
[0.05, '#a62efb'],
|
||
[0.1, '#af23fa'],
|
||
[0.15, '#b31ffa'],
|
||
[0.2, '#b71afa'],
|
||
[0.25, '#b51dfa'],
|
||
[0.3, '#b220fa'],
|
||
[0.35, '#a42ffb'],
|
||
[0.4, '#993dfb'],
|
||
[0.45, '#8f47fb'],
|
||
[0.5, '#7b5efc'],
|
||
[0.55, '#6476fc'],
|
||
[0.6, '#4c91fd'],
|
||
[0.65, '#35abfe'],
|
||
[0.7, '#24befe'],
|
||
[0.75, '#12d1ff'],
|
||
[0.8, '#06defe'],
|
||
[0.85, '#05e0ff'],
|
||
[0.9, '#06deff'],
|
||
[0.95, '#06deff'],
|
||
[1, '#06deff'],
|
||
],
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'auto',
|
||
width: 2,
|
||
},
|
||
length: -5,
|
||
splitNumber: 5,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
length: -10,
|
||
lineStyle: {
|
||
color: 'auto',
|
||
width: 2,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
//仪表盘指针
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
show: true,
|
||
offsetCenter: [0, '100%'], // x, y，单位px
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
name: item.name,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'gauge',
|
||
radius: '70%',
|
||
center: centerArr[index],
|
||
splitNumber: 0, //刻度数量
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
color: [
|
||
[
|
||
1,
|
||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#A52EFA',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#07DDFD',
|
||
},
|
||
]),
|
||
],
|
||
],
|
||
},
|
||
},
|
||
//分隔线样式。
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
show: false,
|
||
offsetCenter: [0, '-20%'], // x, y，单位px
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
//仪表盘详情，用于显示数据。
|
||
detail: {
|
||
show: true,
|
||
offsetCenter: [0, 0],
|
||
color: '#fff',
|
||
formatter: function (params) {
|
||
return params + '%';
|
||
},
|
||
textStyle: {
|
||
fontSize: 22,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
// name: evt.name,
|
||
value: item.value,
|
||
},
|
||
],
|
||
}
|
||
);
|
||
});
|
||
let completeCharts = document.getElementById('completeone');
|
||
if (completeCharts) {
|
||
let myChart = echarts.init(completeCharts);
|
||
myChart.setOption({
|
||
// backgroundColor:'#000',
|
||
series: seriesArr,
|
||
});
|
||
}
|
||
};
|
||
safedanger = () => {
|
||
let bgColor = '#000';
|
||
let color = [
|
||
'#0090FF',
|
||
'#36CE9E',
|
||
'#e690d1',
|
||
// "#FF515A",
|
||
// "#8B5CFF",
|
||
// "#00CA69",
|
||
];
|
||
let echartData = [
|
||
{
|
||
name: '1',
|
||
value1: 99,
|
||
value2: 93,
|
||
value3: 90,
|
||
},
|
||
{
|
||
name: '2',
|
||
value1: 95,
|
||
value2: 98,
|
||
value3: 60,
|
||
},
|
||
{
|
||
name: '3',
|
||
value1: 92,
|
||
value2: 99,
|
||
value3: 90,
|
||
},
|
||
{
|
||
name: '4',
|
||
value1: 99,
|
||
value2: 96,
|
||
value3: 96,
|
||
},
|
||
{
|
||
name: '5',
|
||
value1: 80,
|
||
value2: 85,
|
||
value3: 91,
|
||
},
|
||
{
|
||
name: '6',
|
||
value1: 99,
|
||
value2: 65,
|
||
value3: 80,
|
||
},
|
||
{
|
||
name: '7',
|
||
value1: 92,
|
||
value2: 97,
|
||
value3: 70,
|
||
},
|
||
{
|
||
name: '8',
|
||
value1: 75,
|
||
value2: 96,
|
||
value3: 90,
|
||
},
|
||
{
|
||
name: '9',
|
||
value1: 93,
|
||
value2: 95,
|
||
value3: 90,
|
||
},
|
||
{
|
||
name: '10',
|
||
value1: 100,
|
||
value2: 97,
|
||
value3: 90,
|
||
},
|
||
{
|
||
name: '11',
|
||
value1: 99,
|
||
value2: 93,
|
||
value3: 90,
|
||
},
|
||
{
|
||
name: '12',
|
||
value1: 93,
|
||
value2: 87,
|
||
value3: 90,
|
||
},
|
||
];
|
||
|
||
let xAxisData = echartData.map((v) => v.name);
|
||
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
||
let yAxisData1 = echartData.map((v) => v.value1);
|
||
// [100, 138, 350, 173, 180, 150, 180, 230]
|
||
let yAxisData2 = echartData.map((v) => v.value2);
|
||
let yAxisData3 = echartData.map((v) => v.value3);
|
||
// [233, 233, 200, 180, 199, 233, 210, 180]
|
||
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;
|
||
};
|
||
let opretionTrends = document.getElementById('opretionTrend');
|
||
if (opretionTrends) {
|
||
let myChart = echarts.init(opretionTrends);
|
||
myChart.setOption({
|
||
backgroundColor: '',
|
||
color: color,
|
||
legend: {
|
||
right: 10,
|
||
top: 10,
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
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: 100,
|
||
top: '25%',
|
||
bottom: '10%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: '{value}月',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
data: xAxisData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
lineHeight: 40,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#fff',
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '选矿',
|
||
type: 'line',
|
||
smooth: true,
|
||
// showSymbol: false,/
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[0],
|
||
shadowBlur: 3,
|
||
// shadowColor: hexToRgba(color[0], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
// areaStyle: {
|
||
// normal: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0,
|
||
// 0,
|
||
// 0,
|
||
// 1,
|
||
// [
|
||
// {
|
||
// offset: 0,
|
||
// color: hexToRgba(color[0], 0.3),
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: hexToRgba(color[0], 0.1),
|
||
// },
|
||
// ],
|
||
// false
|
||
// ),
|
||
// shadowColor: hexToRgba(color[0], 0.1),
|
||
// shadowBlur: 10,
|
||
// },
|
||
// },
|
||
data: yAxisData1,
|
||
},
|
||
{
|
||
name: '矿山',
|
||
type: 'line',
|
||
smooth: true,
|
||
// showSymbol: false,
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[1],
|
||
shadowBlur: 3,
|
||
// shadowColor: hexToRgba(color[1], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
// areaStyle: {
|
||
// normal: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0,
|
||
// 0,
|
||
// 0,
|
||
// 1,
|
||
// [
|
||
// {
|
||
// offset: 0,
|
||
// color: hexToRgba(color[1], 0.3),
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: hexToRgba(color[1], 0.1),
|
||
// },
|
||
// ],
|
||
// false
|
||
// ),
|
||
// shadowColor: hexToRgba(color[1], 0.1),
|
||
// shadowBlur: 10,
|
||
// },
|
||
// },
|
||
data: yAxisData2,
|
||
},
|
||
{
|
||
name: '尾矿',
|
||
type: 'line',
|
||
smooth: true,
|
||
// showSymbol: false,
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[2],
|
||
shadowBlur: 3,
|
||
// shadowColor: hexToRgba(color[1], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
// areaStyle: {
|
||
// normal: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0,
|
||
// 0,
|
||
// 0,
|
||
// 1,
|
||
// [
|
||
// {
|
||
// offset: 0,
|
||
// color: hexToRgba(color[1], 0.3),
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: hexToRgba(color[1], 0.1),
|
||
// },
|
||
// ],
|
||
// false
|
||
// ),
|
||
// shadowColor: hexToRgba(color[1], 0.1),
|
||
// shadowBlur: 10,
|
||
// },
|
||
// },
|
||
data: yAxisData3,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
};
|
||
riskLevel = () => {
|
||
let riskLevel = [];
|
||
let showData = [
|
||
{ value: 2, name: '一级' },
|
||
{ value: 5, name: '二级' },
|
||
{ value: 15, name: '三级' },
|
||
{ value: 30, name: '四级' },
|
||
];
|
||
|
||
let riskLevels = document.getElementById('riskLevelFull');
|
||
if (riskLevels) {
|
||
let myChart = echarts.init(riskLevels);
|
||
myChart.setOption({
|
||
color: ['#c92a2a', '#FF6710', '#FFDD1E', '#0091FF', '#fa8a89'],
|
||
title: [
|
||
{
|
||
text: '52',
|
||
x: 'center',
|
||
y: '40%',
|
||
textStyle: {
|
||
fontSize: 26,
|
||
fontWeight: 'normal',
|
||
color: ['#fff'],
|
||
},
|
||
},
|
||
{
|
||
text: '风险总数',
|
||
x: 'center',
|
||
y: '55%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}:({d}%)',
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
minAngle: 20,
|
||
radius: ['45%', '70%'],
|
||
center: ['50%', '50%'],
|
||
clockwise: true,
|
||
avoidLabelOverlap: true,
|
||
hoverOffset: 15,
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
// formatter: '{a|{b}：{d}%}\n{hr|}',
|
||
formatter: '{a|{b}：}{e|{d}%}\n',
|
||
rich: {
|
||
hr: {
|
||
backgroundColor: 't',
|
||
borderRadius: 3,
|
||
width: 3,
|
||
height: 3,
|
||
padding: [3, 3, 0, -12],
|
||
},
|
||
a: {
|
||
padding: [-15, 0, 0, 0],
|
||
fontSize: 15,
|
||
// fontWeight: "bold",
|
||
color: '#fff',
|
||
// fontFamily:'站酷庆科黄油体',
|
||
// letterSpacing: 3,
|
||
},
|
||
e: {
|
||
fontSize: 14,
|
||
color: '#fff',
|
||
padding: [-15, 0, 0, 5],
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
length: 20,
|
||
length2: 30,
|
||
lineStyle: {
|
||
width: 1,
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
},
|
||
// itemStyle: {
|
||
// //图形样式
|
||
// normal: {
|
||
// borderColor: "#fff",
|
||
// borderWidth: 2,
|
||
// padding: "0 20px",
|
||
// borderRadius: 50,
|
||
// },
|
||
// },
|
||
// color: color,
|
||
data: showData,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
};
|
||
|
||
render() {
|
||
const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state;
|
||
return (
|
||
<React.Fragment>
|
||
<FullScreenContainer>
|
||
<div className={styles.blackBack}>
|
||
<div className={styles.backImage}>
|
||
<div className={styles.header}>
|
||
<Row style={{ width: '100%', height: '100%' }}>
|
||
<Col
|
||
span={8}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-start',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-start',
|
||
flexDirection: 'row',
|
||
width: '80%',
|
||
}}
|
||
>
|
||
<img
|
||
src={logo}
|
||
alt="logo"
|
||
style={{
|
||
width: 'auto',
|
||
height: '52px',
|
||
margin: '10px 20px 10px 50px',
|
||
}}
|
||
></img>
|
||
<div
|
||
className="slide-style"
|
||
style={{
|
||
'--animation-duration': `${animationDuration}s`, // 动态设置动画时长
|
||
'--slider-color': `${sliderColor}`, // 动态设置颜色
|
||
'--slider-size': `${sliderSize}px`, // 动态设置颜色
|
||
}}
|
||
>
|
||
<p className="slide-text-style">{safetySloganOne || '暂无公告'}</p>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col
|
||
span={8}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}
|
||
>
|
||
<div className={styles.headerText}>安全生产标准化运营平台</div>
|
||
</Col>
|
||
<Col
|
||
span={8}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-end',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
color: '#fff',
|
||
fontSize: '20px',
|
||
margin: '10px 50px 10px 20px',
|
||
fontWeight: 'bold',
|
||
height: '52px',
|
||
}}
|
||
>
|
||
{this.state.nowDate}
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
<div className={styles.row}>
|
||
<Row style={{ width: '100%', height: '100%' }}>
|
||
<Col span={8} className={styles.boxleft}>
|
||
<div className={styles.risklevel}>
|
||
{/* <BorderBox10> */}
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>风险等级基本信息</div>
|
||
</div>
|
||
|
||
<div
|
||
id="riskLevelFull"
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
height: '100%',
|
||
}}
|
||
></div>
|
||
{/* </BorderBox10> */}
|
||
</div>
|
||
|
||
<div style={{ height: '10px' }}></div>
|
||
<div className={styles.risklevelOne}>
|
||
{/* <BorderBox10> */}
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>隐患检查基本信息</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
height: '100%',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
width: '100%',
|
||
height: '30%',
|
||
padding: '10px 30px',
|
||
}}
|
||
>
|
||
{this.state.checkData.map((item, index) => {
|
||
return (
|
||
<div>
|
||
<BorderBox8>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
color: '#fff',
|
||
padding: '10px 25px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div style={{ fontSize: '14px' }}>{item.name}</div>
|
||
|
||
<div
|
||
style={{
|
||
fontSize: '12px',
|
||
display: 'flex',
|
||
justifyContent: 'flex-end',
|
||
}}
|
||
>
|
||
/次
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: '22px',
|
||
color: '#febc22',
|
||
fontWeight: 'bold',
|
||
}}
|
||
>
|
||
{item.value}
|
||
</div>
|
||
</div>
|
||
</BorderBox8>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className={styles.scrollboard}>
|
||
<ScrollBoard config={this.state.scrollConfig} style={{ width: '100%', height: '100%' }} />
|
||
</div>
|
||
</div>
|
||
{/* </BorderBox10> */}
|
||
</div>
|
||
</Col>
|
||
<Col span={8} className={styles.boxTwo}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
}}
|
||
>
|
||
{this.state.screenWidh ? (
|
||
<div className={styles.scoreBox}>
|
||
<div className={styles.score}>
|
||
{/* <div className={styles.scoreLeft}>矿山</div> */}
|
||
<div className={styles.scoreRight}>
|
||
<div className={styles.scoreText}>标准化得分</div>
|
||
<div className={styles.scoreText2}>83</div>
|
||
</div>
|
||
</div>
|
||
<div className={styles.score2}>
|
||
<div className={styles.scoreRight}>
|
||
<div className={styles.scoreText}>标准化得分</div>
|
||
<div className={styles.scoreText2}>88</div>
|
||
</div>
|
||
</div>
|
||
<div className={styles.score3}>
|
||
<div className={styles.scoreRight}>
|
||
<div className={styles.scoreText}>标准化得分</div>
|
||
<div className={styles.scoreText2}>93</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className={styles.scoreBox1}>
|
||
<div className={styles.score4}>
|
||
<div className={styles.scoreLeft}>矿山</div>
|
||
<div className={styles.scoreText3}>标准化得分</div>
|
||
<div className={styles.scoreText2}>83</div>
|
||
</div>
|
||
<div className={styles.score4}>
|
||
<div className={styles.scoreLeft}>选矿</div>
|
||
<div className={styles.scoreText3}>标准化得分</div>
|
||
<div className={styles.scoreText2}>88</div>
|
||
</div>
|
||
<div className={styles.score4}>
|
||
<div className={styles.scoreLeft}>尾矿</div>
|
||
<div className={styles.scoreText3}>标准化得分</div>
|
||
<div className={styles.scoreText2}>93</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
// height: "100%",
|
||
// width: "100%",
|
||
flex: 1,
|
||
position: 'relative',
|
||
}}
|
||
>
|
||
<div>
|
||
<img src={realGif} alt="1" style={{ width: '100%', height: '100%' }}></img>
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
fontSize: '14px',
|
||
color: '#fff',
|
||
top: '0',
|
||
left: '0',
|
||
width: '100%',
|
||
height: '100%',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
position: 'relative',
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: '50%',
|
||
}}
|
||
className={styles.ulData}
|
||
>
|
||
{this.state.roaData.map((item, index) => {
|
||
return (
|
||
<li>
|
||
<div className={styles.roateData}>
|
||
<div className={styles.roatBack}>
|
||
{item.name}:{item.value}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={8} className={styles.boxTwo}>
|
||
<div className={styles.risklevel}>
|
||
{/* <BorderBox10> */}
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>基本会议完成情况</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
width: '90%',
|
||
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
|
||
id="completetwo"
|
||
style={{ width: "100%", height: "100%" }}
|
||
></div>
|
||
<div
|
||
id="completethree"
|
||
style={{ width: "100%", height: "100%" }}
|
||
></div> */}
|
||
{/* <WaterLevelPond
|
||
config={this.state.WaterLevelPondconfig1}
|
||
style={{ width: "20%", height: "100%" }}
|
||
/>
|
||
<WaterLevelPond
|
||
config={this.state.WaterLevelPondconfig2}
|
||
style={{ width: "20%", height: "100%" }}
|
||
/>
|
||
<WaterLevelPond
|
||
config={this.state.WaterLevelPondconfig3}
|
||
style={{ width: "20%", height: "100%" }}
|
||
/> */}
|
||
</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}>
|
||
<div className={styles.gradientThree}>
|
||
<div className={styles.gradientNext}>
|
||
<div className={styles.gradientNextTwo}>
|
||
<div className={styles.gradientText}>{item.value}</div>
|
||
<div className={styles.gradientName}>{item.name}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ height: '10px' }}></div>
|
||
<div className={styles.risklevelOne}>
|
||
{/* <BorderBox10> */}
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>安全任务完成情况</div>
|
||
</div>
|
||
<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>
|
||
{/* </BorderBox10> */}
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
<div className={styles.rowTwo}>
|
||
<Row style={{ width: '100%', height: '100%' }}>
|
||
<Col span={8} className={styles.boxleft}>
|
||
<div className={styles.risklevelTwo}>
|
||
{/* <BorderBox10> */}
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>隐患整改数据</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
height: '100%',
|
||
}}
|
||
>
|
||
<div className={styles.riskChange}>
|
||
<div className={styles.gradient}>
|
||
<div className={styles.gradientNext}>
|
||
<div className={styles.gradientNextTwo}>
|
||
<div className={styles.gradientText}>83</div>
|
||
<div className={styles.gradientName}>隐患数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={styles.gradient}>
|
||
<div className={styles.gradientNext}>
|
||
<div className={styles.gradientNextTwo}>
|
||
<div className={styles.gradientText}>23</div>
|
||
<div className={styles.gradientName}>延期整改数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={styles.gradient}>
|
||
<div className={styles.gradientNext}>
|
||
<div className={styles.gradientNextTwo}>
|
||
<div className={styles.gradientText}>56</div>
|
||
<div className={styles.gradientName}>按期整改数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={styles.riskChangeTwo}>
|
||
<div className={styles.gradientTwo}>
|
||
<div className={styles.gradientNext}>
|
||
<div className={styles.gradientNextTwo}>
|
||
<div className={styles.gradientTextTwo}>83%</div>
|
||
<div className={styles.gradientNameTwo}>整改率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* </BorderBox10> */}
|
||
</div>
|
||
</Col>
|
||
<Col span={8} className={styles.boxTwo}>
|
||
{/* <BorderBox8> */}
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
height: '100%',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>安全生产标准化运行走势图</div>
|
||
</div>
|
||
<div
|
||
id="opretionTrend"
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
height: '90%',
|
||
}}
|
||
></div>
|
||
</div>
|
||
{/* </BorderBox8> */}
|
||
</Col>
|
||
<Col span={8} className={styles.boxTwo}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
height: '100%',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
width: '90%',
|
||
height: '100%',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div className={styles.title}>
|
||
<div className={styles.circle}></div>
|
||
<div className={styles.titlename}>班组完成率TOP5</div>
|
||
</div>
|
||
<div className={styles.capsuleChart}>
|
||
<CapsuleChart config={this.state.chartConfig} style={{ width: '100%', height: '100%' }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</FullScreenContainer>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default withRouter(connect(({ login }) => ({ login }))(FullScreen));
|