779 lines
24 KiB
JavaScript
779 lines
24 KiB
JavaScript
import React from "react";
|
||
import { connect } from "dva";
|
||
import { initFilter, extendRule, extendOrder } from "../../../utils/common";
|
||
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
|
||
import {
|
||
Table,
|
||
Button,
|
||
Input,
|
||
Row,
|
||
Col,
|
||
Modal,
|
||
Icon,
|
||
Progress,
|
||
Divider,
|
||
} from "antd";
|
||
import echarts from "echarts";
|
||
import styles from "../HI/StepForm1.css";
|
||
import moment from "moment";
|
||
import { T } from "antd/lib/upload/utils";
|
||
import FormPage from "../../FormPage";
|
||
class BI011FormRunAnalysis extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
visible: false,
|
||
loading: false,
|
||
noticeTitle: "",
|
||
tmpData: {},
|
||
tableKey: "1",
|
||
startTime: moment(new Date().setDate(1))
|
||
.subtract(5, "months")
|
||
.format("YYYY-MM-DD"),
|
||
endTime: moment(new Date()).format("YYYY-MM-DD"),
|
||
timeType: 5,
|
||
totalCount: 0,
|
||
finishCount: 0,
|
||
overtimeCount: 0,
|
||
unfinishCount: 0,
|
||
dtotalCount: 0,
|
||
dfinishCount: 0,
|
||
dovertimeCount: 0,
|
||
dunfinishCount: 0,
|
||
inputText: this.props.login.user.NAME,
|
||
drate: "0%",
|
||
dnormalRate: "0%",
|
||
weekColor: "black",
|
||
monthColor: "orange",
|
||
threeMonthColor: "black",
|
||
sixMonthColor: "black",
|
||
yearColor: "black",
|
||
retData: [],
|
||
groupData: [],
|
||
detailData: [],
|
||
newData: [],
|
||
detailDataH: [],
|
||
displayHr: "none",
|
||
displaydetail: "none",
|
||
columns: [
|
||
{
|
||
width: "30px",
|
||
title: "月份",
|
||
dataIndex: "MONTHStr",
|
||
key: "MONTHStr",
|
||
// render: (text, record) => (
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
// ),
|
||
},
|
||
{
|
||
width: "30px",
|
||
title: "任务数",
|
||
dataIndex: "TOTAL_QTY",
|
||
key: "TOTAL_QTY",
|
||
},
|
||
{
|
||
width: "30px",
|
||
title: "完成率",
|
||
dataIndex: "FINISH_RATE",
|
||
key: "FINISH_RATE",
|
||
render: (text, record) => (
|
||
<Progress percent={record.FINISH_RATE.split("%")[0]} />
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
),
|
||
},
|
||
{
|
||
width: "30px",
|
||
title: "及时完成率",
|
||
dataIndex: "NORMAL_FINISH_RATE",
|
||
key: "NORMAL_FINISH_RATE",
|
||
render: (text, record) => (
|
||
<Progress
|
||
percent={record.NORMAL_FINISH_RATE.split("%")[0]}
|
||
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>
|
||
),
|
||
},
|
||
],
|
||
detailColumns: [
|
||
// {
|
||
// width: "55px",
|
||
// title: '序号',
|
||
// dataIndex: 'NUM',
|
||
// key: 'NUM',
|
||
// },
|
||
{
|
||
width: "100px",
|
||
title: "模块名称",
|
||
dataIndex: "MOUDLE_NAME",
|
||
key: "MOUDLE_NAME",
|
||
// render: (text, record) => (
|
||
// <span>
|
||
// <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
|
||
// </span>
|
||
// ),
|
||
},
|
||
{
|
||
width: "60px",
|
||
title: "总任务数",
|
||
dataIndex: "TOTAL_QTY",
|
||
key: "TOTAL_QTY",
|
||
},
|
||
{
|
||
width: "60px",
|
||
title: "正常已办",
|
||
dataIndex: "FINISH_QTY",
|
||
key: "FINISH_QTY",
|
||
},
|
||
{
|
||
width: "60px",
|
||
title: "超时已办",
|
||
dataIndex: "OVER_FINISH_QTY",
|
||
key: "OVER_FINISH_QTY",
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: "未完成",
|
||
dataIndex: "UNFINISH_QTY",
|
||
key: "UNFINISH_QTY",
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: "完成率",
|
||
dataIndex: "FINISH_RATE",
|
||
key: "FINISH_RATE",
|
||
},
|
||
{
|
||
width: "70px",
|
||
title: "及时完成率",
|
||
dataIndex: "NORMAL_FINISH_RATE",
|
||
key: "NORMAL_FINISH_RATE",
|
||
render: (text, record) => (
|
||
<span>
|
||
{record.NORMAL_FINISH_RATE}
|
||
{"%"}
|
||
</span>
|
||
),
|
||
},
|
||
],
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.loadData();
|
||
}
|
||
showEditModal = (departmentId, departmentName) => {
|
||
const newtmpData = {
|
||
data: {
|
||
id: departmentId,
|
||
name: departmentName,
|
||
onCancel: this.handleCancel,
|
||
tableKey: this.state.tableKey,
|
||
homeReload: true,
|
||
},
|
||
formCode: "BI007_RUNANALYSIS",
|
||
};
|
||
this.setState(
|
||
{
|
||
id: departmentId,
|
||
name: departmentName,
|
||
noticeTitle: departmentName + "安全生产标准化运行情况",
|
||
tmpData: newtmpData,
|
||
currActivatedMenu: "",
|
||
},
|
||
() =>
|
||
this.setState({
|
||
visible: true,
|
||
})
|
||
);
|
||
};
|
||
showFormModal = (mouldName) => {
|
||
const newtmpData = {
|
||
data: {
|
||
name: mouldName,
|
||
onCancel: this.handleCancel,
|
||
tableKey: this.state.tableKey,
|
||
homeReload: true,
|
||
},
|
||
formCode: "BI008_RUNANALYSIS",
|
||
};
|
||
this.setState(
|
||
{
|
||
name: mouldName,
|
||
noticeTitle: mouldName + "安全生产标准化运行情况",
|
||
tmpData: newtmpData,
|
||
currActivatedMenu: "",
|
||
},
|
||
() =>
|
||
this.setState({
|
||
visible: true,
|
||
})
|
||
);
|
||
};
|
||
// showEditModal = (dataId, formCode, TaskID, title, taskCode) => {
|
||
|
||
// const newtmpData = {
|
||
// data: {
|
||
// id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
|
||
// homeReload: true
|
||
// },
|
||
// formCode: formCode,
|
||
// }
|
||
// this.setState({
|
||
// noticeTitle: title,
|
||
// taskCode: taskCode,
|
||
// tmpData: newtmpData,
|
||
// currActivatedMenu: ''
|
||
// }, () => this.setState({
|
||
// visible: true
|
||
// }));
|
||
// }
|
||
|
||
//加载数据赋值
|
||
loadData = () => {
|
||
// this.ksRun();
|
||
this.getMould(this.props.login.user.NAME);
|
||
// this.getDepartment();
|
||
};
|
||
//矿山
|
||
ksRun = (data) => {
|
||
// let data = {
|
||
// "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
|
||
// {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月", "C_COUNT": 70, "D_COUNT": 60 },
|
||
// { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月", "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
|
||
// }
|
||
if (data) {
|
||
let month = [];
|
||
let company = [];
|
||
let department = [];
|
||
let color = [
|
||
"#0090FF",
|
||
"#36CE9E",
|
||
"#FFC005",
|
||
"#FF515A",
|
||
"#8B5CFF",
|
||
"#00CA69",
|
||
];
|
||
const hexToRgba = (hex, opacity) => {
|
||
let rgbaColor = "";
|
||
let reg = /^#[\da-f]{6}$/i;
|
||
if (reg.test(hex)) {
|
||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||
"0x" + hex.slice(3, 5)
|
||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||
}
|
||
return rgbaColor;
|
||
};
|
||
data.forEach((item) => {
|
||
month.push(item.MONTHStr);
|
||
company.push(item.FINISH_RATE);
|
||
department.push(item.NORMAL_FINISH_RATE);
|
||
});
|
||
let myChart = echarts.init(document.getElementById("ksRun"));
|
||
myChart.setOption({
|
||
color: color,
|
||
title: {
|
||
text: "任务及时完成率（近6个月）",
|
||
left: "center",
|
||
top: "2%",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter: function (params) {
|
||
let temp = "";
|
||
params.forEach((t) => {
|
||
temp =
|
||
temp + t.marker + t.seriesName + ":" + t.value + "%" + "<br />";
|
||
});
|
||
return temp;
|
||
},
|
||
},
|
||
grid: {
|
||
left: "10%",
|
||
right: "5%",
|
||
},
|
||
legend: {
|
||
left: "center",
|
||
align: "left",
|
||
bottom: "2%",
|
||
textStyle: {
|
||
color: "#000",
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: month,
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#333",
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#666",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
color: "#666",
|
||
fontSize: 12,
|
||
lineHeight: 40,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "#E9E9E9",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "完成率",
|
||
type: "line",
|
||
data: company,
|
||
smooth: true,
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[0],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[0], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: hexToRgba(color[0], 0.3),
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: hexToRgba(color[0], 0.1),
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: hexToRgba(color[0], 0.1),
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "及时完成率",
|
||
type: "line",
|
||
data: department,
|
||
smooth: true,
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[1],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[1], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: hexToRgba(color[1], 0.3),
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: hexToRgba(color[1], 0.1),
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: hexToRgba(color[1], 0.1),
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
});
|
||
}
|
||
};
|
||
getMould = (inputText) => {
|
||
this.setState({ loading: true });
|
||
var orgId = this.props.login ? this.props.login.OrgId : "";
|
||
let json = initFilter(
|
||
orgId,
|
||
inputText,
|
||
"",
|
||
"",
|
||
"",
|
||
this.state.startTime,
|
||
this.state.endTime
|
||
);
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
payload: json,
|
||
url: "BI/BIStatiscialAnalysisController/GetPersonAnalyze",
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
this.setState({
|
||
retData: ret.groupData,
|
||
totalCount: ret.TotalCount,
|
||
finishCount: ret.doneCount,
|
||
overtimeCount: ret.timeOverCount,
|
||
unfinishCount: ret.unfinishCount,
|
||
dovertimeCount: ret.timeOverWaitCount,
|
||
loading: false,
|
||
});
|
||
this.ksRun(ret.groupDataLine);
|
||
} else {
|
||
this.setState({
|
||
retData: [],
|
||
totalCount: 0,
|
||
finishCount: 0,
|
||
overtimeCount: 0,
|
||
unfinishCount: 0,
|
||
dovertimeCount: 0,
|
||
loading: false,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
closeModal = () => {
|
||
// 退出弹窗
|
||
this.clearData();
|
||
};
|
||
clearData = () => {
|
||
let newtmpData = { ...this.state.tmpData };
|
||
newtmpData["data"].id = "";
|
||
newtmpData["data"].homeReload = false;
|
||
newtmpData.formCode = "";
|
||
this.setState({
|
||
visible: false,
|
||
tmpData: newtmpData,
|
||
});
|
||
};
|
||
handleCancel = () => {
|
||
// 退出弹窗
|
||
this.clearData();
|
||
};
|
||
handleSearch = (evt) => {
|
||
const { value } = evt.target;
|
||
this.setState({ inputText: value ? value : this.props.login.user.NAME });
|
||
};
|
||
render() {
|
||
const {
|
||
startTime,
|
||
endTime,
|
||
finishCount,
|
||
overtimeCount,
|
||
totalCount,
|
||
unfinishCount,
|
||
inputText,
|
||
weekColor,
|
||
monthColor,
|
||
threeMonthColor,
|
||
sixMonthColor,
|
||
yearColor,
|
||
dovertimeCount,
|
||
} = this.state;
|
||
let allFinishRate =
|
||
totalCount === 0 || totalCount == undefined
|
||
? 0
|
||
: (((finishCount + overtimeCount) / totalCount) * 100).toFixed(1);
|
||
let finishRate =
|
||
totalCount === 0 || totalCount == undefined
|
||
? 0
|
||
: ((finishCount / totalCount) * 100).toFixed(1);
|
||
return (
|
||
<div>
|
||
{/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
|
||
<div
|
||
style={{
|
||
backgroundColor: "white",
|
||
width: "1200px",
|
||
top: "0",
|
||
bottom: "0",
|
||
left: "0",
|
||
right: "0",
|
||
margin: "auto",
|
||
borderStyle: "solid",
|
||
borderColor: "#ccc",
|
||
borderWidth: "1px",
|
||
}}
|
||
>
|
||
<Modal
|
||
visible={this.state.visible}
|
||
title={this.state.noticeTitle}
|
||
maskClosable={false}
|
||
onCancel={this.handleCancel}
|
||
footer={null}
|
||
className="antd-modal-fullscreen"
|
||
closeModal={this.closeModal}
|
||
// forceRender={true}
|
||
>
|
||
<FormPage {...this.state.tmpData} />
|
||
</Modal>
|
||
<h1
|
||
style={{
|
||
textAlign: "center",
|
||
verticalAlign: "Bottom",
|
||
marginTop: "20px",
|
||
marginBottom: "40px",
|
||
fontWeight: "bold",
|
||
}}
|
||
>
|
||
任务完成情况统计分析(个人)
|
||
</h1>
|
||
<Row
|
||
style={{
|
||
fontSize: "15px",
|
||
marginTop: "10px",
|
||
// marginLeft: "30px",
|
||
margin: "0px 100px",
|
||
height: "35px",
|
||
}}
|
||
>
|
||
<span style={{ marginLeft: "10px", width: "100px" }}>
|
||
<b>姓名：</b>
|
||
{inputText}
|
||
</span>
|
||
<span style={{ marginLeft: "30px", width: "100px" }}>
|
||
<b>统计区间：</b>
|
||
{startTime} - {endTime}
|
||
</span>
|
||
<span style={{ float: "right", marginRight: "30px" }}>
|
||
<Input
|
||
onChange={this.handleSearch}
|
||
style={{ width: "150px", marginRight: "10px" }}
|
||
defaultValue={this.props.login.user.NAME}
|
||
></Input>
|
||
<Button
|
||
onClick={() => this.getMould(inputText)}
|
||
style={{ width: "80px" }}
|
||
type="primary"
|
||
>
|
||
查询
|
||
</Button>
|
||
</span>
|
||
</Row>
|
||
|
||
{/* <hr style={{ width: "98%" }}></hr> */}
|
||
<br></br>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
marginTop: "10px",
|
||
// marginBottom: "20px",
|
||
}}
|
||
>
|
||
<div className={styles.menuPie}>
|
||
<li>
|
||
总任务数
|
||
<br />
|
||
<div className={styles.dataStyle}>
|
||
{totalCount ? totalCount : 0}
|
||
</div>
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
待办数
|
||
<br />
|
||
<div className={styles.dataStyle1}>
|
||
{unfinishCount ? unfinishCount : 0}
|
||
</div>
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
超时待办数
|
||
<br />
|
||
<div className={styles.dataStyle3}>
|
||
{dovertimeCount ? dovertimeCount : 0}
|
||
</div>
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
已办事项
|
||
<br />
|
||
<div className={styles.dataStyle2}>
|
||
{finishCount + overtimeCount
|
||
? finishCount + overtimeCount
|
||
: 0}
|
||
</div>
|
||
{/* <a href="#" style={{ color: "red" }}> */}
|
||
{/* </a> */}
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
完成率
|
||
<br />
|
||
<div className={styles.dataStyle3}>
|
||
{allFinishRate ? allFinishRate : 0}%
|
||
</div>
|
||
{/* <a href="#" style={{ color: "red" }}> */}
|
||
{/* </a> */}
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
及时完成率
|
||
<br />
|
||
<div className={styles.dataStyle3}>
|
||
{finishRate ? finishRate : 0}%
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
{/* <span style={{width:"800px",marginLeft:"30px",marginBottom:"20px"}}>
|
||
<Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'black'}}>{totalCount?totalCount:0}</span></Button>
|
||
<Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'red'}}>{unfinishCount?unfinishCount:0}</span></Button>
|
||
<Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{dovertimeCount?dovertimeCount:0}</span></Button>
|
||
<Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>已办事项<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'green'}}>{(finishCount+overtimeCount)?(finishCount+overtimeCount):0}</span></Button>
|
||
<Button style={{width:"130px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{allFinishRate?allFinishRate:0}%</span></Button>
|
||
<Button style={{width:"140px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{finishRate?finishRate:0}%</span></Button>
|
||
</span> */}
|
||
{/* <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr> */}
|
||
<Row
|
||
style={{
|
||
marginTop: "20px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<Col
|
||
span={24}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
width: "1100px",
|
||
}}
|
||
>
|
||
{/* <h2 style={{textAlign:'center',fontWeight:'bold'}}>任务及时完成率（近12个月）</h2> */}
|
||
<div
|
||
id="ksRun"
|
||
style={{
|
||
width: "100%",
|
||
height: "400px",
|
||
backgroundColor: "white",
|
||
borderStyle: "solid",
|
||
borderColor: "#ccc",
|
||
borderWidth: "1px",
|
||
}}
|
||
></div>
|
||
{/* <br></br> */}
|
||
{/* <span style={{ width: "100%" }}>
|
||
* 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
|
||
<br></br>
|
||
<br></br>
|
||
</span> */}
|
||
</Col>
|
||
</Row>
|
||
<Row
|
||
style={{
|
||
marginTop: "20px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<Col
|
||
span={24}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
width: "1100px",
|
||
}}
|
||
>
|
||
{/* <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 部门统计分析</h2> */}
|
||
<Table
|
||
style={{
|
||
width: "100%",
|
||
// marginLeft: "30px",
|
||
textAlign: "center",
|
||
marginBottom: "30px",
|
||
}}
|
||
// scroll={{ y: 400 }}
|
||
dataSource={this.state.retData}
|
||
columns={this.state.columns}
|
||
pagination={false}
|
||
loading={false}
|
||
size="small"
|
||
bordered
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default connect(({ login, app, loading }) => ({ login, app, loading }))(
|
||
BI011FormRunAnalysis
|
||
);
|