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