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