678 lines
19 KiB
JavaScript
678 lines
19 KiB
JavaScript
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",
|
||
onCell: () => this.renderSpeedColumn(),
|
||
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) => (
|
||
<Progress
|
||
percent={record.teamDoneRate}
|
||
status="active"
|
||
strokeColor={{ from: "#108ee9", to: "#108ee9" }}
|
||
/>
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
),
|
||
},
|
||
{
|
||
width: "120px",
|
||
title: "及时完成率",
|
||
dataIndex: "teamOverDoneRate",
|
||
render: (text, record) => (
|
||
<Progress
|
||
percent={record.teamOverDoneRate}
|
||
status="active"
|
||
strokeColor={{
|
||
from: "rgba(82, 196, 26)",
|
||
to: "rgba(82, 196, 26)",
|
||
}}
|
||
/>
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
),
|
||
},
|
||
],
|
||
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 + "%" + "<br />";
|
||
});
|
||
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 +
|
||
"%" +
|
||
"<br />";
|
||
});
|
||
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 (
|
||
<div
|
||
style={{
|
||
backgroundColor: "white",
|
||
width: "1200px",
|
||
top: "0",
|
||
bottom: "0",
|
||
left: "0",
|
||
right: "0",
|
||
margin: "auto",
|
||
borderStyle: "solid",
|
||
borderColor: "#ccc",
|
||
borderWidth: "1px",
|
||
}}
|
||
>
|
||
{/* <h1 style={{ textAlign: "center", marginTop: '30px', fontWeight: 'bold' }}>{this.props.data.mineType == 20?"尾矿库":this.props.data.mineType == 10?"选矿厂":"露天矿"}班组活动任务完成详情（近12月）</h1> */}
|
||
<Row gutter={10} style={{ marginTop: "44px" }}>
|
||
<Col span={1}> </Col>
|
||
<Col span={22}>
|
||
<div
|
||
// className="dashboard-div-style"
|
||
style={{
|
||
border: "1px solid rgb(232,232,232)",
|
||
}}
|
||
>
|
||
<div
|
||
id="chartClass"
|
||
style={{ width: "100%", height: "350px" }}
|
||
></div>
|
||
</div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
{/* <hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr> */}
|
||
<Row gutter={10} style={{ marginTop: "14px" }}>
|
||
<Col span={1}></Col>
|
||
<Col span={22} style={{ height: "100%" }}>
|
||
<div
|
||
className="bi001-table"
|
||
style={
|
||
{
|
||
// border: "1px solid rgb(232,232,232)"
|
||
}
|
||
}
|
||
>
|
||
<Table
|
||
dataSource={this.state.retData}
|
||
columns={this.state.columns1}
|
||
pagination={false} //this.paginationConfig
|
||
bordered
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
rowKey="1"
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
<br />
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(BI001HomeDetail);
|