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,
Progress,
Select,
DatePicker,
message,
} from "antd";
import echarts from "echarts";
import moment from "moment";
const { Option } = Select;
class BI002HomeDetail 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 mineType = this.props.data.mineType;
let param = this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS;
if (param) {
mineType = param === "选矿厂" ? "10" : param === "尾矿库" ? "20" : "30";
this.props.data.mineType = mineType;
}
this.chart1(mineType);
};
//矿山
chart1 = (mineType) => {
let json = initFilter(this.props.login.OrgId, mineType);
// extendRule(json, 'DEPARTMENT_NAME', 1, "矿山部");
// extendOrder(json, "MONTH", 0);
this.props.dispatch({
type: "app/getDataByPost",
url: "BI/BIStatiscialAnalysisController/GetJobCompletionDetail",
payload: json,
onlyData: false,
onComplete: (data) => {
if (data && data.IsSuccessful && data.Data) {
let month = [];
let company = [];
let department = [];
let totalCount = [];
data.Data.rateData.forEach((item) => {
month.push(item.MONTHStr);
company.push(item.FINISH_RATE);
department.push(item.NORMAL_FINISH_RATE);
totalCount.push(item.TOTAL_COUNT);
});
let myChart = echarts.init(document.getElementById("chartWork"));
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
transitionDuration: 0,
formatter: function (params) {
return (
params[0].marker +
params[0].seriesName +
" : " +
params[0].value +
"" +
params[1].marker +
params[1].seriesName +
" : " +
params[1].value + "%" +
"" +
params[2].marker +
params[2].seriesName +
" : " +
params[2].value + "%"
);
},
},
title: {
text: "工作票完成分析",
left: "center",
top: "5%",
},
legend: {
data: ["完成数","完成率", "及时完成率"],
left: "center",
align: "left",
bottom: "2%",
textStyle: {
color: "#000",
},
itemWidth: 10,
itemHeight: 10,
// itemGap: 35,
},
grid: {
left: "3%",
right: "4%",
top: "15%",
containLabel: true,
},
xAxis: {
type: "category",
data: month,
axisLabel: {
showMaxLabel: true,
},
},
yAxis: [
{
type: "value",
position: "left",
splitLine: {
show: true,
lineStyle: {
color: ["#f2f2f2"],
// opacity:0.2
// zlevel: -1,
},
},
axisLine: {
lineStyle: {
color: "#0c3b71",
},
},
axisLabel: {
color: "rgb(170,170,170)",
formatter: "{value} ",
},
},
{
type: "value",
position: "right",
splitLine: {
show: false,
lineStyle: {
color: ["#f2f2f2"],
},
},
axisLine: {
lineStyle: {
color: "#f2f2f2",
},
},
axisLabel: {
color: "rgb(170,170,170)",
formatter: "{value} %",
},
},
],
series: [
{
name: "完成数",
type: "bar",
color: "#72b85b",
data: totalCount,
barWidth: "20%",
barGap: "10%",
stack: null,
},
{
name: "完成率",
type: "line",
color: "#4b9bf3",
data: company,
yAxisIndex: 1,
smooth: true,
// zlevel:100,
},
{
name: "及时完成率",
type: "line",
color: "#FCD149",
data: department,
yAxisIndex: 1,
smooth: true,
// zlevel:100,
},
],
});
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
? "选矿厂"
: this.props.data.mineType == 30
? "露天矿"
: this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS}
工作票完成详情（近12月）
*/}
{/*
*/}