import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
initFilter,
addRuleAndGroups,
guid,
extendInclude,
extendRule,
extendOrder,
extend,
initQueryFilter,
getSixMonth
} 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: [
{
shopDoneCount: 1541,
shopDoneRate: 99.94,
shopId: "b53266f6-2ba9-9b30-e96f-f9893a48376d",
shopName: "安环科",
shopOntimeCount: 1437,
shopOverDoneRate: 93.19,
shopTotalCount: 1542,
teamDoneCount: 1541,
teamDoneRate: 99.94,
teamId: "45aba808-c12c-b785-fa09-f9acd9922785",
teamName: "民爆储存库班组",
teamOntimeCount: 1437,
teamOverDoneRate: 93.19,
teamTotalCount: 1542,
teamUndoneCount: 1,
},
{
shopDoneCount: 2792,
shopDoneRate: 99.29,
shopId: "72e83a49-5319-0784-d1ed-025d309b87eb",
shopName: "穿爆车间",
shopOntimeCount: 2080,
shopOverDoneRate: 73.97,
shopTotalCount: 2812,
teamDoneCount: 1466,
teamDoneRate: 99.93,
teamId: "c671778d-dd76-080f-51d1-5dc5ca698419",
teamName: "爆破班组",
teamOntimeCount: 1286,
teamOverDoneRate: 87.66,
teamTotalCount: 1467,
teamUndoneCount: 1,
},
{
shopDoneCount: 2792,
shopDoneRate: 99.29,
shopId: "72e83a49-5319-0784-d1ed-025d309b87eb",
shopName: "穿爆车间",
shopOntimeCount: 2080,
shopOverDoneRate: 73.97,
shopTotalCount: 2812,
teamDoneCount: 1326,
teamDoneRate: 98.59,
teamId: "821a4fe3-5513-681e-ed3c-e61836b29638",
teamName: "穿孔班组",
teamOntimeCount: 794,
teamOverDoneRate: 59.03,
teamTotalCount: 1345,
teamUndoneCount: 19,
},
{
shopDoneCount: 15056,
shopDoneRate: 99.87,
shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
shopName: "金宇宁化分公司",
shopOntimeCount: 9755,
shopOverDoneRate: 64.71,
shopTotalCount: 15075,
teamDoneCount: 1768,
teamDoneRate: 100,
teamId: "bcdca284-6373-6862-083e-645030a2315d",
teamName: "维修班组",
teamOntimeCount: 1254,
teamOverDoneRate: 70.93,
teamTotalCount: 1768,
teamUndoneCount: 0,
},
{
shopDoneCount: 15056,
shopDoneRate: 99.87,
shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
shopName: "金宇宁化分公司",
shopOntimeCount: 9755,
shopOverDoneRate: 64.71,
shopTotalCount: 15075,
teamDoneCount: 4927,
teamDoneRate: 99.78,
teamId: "0270fa34-4849-4429-35e8-5fb8b98c9fc9",
teamName: "金宇现场",
teamOntimeCount: 3482,
teamOverDoneRate: 70.51,
teamTotalCount: 4938,
teamUndoneCount: 11,
},
{
shopDoneCount: 15056,
shopDoneRate: 99.87,
shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
shopName: "金宇宁化分公司",
shopOntimeCount: 9755,
shopOverDoneRate: 64.71,
shopTotalCount: 15075,
teamDoneCount: 2903,
teamDoneRate: 99.93,
teamId: "8ba1fb97-540b-d451-881a-39f632700975",
teamName: "运输二班",
teamOntimeCount: 1854,
teamOverDoneRate: 63.82,
teamTotalCount: 2905,
teamUndoneCount: 2,
},
{
shopDoneCount: 15056,
shopDoneRate: 99.87,
shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
shopName: "金宇宁化分公司",
shopOntimeCount: 9755,
shopOverDoneRate: 64.71,
shopTotalCount: 15075,
teamDoneCount: 5458,
teamDoneRate: 99.89,
teamId: "db1ccb4a-0ffa-63c9-9384-c3d9139e8c8f",
teamName: "运输一班",
teamOntimeCount: 3165,
teamOverDoneRate: 57.92,
teamTotalCount: 5464,
teamUndoneCount: 6,
},
{
shopDoneCount: 2066,
shopDoneRate: 100,
shopId: "4adbdf10-3cce-ac8a-4abf-104bc12f882a",
shopName: "生产技术科",
shopOntimeCount: 1969,
shopOverDoneRate: 95.3,
shopTotalCount: 2066,
teamDoneCount: 2066,
teamDoneRate: 100,
teamId: "91f40319-fd33-6b72-dfb5-b51b21abac54",
teamName: "生产班",
teamOntimeCount: 1969,
teamOverDoneRate: 95.3,
teamTotalCount: 2066,
teamUndoneCount: 0,
},
{
shopDoneCount: 2253,
shopDoneRate: 99.96,
shopId: "a144c298-17ef-e105-5cb7-34991ca7b3c2",
shopName: "综合组",
shopOntimeCount: 1488,
shopOverDoneRate: 66.02,
shopTotalCount: 2254,
teamDoneCount: 2253,
teamDoneRate: 99.96,
teamId: "9e171704-f1af-9de4-0287-476216371c16",
teamName: "综合班组",
teamOntimeCount: 1488,
teamOverDoneRate: 66.02,
teamTotalCount: 2254,
teamUndoneCount: 1,
},
],
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.chartReal();
};
chartReal = () => {
let month = [];
let company = [
100, 100, 100, 99.69, 99.86, 100, 99.94, 100, 100, 99.57, 99.56, 99.17,
];
let department = [
68.79, 58.8, 56.28, 69.59, 69.03, 71.58, 71.08, 75.05, 76.26, 77.09,
77.84, 80.51,
];
for (let i = 0; i < 12; i++) {
month.unshift(getSixMonth(-i, "-", ""));
}
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",
},
],
});
};
//矿山
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月）
*/}
{/*
*/}