814 lines
30 KiB
JavaScript
814 lines
30 KiB
JavaScript
import React from 'react'
|
|
import { connect } from 'dva'
|
|
import { initFilter, extendRule, extendInclude } from "../../../utils/common"
|
|
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
|
|
import { Table, Button, Row, Col,Modal } from 'antd';
|
|
import echarts from 'echarts';
|
|
import styles from '../HI/StepForm.css';
|
|
import moment from 'moment'
|
|
import { T } from 'antd/lib/upload/utils';
|
|
import FormPage from '../../FormPage'
|
|
|
|
class BI003StatiscialAnalysis extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false,
|
|
noticeTitle: '',
|
|
tmpData: {},
|
|
tableKey: "1",
|
|
startTime: this.getDate(),
|
|
endTime:moment(new Date()).format("YYYYMMDD"),
|
|
totalCount:1,
|
|
finishCount:0,
|
|
overtimeCount:0,
|
|
unfinishCount:0,
|
|
dtotalCount:1,
|
|
dfinishCount:0,
|
|
dovertimeCount:0,
|
|
dunfinishCount:0,
|
|
drate:'0%',
|
|
dnormalRate:'0%',
|
|
weekColor:'black',
|
|
monthColor:'orange',
|
|
threeMonthColor:'black',
|
|
sixMonthColor:'black',
|
|
yearColor:'black',
|
|
retData:[],
|
|
groupData:[],
|
|
detailData:[],
|
|
newData:[],
|
|
detailDataH:[],
|
|
displayHr:'none',
|
|
displaydetail:'none',
|
|
departmentName:'矿山部',
|
|
columns: [
|
|
{
|
|
width: "90px",
|
|
title: '部门',
|
|
dataIndex: 'departmentName',
|
|
key: 'departmentName',
|
|
render: (text, record) => (
|
|
<span>
|
|
<a onClick={() => this.showEditModal(record)}>{record.departmentName}</a>
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '正常已办',
|
|
dataIndex: 'doneCount',
|
|
key: 'doneCount'
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '超时已办',
|
|
dataIndex: 'timeOverCount',
|
|
key: 'timeOverCount'
|
|
},
|
|
{
|
|
width: "60px",
|
|
title: '未完成',
|
|
dataIndex: 'unDoneCount',
|
|
key: 'unDoneCount',
|
|
},
|
|
{
|
|
width: "60px",
|
|
title: '完成率',
|
|
dataIndex: 'allDoneRate',
|
|
key: 'allDoneRate',
|
|
},
|
|
{
|
|
width: "90px",
|
|
title: '及时完成率',
|
|
dataIndex: 'doneRate',
|
|
key: 'doneRate',
|
|
}
|
|
],
|
|
detailColumns: [
|
|
{
|
|
width: "10px",
|
|
title: '序号',
|
|
dataIndex: 'NUM',
|
|
key: 'NUM',
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '表单名称',
|
|
dataIndex: 'formName',
|
|
key: 'formName',
|
|
render: (text, record) => (
|
|
<span>
|
|
<a onClick={() => this.showFormModal(record)}>{record.formName}</a>
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '总任务数',
|
|
dataIndex: 'TotalCount',
|
|
key: 'TotalCount'
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '正常已办',
|
|
dataIndex: 'doneCount',
|
|
key: 'doneCount'
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '超时已办',
|
|
dataIndex: 'timeOverCount',
|
|
key: 'timeOverCount'
|
|
},
|
|
{
|
|
width: "60px",
|
|
title: '未完成',
|
|
dataIndex: 'unDoneCount',
|
|
key: 'unDoneCount',
|
|
},
|
|
{
|
|
width: "60px",
|
|
title: '完成率',
|
|
dataIndex: 'allDoneRate',
|
|
key: 'allDoneRate',
|
|
},
|
|
{
|
|
width: "90px",
|
|
title: '及时完成率',
|
|
dataIndex: 'doneRate',
|
|
key: 'doneRate',
|
|
}
|
|
],
|
|
viewColumns: [
|
|
{
|
|
width: "80px",
|
|
title: '表单名称',
|
|
dataIndex: 'formName',
|
|
key: 'formName',
|
|
render:(value,record,index)=>{
|
|
const obj={
|
|
children:value,
|
|
props:{}
|
|
};
|
|
let arr=this.state.detailDataH.filter((res)=>{
|
|
return res.formName==record.formName;
|
|
});
|
|
if(index==0 || this.state.detailDataH[index-1].formName!=record.formName)
|
|
{
|
|
obj.props.rowSpan=arr.length;
|
|
}else{
|
|
obj.props.rowSpan=0;
|
|
}
|
|
return obj;
|
|
},
|
|
},
|
|
{
|
|
width: "10px",
|
|
title: '序号',
|
|
dataIndex: 'ROW_NO',
|
|
key: 'ROW_NO',
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '任务名称',
|
|
dataIndex: 'NOTICE_TITLE',
|
|
key: 'NOTICE_TITLE',
|
|
render: (text, record) => (
|
|
<span>
|
|
<a onClick={() => this.showViewModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE,record.CODE )}>{record.NOTICE_TITLE}</a>
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
width: "80px",
|
|
title: '发起日期',
|
|
dataIndex: 'CREATE_TIME',
|
|
key: 'CREATE_TIME'
|
|
},
|
|
{
|
|
width: "60px",
|
|
title: '发起人',
|
|
dataIndex: 'USER_NAME',
|
|
key: 'USER_NAME',
|
|
},
|
|
{
|
|
width: "60px",
|
|
title: '状态',
|
|
dataIndex: 'NOTICE_STATUS',
|
|
key: 'NOTICE_STATUS',
|
|
render: (text, record) => (
|
|
<span>
|
|
{this.props.data.enums ? this.props.data.enums.FMNoticeStatusEnum.enums[record.NOTICE_STATUS] :this.props.app.enums.FMNoticeStatusEnum.enums[record.NOTICE_STATUS]}
|
|
</span>
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
componentDidMount() {
|
|
this.loadData()
|
|
};
|
|
showViewModal = (dataId, formCode, TaskID, title, taskCode) => {
|
|
const newtmpData = {
|
|
data: {
|
|
id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
|
|
homeReload: true
|
|
},
|
|
formCode: formCode,
|
|
}
|
|
this.setState({
|
|
noticeTitle: title,
|
|
taskCode: taskCode,
|
|
tmpData: newtmpData,
|
|
currActivatedMenu: ''
|
|
}, () => this.setState({
|
|
visible: true
|
|
}));
|
|
}
|
|
showFormModal=(record)=>{
|
|
const {newData} = this.state;
|
|
let newDataTemp=[]
|
|
let temp=newData.filter(t=>t.DEPARTMENT_ID===record.departmentId && t.SOURCE_FORMCODE ===record.formCode);
|
|
if(temp.length>0)
|
|
{
|
|
let i=1;
|
|
temp.forEach(t=>{
|
|
t.ROW_NO=i;
|
|
t.formName=record.formName;
|
|
newDataTemp.push(t);
|
|
i++;
|
|
})
|
|
}
|
|
else
|
|
{
|
|
newDataTemp=[]
|
|
}
|
|
this.setState({displaydetail:'block',detailDataH:newDataTemp
|
|
})
|
|
}
|
|
showEditModal=(record)=>{
|
|
const {groupData} = this.state;
|
|
let detailData=[]
|
|
let temp=groupData.filter(t=>t.departmentId===record.departmentId);
|
|
if(temp.length>0)
|
|
{
|
|
let i=1;
|
|
temp.forEach(t=>{
|
|
t.NUM=i;
|
|
t.unDoneCount = t.TotalCount-t.doneCount -t.timeOverCount;
|
|
t.allDoneRate = ((t.doneCount +t.timeOverCount)/t.TotalCount*100).toFixed(0)+"%";
|
|
t.doneRate = (t.doneCount/t.TotalCount*100).toFixed(0)+"%";
|
|
detailData.push(t);
|
|
i++;
|
|
})
|
|
}
|
|
else
|
|
{
|
|
detailData=[]
|
|
}
|
|
this.setState({displayHr:'block',displaydetail:'none',
|
|
detailData:detailData,
|
|
departmentName:record.departmentName,
|
|
dtotalCount:record.TotalCount,
|
|
dfinishCount:record.doneCount,
|
|
dovertimeCount:record.timeOverCount,
|
|
dunfinishCount:record.unDoneCount,
|
|
drate :record.TotalCount===0?0:((record.doneCount +record.timeOverCount)/record.TotalCount*100).toFixed(0)+"%",
|
|
dnormalRate :record.TotalCount===0?0: (record.doneCount/record.TotalCount*100).toFixed(0)+"%",
|
|
})
|
|
}
|
|
//主要工作分布图（饼图）
|
|
mainJobPie2 = () => {
|
|
const {retData} = this.state;
|
|
let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "安全检查", "COUNT": 3, "COLOR": "#CD0505" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "作业现场", "COUNT": 2, "COLOR": "#FCD149" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "应急管理", "COUNT": 1, "COLOR": "#60A9F8" }], "TotalCount": 0, "ErrorMessage": null }
|
|
|
|
let moduleData = []
|
|
let showData = []
|
|
let dataColor = []
|
|
retData.forEach(item => {
|
|
moduleData.push(item.departmentName)
|
|
let valueTemp=item.doneCount+item.timeOverCount
|
|
showData.push({ value: valueTemp, name: item.departmentName })
|
|
let agb=`rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
|
|
dataColor.push(agb)
|
|
})
|
|
let myChart = echarts.init(document.getElementById('mainJobPie2'));
|
|
myChart.setOption({
|
|
title: {
|
|
text: "部门级-安全事务完成率",
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
formatter: '{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
bottom: '10px',
|
|
data: moduleData
|
|
},
|
|
series: [
|
|
{
|
|
name: '主要工作分布',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '42%'],
|
|
label: {
|
|
formatter: '{b}:({d}%)',
|
|
normal:{
|
|
show: true,
|
|
position:'inner',
|
|
formatter: '{d}%',
|
|
}
|
|
},
|
|
data: showData,
|
|
color: dataColor,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
//shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
//工作票完成情况统计图
|
|
workTicket = () => {
|
|
const {retData} = this.state;
|
|
let teamName = [];
|
|
let wattingQty = [];
|
|
let finishQty = [];
|
|
let overFinishQty = [];
|
|
let totalQty = [];
|
|
retData.forEach(item => {
|
|
teamName.push(item.departmentName);
|
|
wattingQty.push(item.unDoneCount);
|
|
finishQty.push(item.doneCount);
|
|
overFinishQty.push(item.timeOverCount);
|
|
totalQty.push(item.TotalCount);
|
|
})
|
|
//图标2
|
|
let workTickets = document.getElementById('workTicket');
|
|
if (workTickets) {
|
|
let myChart = echarts.init(workTickets);
|
|
myChart.setOption({
|
|
title: {
|
|
text: "部门级-安全事务完成情况",
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '10%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: teamName,
|
|
axisLine: {
|
|
show: false,
|
|
// lineStyle: {
|
|
// color: 'rgba(192, 192, 102)'
|
|
// }
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#000',
|
|
rotate: 40,
|
|
formatter: function (value) { // 自定义文字超出部分 ...
|
|
if (value.length > 5) {
|
|
return `${value.slice(0, 5)}...`;
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['正常已办', '超时已办','未完成'],
|
|
bottom: '0px'
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#172749'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
// lineStyle: {
|
|
// color: 'rgba(192, 192, 102)'
|
|
// }
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
},
|
|
series: [
|
|
// {
|
|
// name: '总数',
|
|
// type: 'bar',
|
|
// stack: '',
|
|
// label: {
|
|
// show: true,
|
|
// position: 'top',
|
|
// color: '#000',
|
|
// },
|
|
// data: totalQty,
|
|
// barGap: '-100%',
|
|
// z: -1,
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
|
|
// }
|
|
// },
|
|
// },
|
|
{
|
|
name: '正常已办',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
color: '#000',
|
|
},
|
|
emphasis: {//折线图的高亮状态。
|
|
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
|
},
|
|
data: finishQty,
|
|
barGap: '-100%',
|
|
z: -1,
|
|
itemStyle: {
|
|
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: "#01AEF6" },
|
|
{ offset: 1, color: "rgba(16,36,95,0.6)" },//rgba(16,36,95,0.6) #9999FF
|
|
]),
|
|
// normal: {
|
|
// color: '#5B9BD5',
|
|
// }
|
|
},
|
|
},
|
|
{
|
|
name: '超时已办',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
color: '#000',
|
|
},
|
|
emphasis: {//折线图的高亮状态。
|
|
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
|
},
|
|
data: overFinishQty,
|
|
barGap: '-100%',
|
|
z: -1,
|
|
itemStyle: {
|
|
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: "#ED7D31" },
|
|
{ offset: 1, color: "#FFFF33" },//rgba(255,255,0,0.6)
|
|
]),
|
|
// normal: {
|
|
// color: '#ED7D31',
|
|
// }
|
|
},
|
|
},
|
|
{
|
|
name: '未完成',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
color: '#000',
|
|
},
|
|
emphasis: {//折线图的高亮状态。
|
|
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
|
},
|
|
data: wattingQty,
|
|
barGap: '-100%',
|
|
z: -1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
|
|
}
|
|
},
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}
|
|
getDate=(type)=>{
|
|
let date = new Date()
|
|
let y = date .getFullYear()
|
|
let m = date .getMonth() + 1
|
|
let d = date .getDate();
|
|
// 当前日期
|
|
let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
|
|
// 一月的时候年份要减一
|
|
// if(m == 1) {
|
|
// y--
|
|
// m = 12
|
|
// }else if(m == 3 && d > 28) {
|
|
|
|
// //三月要考虑是否为闰年
|
|
// m--
|
|
// if(y%4 == 0 && y%100!=0 || y%400 == 0) {
|
|
// d = 29
|
|
// }else {
|
|
// d-28
|
|
// }
|
|
// }else if((m != 12 || m != 8 )&& d == 31) {
|
|
|
|
// //31号的月份要考虑上个月是否有31号
|
|
// m--
|
|
// d = 30
|
|
// }else {
|
|
// m--
|
|
// }
|
|
|
|
// 一个月前的日期(默认月份)
|
|
//let pastDate = y + (m < 10 ? "0" + m : m) + (d < 10 ? "0" + d : d)
|
|
let pastDate = moment(nowDate).add(-1, "month").format('YYYYMMDD')
|
|
let weekColor='black';
|
|
let monthColor='orange';
|
|
let threeMonthColor='black';
|
|
let sixMonthColor='black';
|
|
let yearColor='black';
|
|
if(type==="Week")
|
|
{
|
|
pastDate=moment(nowDate).add(-7, "d").format("YYYYMMDD")
|
|
weekColor='orange';
|
|
monthColor='black';
|
|
threeMonthColor='black';
|
|
sixMonthColor='black';
|
|
yearColor='black';
|
|
}
|
|
if(type==="ThreeMonth")
|
|
{
|
|
pastDate=moment(nowDate).add(-3, "month").format("YYYYMMDD")
|
|
weekColor='black';
|
|
monthColor='black';
|
|
threeMonthColor='orange';
|
|
sixMonthColor='black';
|
|
yearColor='black';
|
|
}
|
|
if(type==="SixMonth")
|
|
{
|
|
pastDate=moment(nowDate).add(-6, "month").format("YYYYMMDD")
|
|
weekColor='black';
|
|
monthColor='black';
|
|
threeMonthColor='black';
|
|
sixMonthColor='orange';
|
|
yearColor='black';
|
|
}
|
|
if(type==="Year")
|
|
{
|
|
pastDate=moment(nowDate).add(-1, "year").format("YYYYMMDD")
|
|
weekColor='black';
|
|
monthColor='black';
|
|
threeMonthColor='black';
|
|
sixMonthColor='black';
|
|
yearColor='orange';
|
|
}
|
|
this.setState({
|
|
startTime: pastDate,
|
|
weekColor:weekColor,
|
|
monthColor:monthColor,
|
|
threeMonthColor:threeMonthColor,
|
|
sixMonthColor:sixMonthColor,
|
|
yearColor:yearColor
|
|
},()=>{
|
|
if(type)
|
|
{
|
|
this.loadData();
|
|
}
|
|
})
|
|
return pastDate;
|
|
}
|
|
//加载数据赋值
|
|
loadData = () => {
|
|
var orgId = this.props.login ? this.props.login.OrgId : '';
|
|
let startTime=this.state.startTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1-$2-$3")
|
|
let endTime=this.state.endTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1-$2-$3")
|
|
const jsonTemp = initFilter(orgId)
|
|
extendRule(jsonTemp, "DEPARTMENT_TYPE", 1, 0);
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
payload: jsonTemp,
|
|
url: 'FM/Department/OrderEntities',
|
|
onComplete: (retDepart) => {
|
|
if (retDepart) {
|
|
let tempDepart=[];
|
|
retDepart.forEach(t=>{
|
|
let tempNow={
|
|
departmentId:t.ID,
|
|
departmentName:t.NAME,
|
|
TotalCount:0,
|
|
doneCount:0,
|
|
timeOverCount:0,
|
|
unDoneCount:0,
|
|
allDoneRate:"0%",
|
|
doneRate:"0%"};
|
|
tempDepart.push(tempNow);
|
|
})
|
|
let json = initFilter(orgId,'','','','',startTime,endTime);
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
payload: json,
|
|
url: 'BI/BIStatiscialAnalysisController/',
|
|
onComplete: (ret) => {
|
|
if (ret) {
|
|
let temp=[];
|
|
if(ret.groupData)
|
|
{
|
|
tempDepart.forEach(t=>{
|
|
let group=ret.groupData.filter(m=>m.departmentId === t.departmentId)
|
|
if(group.length>0)
|
|
{
|
|
let tCount=0;
|
|
let dCount=0;
|
|
let oCount=0;
|
|
let uCount=0;
|
|
group.forEach(t1=>{
|
|
tCount=tCount+t1.TotalCount;
|
|
dCount=dCount+t1.doneCount;
|
|
oCount=oCount+t1.timeOverCount;
|
|
})
|
|
t.TotalCount = tCount;
|
|
t.doneCount = dCount;
|
|
t.timeOverCount = oCount;
|
|
t.unDoneCount = tCount-dCount -oCount;
|
|
t.allDoneRate = tCount===0?0:((dCount +oCount)/tCount*100).toFixed(0)+"%";
|
|
t.doneRate =tCount===0?0: (dCount/tCount*100).toFixed(0)+"%";
|
|
}
|
|
temp.push(t);
|
|
})
|
|
// ret.groupData.forEach(t=>{
|
|
// t.unDoneCount = t.TotalCount-t.doneCount -t.timeOverCount;
|
|
// t.allDoneRate = ((t.doneCount +t.timeOverCount)/t.TotalCount*100).toFixed(0)+"%";
|
|
// t.doneRate = (t.doneCount/t.TotalCount*100).toFixed(0)+"%";
|
|
// temp.push(t);
|
|
// })
|
|
}
|
|
this.setState({
|
|
totalCount:ret.TotalCount,
|
|
finishCount:ret.doneCount,
|
|
overtimeCount:ret.timeOverCount,
|
|
unfinishCount:ret.TotalCount-ret.doneCount-ret.timeOverCount,
|
|
retData:temp,
|
|
groupData:ret.groupData,
|
|
newData:ret.newData,
|
|
displayHr:'none',
|
|
displaydetail:'none'
|
|
})
|
|
this.workTicket();
|
|
this.mainJobPie2();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
closeModal = () => { // 退出弹窗
|
|
this.clearData();
|
|
}
|
|
clearData = () => {
|
|
let newtmpData = { ...this.state.tmpData }
|
|
newtmpData["data"].id = '';
|
|
newtmpData["data"].homeReload = false;
|
|
newtmpData.formCode = '';
|
|
this.setState({
|
|
visible: false,
|
|
tmpData: newtmpData,
|
|
})
|
|
}
|
|
handleCancel = () => { // 退出弹窗
|
|
this.clearData();
|
|
}
|
|
render() {
|
|
const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,
|
|
weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,departmentName,
|
|
dtotalCount,dfinishCount,dovertimeCount,dunfinishCount,drate,dnormalRate,
|
|
} = this.state;
|
|
let allFinishRate=((finishCount+overtimeCount)/totalCount * 100).toFixed(0);
|
|
let finishRate=(finishCount/totalCount * 100).toFixed(0);
|
|
return <div>
|
|
<div className='route-home' style={{minHeight:"1000px"}}>
|
|
<Modal
|
|
visible={this.state.visible}
|
|
title={this.state.noticeTitle}
|
|
maskClosable={false}
|
|
onCancel={this.handleCancel}
|
|
footer={null}
|
|
className='antd-modal-fullscreen'
|
|
closeModal={this.closeModal}
|
|
// forceRender={true}
|
|
>
|
|
<FormPage {...this.state.tmpData} />
|
|
</Modal>
|
|
<h1 style={{ textAlign: "center"}}>行洛坑钨矿安全事务执行情况综合统计分析</h1>
|
|
<h3 style={{ textAlign: 'center' }}>({startTime}-{endTime})</h3>
|
|
<span>
|
|
<Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{totalCount}</span></Button>
|
|
<Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px RGB(24, 149, 255) solid',marginRight:"10px"}}>正常已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{finishCount}</span></Button>
|
|
<Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{overtimeCount}</span></Button>
|
|
<Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px RGB(24, 149, 255) solid',marginRight:"10px"}}>未完成数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{unfinishCount}</span></Button>
|
|
<Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{allFinishRate}%</span></Button>
|
|
<Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{finishRate}%</span></Button>
|
|
</span>
|
|
<span style={{float:"right",marginTop:"20px"}}>
|
|
<Button type='link' style= {{color:weekColor,fontWeight:"bold"}} onClick={() => this.getDate("Week")}>最近1周</Button>
|
|
<Button type='link' style= {{color:monthColor,fontWeight:"bold"}} onClick={() => this.getDate("Month")}>最近1月</Button>
|
|
<Button type='link' style= {{color:threeMonthColor,fontWeight:"bold"}} onClick={() => this.getDate("ThreeMonth")}>最近3月</Button>
|
|
<Button type='link' style= {{color:sixMonthColor,fontWeight:"bold"}} onClick={() => this.getDate("SixMonth")}>最近半年</Button>
|
|
<Button type='link' style= {{color:yearColor,fontWeight:"bold"}} onClick={() => this.getDate("Year")}>最近1年</Button>
|
|
{/* <Button onClick={() => this.getBaseInfoData(0)}>全部</Button> */}
|
|
</span>
|
|
<br></br>
|
|
<hr style={{border:'1px dashed #ccc'}}></hr>
|
|
<Row style={{marginTop:"10px"}}>
|
|
<Col span={10}>
|
|
<Table style={{height:"400px"}}
|
|
scroll={{ y: 400 }}
|
|
dataSource={this.state.retData}
|
|
columns={this.state.columns}
|
|
pagination={false}
|
|
loading={false}
|
|
size="small"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<div id="workTicket" style={{ height: '350px',marginLeft:"20px",backgroundColor:"white" }}></div>
|
|
</Col>
|
|
<Col span={6}>
|
|
<div id="mainJobPie2" style={{ height: '350px',marginLeft:"20px" ,backgroundColor:"white"}}></div>
|
|
</Col>
|
|
</Row>
|
|
<hr style={{border:'1px dashed #ccc'}}></hr>
|
|
<Row style={{display:this.state.displayHr}}>
|
|
<h1 style={{ textAlign: "center"}}>{departmentName}安全事务执行情况综合统计分析</h1>
|
|
<h3 style={{ textAlign: 'center' }}>({startTime}-{endTime})</h3>
|
|
</Row>
|
|
<br></br>
|
|
<Row style={{display:this.state.displayHr}}>
|
|
<Col span={6}>
|
|
<Row>
|
|
<Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{dtotalCount}</span></Button>
|
|
<Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>正常已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{dfinishCount}</span></Button></Col>
|
|
</Row>
|
|
<Row style={{marginTop:"10px"}}>
|
|
<Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginRight:"10px"}}>未完成数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{dunfinishCount}</span></Button>
|
|
<Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>超时已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{dovertimeCount}</span></Button></Col>
|
|
</Row>
|
|
<Row style={{marginTop:"10px"}}>
|
|
<Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{drate}</span></Button>
|
|
<Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{dnormalRate}</span></Button></Col>
|
|
</Row>
|
|
</Col>
|
|
<Col span={18}>
|
|
<Table style={{backgroundColor:"white"}}
|
|
dataSource={this.state.detailData}
|
|
columns={this.state.detailColumns}
|
|
pagination={false}
|
|
loading={false}
|
|
size="small"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
<br></br>
|
|
<Row style={{display:this.state.displaydetail}}>
|
|
<Table
|
|
style={{backgroundColor:"white"}}
|
|
dataSource={this.state.detailDataH}
|
|
columns={this.state.viewColumns}
|
|
pagination={false}
|
|
loading={false}
|
|
size="small"
|
|
/>
|
|
</Row>
|
|
</div>
|
|
</div >
|
|
}
|
|
}
|
|
export default connect(({ login, app }) => ({ login, app }))(BI003StatiscialAnalysis)
|