405 lines
11 KiB
JavaScript
405 lines
11 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,
|
|||
|
|
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: [],
|
|||
|
|
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/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);
|