安全检查绩效报表 静态页面提交
This commit is contained in:
wyw
parent
34d4a05378
commit
15c9a8a574
@ -1,20 +1,51 @@
|
|||||||
import React, { useState, useEffect, useRef, Component } from "react";
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
import { connect } from "dva";
|
import { connect } from "dva";
|
||||||
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
import { Row, Col, Select, Modal, Table, Button, DatePicker, message } from "antd";
|
||||||
import echarts from "echarts";
|
import echarts from "echarts";
|
||||||
import moment from "moment";
|
|
||||||
import IconFont from "../../../utils/iconFont";
|
|
||||||
import { T } from "antd/lib/upload/utils";
|
|
||||||
|
|
||||||
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
class BI056Dilg1_1 extends React.Component {
|
class BI056Dilg1_1 extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
var month = (new Date()).getMonth() + 1
|
||||||
|
var selectSeason = 1
|
||||||
|
var isShowbtn2 = false
|
||||||
|
var isShowbtn3 = false
|
||||||
|
var isShowbtn4 = false
|
||||||
|
|
||||||
|
switch (month) {
|
||||||
|
case 4:
|
||||||
|
case 5:
|
||||||
|
case 6:
|
||||||
|
selectSeason = 2
|
||||||
|
isShowbtn2 = true
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
case 8:
|
||||||
|
case 9:
|
||||||
|
selectSeason = 3
|
||||||
|
isShowbtn2 = true
|
||||||
|
isShowbtn3 = true
|
||||||
|
break;
|
||||||
|
case 10:
|
||||||
|
case 11:
|
||||||
|
case 12:
|
||||||
|
selectSeason = 4
|
||||||
|
isShowbtn2 = true
|
||||||
|
isShowbtn3 = true
|
||||||
|
isShowbtn4 = true
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
isShow1: false,
|
month: month,
|
||||||
isShow2: false,
|
barWidth: this.props.data.barWidth,
|
||||||
|
seasonIndex: selectSeason,
|
||||||
|
isShowbtn2: isShowbtn2,
|
||||||
|
isShowbtn3: isShowbtn3,
|
||||||
|
isShowbtn4: isShowbtn4,
|
||||||
dtStart: null,//开始时间
|
dtStart: null,//开始时间
|
||||||
dtEnd: null,//结束时间
|
dtEnd: null,//结束时间
|
||||||
mineType: 0,//生产单元
|
mineType: 0,//生产单元
|
||||||
@ -25,73 +56,45 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
ret: {
|
ret: {
|
||||||
IsSuccessful: true,
|
IsSuccessful: true,
|
||||||
Data: {
|
Data: {
|
||||||
checkMineType1_1: {
|
checkMineType: {
|
||||||
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
||||||
legendName: ["公司级", "部门级", "车间级", "班组级"],
|
legendName: ["公司级", "部门级", "车间级", "班组级"],
|
||||||
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
|
|
||||||
|
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
checkCountMonth: [
|
checkCountMonth: [
|
||||||
//公司级 各生产单元mineTypeName 1月~12月
|
//有几月的数据就统计到几月 时间不到不统计 也不能放入0
|
||||||
[[3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3]],
|
// 公司级 、 部门级 车间级 班组级 各一个数组
|
||||||
//部门级 各生产单元mineTypeName 1月~12月
|
// [公司级露天矿1月数据,公司级选矿厂1月数据,公司级尾矿库1月数据,公司级职能部门1月数据 ,公司级露天矿2月数据,公司级选矿厂2月数据,公司级尾矿库2月数据,公司级职能部门2月数据]
|
||||||
[[6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6]],
|
|
||||||
//车间级 各生产单元mineTypeName 1月~12月
|
// 公司级
|
||||||
[[9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9]],
|
[1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12],
|
||||||
//班组级 各生产单元mineTypeName 1月~12月
|
// 部门级
|
||||||
[[12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12], [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12], [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12], [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]],
|
[4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
|
||||||
],
|
// 车间级
|
||||||
|
[28, 29, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
|
||||||
|
// 班组级
|
||||||
|
[55, 56, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]
|
||||||
|
|
||||||
|
// // 2个月的数据如下图
|
||||||
|
// [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4],
|
||||||
|
// // 部门级
|
||||||
|
// [5, 5, 5, 5, 5, 5, 5, 5, 7, 7, 7, 7, 8, 8, 8, 8],
|
||||||
|
// // 车间级
|
||||||
|
// [30, 30, 30, 30, 30, 30, 30, 30, 9, 9, 9, 9, 4, 4, 4, 4],
|
||||||
|
// // 班组级
|
||||||
|
// [60, 60, 60, 60, 60, 60, 60, 60, 10, 10, 10, 10, 11, 11, 10, 11]
|
||||||
|
|
||||||
checkCount: [
|
|
||||||
[[1, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
[[2, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
[[3, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
[[4, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]]
|
|
||||||
// ,
|
|
||||||
// [[5, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
// [[6, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]]
|
|
||||||
// [[7, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
// [[8, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
// [[9, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
// [[10, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
// [[11, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
// [[12, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
|
||||||
]
|
]
|
||||||
,
|
|
||||||
// axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
||||||
// checkCount: [[3, 3, 3, 3,3, 3, 3, 3,3, 3, 3, 3], [12, 12, 12, 6,12, 12, 12, 6,12, 12, 12, 6], [24, 24, 24, 12,24, 24, 24, 12,24, 24, 24, 12], [90, 90, 120, 36,90, 90, 120, 36,90, 90, 120, 36]],
|
|
||||||
// checkCount: [[3, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36], [90, 90, 120, 36], [90, 90, 120, 36], [90, 90, 120, 36], [90, 90, 120, 36], [90, 90, 120, 36], [90, 90, 120, 36], [90, 90, 120, 36]],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// riskMineType1_2: {
|
|
||||||
// legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
||||||
// riskCount: [16, 23, 8, 1],
|
|
||||||
// },
|
|
||||||
// riskDealMonth2_1: {
|
|
||||||
// legendName: ['已整改', '未整改', '整改率'],
|
|
||||||
// xAxisName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
||||||
// countDeal: [5, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6],
|
|
||||||
// countNotDeal: [0, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2],
|
|
||||||
// linePercent: [100.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67]
|
|
||||||
// },
|
|
||||||
// riskTop2_2: {
|
|
||||||
// yAxisName: ["隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
|
|
||||||
// count: [31, 22, 19, 15, 8, 5],
|
|
||||||
// },
|
|
||||||
// checkTypeMineType3_1: {
|
|
||||||
// legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
||||||
// xAxisName: ["巡回检查", "例行检查", "专业检查", "综合检查", "日常巡检", "防洪安全检查", "坝体安全检查", "库区安全检查", "重大事故隐患专项排查"],
|
|
||||||
// arrayCount: [[1200, 1200, 300, 500, 0, 0, 0, 0, 100], [500, 1500, 300, 500, 0, 0, 0, 0, 0], [0, 0, 100, 10, 800, 800, 800, 500, 100], [30, 30, 60, 50, 20, 10, 0, 0, 0]],
|
|
||||||
// },
|
|
||||||
// checkTypeRiskMineType3_2: {
|
|
||||||
// legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
||||||
// xAxisName: ["巡回检查", "例行检查", "专业检查", "综合检查", "日常巡检", "防洪安全检查", "坝体安全检查", "库区安全检查", "重大事故隐患专项排查"],
|
|
||||||
// arrayCount: [[10, 10, 3, 5, 0, 0, 0, 0, 1], [15, 15, 3, 5, 0, 0, 0, 0, 0], [0, 0, 1, 10, 20, 10, 9, 5, 1], [1, 2, 3, 2, 0, 0, 0, 0, 0]]
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.getBaseInfoData();
|
this.getBaseInfoData();
|
||||||
}
|
}
|
||||||
@ -107,168 +110,145 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
payload: json2,
|
payload: json2,
|
||||||
onlyData: false,
|
onlyData: false,
|
||||||
onComplete: (ret) => {
|
onComplete: (ret) => {
|
||||||
this.CheckCount1_1(ret?.Data.checkMineType1_1);
|
this.this.state.CheckCount(ret?.Data.checkMineType);
|
||||||
// this.RiskCount1_2(ret?.Data.riskMineType1_2, this.state.ColorShow);
|
|
||||||
// this.RiskCount1_22(ret?.Data.riskMineType1_2, this.state.ColorShow);
|
|
||||||
// this.RiskTop2_2(ret?.Data.riskTop2_2, this.state.ColorShow);
|
|
||||||
// this.CheckTypeCount3(ret?.Data.checkTypeMineType3_1, "divCheckTypeCount3_1");
|
|
||||||
// this.CheckTypeCount3(ret?.Data.checkTypeRiskMineType3_2, "divCheckTypeRiskCount3_2");
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
getBaseInfoData = (mineType) => {
|
getBaseInfoData = (mineType) => {
|
||||||
// this.CheckCount1_1(this.state.ret.Data.checkMineType1_1);
|
this.CheckCount(this.state.ret.Data.checkMineType, this.state.seasonIndex - 1);
|
||||||
this.CheckCount(this.state.ret.Data.checkMineType1_1);
|
|
||||||
// this.RiskCount1_2(this.state.ret.Data.riskMineType1_2, this.state.ColorShow);
|
|
||||||
// this.RiskCount1_22(this.state.ret.Data.riskMineType1_2, this.state.ColorShow);
|
|
||||||
|
|
||||||
// //动态处理数据
|
|
||||||
// var countDeal = []
|
|
||||||
// var countNotDeal = []
|
|
||||||
// var linePercent = []
|
|
||||||
// var month = (new Date()).getMonth() + 1//取当前月
|
|
||||||
// for (var i = 0; i < month; i++) {
|
|
||||||
// countDeal.push(this.state.ret.Data.riskDealMonth2_1.countDeal[i])
|
|
||||||
// countNotDeal.push(this.state.ret.Data.riskDealMonth2_1.countNotDeal[i])
|
|
||||||
// linePercent.push(this.state.ret.Data.riskDealMonth2_1.linePercent[i])
|
|
||||||
// }
|
|
||||||
// this.state.ret.Data.riskDealMonth2_1.countDeal = countDeal
|
|
||||||
// this.state.ret.Data.riskDealMonth2_1.countNotDeal = countNotDeal
|
|
||||||
// this.state.ret.Data.riskDealMonth2_1.linePercent = linePercent
|
|
||||||
// this.RiskDeal2_1(this.state.ret.Data.riskDealMonth2_1);
|
|
||||||
// //动态处理数据
|
|
||||||
|
|
||||||
// this.RiskTop2_2(this.state.ret.Data.riskTop2_2, this.state.ColorShow);
|
|
||||||
// this.CheckTypeCount3(this.state.ret.Data.checkTypeMineType3_1, "divCheckTypeCount3_1");
|
|
||||||
// this.CheckTypeCount3(this.state.ret.Data.checkTypeRiskMineType3_2, "divCheckTypeRiskCount3_2");
|
|
||||||
};
|
};
|
||||||
|
|
||||||
CheckCount1_1 = (Data) => {
|
onSelectChange(seasonIndex) {
|
||||||
let divCheckCount = document.getElementById("divCheckCount");
|
this.CheckCount(this.state.ret.Data.checkMineType, seasonIndex - 1);
|
||||||
if (divCheckCount) {
|
};
|
||||||
let myChart = echarts.init(divCheckCount);
|
|
||||||
|
|
||||||
var seriesShow = []
|
// seasonIndex 从0开始
|
||||||
var month = 4
|
CheckCount = (Data, seasonIndex) => {
|
||||||
var legendNameCount = Data.legendName.length
|
let divShow = document.getElementById("divShow");
|
||||||
|
if (divShow) {
|
||||||
|
let myChart = echarts.init(divShow);
|
||||||
|
|
||||||
|
// 3 一个季度 3个月
|
||||||
var axisLabelMonth = []
|
var axisLabelMonth = []
|
||||||
for (var i = 0; i < month; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
axisLabelMonth.push(Data.axisLabelMonth[i])
|
axisLabelMonth.push((i + 1 + seasonIndex * 3) + '月');
|
||||||
}
|
}
|
||||||
debugger
|
|
||||||
|
|
||||||
|
var xAxisName = []
|
||||||
for (var i = 0; i < month; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
|
for (let j = 0; j < Data.mineTypeName.length; j++) {
|
||||||
for (var j = 0; j < legendNameCount; j++) {
|
xAxisName.push((i + 1 + seasonIndex * 3) + '月 ' + Data.mineTypeName[i])//3个月一图表
|
||||||
|
|
||||||
series.push({
|
|
||||||
name: Data.legendName[i],
|
|
||||||
type: "bar",
|
|
||||||
stack: "总量",
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "insideRight",
|
|
||||||
},
|
|
||||||
data: Data.arrayCount[i],//.slice(0, 10),
|
|
||||||
itemStyle: { color: this.state.ColorShow[i] },
|
|
||||||
barWidth: 30
|
|
||||||
})
|
|
||||||
|
|
||||||
// seriesShow.push({
|
|
||||||
// name: Data.legendName[j],
|
|
||||||
// type: "bar",
|
|
||||||
// data: Data.checkCount[i][j],
|
|
||||||
// itemStyle: { color: this.state.ColorShow[j] },
|
|
||||||
// barWidth: 25,//横轴的柱状图宽度
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
||||||
// formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 12, // 字体大小
|
|
||||||
// color: '#333', // 字体颜色
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const labelOption = {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
color: '#333', // 字体颜色
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var month = this.state.month
|
||||||
|
var seriesShow = []
|
||||||
|
for (let i = 0; i < Data.mineTypeName.length; i++) {
|
||||||
|
var seriesData = []//数据 在每组数据中获取 Data.checkCountMonth[i]
|
||||||
|
|
||||||
|
var dateIndexMin = 0
|
||||||
|
var dateIndexMax = 0
|
||||||
|
|
||||||
|
if ((seasonIndex * 3) < month) {
|
||||||
|
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
||||||
|
// 12 = 3*Data.mineTypeName.length
|
||||||
|
dateIndexMax = (dateIndexMin + 12) > (month * Data.mineTypeName.length) ? (month * Data.mineTypeName.length) : (dateIndexMin + 12)
|
||||||
|
} else {
|
||||||
|
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
||||||
|
dateIndexMax = month * Data.mineTypeName.length
|
||||||
|
|
||||||
|
if (dateIndexMin > dateIndexMax) {
|
||||||
|
dateIndexMin = dateIndexMax
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let j = dateIndexMin; j < dateIndexMax; j++) {
|
||||||
|
if (Data.checkCountMonth[i].length > j) {
|
||||||
|
seriesData.push(Data.checkCountMonth[i][j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
seriesShow.push({
|
||||||
|
name: Data.legendName[i],
|
||||||
|
barWidth: this.state.barWidth,
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: seriesData,
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
myChart.setOption(
|
myChart.setOption(
|
||||||
{
|
{
|
||||||
// title: {
|
|
||||||
// text: "生产单元",
|
|
||||||
// left: "center",
|
|
||||||
// },
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器，坐标轴触发有效
|
type: 'shadow'
|
||||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
formatter: function (value) {
|
|
||||||
var tooltipShow = ''
|
|
||||||
if (value.length > 0) {
|
|
||||||
tooltipShow += value[0].axisValueLabel + '<br/>'
|
|
||||||
for (var i = 0; i < value.length; i++) {
|
|
||||||
tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value
|
|
||||||
if (i > 0 && (i + 1) % 4 == 0)
|
|
||||||
tooltipShow += "<br/>"
|
|
||||||
else
|
|
||||||
tooltipShow += "  "
|
|
||||||
// if (value[i].componentSubType == "bar") {
|
|
||||||
// tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "<br/>"
|
|
||||||
// } else {
|
|
||||||
// tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "%"
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return tooltipShow
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
left: "center",
|
left: "center",
|
||||||
align: "left",
|
align: "left",
|
||||||
bottom: "2%",
|
bottom: "-2%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#000",
|
color: "#000",
|
||||||
},
|
},
|
||||||
itemWidth: 10,
|
itemWidth: 10,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
data: Data.legendName,
|
data: Data.legendName
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: "3%",
|
|
||||||
right: "3%",
|
|
||||||
bottom: "12%",
|
|
||||||
top: "10%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: 'category',
|
||||||
data: Data.mineTypeName,
|
axisTick: { show: false },
|
||||||
}
|
data: xAxisName,
|
||||||
, {
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0c3b71",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "rgb(170,170,170)",
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
formatter: function (param) {
|
||||||
|
return param.split("月")[1];//X轴显示 把月份去除 加是以为 鼠标事件要显示月份
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
|
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
|
||||||
offset: 70, // 向下偏移，使分组文字显示位置不与原x轴重叠
|
offset: 40, // 向下偏移，使分组文字显示位置不与原x轴重叠
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false // 隐藏分组x轴的轴线
|
show: false // 隐藏分组x轴的轴线
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: true,
|
||||||
length: 55, // 延长刻度线做分组线
|
length: 40, // 延长刻度线做分组线
|
||||||
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
|
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
|
||||||
lineStyle: {
|
// lineStyle: {
|
||||||
color: '#ff9800'
|
// color: '#ff9800'
|
||||||
}, // 非必须，仅为了演示，明显标示出分组刻度线
|
// }, // 非必须，仅为了演示，明显标示出分组刻度线
|
||||||
|
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
|
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
|
||||||
@ -279,375 +259,41 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
return ' ' + val // 这儿可以根据 返回 空字符串，来调整 第二个 x 轴值出现的位置。
|
return ' ' + val // 这儿可以根据 返回 空字符串，来调整 第二个 x 轴值出现的位置。
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: axisLabelMonth// ['20日', '21日', '22日', '23日']
|
data: axisLabelMonth// ['1月', '2月','3月']
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: 'value'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
series: seriesShow
|
series: seriesShow
|
||||||
// [
|
|
||||||
// {
|
|
||||||
// // name: "公司级",
|
|
||||||
// type: "bar",
|
|
||||||
// data: Data.checkCount[0],
|
|
||||||
// itemStyle: { color: this.state.ColorShow[0] },
|
|
||||||
// barWidth: 15,//横轴的柱状图宽度
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
||||||
// formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 12, // 字体大小
|
|
||||||
// color: '#333', // 字体颜色
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// // barWidth: 30
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// // name: "部门级",
|
|
||||||
// type: "bar",
|
|
||||||
// data: Data.checkCount[1],
|
|
||||||
// barWidth: 15,//横轴的柱状图宽度
|
|
||||||
// itemStyle: { color: this.state.ColorShow[1] },
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
||||||
// formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 12, // 字体大小
|
|
||||||
// color: '#333', // 字体颜色
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// // name: "车间级",
|
|
||||||
// type: "bar",
|
|
||||||
// data: Data.checkCount[2],
|
|
||||||
// barWidth: 15,//横轴的柱状图宽度
|
|
||||||
// itemStyle: { color: this.state.ColorShow[2] },
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
||||||
// formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 12, // 字体大小
|
|
||||||
// color: '#333', // 字体颜色
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// // name: "班组级",
|
|
||||||
// type: "bar",
|
|
||||||
// data: Data.checkCount[3],
|
|
||||||
// barWidth: 15,//横轴的柱状图宽度
|
|
||||||
// itemStyle: { color: this.state.ColorShow[3] },
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
||||||
// formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 12, // 字体大小
|
|
||||||
// color: '#333', // 字体颜色
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
CheckCount = (Data) => {
|
|
||||||
let divShow = document.getElementById("divCheckCount");
|
|
||||||
if (divShow) {
|
|
||||||
let myChart = echarts.init(divShow);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var series = []
|
|
||||||
for (let i = 0; i < Data.legendName.length; i++) {
|
|
||||||
series.push({
|
|
||||||
name: Data.legendName[i],
|
|
||||||
type: "bar",
|
|
||||||
stack: "总量",
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "insideRight",
|
|
||||||
},
|
|
||||||
data: Data.checkCountMonth[i],//.slice(0, 10),
|
|
||||||
itemStyle: { color: this.state.ColorShow[i] },
|
|
||||||
barWidth: 30
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
myChart.setOption(
|
|
||||||
{
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
// 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
left: "center",
|
|
||||||
align: "left",
|
|
||||||
bottom: "2%",
|
|
||||||
textStyle: {
|
|
||||||
color: "#000",
|
|
||||||
},
|
|
||||||
itemWidth: 10,
|
|
||||||
itemHeight: 10,
|
|
||||||
data: Data.legendName,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: "3%",
|
|
||||||
right: "5%",
|
|
||||||
bottom: "12%",
|
|
||||||
top: "10%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: Data.xAxisName,//.slice(0, 10),
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0,
|
|
||||||
rotate: 20,
|
|
||||||
formatter: function (value) {
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
},
|
|
||||||
series: series
|
|
||||||
},
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation
|
|
||||||
// const posList = [
|
|
||||||
// 'left',
|
|
||||||
// 'right',
|
|
||||||
// 'top',
|
|
||||||
// 'bottom',
|
|
||||||
// 'inside',
|
|
||||||
// 'insideTop',
|
|
||||||
// 'insideLeft',
|
|
||||||
// 'insideRight',
|
|
||||||
// 'insideBottom',
|
|
||||||
// 'insideTopLeft',
|
|
||||||
// 'insideTopRight',
|
|
||||||
// 'insideBottomLeft',
|
|
||||||
// 'insideBottomRight'
|
|
||||||
// ];
|
|
||||||
// app.configParameters = {
|
|
||||||
// rotate: {
|
|
||||||
// min: -90,
|
|
||||||
// max: 90
|
|
||||||
// },
|
|
||||||
// align: {
|
|
||||||
// options: {
|
|
||||||
// left: 'left',
|
|
||||||
// center: 'center',
|
|
||||||
// right: 'right'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// verticalAlign: {
|
|
||||||
// options: {
|
|
||||||
// top: 'top',
|
|
||||||
// middle: 'middle',
|
|
||||||
// bottom: 'bottom'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// position: {
|
|
||||||
// options: posList.reduce(function (map, pos) {
|
|
||||||
// map[pos] = pos;
|
|
||||||
// return map;
|
|
||||||
// }, {})
|
|
||||||
// },
|
|
||||||
// distance: {
|
|
||||||
// min: 0,
|
|
||||||
// max: 100
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// app.config = {
|
|
||||||
// rotate: 90,
|
|
||||||
// align: 'left',
|
|
||||||
// verticalAlign: 'middle',
|
|
||||||
// position: 'insideBottom',
|
|
||||||
// distance: 15,
|
|
||||||
// onChange: function () {
|
|
||||||
// const labelOption = {
|
|
||||||
// rotate: app.config.rotate,
|
|
||||||
// align: app.config.align,
|
|
||||||
// verticalAlign: app.config.verticalAlign,
|
|
||||||
// position: app.config.position,
|
|
||||||
// distance: app.config.distance
|
|
||||||
// };
|
|
||||||
// myChart.setOption({
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// label: labelOption
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: labelOption
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: labelOption
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: labelOption
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// const labelOption = {
|
|
||||||
// show: true,
|
|
||||||
// position: app.config.position,
|
|
||||||
// distance: app.config.distance,
|
|
||||||
// align: app.config.align,
|
|
||||||
// verticalAlign: app.config.verticalAlign,
|
|
||||||
// rotate: app.config.rotate,
|
|
||||||
// formatter: '{c} {name|{a}}',
|
|
||||||
// fontSize: 16,
|
|
||||||
// rich: {
|
|
||||||
// name: {}
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// option = {
|
|
||||||
// tooltip: {
|
|
||||||
// trigger: 'axis',
|
|
||||||
// axisPointer: {
|
|
||||||
// type: 'shadow'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// legend: {
|
|
||||||
// data: ['Forest', 'Steppe', 'Desert', 'Wetland']//, 'Forest2', 'Steppe2', 'Desert2', 'Wetland2'
|
|
||||||
// },
|
|
||||||
// toolbox: {
|
|
||||||
// show: true,
|
|
||||||
// orient: 'vertical',
|
|
||||||
// left: 'right',
|
|
||||||
// top: 'center',
|
|
||||||
// feature: {
|
|
||||||
// mark: { show: true },
|
|
||||||
// dataView: { show: true, readOnly: false },
|
|
||||||
// magicType: { show: true, type: ['line', 'bar', 'stack'] },
|
|
||||||
// restore: { show: true },
|
|
||||||
// saveAsImage: { show: true }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// xAxis: [
|
|
||||||
// {
|
|
||||||
// type: 'category',
|
|
||||||
// axisTick: { show: false },
|
|
||||||
// data: ['2012', '2013', '2014', '2015' , '2016' ,'2022', '2023', '2024', '2025', '2026']//'2012', '2013', '2014', '2015'
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// yAxis: [
|
|
||||||
// {
|
|
||||||
// type: 'value'
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// name: 'Forest',
|
|
||||||
// type: 'bar',
|
|
||||||
// barGap: 0,
|
|
||||||
// label: labelOption,
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// data: [320, 332, 301, 334, 390 ,320, 332, 301, 334, 390]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'Steppe',
|
|
||||||
// type: 'bar',
|
|
||||||
// label: labelOption,
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// data: [220, 182, 191, 234, 290 ,220, 182, 191, 234, 290]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'Desert',
|
|
||||||
// type: 'bar',
|
|
||||||
// label: labelOption,
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// data: [150, 232, 201, 154, 190 ,150, 232, 201, 154, 190]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'Wetland',
|
|
||||||
// type: 'bar',
|
|
||||||
// label: labelOption,
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// data: [98, 77, 101, 99, 40 ,98, 77, 101, 99, 40]
|
|
||||||
// },
|
|
||||||
// ]
|
|
||||||
// };
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||||||
style={{
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
top: "0",
|
|
||||||
bottom: "0",
|
|
||||||
left: "0",
|
|
||||||
right: "0",
|
|
||||||
margin: "auto",
|
|
||||||
// borderStyle: "solid",
|
|
||||||
// borderColor: "#ccc",
|
|
||||||
// borderWidth: "1px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
|
|
||||||
{/* 第一行 */}
|
{/* 第一行 */}
|
||||||
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
<Col span={24} className="risk-model-col" style={{ padding: 0 }}>
|
<Col span={1} > </Col>
|
||||||
<div className="home-always-title">
|
<Col span={23} style={{ padding: 0 }}>
|
||||||
<div className="home-always-left">
|
<div style={{ float: "right", zIndex: 2 }}>
|
||||||
<div className="home-always-badge"></div>
|
<Select onChange={value => this.onSelectChange(value)} defaultValue={this.state.seasonIndex} style={{ zIndex: 2, height: "30px", width: "100px", marginRight: "100px" }}>
|
||||||
<div className="home-always-name">安全检查次数统计</div>
|
<option value={1}>第一季度</option>
|
||||||
</div>
|
{this.state.isShowbtn2 ? <option value={2}>第二季度</option> : null}
|
||||||
|
{this.state.isShowbtn3 ? <option value={3}>第三季度</option> : null}
|
||||||
|
{this.state.isShowbtn4 ? <option value={4}>第四季度</option> : null}
|
||||||
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div id="divCheckCount" style={{ width: "100%", height: "330px" }}></div>
|
<div id="divShow" style={{ width: "100%", height: "380px", marginTop: "30px", zIndex: 0 }}></div>
|
||||||
</Col>
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
355
src/components/CustomPages/BI/BI056Dilg1_1_qi.js
Normal file
355
src/components/CustomPages/BI/BI056Dilg1_1_qi.js
Normal file
@ -0,0 +1,355 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
|
import { connect } from "dva";
|
||||||
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
|
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
||||||
|
import echarts from "echarts";
|
||||||
|
// import moment from "moment";
|
||||||
|
// import IconFont from "../../../utils/iconFont";
|
||||||
|
// import { T } from "antd/lib/upload/utils";
|
||||||
|
// import { float } from "html2canvas/dist/types/css/property-descriptors/float";
|
||||||
|
|
||||||
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
|
class BI056Dilg1_1 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
|
barWidth: this.props.barWidth,
|
||||||
|
isShow1: false,
|
||||||
|
isShow2: false,
|
||||||
|
isShowbtn1: true,
|
||||||
|
isShowbtn2: true,
|
||||||
|
isShowbtn3: true,
|
||||||
|
isShowbtn4: true,
|
||||||
|
dtStart: null,//开始时间
|
||||||
|
dtEnd: null,//结束时间
|
||||||
|
mineType: 0,//生产单元
|
||||||
|
detailForm: {
|
||||||
|
formCode: "",
|
||||||
|
title: "",
|
||||||
|
},
|
||||||
|
ret: {
|
||||||
|
IsSuccessful: true,
|
||||||
|
Data: {
|
||||||
|
checkMineType: {
|
||||||
|
legendName: ["公司级", "部门级", "车间级", "班组级"],
|
||||||
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
|
|
||||||
|
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
checkCountMonth: [
|
||||||
|
//有几月的数据就统计到几月 时间不到不统计 也不能放入0
|
||||||
|
// 公司级 、 部门级 车间级 班组级 各一个数组
|
||||||
|
// [公司级露天矿1月数据,公司级选矿厂1月数据,公司级尾矿库1月数据,公司级职能部门1月数据 ,公司级露天矿2月数据,公司级选矿厂2月数据,公司级尾矿库2月数据,公司级职能部门2月数据]
|
||||||
|
|
||||||
|
// 公司级
|
||||||
|
[1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12],
|
||||||
|
// 部门级
|
||||||
|
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
|
||||||
|
// 车间级
|
||||||
|
[30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
|
||||||
|
// 班组级
|
||||||
|
[60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]
|
||||||
|
|
||||||
|
// // 2个月的数据如下图
|
||||||
|
// [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4],
|
||||||
|
// // 部门级
|
||||||
|
// [5, 5, 5, 5, 5, 5, 5, 5, 7, 7, 7, 7, 8, 8, 8, 8],
|
||||||
|
// // 车间级
|
||||||
|
// [30, 30, 30, 30, 30, 30, 30, 30, 9, 9, 9, 9, 4, 4, 4, 4],
|
||||||
|
// // 班组级
|
||||||
|
// [60, 60, 60, 60, 60, 60, 60, 60, 10, 10, 10, 10, 11, 11, 10, 11]
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
getBaseInfoDataOnline = (mineType) => {
|
||||||
|
const json2 = initFilter(this.props.login.OrgId);
|
||||||
|
extendOrder(json2, "CREATE_TIME", 1);
|
||||||
|
json2.Parameter1 = mineType;
|
||||||
|
this.props.dispatch({
|
||||||
|
type: "app/getDataByPost",
|
||||||
|
url: "BI/BIController/getRiskPerformanceData",
|
||||||
|
payload: json2,
|
||||||
|
onlyData: false,
|
||||||
|
onComplete: (ret) => {
|
||||||
|
this.this.state.CheckCount(ret?.Data.checkMineType, "divCheckCount1");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getBaseInfoData = (mineType) => {
|
||||||
|
|
||||||
|
// var month = (new Date()).getMonth() + 1
|
||||||
|
// if ((i + 1 + seasonIndex * 3) <= month)
|
||||||
|
|
||||||
|
this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount1", 0);
|
||||||
|
|
||||||
|
// this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount2", 1);
|
||||||
|
// this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount3", 2);
|
||||||
|
// this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount4", 3);
|
||||||
|
};
|
||||||
|
|
||||||
|
// seasonIndex 从0开始
|
||||||
|
CheckCount = (Data, divId, seasonIndex) => {
|
||||||
|
let divShow = document.getElementById(divId);
|
||||||
|
if (divShow) {
|
||||||
|
let myChart = echarts.init(divShow);
|
||||||
|
|
||||||
|
// 3 一个季度 3个月
|
||||||
|
var axisLabelMonth = []
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
axisLabelMonth.push((i + 1 + seasonIndex * 3) + '月');
|
||||||
|
}
|
||||||
|
|
||||||
|
var xAxisName = []
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
for (let j = 0; j < Data.mineTypeName.length; j++) {
|
||||||
|
xAxisName.push((i + 1 + seasonIndex * 3) + '月 ' + Data.mineTypeName[i])//3个月一图表
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const labelOption = {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
color: '#333', // 字体颜色
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var month = (new Date()).getMonth() + 1//取当前月
|
||||||
|
|
||||||
|
var seriesShow = []
|
||||||
|
for (let i = 0; i < Data.mineTypeName.length; i++) {
|
||||||
|
var seriesData = []//数据 在每组数据中获取 Data.checkCountMonth[i]
|
||||||
|
|
||||||
|
var dateIndexMin = 0
|
||||||
|
var dateIndexMax = 0
|
||||||
|
|
||||||
|
if ((seasonIndex * 3) < month) {
|
||||||
|
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
||||||
|
// 12 = 3*Data.mineTypeName.length
|
||||||
|
dateIndexMax = (dateIndexMin + 12) > (month * Data.mineTypeName.length) ? (month * Data.mineTypeName.length) : (dateIndexMin + 12)
|
||||||
|
} else {
|
||||||
|
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
||||||
|
dateIndexMax = month * Data.mineTypeName.length
|
||||||
|
|
||||||
|
if (dateIndexMin > dateIndexMax) {
|
||||||
|
dateIndexMin = dateIndexMax
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let j = dateIndexMin; j < dateIndexMax; j++) {
|
||||||
|
if (Data.checkCountMonth[i].length > j) {
|
||||||
|
seriesData.push(Data.checkCountMonth[i][j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
seriesShow.push({
|
||||||
|
name: Data.legendName[i],
|
||||||
|
barWidth: this.state.barWidth,
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: seriesData,
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName
|
||||||
|
},
|
||||||
|
// toolbox: {
|
||||||
|
// show: true,
|
||||||
|
// orient: 'vertical',
|
||||||
|
// left: 'right',
|
||||||
|
// top: 'center',
|
||||||
|
// feature: {
|
||||||
|
// mark: { show: true },
|
||||||
|
// dataView: { show: true, readOnly: false },
|
||||||
|
// magicType: { show: true, type: ['line', 'bar', 'stack'] },
|
||||||
|
// restore: { show: true },
|
||||||
|
// saveAsImage: { show: true }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: xAxisName,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0c3b71",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "rgb(170,170,170)",
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
formatter: function (param) {
|
||||||
|
return param.split("月")[1];//X轴显示 把月份去除 加是以为 鼠标事件要显示月份
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
|
||||||
|
offset: 50, // 向下偏移，使分组文字显示位置不与原x轴重叠
|
||||||
|
axisLine: {
|
||||||
|
show: false // 隐藏分组x轴的轴线
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
length: 50, // 延长刻度线做分组线
|
||||||
|
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
|
||||||
|
// lineStyle: {
|
||||||
|
// color: '#ff9800'
|
||||||
|
// }, // 非必须，仅为了演示，明显标示出分组刻度线
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
|
||||||
|
interval: 0, // 强制显示全部刻度名
|
||||||
|
formatter: function (val, index) {
|
||||||
|
// console.log('测试999 val--- ', val);
|
||||||
|
// console.log('测试999 index--- ', index);
|
||||||
|
return ' ' + val // 这儿可以根据 返回 空字符串，来调整 第二个 x 轴值出现的位置。
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: axisLabelMonth// ['1月', '2月','3月']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesShow
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { isShowbtn1, isShowbtn2, isShowbtn3, isShowbtn4 } = this.state;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
top: "0",
|
||||||
|
bottom: "0",
|
||||||
|
left: "0",
|
||||||
|
right: "0",
|
||||||
|
margin: "auto",
|
||||||
|
// borderStyle: "solid",
|
||||||
|
// borderColor: "#ccc",
|
||||||
|
// borderWidth: "1px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
|
||||||
|
{/* 第一行 */}
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div className="home-always-title">
|
||||||
|
<div className="home-always-left">
|
||||||
|
<div className="home-always-badge"></div>
|
||||||
|
<div className="home-always-name">安全检查次数统计(第一季度)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ float: "right" }}>
|
||||||
|
{
|
||||||
|
isShowbtn1 ? <Button style={{ zIndex: 1 }}>第一季度</Button> : null
|
||||||
|
}
|
||||||
|
{
|
||||||
|
isShowbtn2 ? <Button style={{ zIndex: 1, marginLeft: '5px' }}>第二季度</Button> : null
|
||||||
|
}
|
||||||
|
{
|
||||||
|
isShowbtn3 ? <Button style={{ zIndex: 1, marginLeft: '5px' }}>第三季度</Button> : null
|
||||||
|
}
|
||||||
|
{
|
||||||
|
isShowbtn4 ? <Button style={{ zIndex: 1, marginLeft: '5px' }}>第四季度</Button> : null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div id="divCheckCount1" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
{/* <Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div className="home-always-title">
|
||||||
|
<div className="home-always-left">
|
||||||
|
<div className="home-always-badge"></div>
|
||||||
|
<div className="home-always-name">安全检查次数统计(第二季度)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="divCheckCount2" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col> */}
|
||||||
|
</Row>
|
||||||
|
{/* <Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div className="home-always-title">
|
||||||
|
<div className="home-always-left">
|
||||||
|
<div className="home-always-badge"></div>
|
||||||
|
<div className="home-always-name">安全检查次数统计(第三季度)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="divCheckCount3" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div className="home-always-title">
|
||||||
|
<div className="home-always-left">
|
||||||
|
<div className="home-always-badge"></div>
|
||||||
|
<div className="home-always-name">安全检查次数统计(第四季度)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="divCheckCount4" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row> */}
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_1);
|
||||||
159
src/components/CustomPages/BI/BI056Dilg1_2.js
Normal file
159
src/components/CustomPages/BI/BI056Dilg1_2.js
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
|
import { connect } from "dva";
|
||||||
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
|
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
||||||
|
import echarts from "echarts";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
|
class BI056Dilg1_2 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
|
barWidth: this.props.barWidth,
|
||||||
|
isShow1: false,
|
||||||
|
isShow2: false,
|
||||||
|
dtStart: null,//开始时间
|
||||||
|
dtEnd: null,//结束时间
|
||||||
|
mineType: 0,//生产单元
|
||||||
|
detailForm: {
|
||||||
|
formCode: "",
|
||||||
|
title: "",
|
||||||
|
},
|
||||||
|
ret: {
|
||||||
|
IsSuccessful: true,
|
||||||
|
Data: {
|
||||||
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
|
legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
//各生产单元 1~12 月数量 时间未到为空 没有数量就为0
|
||||||
|
checkrisk: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
getBaseInfoDataOnline = (mineType) => {
|
||||||
|
const json2 = initFilter(this.props.login.OrgId);
|
||||||
|
extendOrder(json2, "CREATE_TIME", 1);
|
||||||
|
json2.Parameter1 = mineType;
|
||||||
|
this.props.dispatch({
|
||||||
|
type: "app/getDataByPost",
|
||||||
|
url: "BI/BIController/getRiskPerformanceData",
|
||||||
|
payload: json2,
|
||||||
|
onlyData: false,
|
||||||
|
onComplete: (ret) => {
|
||||||
|
this.CheckCount(this.state.ret.Data)
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getBaseInfoData = (mineType) => {
|
||||||
|
this.CheckCount(this.state.ret.Data)
|
||||||
|
};
|
||||||
|
|
||||||
|
CheckCount = (Data) => {
|
||||||
|
let divRiskCount = document.getElementById("divRiskCount");
|
||||||
|
if (divRiskCount) {
|
||||||
|
let myChart = echarts.init(divRiskCount);
|
||||||
|
var listSeries = []
|
||||||
|
for (var i = 0; i < Data.legendName.length; i++) {
|
||||||
|
listSeries.push({
|
||||||
|
name: Data.legendName[i],
|
||||||
|
data: Data.checkrisk[i],
|
||||||
|
type: "bar",
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
barWidth: this.state.barWidth,//横轴的柱状图宽度
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
||||||
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
color: '#333', // 字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "3%",
|
||||||
|
bottom: "12%",
|
||||||
|
top: "10%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: Data.axisLabelMonth,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: listSeries
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||||||
|
|
||||||
|
{/* 第一行 */}
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={22} style={{ padding: 0 }}>
|
||||||
|
{/* <div className="home-always-title">
|
||||||
|
<div className="home-always-left">
|
||||||
|
<div className="home-always-badge"></div>
|
||||||
|
<div className="home-always-name">隐患数量统计</div>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<div id="divRiskCount" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_2);
|
||||||
299
src/components/CustomPages/BI/BI056Dilg2_1.js
Normal file
299
src/components/CustomPages/BI/BI056Dilg2_1.js
Normal file
@ -0,0 +1,299 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
|
import { connect } from "dva";
|
||||||
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
|
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
||||||
|
import echarts from "echarts";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
|
class BI056Dilg2_1 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
|
barWidth: this.props.barWidth,
|
||||||
|
isShow1: false,
|
||||||
|
isShow2: false,
|
||||||
|
dtStart: null,//开始时间
|
||||||
|
dtEnd: null,//结束时间
|
||||||
|
mineType: 0,//生产单元
|
||||||
|
detailForm: {
|
||||||
|
formCode: "",
|
||||||
|
title: "",
|
||||||
|
},
|
||||||
|
ret: {
|
||||||
|
IsSuccessful: true,
|
||||||
|
Data: {
|
||||||
|
legendName: ['已整改', '未整改', '整改率'],
|
||||||
|
titleMineType: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
xAxisName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
|
countDeal: [[5, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [7, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [13, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [15, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6]],
|
||||||
|
countNotDeal: [[1, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [2, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [3, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [4, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2]],
|
||||||
|
linePercent: [[100.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [70.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [80.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 90], [90.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 80]],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
getBaseInfoDataOnline = (mineType) => {
|
||||||
|
const json2 = initFilter(this.props.login.OrgId);
|
||||||
|
extendOrder(json2, "CREATE_TIME", 1);
|
||||||
|
json2.Parameter1 = mineType;
|
||||||
|
this.props.dispatch({
|
||||||
|
type: "app/getDataByPost",
|
||||||
|
url: "BI/BIController/getRiskPerformanceData",
|
||||||
|
payload: json2,
|
||||||
|
onlyData: false,
|
||||||
|
onComplete: (ret) => {
|
||||||
|
this.CheckCount(this.state.ret.Data)
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getBaseInfoData = (mineType) => {
|
||||||
|
this.RiskDeal(this.state.ret.Data, 1)
|
||||||
|
this.RiskDeal(this.state.ret.Data, 2)
|
||||||
|
this.RiskDeal(this.state.ret.Data, 3)
|
||||||
|
this.RiskDeal(this.state.ret.Data, 4)
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
RiskDeal = (Data, index) => {
|
||||||
|
let divID = document.getElementById("div" + index)
|
||||||
|
if (divID) {
|
||||||
|
let myChart = echarts.init(divID);
|
||||||
|
var listseries = []
|
||||||
|
|
||||||
|
var title = Data.titleMineType[index - 1] + "隐患整改情况"
|
||||||
|
for (let i = 0; i < Data.legendName.length; i++) {
|
||||||
|
if (i < 2) {
|
||||||
|
|
||||||
|
listseries.push({
|
||||||
|
name: Data.legendName[i],
|
||||||
|
type: "bar",
|
||||||
|
stack: "总量",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "insideRight",
|
||||||
|
},
|
||||||
|
data: i == 0 ? Data.countDeal[index - 1] : (i == 1 ? Data.countNotDeal[index - 1] : Data.linePercent[index - 1]),
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
barWidth: 30,// this.state.barWidth
|
||||||
|
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
listseries.push(
|
||||||
|
{
|
||||||
|
name: Data.legendName[i],
|
||||||
|
type: "line",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
formatter: "{c}%"
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ffb122"
|
||||||
|
},
|
||||||
|
data: Data.linePercent[index - 1],
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
yAxisIndex: 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function (value) {
|
||||||
|
var tooltipShow = ''
|
||||||
|
if (value.length > 0) {
|
||||||
|
tooltipShow += value[0].axisValueLabel + '<br/>'
|
||||||
|
for (var i = 0; i < value.length; i++) {
|
||||||
|
if (value[i].componentSubType == "bar") {
|
||||||
|
tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "<br/>"
|
||||||
|
} else {
|
||||||
|
tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "%"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tooltipShow
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "3%",
|
||||||
|
bottom: "12%",
|
||||||
|
top: "10%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: Data.xAxisName,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 20,
|
||||||
|
formatter: function (value) {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: '整改情况',
|
||||||
|
type: 'value',
|
||||||
|
}, {
|
||||||
|
name: "完成率(%)",
|
||||||
|
type: "value",
|
||||||
|
min: 0,
|
||||||
|
max: 70,
|
||||||
|
position: "middle",// "right",
|
||||||
|
formatter: "{value}%",
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
// textStyle: { fontSize: 20 },
|
||||||
|
formatter: '{value} %', // 给坐标轴标签加单位
|
||||||
|
},
|
||||||
|
splitLine: { //网格线
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: listseries
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
CheckCount = (Data) => {
|
||||||
|
let divRiskCount = document.getElementById("divRiskCount");
|
||||||
|
if (divRiskCount) {
|
||||||
|
let myChart = echarts.init(divRiskCount);
|
||||||
|
var listSeries = []
|
||||||
|
for (var i = 0; i < Data.legendName.length; i++) {
|
||||||
|
listSeries.push({
|
||||||
|
name: Data.legendName[i],
|
||||||
|
data: Data.checkrisk[i],
|
||||||
|
type: "bar",
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
barWidth: this.state.barWidth,//横轴的柱状图宽度
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
||||||
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
color: '#333', // 字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "3%",
|
||||||
|
bottom: "12%",
|
||||||
|
top: "10%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: Data.axisLabelMonth,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: listSeries
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||||||
|
|
||||||
|
{/* 第一行 */}
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div1" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div2" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div3" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div4" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg2_1);
|
||||||
160
src/components/CustomPages/BI/BI056Dilg2_2.js
Normal file
160
src/components/CustomPages/BI/BI056Dilg2_2.js
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
|
import { connect } from "dva";
|
||||||
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
|
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
||||||
|
import echarts from "echarts";
|
||||||
|
import moment from "moment";
|
||||||
|
import IconFont from "../../../utils/iconFont";
|
||||||
|
import { T } from "antd/lib/upload/utils";
|
||||||
|
|
||||||
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
|
class BI056Dilg2_2 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
|
barWidth: this.props.barWidth,
|
||||||
|
isShow1: false,
|
||||||
|
isShow2: false,
|
||||||
|
dtStart: null,//开始时间
|
||||||
|
dtEnd: null,//结束时间
|
||||||
|
mineType: 0,//生产单元
|
||||||
|
detailForm: {
|
||||||
|
formCode: "",
|
||||||
|
title: "",
|
||||||
|
},
|
||||||
|
Data: {
|
||||||
|
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
riskTop: {
|
||||||
|
yAxisName: [
|
||||||
|
["露天矿 隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
|
||||||
|
["选矿厂 隐患名称", "电车车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
|
||||||
|
["尾矿库 隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
|
||||||
|
["职能部门 隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"]
|
||||||
|
],
|
||||||
|
count: [
|
||||||
|
[31, 22, 18, 15, 8, 5],
|
||||||
|
[29, 20, 17, 16, 8, 5],
|
||||||
|
[26, 21, 15, 13, 3, 2],
|
||||||
|
[25, 21, 13, 10, 3, 1]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
getBaseInfoData = (mineType) => {
|
||||||
|
this.RiskTop(this.state.Data.riskTop, 0);
|
||||||
|
this.RiskTop(this.state.Data.riskTop, 1);
|
||||||
|
this.RiskTop(this.state.Data.riskTop, 2);
|
||||||
|
this.RiskTop(this.state.Data.riskTop, 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
RiskTop = (Data, idIndex) => {
|
||||||
|
let divShow = document.getElementById('divShow' + idIndex); //0-3
|
||||||
|
if (divShow) {
|
||||||
|
var count = Data.count
|
||||||
|
let myChart = echarts.init(divShow);
|
||||||
|
var title = this.state.Data.mineTypeName[idIndex]
|
||||||
|
var yAxisName = Data.yAxisName[idIndex]
|
||||||
|
var seriesData = Data.count[idIndex]
|
||||||
|
var ColorShow = this.state.ColorShow
|
||||||
|
debugger
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "3%",
|
||||||
|
bottom: "12%",
|
||||||
|
top: "10%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: yAxisName,//Data.yAxisName,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
data: seriesData,// count,
|
||||||
|
itemStyle: {
|
||||||
|
color: function (params) {
|
||||||
|
return ColorShow[params.dataIndex]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barWidth: 25,//横轴的柱状图宽度
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
// position: 'insideRight', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
||||||
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
// color: '#333', // 字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||||||
|
{/* 第一行 */}
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} className="risk-model-col" style={{ padding: 0 }}>
|
||||||
|
<div id="divShow0" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} className="risk-model-col" style={{ padding: 0 }}>
|
||||||
|
<div id="divShow1" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} className="risk-model-col" style={{ padding: 0 }}>
|
||||||
|
<div id="divShow2" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} className="risk-model-col" style={{ padding: 0 }}>
|
||||||
|
<div id="divShow3" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg2_2);
|
||||||
209
src/components/CustomPages/BI/BI056Dilg3_1.js
Normal file
209
src/components/CustomPages/BI/BI056Dilg3_1.js
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
|
import { connect } from "dva";
|
||||||
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
|
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
||||||
|
import echarts from "echarts";
|
||||||
|
import moment from "moment";
|
||||||
|
import IconFont from "../../../utils/iconFont";
|
||||||
|
import { T } from "antd/lib/upload/utils";
|
||||||
|
|
||||||
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
|
class BI056Dilg3_1 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
|
barWidth: this.props.barWidth,
|
||||||
|
isShow1: false,
|
||||||
|
isShow2: false,
|
||||||
|
dtStart: null,//开始时间
|
||||||
|
dtEnd: null,//结束时间
|
||||||
|
mineType: 0,//生产单元
|
||||||
|
detailForm: {
|
||||||
|
formCode: "",
|
||||||
|
title: "",
|
||||||
|
},
|
||||||
|
Data: {
|
||||||
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
|
checkTypeInfo: {
|
||||||
|
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
listLegendName: [
|
||||||
|
['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查'],
|
||||||
|
['巡回检查', '例行检查', '专业检查', '综合检查'],
|
||||||
|
['日常巡检', '防洪安全检查', '坝体安全检查', '库区安全检查', '重大事故隐患专项排查'],
|
||||||
|
['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查']
|
||||||
|
],
|
||||||
|
//每个生产单元 每种检查类型 1-12 月数量
|
||||||
|
checkTypeCount1: [[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], [90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90], [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]],
|
||||||
|
checkTypeCount2: [[120, 120, 120, 120, 120, 120, 120, 120, 120, 120, 120, 120], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3]],
|
||||||
|
checkTypeCount3: [[30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]],
|
||||||
|
checkTypeCount4: [[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
getBaseInfoDataOnline = (mineType) => {
|
||||||
|
const json2 = initFilter(this.props.login.OrgId);
|
||||||
|
extendOrder(json2, "CREATE_TIME", 1);
|
||||||
|
json2.Parameter1 = mineType;
|
||||||
|
this.props.dispatch({
|
||||||
|
type: "app/getDataByPost",
|
||||||
|
url: "BI/BIController/getRiskPerformanceData",
|
||||||
|
payload: json2,
|
||||||
|
onlyData: false,
|
||||||
|
onComplete: (ret) => {
|
||||||
|
this.this.state.CheckCount(ret?.Data.checkMineType, "divCheckCount1");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getBaseInfoData = (mineType) => {
|
||||||
|
this.CheckCount(this.state.Data, "div1", 1);
|
||||||
|
this.CheckCount(this.state.Data, "div2", 2);
|
||||||
|
this.CheckCount(this.state.Data, "div3", 3);
|
||||||
|
this.CheckCount(this.state.Data, "div4", 4);
|
||||||
|
};
|
||||||
|
|
||||||
|
// index 从1开始
|
||||||
|
CheckCount = (Data, divId, index) => {
|
||||||
|
let divShow = document.getElementById(divId);
|
||||||
|
if (divShow) {
|
||||||
|
let myChart = echarts.init(divShow);
|
||||||
|
|
||||||
|
const labelOption = {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
color: '#333', // 字体颜色
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var title = Data.checkTypeInfo.mineTypeName[index - 1]
|
||||||
|
var month = (new Date()).getMonth() + 1//取当前月
|
||||||
|
// checkTypeInfo.mineTypeName[] mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
var dataList = []
|
||||||
|
switch (index) {
|
||||||
|
case 1: dataList = Data.checkTypeInfo.checkTypeCount1
|
||||||
|
break;
|
||||||
|
case 2: dataList = Data.checkTypeInfo.checkTypeCount2
|
||||||
|
break;
|
||||||
|
case 3: dataList = Data.checkTypeInfo.checkTypeCount3
|
||||||
|
break;
|
||||||
|
case 4: dataList = Data.checkTypeInfo.checkTypeCount4
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
var LegendName = Data.checkTypeInfo.listLegendName[index - 1]
|
||||||
|
var seriesShow = []
|
||||||
|
for (let i = 0; i < LegendName.length; i++) {
|
||||||
|
debugger
|
||||||
|
seriesShow.push({
|
||||||
|
name: LegendName[i],
|
||||||
|
barWidth: this.state.barWidth,
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: dataList[i].slice(0, month),
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
// 检查类型次数统计
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: Data.axisLabelMonth,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0c3b71",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "rgb(170,170,170)",
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesShow
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div1" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div2" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div3" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div4" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg3_1);
|
||||||
209
src/components/CustomPages/BI/BI056Dilg3_2.js
Normal file
209
src/components/CustomPages/BI/BI056Dilg3_2.js
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Component } from "react";
|
||||||
|
import { connect } from "dva";
|
||||||
|
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||||||
|
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
|
||||||
|
import echarts from "echarts";
|
||||||
|
import moment from "moment";
|
||||||
|
import IconFont from "../../../utils/iconFont";
|
||||||
|
import { T } from "antd/lib/upload/utils";
|
||||||
|
|
||||||
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
|
class BI056Dilg3_2 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||||||
|
barWidth: this.props.barWidth,
|
||||||
|
isShow1: false,
|
||||||
|
isShow2: false,
|
||||||
|
dtStart: null,//开始时间
|
||||||
|
dtEnd: null,//结束时间
|
||||||
|
mineType: 0,//生产单元
|
||||||
|
detailForm: {
|
||||||
|
formCode: "",
|
||||||
|
title: "",
|
||||||
|
},
|
||||||
|
Data: {
|
||||||
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
|
checkTypeInfo: {
|
||||||
|
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
listLegendName: [
|
||||||
|
['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查'],
|
||||||
|
['巡回检查', '例行检查', '专业检查', '综合检查'],
|
||||||
|
['日常巡检', '防洪安全检查', '坝体安全检查', '库区安全检查', '重大事故隐患专项排查'],
|
||||||
|
['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查']
|
||||||
|
],
|
||||||
|
//每个生产单元 每种检查类型 1-12 月数量
|
||||||
|
checkTypeCount1: [[2, 3, 3, 5, 3, 2, 6, 2, 1, 0, 1, 2], [1, 2, 3, 3, 2, 4, 5, 3, 1, 0, 9, 8], [1, 2, 3, 4, 5, 3, 2, 4, 1, 1, 4, 0], [2, 1, 1, 0, 0, 3, 3, 2, 2, 0, 0, 1], [1, 1, 1, 3, 3, 1, 3, 1, 2, 2, 3, 4]],
|
||||||
|
checkTypeCount2: [[2, 3, 6, 6, 3, 2, 6, 3, 8, 0, 1, 2], [1, 2, 7, 3, 5, 4, 5, 4, 1, 4, 9, 2], [1, 2, 8, 4, 5, 3, 2, 4, 3, 4, 0, 6], [2, 3, 1, 0, 3, 3, 3, 6, 3, 4, 6, 1]],
|
||||||
|
checkTypeCount3: [[0, 0, 3, 3, 5, 5, 7, 7, 3, 4, 7, 1], [5, 7, 0, 0, 1, 1, 2, 1, 4, 0, 3, 6], [2, 2, 5, 7, 4, 0, 0, 4, 4, 0, 0, 4], [1, 5, 4, 2, 4, 0, 2, 0, 4, 0, 0, 4], [1, 1, 1, 0, 1, 0, 0, 5, 0, 0, 1, 0]],
|
||||||
|
checkTypeCount4: [[4, 2, 2, 5, 4, 0, 2, 5, 0, 2, 4, 4], [4, 0, 4, 0, 0, 4, 0, 0, 4, 0, 4, 0], [1, 0, 3, 0, 1, 3, 0, 7, 2, 0, 3, 0], [1, 0, 3, 1, 1, 3, 3, 3, 2, 0, 3, 0], [1, 0, 3, 0, 1, 3, 0, 2, 2, 1, 0, 2]],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componenthidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getBaseInfoData();
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
getBaseInfoDataOnline = (mineType) => {
|
||||||
|
const json2 = initFilter(this.props.login.OrgId);
|
||||||
|
extendOrder(json2, "CREATE_TIME", 1);
|
||||||
|
json2.Parameter1 = mineType;
|
||||||
|
this.props.dispatch({
|
||||||
|
type: "app/getDataByPost",
|
||||||
|
url: "BI/BIController/getRiskPerformanceData",
|
||||||
|
payload: json2,
|
||||||
|
onlyData: false,
|
||||||
|
onComplete: (ret) => {
|
||||||
|
this.this.state.CheckCount(ret?.Data.checkMineType, "divCheckCount1");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getBaseInfoData = (mineType) => {
|
||||||
|
this.CheckCount(this.state.Data, "div1", 1);
|
||||||
|
this.CheckCount(this.state.Data, "div2", 2);
|
||||||
|
this.CheckCount(this.state.Data, "div3", 3);
|
||||||
|
this.CheckCount(this.state.Data, "div4", 4);
|
||||||
|
};
|
||||||
|
|
||||||
|
// index 从1开始
|
||||||
|
CheckCount = (Data, divId, index) => {
|
||||||
|
let divShow = document.getElementById(divId);
|
||||||
|
if (divShow) {
|
||||||
|
let myChart = echarts.init(divShow);
|
||||||
|
|
||||||
|
const labelOption = {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
color: '#333', // 字体颜色
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var title = Data.checkTypeInfo.mineTypeName[index - 1]
|
||||||
|
var month = (new Date()).getMonth() + 1//取当前月
|
||||||
|
// checkTypeInfo.mineTypeName[] mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||||||
|
var dataList = []
|
||||||
|
switch (index) {
|
||||||
|
case 1: dataList = Data.checkTypeInfo.checkTypeCount1
|
||||||
|
break;
|
||||||
|
case 2: dataList = Data.checkTypeInfo.checkTypeCount2
|
||||||
|
break;
|
||||||
|
case 3: dataList = Data.checkTypeInfo.checkTypeCount3
|
||||||
|
break;
|
||||||
|
case 4: dataList = Data.checkTypeInfo.checkTypeCount4
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
var LegendName = Data.checkTypeInfo.listLegendName[index - 1]
|
||||||
|
var seriesShow = []
|
||||||
|
for (let i = 0; i < LegendName.length; i++) {
|
||||||
|
debugger
|
||||||
|
seriesShow.push({
|
||||||
|
name: LegendName[i],
|
||||||
|
barWidth: this.state.barWidth,
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: dataList[i],//.slice(0, month),
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
// 检查类型次数统计
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: Data.axisLabelMonth,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0c3b71",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "rgb(170,170,170)",
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesShow
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div1" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div2" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div3" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
<Col span={1} > </Col>
|
||||||
|
<Col span={11} style={{ padding: 0 }}>
|
||||||
|
<div id="div4" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg3_2);
|
||||||
@ -19,6 +19,7 @@ class BI056Performance extends React.Component {
|
|||||||
formCode: "",
|
formCode: "",
|
||||||
title: "",
|
title: "",
|
||||||
isShow: false,
|
isShow: false,
|
||||||
|
dilgWith: "90%"
|
||||||
},
|
},
|
||||||
ret: {
|
ret: {
|
||||||
IsSuccessful: true,
|
IsSuccessful: true,
|
||||||
@ -179,6 +180,7 @@ class BI056Performance extends React.Component {
|
|||||||
type: "bar",
|
type: "bar",
|
||||||
data: Data.checkCount[1],
|
data: Data.checkCount[1],
|
||||||
itemStyle: { color: this.state.ColorShow[1] },
|
itemStyle: { color: this.state.ColorShow[1] },
|
||||||
|
barWidth: 30,//横轴的柱状图宽度
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -196,6 +198,7 @@ class BI056Performance extends React.Component {
|
|||||||
type: "bar",
|
type: "bar",
|
||||||
data: Data.checkCount[2],
|
data: Data.checkCount[2],
|
||||||
itemStyle: { color: this.state.ColorShow[2] },
|
itemStyle: { color: this.state.ColorShow[2] },
|
||||||
|
barWidth: 30,//横轴的柱状图宽度
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -212,6 +215,7 @@ class BI056Performance extends React.Component {
|
|||||||
name: "班组级",
|
name: "班组级",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: Data.checkCount[3],
|
data: Data.checkCount[3],
|
||||||
|
barWidth: 30,//横轴的柱状图宽度
|
||||||
itemStyle: { color: this.state.ColorShow[3] },
|
itemStyle: { color: this.state.ColorShow[3] },
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
@ -708,7 +712,36 @@ class BI056Performance extends React.Component {
|
|||||||
|
|
||||||
//显示详情弹窗 参考 BS064ShowPrint
|
//显示详情弹窗 参考 BS064ShowPrint
|
||||||
showDetailModal = (formCode) => {
|
showDetailModal = (formCode) => {
|
||||||
var titleTemp = "年度安全检查明细"
|
var barWidth = 30
|
||||||
|
|
||||||
|
// var windowWith = window.innerWidth;
|
||||||
|
// if (windowWith <= 1250) {
|
||||||
|
// barWidth = 5
|
||||||
|
// } else if (windowWith >= 2300) {
|
||||||
|
// barWidth = 15
|
||||||
|
// }else{
|
||||||
|
// barWidth = 10
|
||||||
|
// }
|
||||||
|
|
||||||
|
var dilgWith = "90%"
|
||||||
|
var titleTemp = ""
|
||||||
|
switch (formCode) {
|
||||||
|
case 'BI056_DILG1_1': titleTemp = "安全检查次数季度统计"
|
||||||
|
dilgWith = "80%"
|
||||||
|
break;
|
||||||
|
case 'BI056_DILG1_2': titleTemp = "年度隐患数量统计"
|
||||||
|
dilgWith = "75%"
|
||||||
|
break;
|
||||||
|
case 'BI056_DILG2_1': titleTemp = "隐患整改情况"
|
||||||
|
break;
|
||||||
|
case 'BI056_DILG2_2': titleTemp = "Top隐患"
|
||||||
|
break;
|
||||||
|
case 'BI056_DILG3_1': titleTemp = "检查类型次数统计"
|
||||||
|
break;
|
||||||
|
case 'BI056_DILG3_2': titleTemp = "检查类型隐患统计"
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// debugger
|
||||||
const newtmpData = {
|
const newtmpData = {
|
||||||
data: {
|
data: {
|
||||||
id: guid(),
|
id: guid(),
|
||||||
@ -716,13 +749,16 @@ class BI056Performance extends React.Component {
|
|||||||
dtStart: this.state.dtStart,
|
dtStart: this.state.dtStart,
|
||||||
dtEnd: this.state.dtEnd,
|
dtEnd: this.state.dtEnd,
|
||||||
homeReload: true,
|
homeReload: true,
|
||||||
|
barWidth: barWidth,
|
||||||
|
// ColorShow: this.state.ColorShow
|
||||||
},
|
},
|
||||||
formCode: formCode,
|
formCode: formCode,
|
||||||
};
|
};
|
||||||
this.setState({ tmpData: newtmpData }, () => {
|
this.setState({ tmpData: newtmpData }, () => {
|
||||||
var detailForm = {
|
var detailForm = {
|
||||||
title: titleTemp,
|
title: titleTemp,
|
||||||
isShow: true
|
isShow: true,
|
||||||
|
dilgWith: dilgWith
|
||||||
};
|
};
|
||||||
this.setState({
|
this.setState({
|
||||||
detailForm: detailForm,
|
detailForm: detailForm,
|
||||||
@ -779,38 +815,18 @@ class BI056Performance extends React.Component {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ display: "inline-block" }}>
|
<div style={{ display: "inline-block" }}>
|
||||||
{/* <Modal
|
|
||||||
visible={this.state.isShow1}
|
|
||||||
title={this.state.detailForm.title}
|
|
||||||
maskClosable={false}
|
|
||||||
closeModal={this.detailFormClose}
|
|
||||||
onCancel={this.detailFormClose}
|
|
||||||
footer={null}
|
|
||||||
width="1300px"
|
|
||||||
getContainer={false}
|
|
||||||
>
|
|
||||||
<Row gutter={12} style={{ marginTop: "5px" }}>
|
|
||||||
<Col span={12}>
|
|
||||||
<div id="chart21" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
||||||
<div id="chart23" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<div id="chart22" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
||||||
<div id="chart24" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Modal> */}
|
|
||||||
<Modal
|
<Modal
|
||||||
visible={this.state.detailForm.isShow}
|
visible={this.state.detailForm.isShow}
|
||||||
title={this.state.detailForm.title}
|
title={this.state.detailForm.title}
|
||||||
maskClosable={false}
|
|
||||||
closeModal={this.detailFormClose}
|
closeModal={this.detailFormClose}
|
||||||
onCancel={this.detailFormClose}
|
onCancel={this.detailFormClose}
|
||||||
footer={null}
|
maskClosable={false}
|
||||||
width="95%"
|
|
||||||
getContainer={false}
|
getContainer={false}
|
||||||
|
footer={null}
|
||||||
|
width={this.state.detailForm.dilgWith}
|
||||||
|
//width="95%"
|
||||||
>
|
>
|
||||||
<FormPage {...this.state.tmpData} />
|
<FormPage {...this.state.tmpData} />
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -837,7 +853,7 @@ class BI056Performance extends React.Component {
|
|||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">年度隐患数量统计</div>
|
<div className="home-always-name">年度隐患数量统计</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("年度隐患数量统计")}>
|
<div onClick={() => this.showDetailModal("BI056_DILG1_2")}>
|
||||||
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -856,7 +872,7 @@ class BI056Performance extends React.Component {
|
|||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">隐患整改情况</div>
|
<div className="home-always-name">隐患整改情况</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("隐患整改情况")}>
|
<div onClick={() => this.showDetailModal("BI056_DILG2_1")}>
|
||||||
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -869,7 +885,7 @@ class BI056Performance extends React.Component {
|
|||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">隐患top6</div>
|
<div className="home-always-name">隐患top6</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("隐患top6")}>
|
<div onClick={() => this.showDetailModal("BI056_DILG2_2")}>
|
||||||
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -889,7 +905,7 @@ class BI056Performance extends React.Component {
|
|||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">检查类型次数统计</div>
|
<div className="home-always-name">检查类型次数统计</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("检查类型次数统计")}>
|
<div onClick={() => this.showDetailModal("BI056_DILG3_1")}>
|
||||||
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -904,7 +920,7 @@ class BI056Performance extends React.Component {
|
|||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">检查类型隐患统计</div>
|
<div className="home-always-name">检查类型隐患统计</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("检查类型隐患统计")}>
|
<div onClick={() => this.showDetailModal("BI056_DILG3_2")}>
|
||||||
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
<IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -15,26 +15,52 @@ export default {
|
|||||||
// STATUS
|
// STATUS
|
||||||
onBeforeEdit: ({ isNew, dispatch, stateData, setFieldVisible, editConfig, setEditConfig, setFieldValue, getFieldValue, setFieldValueByBatch, setFieldEditable, login }) => {
|
onBeforeEdit: ({ isNew, dispatch, stateData, setFieldVisible, editConfig, setEditConfig, setFieldValue, getFieldValue, setFieldValueByBatch, setFieldEditable, login }) => {
|
||||||
// 文件评审会 30 文件审核会议 20 //会议决议、 审核意见、评审意见
|
// 文件评审会 30 文件审核会议 20 //会议决议、 审核意见、评审意见
|
||||||
if (stateData?.Nav_Meeting?.MEETINGTYPE != '30') {
|
// Nav_ListPReview 审批人员
|
||||||
setFieldVisible("Nav_ListPReview", false);
|
if (stateData?.Nav_Meeting?.MEETINGTYPE) {
|
||||||
if (editConfig.columns.length > 0) {
|
if (stateData.Nav_Meeting.MEETINGTYPE == '30') { // 文件评审会 30 评审意见
|
||||||
for (let i = 0; i < editConfig.columns.length; i++) {
|
if (editConfig.columns.length > 0) {
|
||||||
if (editConfig.columns[i].field == 'RESOLUTION') {
|
for (let i = 0; i < editConfig.columns.length; i++) {
|
||||||
editConfig.columns[i].label = '评审意见';
|
if (editConfig.columns[i].field == 'RESOLUTION') {
|
||||||
editConfig.columns[i].promptInfo = '评审意见';
|
editConfig.columns[i].label = '评审意见';
|
||||||
|
editConfig.columns[i].promptInfo = '评审意见';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
} else {
|
||||||
} else if (stateData?.Nav_Meeting?.MEETINGTYPE != '20') {
|
setFieldVisible("Nav_ListPReview", false);
|
||||||
if (editConfig.columns.length > 0) {
|
if (stateData.Nav_Meeting.MEETINGTYPE == '20') { //文件审核会议 20 审核意见
|
||||||
for (let i = 0; i < editConfig.columns.length; i++) {
|
if (editConfig.columns.length > 0) {
|
||||||
if (editConfig.columns[i].field == 'RESOLUTION') {
|
for (let i = 0; i < editConfig.columns.length; i++) {
|
||||||
editConfig.columns[i].label = '审核意见';
|
if (editConfig.columns[i].field == 'RESOLUTION') {
|
||||||
editConfig.columns[i].promptInfo = '审核意见';
|
editConfig.columns[i].label = '审核意见';
|
||||||
|
editConfig.columns[i].promptInfo = '审核意见';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if (stateData?.Nav_Meeting?.MEETINGTYPE != '30') {
|
||||||
|
// setFieldVisible("Nav_ListPReview", false);
|
||||||
|
// if (editConfig.columns.length > 0) {
|
||||||
|
// for (let i = 0; i < editConfig.columns.length; i++) {
|
||||||
|
// if (editConfig.columns[i].field == 'RESOLUTION') {
|
||||||
|
// editConfig.columns[i].label = '评审意见';
|
||||||
|
// editConfig.columns[i].promptInfo = '评审意见';
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } else if (stateData?.Nav_Meeting?.MEETINGTYPE != '20') {
|
||||||
|
// if (editConfig.columns.length > 0) {
|
||||||
|
// for (let i = 0; i < editConfig.columns.length; i++) {
|
||||||
|
// if (editConfig.columns[i].field == 'RESOLUTION') {
|
||||||
|
// editConfig.columns[i].label = '审核意见';
|
||||||
|
// editConfig.columns[i].promptInfo = '审核意见';
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
// STATUS
|
// STATUS
|
||||||
// onBeforeEdit: (params) => {
|
// onBeforeEdit: (params) => {
|
||||||
|
|||||||
@ -675,6 +675,26 @@ const BI056Dilg1_1 = Loadable({
|
|||||||
loader: () => import('../components/CustomPages/BI/BI056Dilg1_1'),
|
loader: () => import('../components/CustomPages/BI/BI056Dilg1_1'),
|
||||||
loading: () => <div />
|
loading: () => <div />
|
||||||
})
|
})
|
||||||
|
const BI056Dilg1_2 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg1_2'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg2_1 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg2_1'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg2_2 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg2_2'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg3_1 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg3_1'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg3_2 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg3_2'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
const BI003StatiscialAnalysis = Loadable({
|
const BI003StatiscialAnalysis = Loadable({
|
||||||
loader: () => import('../components/CustomPages/BI/BI003StatiscialAnalysis'),
|
loader: () => import('../components/CustomPages/BI/BI003StatiscialAnalysis'),
|
||||||
loading: () => <div />
|
loading: () => <div />
|
||||||
@ -930,6 +950,11 @@ export default function (componentName, formId, formParam, data, formCode, formD
|
|||||||
BI055HomeDetail: <BI055HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI055HomeDetail: <BI055HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI056Performance: <BI056Performance formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI056Performance: <BI056Performance formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI056Dilg1_1: <BI056Dilg1_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI056Dilg1_1: <BI056Dilg1_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg1_2: <BI056Dilg1_2 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg2_1: <BI056Dilg2_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg2_2: <BI056Dilg2_2 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg3_1: <BI056Dilg3_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg3_2: <BI056Dilg3_2 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI003StatiscialAnalysis: <BI003StatiscialAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI003StatiscialAnalysis: <BI003StatiscialAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI001HomeDetail: <BI001HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI001HomeDetail: <BI001HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI002HomeDetail: <BI002HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI002HomeDetail: <BI002HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
|||||||
@ -33,6 +33,26 @@ const BI056Dilg1_1 = Loadable({
|
|||||||
loader: () => import('../components/CustomPages/BI/BI056Dilg1_1'),
|
loader: () => import('../components/CustomPages/BI/BI056Dilg1_1'),
|
||||||
loading: () => <div />
|
loading: () => <div />
|
||||||
})
|
})
|
||||||
|
const BI056Dilg1_2 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg1_2'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg2_1 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg2_1'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg2_2 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg2_2'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg3_1 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg3_1'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
const BI056Dilg3_2 = Loadable({
|
||||||
|
loader: () => import('../components/CustomPages/BI/BI056Dilg3_2'),
|
||||||
|
loading: () => <div />
|
||||||
|
})
|
||||||
|
|
||||||
const SC028ShowPrint = Loadable({
|
const SC028ShowPrint = Loadable({
|
||||||
loader: () => import('../components/CustomPages/SC/SC028ShowPrint'),
|
loader: () => import('../components/CustomPages/SC/SC028ShowPrint'),
|
||||||
@ -258,6 +278,11 @@ export default function (componentName, formId, formParam, data, formCode, formD
|
|||||||
BI055HomeDetail: <BI055HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI055HomeDetail: <BI055HomeDetail formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI056Performance: <BI056Performance formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI056Performance: <BI056Performance formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
BI056Dilg1_1: <BI056Dilg1_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
BI056Dilg1_1: <BI056Dilg1_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg1_2: <BI056Dilg1_2 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg2_1: <BI056Dilg2_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg2_2: <BI056Dilg2_2 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg3_1: <BI056Dilg3_1 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
BI056Dilg3_2: <BI056Dilg3_2 formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
|
||||||
SC028ShowPrint: <SC028ShowPrint formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
SC028ShowPrint: <SC028ShowPrint formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
SC022Import: <SC022Import formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
SC022Import: <SC022Import formId={formId} formParam={formParam} data={data} formCode={formCode} />,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user