1435 lines
50 KiB
JavaScript
1435 lines
50 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,
|
|||
|
|
Menu,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Modal,
|
|||
|
|
Icon,
|
|||
|
|
Divider,
|
|||
|
|
Alert,
|
|||
|
|
Dropdown,
|
|||
|
|
Spin,
|
|||
|
|
Empty,
|
|||
|
|
} from "antd";
|
|||
|
|
import echarts from "echarts";
|
|||
|
|
import styles from "../HI/StepForm.css";
|
|||
|
|
import moment from "moment";
|
|||
|
|
import { T } from "antd/lib/upload/utils";
|
|||
|
|
import FormPage from "../../FormPage";
|
|||
|
|
import SubMenu from "antd/lib/menu/SubMenu";
|
|||
|
|
import MenuItem from "antd/lib/menu/MenuItem";
|
|||
|
|
|
|||
|
|
class BI021DepartmentAnalysis extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
totalAnalysis: false,
|
|||
|
|
totalAnalysisData: [],
|
|||
|
|
departmentAnalysisData: [],
|
|||
|
|
menucode: "",
|
|||
|
|
empty: false,
|
|||
|
|
emptyAsc: false,
|
|||
|
|
emptyDesc: false,
|
|||
|
|
columns: [
|
|||
|
|
{
|
|||
|
|
width: "100px",
|
|||
|
|
title: "任务名称",
|
|||
|
|
dataIndex: "NOTICE_TITLE",
|
|||
|
|
key: "NOTICE_TITLE",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
width: "50px",
|
|||
|
|
title: "代办人",
|
|||
|
|
dataIndex: "USER_NAME",
|
|||
|
|
key: "USER_NAME",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
width: "50px",
|
|||
|
|
title: "开始时间",
|
|||
|
|
dataIndex: "TASK_STARTDT",
|
|||
|
|
key: "TASK_STARTDT",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
width: "50px",
|
|||
|
|
title: "结束时间",
|
|||
|
|
dataIndex: "TASK_ENDDT",
|
|||
|
|
key: "TASK_ENDDT",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
menuorg: {},
|
|||
|
|
timePick: "2023",
|
|||
|
|
timeArea: ["2022", "2023", "2024"],
|
|||
|
|
dropVisible: false,
|
|||
|
|
chooseId: "",
|
|||
|
|
loading: false,
|
|||
|
|
loadAll: false,
|
|||
|
|
userCount: 0,
|
|||
|
|
slectIndex: "",
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
// this.loadData();
|
|||
|
|
this.loadTree();
|
|||
|
|
this.loadChart();
|
|||
|
|
this.loadAsc();
|
|||
|
|
this.loadDesc();
|
|||
|
|
this.setState({
|
|||
|
|
timePick: new Date().getFullYear(),
|
|||
|
|
timeArea: [
|
|||
|
|
new Date().getFullYear() - 2,
|
|||
|
|
new Date().getFullYear() - 1,
|
|||
|
|
new Date().getFullYear(),
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
showModalVisi = () => {
|
|||
|
|
this.setState({
|
|||
|
|
totalAnalysis: true,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
loadTree = () => {
|
|||
|
|
let json = initFilter(this.props.login.OrgId);
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: "app/getDataByPost",
|
|||
|
|
url: "BI/BIStatiscialAnalysisController/GetDepartmentEntities",
|
|||
|
|
payload: json,
|
|||
|
|
onlyData: false,
|
|||
|
|
onComplete: (data) => {
|
|||
|
|
if (data && data.IsSuccessful) {
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
menuorg: data.Data,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.state.menuorg.isUp = true;
|
|||
|
|
this.state.menuorg.deptInfos.map((item, index) => {
|
|||
|
|
item.isUp = false;
|
|||
|
|
if (item.deptInfos && item.deptInfos.length > 0) {
|
|||
|
|
item.deptInfos.map((item1, index1) => {
|
|||
|
|
item1.isUp = false;
|
|||
|
|
if (item1.deptInfos && item1.deptInfos.length > 0) {
|
|||
|
|
item1.deptInfos.map((item2, index2) => {
|
|||
|
|
item2.isUp = false;
|
|||
|
|
if (item2.deptInfos && item2.deptInfos.length > 0) {
|
|||
|
|
item2.deptInfos.map((item3, index3) => {
|
|||
|
|
item3.isUp = false;
|
|||
|
|
if (item3.deptInfos && item3.deptInfos.length > 0) {
|
|||
|
|
item3.deptInfos.map((item4, index4) => {
|
|||
|
|
item4.isUp = false;
|
|||
|
|
if (
|
|||
|
|
item4.deptInfos &&
|
|||
|
|
item4.deptInfos.length > 0
|
|||
|
|
) {
|
|||
|
|
item4.deptInfos.map((item5, index5) => {
|
|||
|
|
item5.isUp = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
menucode: this.state.menuorg.departmentName,
|
|||
|
|
chooseId: this.state.menuorg.departmentId,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.loadData();
|
|||
|
|
this.clickTab(this.state.menuorg.departmentId);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
loadData = () => {
|
|||
|
|
this.setState({
|
|||
|
|
loading: true,
|
|||
|
|
});
|
|||
|
|
let json = initFilter(this.props.login.OrgId);
|
|||
|
|
json.Keyword = this.state.chooseId;
|
|||
|
|
json.Parameter1 = this.state.timePick;
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: "app/getDataByPost",
|
|||
|
|
url: "BI/BIStatiscialAnalysisController/GetDepartmentAnalysis",
|
|||
|
|
payload: json,
|
|||
|
|
onlyData: false,
|
|||
|
|
onComplete: (data) => {
|
|||
|
|
this.setState({
|
|||
|
|
loading: false,
|
|||
|
|
});
|
|||
|
|
if (data && data.IsSuccessful) {
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
totalAnalysisData: data.Data.UnfinishData,
|
|||
|
|
departmentAnalysisData: data.Data,
|
|||
|
|
loadAll: data.Data.UserCount > 20 ? false : true,
|
|||
|
|
userCount: data.Data.UserCount,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.loadChart();
|
|||
|
|
if (data.Data.UserCount >= 20) {
|
|||
|
|
this.loadAsc();
|
|||
|
|
this.loadDesc();
|
|||
|
|
} else {
|
|||
|
|
this.loadAsc();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
loadChart = () => {
|
|||
|
|
let xData = [];
|
|||
|
|
let sData1 = [];
|
|||
|
|
let sData2 = [];
|
|||
|
|
if (
|
|||
|
|
this.state.departmentAnalysisData.LineChart &&
|
|||
|
|
this.state.departmentAnalysisData.LineChart.length > 0
|
|||
|
|
) {
|
|||
|
|
this.state.departmentAnalysisData.LineChart.map((item, index) => {
|
|||
|
|
xData.push(item.month);
|
|||
|
|
sData1.push(Number(item.teamDoneRate).toFixed(2));
|
|||
|
|
sData2.push(Number(item.teamOverDoneRate).toFixed(2));
|
|||
|
|
});
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
empty: false,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.initChart(xData, sData1, sData2);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
this.setState({
|
|||
|
|
empty: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
initChart = (xData, sData1, sData2) => {
|
|||
|
|
let trendYears = document.getElementById("trendYear");
|
|||
|
|
if (trendYears) {
|
|||
|
|
document
|
|||
|
|
.getElementById("trendYear")
|
|||
|
|
.removeAttribute("_echarts_instance_");
|
|||
|
|
let myChart = echarts.init(trendYears);
|
|||
|
|
myChart.setOption(
|
|||
|
|
{
|
|||
|
|
title: {
|
|||
|
|
text: "完成率走势图",
|
|||
|
|
left: "center",
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
formatter: (params) => {
|
|||
|
|
return (
|
|||
|
|
params[0].name +
|
|||
|
|
"<br>" +
|
|||
|
|
params[0].marker +
|
|||
|
|
" " +
|
|||
|
|
params[0].seriesName +
|
|||
|
|
": " +
|
|||
|
|
params[0].data +
|
|||
|
|
" %" +
|
|||
|
|
"<br>" +
|
|||
|
|
params[1].marker +
|
|||
|
|
" " +
|
|||
|
|
params[1].seriesName +
|
|||
|
|
": " +
|
|||
|
|
params[1].data +
|
|||
|
|
" %" +
|
|||
|
|
"<br>"
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
containLabel: true,
|
|||
|
|
left: "2%",
|
|||
|
|
right: "3%",
|
|||
|
|
bottom: 0,
|
|||
|
|
top: "10%",
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
boundaryGap: false, //坐标轴两边留白
|
|||
|
|
data: xData,
|
|||
|
|
axisLabel: {
|
|||
|
|
//坐标轴刻度标签的相关设置。
|
|||
|
|
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
|
|||
|
|
// margin:15,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#1B253A",
|
|||
|
|
fontStyle: "normal",
|
|||
|
|
fontFamily: "微软雅黑",
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//rotate:50,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
//坐标轴刻度相关设置。
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
//坐标轴轴线相关设置
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#E5E9ED",
|
|||
|
|
// opacity:0.2
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
//坐标轴在 grid 区域中的分隔线。
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#E5E9ED",
|
|||
|
|
// opacity:0.1
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: "value",
|
|||
|
|
splitNumber: 5,
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#a8aab0",
|
|||
|
|
fontStyle: "normal",
|
|||
|
|
fontFamily: "微软雅黑",
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
formatter: "{value}%",
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#E5E9ED",
|
|||
|
|
// opacity:0.1
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "完成率",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#3A84FF",
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#3A84FF",
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgba(58,132,255,0)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(58,132,255,0.35)",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: sData1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "及时完成率",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#FA5071",
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#FA5071",
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgba(236,28,36,0)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(236,28,36,0.35)",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: sData2,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
true
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
loadAsc = () => {
|
|||
|
|
let xData = [];
|
|||
|
|
let sData1 = [];
|
|||
|
|
if (
|
|||
|
|
this.state.departmentAnalysisData.BarAsc &&
|
|||
|
|
this.state.departmentAnalysisData.BarAsc.length > 0
|
|||
|
|
) {
|
|||
|
|
this.state.departmentAnalysisData.BarAsc.map((item, index) => {
|
|||
|
|
xData.push(item.name);
|
|||
|
|
sData1.push(Number(item.teamOverDoneRate).toFixed(2));
|
|||
|
|
});
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
emptyAsc: false,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.loadCompleteAfter(xData, sData1);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
this.setState({
|
|||
|
|
emptyAsc: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
loadCompleteAfter = (xData, sData1) => {
|
|||
|
|
let completeAfters = document.getElementById("completeAfter");
|
|||
|
|
if (completeAfters) {
|
|||
|
|
document
|
|||
|
|
.getElementById("completeAfter")
|
|||
|
|
.removeAttribute("_echarts_instance_");
|
|||
|
|
let myChart = echarts.init(completeAfters);
|
|||
|
|
myChart.setOption(
|
|||
|
|
{
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.15)",
|
|||
|
|
// width: '0.5'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
formatter: function (param) {
|
|||
|
|
return (
|
|||
|
|
param[0].name +
|
|||
|
|
"<br>" +
|
|||
|
|
param[0].marker +
|
|||
|
|
" " +
|
|||
|
|
param[0].seriesName +
|
|||
|
|
"：" +
|
|||
|
|
param[0].value +
|
|||
|
|
"%"
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
grid: {
|
|||
|
|
top: "2%",
|
|||
|
|
bottom: -15,
|
|||
|
|
right: "5%",
|
|||
|
|
left: "5%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
triggerEvent: true,
|
|||
|
|
show: true,
|
|||
|
|
inverse: true,
|
|||
|
|
data: xData,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
color: "#666",
|
|||
|
|
align: "right",
|
|||
|
|
margin: 5,
|
|||
|
|
fontSize: 13,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
triggerEvent: true,
|
|||
|
|
show: true,
|
|||
|
|
inverse: true,
|
|||
|
|
data: sData1,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
color: "#666",
|
|||
|
|
align: "left",
|
|||
|
|
margin: 20,
|
|||
|
|
fontSize: 12,
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return value + "%";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "及时完成率",
|
|||
|
|
type: "bar",
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
zlevel: 1,
|
|||
|
|
data: sData1,
|
|||
|
|
barWidth: 10,
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: "#EAF6FE",
|
|||
|
|
barBorderRadius: 30,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#1990FF",
|
|||
|
|
barBorderRadius: 30,
|
|||
|
|
},
|
|||
|
|
formatter: "{value}%",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
true
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
loadDesc = () => {
|
|||
|
|
let xData = [];
|
|||
|
|
let sData1 = [];
|
|||
|
|
if (
|
|||
|
|
this.state.departmentAnalysisData.BarDesc &&
|
|||
|
|
this.state.departmentAnalysisData.BarDesc.length > 0
|
|||
|
|
) {
|
|||
|
|
this.state.departmentAnalysisData.BarDesc.map((item, index) => {
|
|||
|
|
xData.push(item.name);
|
|||
|
|
sData1.push(Number(item.teamOverDoneRate).toFixed(2));
|
|||
|
|
});
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
emptyDesc: false,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.loadCompleteBefore(xData, sData1);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
this.setState({
|
|||
|
|
emptyDesc: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
loadCompleteBefore = (xData, sData1) => {
|
|||
|
|
let completeBefores = document.getElementById("completeBefore");
|
|||
|
|
if (completeBefores) {
|
|||
|
|
document
|
|||
|
|
.getElementById("completeBefore")
|
|||
|
|
.removeAttribute("_echarts_instance_");
|
|||
|
|
let myChart = echarts.init(completeBefores);
|
|||
|
|
myChart.setOption(
|
|||
|
|
{
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.15)",
|
|||
|
|
// width: '0.5'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
formatter: function (param) {
|
|||
|
|
return (
|
|||
|
|
param[0].name +
|
|||
|
|
"<br>" +
|
|||
|
|
param[0].marker +
|
|||
|
|
" " +
|
|||
|
|
param[0].seriesName +
|
|||
|
|
"：" +
|
|||
|
|
param[0].value +
|
|||
|
|
"%"
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: "2%",
|
|||
|
|
bottom: -15,
|
|||
|
|
right: "5%",
|
|||
|
|
left: "5%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
triggerEvent: true,
|
|||
|
|
show: true,
|
|||
|
|
inverse: true,
|
|||
|
|
data: xData,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
// color: "#666",
|
|||
|
|
align: "right",
|
|||
|
|
margin: 5,
|
|||
|
|
fontSize: 13,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
triggerEvent: true,
|
|||
|
|
show: true,
|
|||
|
|
inverse: true,
|
|||
|
|
data: sData1,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
color: "#666",
|
|||
|
|
align: "left",
|
|||
|
|
margin: 20,
|
|||
|
|
fontSize: 12,
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return value + "%";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "及时完成率",
|
|||
|
|
type: "bar",
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
zlevel: 1,
|
|||
|
|
data: sData1,
|
|||
|
|
barWidth: 10,
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: "#EAF6FE",
|
|||
|
|
barBorderRadius: 30,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#1990FF",
|
|||
|
|
barBorderRadius: 30,
|
|||
|
|
},
|
|||
|
|
formatter: "{value}%",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
true
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
chooseName = (e, i) => {
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
menucode: e,
|
|||
|
|
chooseId: i,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.loadData();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
oneTap = () => {
|
|||
|
|
this.state.menuorg.isUp = !this.state.menuorg.isUp;
|
|||
|
|
this.setState({
|
|||
|
|
menuorg: this.state.menuorg,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
twoTap = (itemid) => {
|
|||
|
|
this.state.menuorg.deptInfos &&
|
|||
|
|
this.state.menuorg.deptInfos.map((item) => {
|
|||
|
|
if (item.departmentId == itemid) {
|
|||
|
|
item.isUp = !item.isUp;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.setState({
|
|||
|
|
menuorg: this.state.menuorg,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
threeTap = (itemid) => {
|
|||
|
|
this.state.menuorg.deptInfos &&
|
|||
|
|
this.state.menuorg.deptInfos.map((item) => {
|
|||
|
|
item.deptInfos &&
|
|||
|
|
item.deptInfos.map((item1) => {
|
|||
|
|
if (item1.departmentId == itemid) {
|
|||
|
|
item1.isUp = !item1.isUp;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.setState({
|
|||
|
|
menuorg: this.state.menuorg,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
handleClickTime = (e) => {
|
|||
|
|
this.setState(
|
|||
|
|
{
|
|||
|
|
timePick: e.item.props.children,
|
|||
|
|
dropVisible: !this.state.dropVisible,
|
|||
|
|
},
|
|||
|
|
() => {
|
|||
|
|
this.loadData();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
changeVisible = () => {
|
|||
|
|
this.setState({
|
|||
|
|
dropVisible: !this.state.dropVisible,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
clearTotalAnalysisData = () => {
|
|||
|
|
this.setState({
|
|||
|
|
totalAnalysis: false,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
clickTab = (index) => {
|
|||
|
|
this.state.slectIndex = index;
|
|||
|
|
};
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
{/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
|
|||
|
|
<Spin spinning={this.state.loading} delay={500} className={styles.wrapperSpin}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
width: "1200px",
|
|||
|
|
height: "950px",
|
|||
|
|
top: "0",
|
|||
|
|
bottom: "0",
|
|||
|
|
left: "0",
|
|||
|
|
right: "0",
|
|||
|
|
margin: "auto",
|
|||
|
|
borderStyle: "solid",
|
|||
|
|
borderColor: "#ccc",
|
|||
|
|
borderWidth: "1px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Modal
|
|||
|
|
visible={this.state.totalAnalysis}
|
|||
|
|
title="未完成清单"
|
|||
|
|
maskClosable={false}
|
|||
|
|
onCancel={this.clearTotalAnalysisData}
|
|||
|
|
footer={null}
|
|||
|
|
// className="antd-modal-fullscreen"
|
|||
|
|
closeModal={this.clearTotalAnalysisData}
|
|||
|
|
width="900px"
|
|||
|
|
>
|
|||
|
|
<Table
|
|||
|
|
dataSource={this.state.totalAnalysisData}
|
|||
|
|
columns={this.state.columns}
|
|||
|
|
pagination={true}
|
|||
|
|
bordered
|
|||
|
|
loading={this.state.showLoading}
|
|||
|
|
size="small"
|
|||
|
|
/>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
<h1
|
|||
|
|
style={{
|
|||
|
|
textAlign: "center",
|
|||
|
|
marginTop: "30px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
// marginBottom:'20px'
|
|||
|
|
paddingBottom: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
组织任务完成情况统计
|
|||
|
|
</h1>
|
|||
|
|
<Row style={{ marginTop: "10px", padding: "0px 40px" }}>
|
|||
|
|
{/* <Col span={1}></Col> */}
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
// width: "256px",
|
|||
|
|
fontSize: "14px",
|
|||
|
|
color: "rgba(0,0,0,0.65)",
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
transition: "background 0.3s,width 0.2s",
|
|||
|
|
zoom: "1",
|
|||
|
|
cursor: "pointer",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
marginBottom: "20px",
|
|||
|
|
overflowY: "auto",
|
|||
|
|
height: "830px",
|
|||
|
|
borderRadius: "5px",
|
|||
|
|
// border: "1px solid #e8e8e8",
|
|||
|
|
boxShadow: "0 0px 4px rgba(0,0,0,0.15)",
|
|||
|
|
}}
|
|||
|
|
className={styles.scrolltyle}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
// paddingLeft: "24px",
|
|||
|
|
lineHeight: "30px",
|
|||
|
|
height: "35px",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
margin: "20px 0px 4px 0px",
|
|||
|
|
}}
|
|||
|
|
className={
|
|||
|
|
this.state.slectIndex == this.state.menuorg.departmentId
|
|||
|
|
? styles.slideMenuActive
|
|||
|
|
: styles.slideMenu
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={styles.slideMenuName}
|
|||
|
|
style={{ paddingLeft: "24px" }}
|
|||
|
|
onClick={() => {
|
|||
|
|
this.chooseName(
|
|||
|
|
this.state.menuorg.departmentName,
|
|||
|
|
this.state.menuorg.departmentId
|
|||
|
|
);
|
|||
|
|
this.clickTab(this.state.menuorg.departmentId);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.menuorg.departmentName}
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
onClick={() =>
|
|||
|
|
this.oneTap()
|
|||
|
|
}
|
|||
|
|
style={{ padding: "10px 16px" }}
|
|||
|
|
>
|
|||
|
|
{this.state.menuorg.isUp == false ? (
|
|||
|
|
<Icon type="down" style={{ fontSize: "10px" }}></Icon>
|
|||
|
|
) : (
|
|||
|
|
<Icon type="up" style={{ fontSize: "10px" }}></Icon>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{this.state.menuorg.isUp ? (
|
|||
|
|
<div>
|
|||
|
|
{this.state.menuorg.deptInfos &&
|
|||
|
|
this.state.menuorg.deptInfos.map((menu1, index1) => {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
lineHeight: "20px",
|
|||
|
|
height: "30px",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
margin: "4px 0px",
|
|||
|
|
}}
|
|||
|
|
className={
|
|||
|
|
this.state.slectIndex == menu1.departmentId
|
|||
|
|
? styles.slideMenuActive
|
|||
|
|
: styles.slideMenu
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={styles.slideMenuName}
|
|||
|
|
style={{ paddingLeft: "48px" }}
|
|||
|
|
onClick={() => {
|
|||
|
|
this.chooseName(
|
|||
|
|
menu1.departmentName,
|
|||
|
|
menu1.departmentId
|
|||
|
|
);
|
|||
|
|
this.clickTab(menu1.departmentId);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{menu1.departmentName}
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
onClick={() =>
|
|||
|
|
this.twoTap(menu1.departmentId)
|
|||
|
|
}
|
|||
|
|
style={{ padding: "10px 16px" }}
|
|||
|
|
>
|
|||
|
|
{menu1.deptInfos &&
|
|||
|
|
menu1.deptInfos.length > 0 ? (
|
|||
|
|
<div>
|
|||
|
|
{menu1.isUp == false ? (
|
|||
|
|
<Icon
|
|||
|
|
type="down"
|
|||
|
|
style={{ fontSize: "10px" }}
|
|||
|
|
></Icon>
|
|||
|
|
) : (
|
|||
|
|
<Icon
|
|||
|
|
type="up"
|
|||
|
|
style={{ fontSize: "10px" }}
|
|||
|
|
></Icon>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{menu1.isUp ? (
|
|||
|
|
<div>
|
|||
|
|
{menu1.deptInfos &&
|
|||
|
|
menu1.deptInfos.map((menu2, index2) => {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
lineHeight: "20px",
|
|||
|
|
height: "30px",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
margin: "4px 0px",
|
|||
|
|
}}
|
|||
|
|
className={
|
|||
|
|
this.state.slectIndex ==
|
|||
|
|
menu2.departmentId
|
|||
|
|
? styles.slideMenuActive
|
|||
|
|
: styles.slideMenu
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={styles.slideMenuName}
|
|||
|
|
style={{ paddingLeft: "72px" }}
|
|||
|
|
onClick={() => {
|
|||
|
|
this.chooseName(
|
|||
|
|
menu2.departmentName,
|
|||
|
|
menu2.departmentId
|
|||
|
|
);
|
|||
|
|
this.clickTab(
|
|||
|
|
menu2.departmentId
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{menu2.departmentName}
|
|||
|
|
</div>
|
|||
|
|
{menu2.deptInfos &&
|
|||
|
|
menu2.deptInfos.length > 0 ? (
|
|||
|
|
<div
|
|||
|
|
onClick={() =>
|
|||
|
|
this.threeTap(
|
|||
|
|
menu2.departmentId
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
style={{
|
|||
|
|
padding: "10px 16px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{menu2.deptInfos &&
|
|||
|
|
menu2.deptInfos.length > 0 ? (
|
|||
|
|
<div>
|
|||
|
|
{menu2.isUp == false ? (
|
|||
|
|
<Icon
|
|||
|
|
type="down"
|
|||
|
|
style={{
|
|||
|
|
fontSize: "10px",
|
|||
|
|
}}
|
|||
|
|
></Icon>
|
|||
|
|
) : (
|
|||
|
|
<Icon
|
|||
|
|
type="up"
|
|||
|
|
style={{
|
|||
|
|
fontSize: "10px",
|
|||
|
|
}}
|
|||
|
|
></Icon>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{menu2.isUp ? (
|
|||
|
|
<div>
|
|||
|
|
{menu2.deptInfos &&
|
|||
|
|
menu2.deptInfos.map(
|
|||
|
|
(menu3, index3) => {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
lineHeight:
|
|||
|
|
"20px",
|
|||
|
|
height: "30px",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems:
|
|||
|
|
"center",
|
|||
|
|
justifyContent:
|
|||
|
|
"space-between",
|
|||
|
|
margin: "4px 0px",
|
|||
|
|
}}
|
|||
|
|
className={
|
|||
|
|
this.state
|
|||
|
|
.slectIndex ==
|
|||
|
|
menu3.departmentId
|
|||
|
|
? styles.slideMenuActive
|
|||
|
|
: styles.slideMenu
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={
|
|||
|
|
styles.slideMenuName
|
|||
|
|
}
|
|||
|
|
style={{
|
|||
|
|
paddingLeft:
|
|||
|
|
"96px",
|
|||
|
|
}}
|
|||
|
|
onClick={() => {
|
|||
|
|
this.chooseName(
|
|||
|
|
menu3.departmentName,
|
|||
|
|
menu3.departmentId
|
|||
|
|
);
|
|||
|
|
this.clickTab(
|
|||
|
|
menu3.departmentId
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{
|
|||
|
|
menu3.departmentName
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={1}></Col>
|
|||
|
|
|
|||
|
|
<Col span={17}>
|
|||
|
|
<Row>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: "#e6f7ff",
|
|||
|
|
padding: "8px 15px",
|
|||
|
|
fontSize: "14px",
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "row",
|
|||
|
|
alignItems: "center",
|
|||
|
|
marginBottom: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ width: "50%" }}>
|
|||
|
|
当前选中组织：{this.state.menucode}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Dropdown
|
|||
|
|
visible={this.state.dropVisible}
|
|||
|
|
onVisibleChange={this.changeVisible}
|
|||
|
|
overlay={
|
|||
|
|
<Menu onClick={this.handleClickTime}>
|
|||
|
|
{this.state.timeArea.map((item) => (
|
|||
|
|
<Menu.Item key={item.key}>{item}</Menu.Item>
|
|||
|
|
))}
|
|||
|
|
</Menu>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "row",
|
|||
|
|
alignItems: "center",
|
|||
|
|
// backgroundColor: "rgb(246, 255, 237)",
|
|||
|
|
marginLeft: "40px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div> 当前选中年度：</div>
|
|||
|
|
<div style={{ padding: "0px 10px" }}>
|
|||
|
|
{this.state.timePick}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<Icon type="down" style={{ fontSize: "12px" }} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Dropdown>
|
|||
|
|
</div>
|
|||
|
|
</Row>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
overflowY: "auto",
|
|||
|
|
height: "780px",
|
|||
|
|
overflowX: "hidden",
|
|||
|
|
}}
|
|||
|
|
className={styles.scrolltyle}
|
|||
|
|
>
|
|||
|
|
<Row>
|
|||
|
|
<div className={styles.newPieOrg}>
|
|||
|
|
<li>
|
|||
|
|
<div className={styles.newPieIcon}>
|
|||
|
|
<Icon
|
|||
|
|
type="schedule"
|
|||
|
|
style={{ fontSize: "28px", color: "#309ae8" }}
|
|||
|
|
></Icon>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.newPieRig}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
color: "#000000",
|
|||
|
|
fontSize: "24px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.departmentAnalysisData.TotalCount
|
|||
|
|
? this.state.departmentAnalysisData.TotalCount
|
|||
|
|
: 0}
|
|||
|
|
</div>
|
|||
|
|
<div>任务总数</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
{/* <Divider type="vertical" className={styles.divider} /> */}
|
|||
|
|
<li
|
|||
|
|
onClick={this.showModalVisi}
|
|||
|
|
style={{ cursor: "pointer" }}
|
|||
|
|
>
|
|||
|
|
<div className={styles.newPieIcon}>
|
|||
|
|
<Icon
|
|||
|
|
type="issues-close"
|
|||
|
|
style={{ fontSize: "28px", color: "#309ae8" }}
|
|||
|
|
></Icon>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.newPieRig}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
color: "#cc0404",
|
|||
|
|
fontSize: "24px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.departmentAnalysisData.UnfinishCount
|
|||
|
|
? this.state.departmentAnalysisData.UnfinishCount
|
|||
|
|
: 0}
|
|||
|
|
</div>
|
|||
|
|
<div>未完成</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
{/* <Divider type="vertical" className={styles.divider} /> */}
|
|||
|
|
<li>
|
|||
|
|
<div className={styles.newPieIcon}>
|
|||
|
|
<Icon
|
|||
|
|
type="check-circle"
|
|||
|
|
style={{ fontSize: "28px", color: "#309ae8" }}
|
|||
|
|
></Icon>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.newPieRig}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
color: "#2177d5",
|
|||
|
|
fontSize: "24px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.departmentAnalysisData.FinishRate
|
|||
|
|
? Number(
|
|||
|
|
this.state.departmentAnalysisData.FinishRate
|
|||
|
|
).toFixed(2) + "%"
|
|||
|
|
: 0}
|
|||
|
|
</div>
|
|||
|
|
<div>完成率</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* <a href="#" style={{ color: "red" }}> */}
|
|||
|
|
{/* </a> */}
|
|||
|
|
</li>
|
|||
|
|
{/* <Divider type="vertical" className={styles.divider} /> */}
|
|||
|
|
<li>
|
|||
|
|
<div className={styles.newPieIcon}>
|
|||
|
|
<Icon
|
|||
|
|
type="clock-circle"
|
|||
|
|
style={{ fontSize: "28px", color: "#309ae8" }}
|
|||
|
|
></Icon>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.newPieRig}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
color: "#f6841a",
|
|||
|
|
fontSize: "24px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.departmentAnalysisData.NormalFinishRate
|
|||
|
|
? Number(
|
|||
|
|
this.state.departmentAnalysisData
|
|||
|
|
.NormalFinishRate
|
|||
|
|
).toFixed(2) + "%"
|
|||
|
|
: 0}
|
|||
|
|
</div>
|
|||
|
|
<div>及时完成率</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</div>
|
|||
|
|
</Row>
|
|||
|
|
<Row>
|
|||
|
|
{this.state.empty == false ? (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "350px",
|
|||
|
|
minHeight: "180px",
|
|||
|
|
marginTop: "40px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
id="trendYear"
|
|||
|
|
style={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "100%",
|
|||
|
|
}}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div style={{ margin: "40px 0px" }}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
fontSize: "18px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
marginBottom: "20px",
|
|||
|
|
color: "#333333",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
组织完成率走势图（近12个月）
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Empty
|
|||
|
|
style={{
|
|||
|
|
height: "100%",
|
|||
|
|
alignItems: "center",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Row>
|
|||
|
|
<Row
|
|||
|
|
style={{
|
|||
|
|
borderTop: "1px solid #E8E8E8",
|
|||
|
|
paddingTop: "40px",
|
|||
|
|
marginTop: "40px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Col span={this.state.loadAll == false ? 12 : 24}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
marginBottom: "20px",
|
|||
|
|
borderRight:
|
|||
|
|
this.state.loadAll == false
|
|||
|
|
? "1px solid #E8E8E8"
|
|||
|
|
: "none",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
fontSize: "18px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
marginBottom: "10px",
|
|||
|
|
color: "#333333",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.state.loadAll == false
|
|||
|
|
? "及时完成率排名前八"
|
|||
|
|
: "及时完成率排名"}
|
|||
|
|
</div>
|
|||
|
|
{this.state.emptyAsc == false ? (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
width: "100%",
|
|||
|
|
height:
|
|||
|
|
this.state.loadAll == false
|
|||
|
|
? "350px"
|
|||
|
|
: this.state.userCount > 15
|
|||
|
|
? "600px"
|
|||
|
|
: this.state.userCount > 10
|
|||
|
|
? "500px"
|
|||
|
|
: this.state.userCount > 6
|
|||
|
|
? "400px"
|
|||
|
|
: this.state.userCount > 3
|
|||
|
|
? "300px"
|
|||
|
|
: this.state.userCount > 2
|
|||
|
|
? "200px"
|
|||
|
|
: this.state.userCount > 1
|
|||
|
|
? "100px"
|
|||
|
|
: "80px",
|
|||
|
|
// minHeight: "180px",
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "row",
|
|||
|
|
marginBottom: "40px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
id="completeAfter"
|
|||
|
|
style={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "100%",
|
|||
|
|
}}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Empty
|
|||
|
|
style={{
|
|||
|
|
height: "100%",
|
|||
|
|
width: "100%",
|
|||
|
|
alignItems: "center",
|
|||
|
|
margin: "40px 0px",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
|
|||
|
|
{this.state.loadAll == false ? (
|
|||
|
|
<Col span={12}>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
marginBottom: "20px",
|
|||
|
|
borderLeft: "1px solid #E8E8E8",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
fontSize: "18px",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
marginBottom: "10px",
|
|||
|
|
color: "#333333",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
及时完成率排名后八
|
|||
|
|
</div>
|
|||
|
|
{this.state.emptyDesc == false ? (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "350px",
|
|||
|
|
minHeight: "180px",
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "row",
|
|||
|
|
marginBottom: "40px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
id="completeBefore"
|
|||
|
|
style={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "100%",
|
|||
|
|
}}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Empty
|
|||
|
|
style={{
|
|||
|
|
height: "100%",
|
|||
|
|
width: "100%",
|
|||
|
|
alignItems: "center",
|
|||
|
|
margin: "40px 0px",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
) : (
|
|||
|
|
<div></div>
|
|||
|
|
)}
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
{/* <Col span={1}></Col> */}
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</Spin>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export default connect(({ login, app }) => ({ login, app }))(
|
|||
|
|
BI021DepartmentAnalysis
|
|||
|
|
);
|