1543 lines
50 KiB
JavaScript
1543 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 } 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 logo from "../assets/layout/header-logo.png";
|
||
import debounce from "lodash.debounce";
|
||
import {
|
||
FullScreenContainer,
|
||
BorderBox8,
|
||
BorderBox10,
|
||
ScrollBoard,
|
||
CapsuleChart,
|
||
WaterLevelPond,
|
||
} from "@jiaminghi/data-view-react";
|
||
import { text } from "@jiaminghi/data-view-react/lib/index-cd27b7f6";
|
||
import { Scale } from "canvg";
|
||
|
||
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>
|
||
);
|
||
};
|
||
const getScale = () => {
|
||
const width = 1920,
|
||
height = 1080; // 此处可以根据实际设计稿尺寸修改
|
||
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 = {
|
||
// 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,
|
||
},
|
||
],
|
||
scale: getScale(),
|
||
};
|
||
// 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,
|
||
// };
|
||
}
|
||
|
||
setScale = debounce(() => {
|
||
// debounce节流
|
||
// 获取到缩放比，设置它
|
||
let scale = getScale();
|
||
this.setState({ scale });
|
||
}, 500);
|
||
|
||
componentDidMount() {
|
||
window.addEventListener("resize", this.setScale); // 得到呈现的屏幕宽高比
|
||
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.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() {
|
||
window.removeEventListener("resize", this.setScale);
|
||
clearInterval(this.timer);
|
||
}
|
||
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 width = 1920,
|
||
height = 1080;
|
||
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
|
||
const { scale } = this.state;
|
||
return (
|
||
<React.Fragment>
|
||
<FullScreenContainer>
|
||
<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={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={{ color: "#fff", fontSize: "18px" }}
|
||
>
|
||
<p className="slide-text-style">
|
||
安全方针：安全第一、综合治理、控制风险、科学发展
|
||
|
||
安全理念：一切风险皆可控，一切事故皆可防！
|
||
</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%",
|
||
}}
|
||
>
|
||
<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>
|
||
{/* {this.state.screenWidh ? (
|
||
|
||
) : (
|
||
<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>
|
||
</div>
|
||
</FullScreenContainer>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default withRouter(connect(({ login }) => ({ login }))(FullScreen));
|