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