import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
initFilter,
addRuleAndGroups,
guid,
extendInclude,
extendRule,
extendOrder,
extend,
initQueryFilter,
} from "../../../utils/common";
import {
Table,
Row,
Col,
Button,
Select,
Progress,
DatePicker,
message,
} from "antd";
import echarts from "echarts";
import moment from "moment";
const { Option } = Select;
class BI001HomeDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
pagination: {},
retData: [],
columns1: [
// {
// title: '序号',
// render: (text, record, index) => `${index + 1}`
// },
{
title: "车间",
dataIndex: "shopName",
render: (value, record, index) => {
const obj = {
children: value,
props: {},
};
let arr = this.state.retData.filter((res) => {
return res.shopName == record.shopName;
});
if (
index == 0 ||
this.state.retData[index - 1].shopName != record.shopName
) {
obj.props.rowSpan = arr.length;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: "总任务数",
dataIndex: "shopTotalCount",
render: (value, record, index) => {
const obj = {
children: value,
props: {},
};
let arr = this.state.retData.filter((res) => {
return res.shopName == record.shopName;
});
if (
index == 0 ||
this.state.retData[index - 1].shopName != record.shopName
) {
obj.props.rowSpan = arr.length;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: "正常已办",
dataIndex: "shopDoneCount",
render: (value, record, index) => {
const obj = {
children: value,
props: {},
};
let arr = this.state.retData.filter((res) => {
return res.shopName == record.shopName;
});
if (
index == 0 ||
this.state.retData[index - 1].shopName != record.shopName
) {
obj.props.rowSpan = arr.length;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: "完成率",
dataIndex: "shopDoneRate",
render: (value, record, index) => {
const obj = {
children: value + "%",
props: {},
};
let arr = this.state.retData.filter((res) => {
return res.shopName == record.shopName;
});
if (
index == 0 ||
this.state.retData[index - 1].shopName != record.shopName
) {
obj.props.rowSpan = arr.length;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: "及时完成率",
dataIndex: "shopOverDoneRate",
render: (value, record, index) => {
const obj = {
children: value + "%",
props: {},
};
let arr = this.state.retData.filter((res) => {
return res.shopName == record.shopName;
});
if (
index == 0 ||
this.state.retData[index - 1].shopName != record.shopName
) {
obj.props.rowSpan = arr.length;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: "班组",
dataIndex: "teamName",
onCell:()=>this.renderSpeedColumn()
},
{
title: "总任务数",
dataIndex: "teamTotalCount",
},
{
title: "正常已办",
dataIndex: "teamDoneCount",
},
{
title: "未完成数",
dataIndex: "teamUndoneCount",
},
{
width: "120px",
title: "完成率",
dataIndex: "teamDoneRate",
render: (text, record) => (
//
// this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}
//
),
},
{
width: "120px",
title: "及时完成率",
dataIndex: "teamOverDoneRate",
render: (text, record) => (
//
// this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}
//
),
},
],
showLoading: false,
};
}
componentDidMount() {
this.loadData();
}
renderSpeedColumn = ()=>{
return { className: 'redTableCell'}
}
loadData = () => {
this.state.showLoading = true;
let param = this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS;
this.chart1();
};
//矿山
chart1 = () => {
let json = initFilter(this.props.login.OrgId);
// extendRule(json, 'DEPARTMENT_NAME', 1, "矿山部");
// extendOrder(json, "MONTH", 0);
this.props.dispatch({
type: "app/getDataByPost",
url: "BI/BIStatiscialAnalysisController/GetClassCompletionSort",
payload: json,
onlyData: false,
onComplete: (data) => {
if (data && data.IsSuccessful && data.Data && data.Data.rateData) {
let month = [];
let company = [];
let department = [];
data.Data.rateData.forEach((item) => {
month.push(item.MONTHStr);
company.push(item.FINISH_RATE);
department.push(item.NORMAL_FINISH_RATE);
});
let myChart = echarts.init(document.getElementById("chartClass"));
myChart.setOption({
tooltip: {
trigger: "axis",
formatter: function (params) {
let temp=''
params.forEach(t=>{
temp=temp+t.marker + t.seriesName +":"+t.value+"%"+'
';
})
return temp;
}
},
title: {
text: "班组活动任务完成走势图",
left: "center",
top: "5%",
},
// label: {
// show: true,
// position: 'top'
// },
legend: {
// data: ['部门'],
data: ["完成率", "及时完成率"],
bottom: "10px",
},
grid: {
left: "3%",
right: "4%",
top: "15%",
containLabel: true,
},
toolbox: {
feature: {
// saveAsImage: {}
},
},
xAxis: {
type: "category",
data: month,
axisLabel: {
showMaxLabel: true,
},
},
yAxis: {
type: "value",
axisLabel: {
formatter: function (val) {
return val + "%";
},
},
},
series: [
{
name: "完成率",
type: "line",
color: "#4b9bf3",
data: company,
smooth: true,
// symbol:'none',
},
{
name: "及时完成率",
type: "line",
color: "#FCD149",
data: department,
areaStyle: {},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: "#FCD149" // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}],
global: false
}
},
smooth: true,
symbol:'circle',
},
],
});
this.setState({
retData: data.Data.retData,
});
}
},
});
this.state.showLoading = false;
};
onChange = (type, value) => {
this.setState({
[type]: value,
});
};
paginationConfig = {
pageSizeOptions: ["10", "20", "50"],
pageSize: 20,
showSizeChanger: true,
size: "small",
};
render() {
return (
{/*
{this.props.data.mineType == 20?"尾矿库":this.props.data.mineType == 10?"选矿厂":"露天矿"}班组活动任务完成详情（近12月）
*/}
{/*
*/}