467 lines
13 KiB
JavaScript
467 lines
13 KiB
JavaScript
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) => (
|
||
<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 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 +
|
||
"</br>" +
|
||
params[1].marker +
|
||
params[1].seriesName +
|
||
" : " +
|
||
params[1].value + "%" +
|
||
"</br>" +
|
||
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 (
|
||
<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
|
||
? "选矿厂"
|
||
: this.props.data.mineType == 30
|
||
? "露天矿"
|
||
: this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS}
|
||
工作票完成详情（近12月）
|
||
</h1> */}
|
||
<Row gutter={10} style={{ marginTop: "44px" }}>
|
||
<Col span={1}> </Col>
|
||
<Col span={22}>
|
||
<div
|
||
// className="dashboard-div-style"
|
||
style={{
|
||
// borderRadius: "10px"
|
||
// backgroundColor: "white",
|
||
// boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
|
||
border: "1px solid rgb(232,232,232)"
|
||
}}
|
||
>
|
||
<div
|
||
id="chartWork"
|
||
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="dashboard-div-style"
|
||
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 }))(BI002HomeDetail);
|