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);
|