import React from "react";
import { connect } from "dva";
import { initFilter, extendRule, extendOrder } from "../../../utils/common";
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
import {
  Table,
  Button,
  Row,
  Col,
  Modal,
  Form,
  DatePicker,
  Icon,
  Divider,
} from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm1.css";
import moment from "moment";
import { T } from "antd/lib/upload/utils";
import FormPage from "../../FormPage";

class BI006FormRunAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      noticeTitle: "",
      tmpData: {},
      tableKey: "1",
      selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD 00:00:00"),
      selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD 23:59:59"),
      startTime: this.getDate(),
      endTime: moment(new Date()).format("YYYYMMDD"),
      timeType: 5,
      totalCount: 0,
      finishCount: 0,
      overtimeCount: 0,
      unfinishCount: 0,
      dtotalCount: 0,
      dfinishCount: 0,
      dovertimeCount: 0,
      dunfinishCount: 0,
      drate: "0%",
      dnormalRate: "0%",
      weekColor: "black",
      monthColor: "orange",
      threeMonthColor: "black",
      sixMonthColor: "black",
      yearColor: "black",
      retData: [],
      groupData: [],
      detailData: [],
      newData: [],
      detailDataH: [],
      displayHr: "none",
      displaydetail: "none",
      columns: [
        {
          width: "100px",
          title: "部门",
          dataIndex: "DEPARTMENT_NAME",
          key: "DEPARTMENT_NAME",
          // render: (text, record) => (
          //   <span>
          //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
          //   </span>
          // ),
        },
        {
          width: "60px",
          title: "总任务数",
          dataIndex: "TOTAL_QTY",
          key: "TOTAL_QTY",
        },
        {
          width: "60px",
          title: "正常已办",
          dataIndex: "FINISH_QTY",
          key: "FINISH_QTY",
        },
        {
          width: "60px",
          title: "超时已办",
          dataIndex: "OVER_FINISH_QTY",
          key: "OVER_FINISH_QTY",
        },
        {
          width: "50px",
          title: "未完成",
          dataIndex: "UNFINISH_QTY",
          key: "UNFINISH_QTY",
        },
        {
          width: "50px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
        },
        {
          width: "70px",
          title: "及时完成率",
          dataIndex: "NORMAL_FINISH_RATE",
          key: "NORMAL_FINISH_RATE",
        },
      ],
      detailColumns: [
        // {
        //     width: "55px",
        //     title: '序号',
        //     dataIndex: 'NUM',
        //     key: 'NUM',
        //   },
        {
          width: "100px",
          title: "模块名称",
          dataIndex: "MOUDLE_NAME",
          key: "MOUDLE_NAME",
          // render: (text, record) => (
          //   <span>
          //     <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
          //   </span>
          // ),
        },
        {
          width: "60px",
          title: "总任务数",
          dataIndex: "TOTAL_QTY",
          key: "TOTAL_QTY",
        },
        {
          width: "60px",
          title: "正常已办",
          dataIndex: "FINISH_QTY",
          key: "FINISH_QTY",
        },
        {
          width: "60px",
          title: "超时已办",
          dataIndex: "OVER_FINISH_QTY",
          key: "OVER_FINISH_QTY",
        },
        {
          width: "50px",
          title: "未完成",
          dataIndex: "UNFINISH_QTY",
          key: "UNFINISH_QTY",
        },
        {
          width: "50px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
        },
        {
          width: "70px",
          title: "及时完成率",
          dataIndex: "NORMAL_FINISH_RATE",
          key: "NORMAL_FINISH_RATE",
        },
      ],
    };
  }
  getStartDate = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate)
      .add(-1, "month")
      .format("YYYY-MM-DD 00:00:00");
    return pastDate;
  };

  getEndDate = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate).format("YYYY-MM-DD 23:59:59");
    return pastDate;
  };
  componentDidMount() {
    this.loadData();
  }
  showEditModal = (departmentId, departmentName) => {
    const newtmpData = {
      data: {
        id: departmentId,
        name: departmentName,
        onCancel: this.handleCancel,
        tableKey: this.state.tableKey,
        homeReload: true,
      },
      formCode: "BI007_RUNANALYSIS",
    };
    this.setState(
      {
        id: departmentId,
        name: departmentName,
        noticeTitle: departmentName + "安全生产标准化运行情况",
        tmpData: newtmpData,
        currActivatedMenu: "",
      },
      () =>
        this.setState({
          visible: true,
        })
    );
  };
  showFormModal = (mouldName) => {
    const newtmpData = {
      data: {
        name: mouldName,
        onCancel: this.handleCancel,
        tableKey: this.state.tableKey,
        homeReload: true,
      },
      formCode: "BI008_RUNANALYSIS",
    };
    this.setState(
      {
        name: mouldName,
        noticeTitle: mouldName + "安全生产标准化运行情况",
        tmpData: newtmpData,
        currActivatedMenu: "",
      },
      () =>
        this.setState({
          visible: true,
        })
    );
  };
  // showEditModal = (dataId, formCode, TaskID, title, taskCode) => {

  //   const newtmpData = {
  //     data: {
  //       id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
  //       homeReload: true
  //     },
  //     formCode: formCode,
  //   }
  //   this.setState({
  //     noticeTitle: title,
  //     taskCode: taskCode,
  //     tmpData: newtmpData,
  //     currActivatedMenu: ''
  //   }, () => this.setState({
  //     visible: true
  //   }));
  // }

  getDate = (type) => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate).add(-1, "month").format("YYYYMMDD");
    let weekColor = "black";
    let monthColor = "orange";
    let threeMonthColor = "black";
    let sixMonthColor = "black";
    let yearColor = "black";
    let timeType = 5;
    if (type === "Week") {
      pastDate = moment(nowDate).add(-7, "d").format("YYYYMMDD");
      weekColor = "orange";
      monthColor = "black";
      threeMonthColor = "black";
      sixMonthColor = "black";
      yearColor = "black";
      timeType = 1;
    }
    if (type === "ThreeMonth") {
      pastDate = moment(nowDate).add(-3, "month").format("YYYYMMDD");
      weekColor = "black";
      monthColor = "black";
      threeMonthColor = "orange";
      sixMonthColor = "black";
      yearColor = "black";
      timeType = 10;
    }
    if (type === "SixMonth") {
      pastDate = moment(nowDate).add(-6, "month").format("YYYYMMDD");
      weekColor = "black";
      monthColor = "black";
      threeMonthColor = "black";
      sixMonthColor = "orange";
      yearColor = "black";
      timeType = 15;
    }
    if (type === "Year") {
      pastDate = moment(nowDate).add(-1, "year").format("YYYYMMDD");
      weekColor = "black";
      monthColor = "black";
      threeMonthColor = "black";
      sixMonthColor = "black";
      yearColor = "orange";
      timeType = 20;
    }
    this.setState(
      {
        startTime: pastDate,
        timeType: timeType,
        weekColor: weekColor,
        monthColor: monthColor,
        threeMonthColor: threeMonthColor,
        sixMonthColor: sixMonthColor,
        yearColor: yearColor,
      },
      () => {
        if (type) {
          this.loadData();
        }
      }
    );
    return pastDate;
  };
  //加载数据赋值
  loadData = () => {
    this.ksRun();
    this.xkRun();
    this.getMould();
    // this.getDepartment();
  };
  //矿山
  ksRun = () => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    // let startTime=this.state.selectStartTime.format('YYYY-MM-01 00:00:00');
    // let endTime=this.state.selectEndTime.format('YYYY-MM-01 00:00:00');
    //默认最近一年
    let startTime = moment(new Date())
      .add(-11, "month")
      .format("YYYY-MM-01 00:00:00");
    let endTime = moment(new Date())
      .add(1, "month")
      .format("YYYY-MM-01 00:00:00");
    let json = initFilter(orgId, "矿山部", "", "", "", startTime, endTime);
    extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let month = [];
          let company = [];
          let department = [];
          data.Data.forEach((item) => {
            month.push(item.MONTHStr);
            company.push(item.FINISH_RATE);
            department.push(item.NORMAL_FINISH_RATE);
          });
          let myChart = echarts.init(document.getElementById("ksRun"));
          myChart.setOption({
            // title: {
            //     text: "矿山部-安全生产标准化运行走势图",
            //     left: 'center'
            //   },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              // data: ['部门'],
              data: ["完成率", "及时完成率"],
              bottom: "10px",
            },
            grid: {
              left: "3%",
              right: "4%",
              top: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                // saveAsImage: {}
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: month,
              axisLine: {
                show: false,
                // lineStyle: {
                //   color: 'rgba(192, 192, 102)'
                // }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#000",
                rotate: 40,
                formatter: function (value) {
                  // 自定义文字超出部分 ...
                  if (value.length > 10) {
                    return `${value.slice(0, 10)}...`;
                  }
                  return value;
                },
              },
            },
            yAxis: {
              axisLabel: {
                formatter: function (val) {
                  return val + "%";
                },
              },
            },
            series: [
              {
                name: "完成率",
                type: "line",
                color: "#4b9bf3",
                data: company,
              },
              {
                name: "及时完成率",
                type: "line",
                color: "#FCD149",
                data: department,
              },
            ],
          });
        }
      },
    });
  };
  //选矿
  xkRun = () => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    // let startTime=this.state.selectStartTime.format('YYYY-MM-01 00:00:00');
    // let endTime=this.state.selectEndTime.format('YYYY-MM-01 00:00:00');
    //默认最近一年
    let startTime = moment(new Date())
      .add(-11, "month")
      .format("YYYY-MM-01 00:00:00");
    let endTime = moment(new Date())
      .add(1, "month")
      .format("YYYY-MM-01 00:00:00");
    let json = initFilter(orgId, "选矿部", "", "", "", startTime, endTime);
    extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let month = [];
          let company = [];
          let department = [];
          data.Data.forEach((item) => {
            month.push(item.MONTHStr);
            company.push(item.FINISH_RATE);
            department.push(item.NORMAL_FINISH_RATE);
          });
          let myChart = echarts.init(document.getElementById("xkRun"));
          myChart.setOption({
            // title: {
            //     text: "选矿部-安全生产标准化运行走势图",
            //     padding: [0,100,100,100],
            //     left: 'center'
            //   },
            tooltip: {
              trigger: "axis",
              //   formatter: function (params) {
              //     let temp=''
              //     params.forEach(t=>{
              //         temp=temp+t.seriesName +":"+t.value+"%"+'<br />';

              //     })
              //     return temp;
              //   }
            },
            legend: {
              // data: ['部门'],
              data: ["完成率", "及时完成率"],
              bottom: "10px",
            },
            grid: {
              left: "3%",
              right: "4%",
              top: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                // saveAsImage: {}
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: month,
              axisLine: {
                show: false,
                // lineStyle: {
                //   color: 'rgba(192, 192, 102)'
                // }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#000",
                rotate: 40,
                formatter: function (value) {
                  // 自定义文字超出部分 ...
                  if (value.length > 10) {
                    return `${value.slice(0, 10)}...`;
                  }
                  return value;
                },
              },
            },
            yAxis: {
              axisLabel: {
                formatter: function (val) {
                  return val + "%";
                },
              },
            },
            series: [
              {
                name: "完成率",
                type: "line",
                color: "#4b9bf3",
                data: company,
              },
              {
                name: "及时完成率",
                type: "line",
                color: "#FCD149",
                data: department,
              },
            ],
          });
        }
      },
    });
  };
  getMould = () => {
    let allData = [
      {
        MOUDLE_NAME: "风险管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "安全检查",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "作业现场管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "法律法规与其他要求",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "安全教育培训",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "方针与目标管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "绩效测量与评价",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "生产工艺管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "事故事件",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "安全生产组织保障",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "安全投入、科技与工伤",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "职业卫生",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "应急管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "机电安全管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "会议管理",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
      {
        MOUDLE_NAME: "标准化创建",
        TOTAL_QTY: 0,
        FINISH_QTY: 0,
        OVER_FINISH_QTY: 0,
        UNFINISH_QTY: 0,
        FINISH_RATE: 0 + "%",
        NORMAL_FINISH_RATE: 0 + "%",
      },
    ];
    var orgId = this.props.login ? this.props.login.OrgId : "";
    let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
    let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
    let json = initFilter(orgId, "", "", "", "", startTime, endTime);
    extendOrder(json, "NUM", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BIStatiscialAnalysisController/GetDepartMouldInfos",
      onComplete: (ret) => {
        if (ret) {
          if (ret.mouldData) {
            let temp = [];
            allData.forEach((t) => {
              let group = ret.mouldData.filter(
                (m) => m.MOUDLE_NAME === t.MOUDLE_NAME
              );
              if (group.length > 0) {
                t.TOTAL_QTY = group[0].TOTAL_QTY;
                t.FINISH_QTY = group[0].FINISH_QTY;
                t.OVER_FINISH_QTY = group[0].OVER_FINISH_QTY;
                t.UNFINISH_QTY = group[0].UNFINISH_QTY;
                t.FINISH_RATE = group[0].FINISH_RATE + "%";
                t.NORMAL_FINISH_RATE = group[0].NORMAL_FINISH_RATE + "%";
              }
              temp.push(t);
            });
            this.setState({
              detailData: temp,
            });
          }
          if (ret.departData) {
            this.getDepartment(ret.departData);
          }
        }
      },
    });
  };
  getDepartment = (departData) => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    const jsonTemp = initFilter(orgId);
    extendRule(jsonTemp, "DEPARTMENT_TYPE", 1, 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: jsonTemp,
      url: "FM/Department/OrderEntities",
      onComplete: (retDepart) => {
        if (retDepart) {
          let tempDepart = [];
          retDepart.forEach((t) => {
            let tempNow = {
              DEPARTMENT_ID: t.ID,
              DEPARTMENT_NAME: t.NAME,
              TOTAL_QTY: 0,
              FINISH_QTY: 0,
              OVER_FINISH_QTY: 0,
              UNFINISH_QTY: 0,
              FINISH_RATE: "0%",
              NORMAL_FINISH_RATE: "0%",
            };
            tempDepart.push(tempNow);
          });
          if (departData) {
            let temp = [];
            let t1 = 0;
            let t2 = 0;
            let t3 = 0;
            let t4 = 0;
            tempDepart.forEach((t) => {
              let group = departData.filter(
                (m) => m.DEPARTMENT_ID === t.DEPARTMENT_ID
              );
              if (group.length > 0) {
                t.TOTAL_QTY = group[0].TOTAL_QTY;
                t.FINISH_QTY = group[0].FINISH_QTY;
                t.OVER_FINISH_QTY = group[0].OVER_FINISH_QTY;
                t.UNFINISH_QTY = group[0].UNFINISH_QTY;
                t.FINISH_RATE = group[0].FINISH_RATE + "%";
                t.NORMAL_FINISH_RATE = group[0].NORMAL_FINISH_RATE + "%";
                t1 = t1 + group[0].TOTAL_QTY;
                t2 = t2 + group[0].FINISH_QTY;
                t3 = t3 + group[0].OVER_FINISH_QTY;
                t4 = t4 + group[0].UNFINISH_QTY;
              }
              temp.push(t);
            });
            let t5 =
              t1 === 0 ? "0%" : (((t2 + t3) / t1) * 100).toFixed(0) + "%";
            let t6 = t1 === 0 ? "0%" : ((t2 / t1) * 100).toFixed(0) + "%";
            this.setState({
              retData: temp,
              totalCount: t1,
              finishCount: t2,
              overtimeCount: t3,
              unfinishCount: t4,
              rate: t5,
              normalRate: t6,
            });
          }
        }
      },
    });
  };
  startChange = (value) => {
    this.setState({
      selectStartTime: value,
      startTime: value.format("YYYYMMDD"),
    });
  };
  endChange = (value) => {
    this.setState({
      selectEndTime: value,
      endTime: value.format("YYYYMMDD"),
    });
  };
  closeModal = () => {
    // 退出弹窗
    this.clearData();
  };
  clearData = () => {
    let newtmpData = { ...this.state.tmpData };
    newtmpData["data"].id = "";
    newtmpData["data"].homeReload = false;
    newtmpData.formCode = "";
    this.setState({
      visible: false,
      tmpData: newtmpData,
    });
  };
  handleCancel = () => {
    // 退出弹窗
    this.clearData();
  };
  render() {
    const {
      startTime,
      endTime,
      finishCount,
      overtimeCount,
      totalCount,
      unfinishCount,
      weekColor,
      monthColor,
      threeMonthColor,
      sixMonthColor,
      yearColor,
    } = this.state;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    let allFinishRate =
      totalCount === 0
        ? 0
        : (((finishCount + overtimeCount) / totalCount) * 100).toFixed(0);
    let finishRate =
      totalCount === 0 ? 0 : ((finishCount / totalCount) * 100).toFixed(0);
    return (
      <div>
        {/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
        <div
          style={{
            backgroundColor: "white",
            width: "1200px",
            top: "0",
            bottom: "0",
            left: "0",
            right: "0",
            margin: "auto",
            borderStyle: "solid",
            borderColor: "#ccc",
            borderWidth: "1px",
          }}
        >
          <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.closeModal}
            // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
          <h1
            style={{
              textAlign: "center",
              marginTop: "30px",
              fontWeight: "bold",
            }}
          >
            行洛坑钨矿安全生产标准化运行情况
          </h1>
          <Row style={{ textAlign: "center", fontSize: "15px" }}>
            {" "}
            <span>
              ({startTime}-{endTime})
            </span>
          </Row>
          <br></br>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              flexDirection: "row",
              justifyContent: "center",
            }}
          >
            <div
              style={{
                display: "felx",
                alignItems: "center",
                flexDirection: "row",
                fontSize: "14px",
                marginRight: "20px",
              }}
            >
              {/* <Form.Item label={"查询时间"}> */}
              查询时间：
              <DatePicker
                style={{ width: "120px" }}
                //  defaultValue={moment(this.state.startTime, 'YYYY-MM-DD 00:00:00')}
                value={this.state.selectStartTime}
                format="YYYY-MM-DD"
                onChange={this.startChange}
              />
              {/* </Form.Item> */}
            </div>

            <div
              style={{
                display: "felx",
                alignItems: "center",
                flexDirection: "row",
                fontSize: "14px",
                marginRight: "20px",
              }}
            >
              {/* <Form.Item label={"至"} > */}
              至：
              <DatePicker
                style={{ width: "120px" }}
                // defaultValue={moment(this.state.endTime, 'YYYY-MM-DD 23:59:59')}
                value={this.state.selectEndTime}
                format="YYYY-MM-DD"
                onChange={this.endChange}
              />
              {/* </Form.Item> */}
            </div>
            <div>
              <Button type="primary" onClick={() => this.loadData()}>
                查询
              </Button>
            </div>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginTop: "20px",
              //   marginBottom: "20px",
            }}
          >
            <div className={styles.menuPie}>
              <li>
                总任务数
                <br />
                <div className={styles.dataStyle}>{totalCount}</div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                正常已办
                <br />
                <div className={styles.dataStyle1}>{finishCount}</div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                超时已办
                <br />
                <div className={styles.dataStyle2}>{overtimeCount}</div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                未完成数
                <br />
                <div className={styles.dataStyle3}>{unfinishCount}</div>
                {/* <a href="#" style={{ color: "red" }}> */}
                {/* </a> */}
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                完成率
                <br />
                <div className={styles.dataStyle4}>{allFinishRate}%</div>
                {/* <a href="#" style={{ color: "red" }}> */}
                {/* </a> */}
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                及时完成率
                <br />
                <div className={styles.dataStyle5}>{finishRate}%</div>
              </li>
            </div>
          </div>

          {/* <div style={{ marginLeft: "10px" }}>
            <Button
              style={{
                width: "100px",
                height: "60px",
                borderRadius: "8px",
                border: "1px RGB(24, 149, 255) solid",
                marginRight: "10px",
              }}
            >
              总任务数<br></br>
              <span
                style={{
                  fontWeight: "bold",
                  fontSize: "20px",
                  color: "black",
                }}
              >
                {totalCount}
              </span>
            </Button>
            <Button
              style={{
                width: "100px",
                height: "60px",
                borderRadius: "8px",
                border: "1px RGB(24, 149, 255) solid",
                marginRight: "10px",
              }}
            >
              正常已办<br></br>
              <span
                style={{
                  fontWeight: "bold",
                  fontSize: "20px",
                  color: "green",
                }}
              >
                {finishCount}
              </span>
            </Button>
            <Button
              style={{
                width: "100px",
                height: "60px",
                borderRadius: "8px",
                border: "1px RGB(24, 149, 255) solid",
                marginRight: "10px",
              }}
            >
              超时已办<br></br>
              <span
                style={{
                  fontWeight: "bold",
                  fontSize: "20px",
                  color: "orange",
                }}
              >
                {overtimeCount}
              </span>
            </Button>
            <Button
              style={{
                width: "100px",
                height: "60px",
                borderRadius: "8px",
                border: "1px RGB(24, 149, 255) solid",
                marginRight: "10px",
              }}
            >
              未完成数<br></br>
              <span
                style={{ fontWeight: "bold", fontSize: "20px", color: "red" }}
              >
                {unfinishCount}
              </span>
            </Button>
            <Button
              style={{
                width: "100px",
                height: "60px",
                borderRadius: "8px",
                border: "1px RGB(24, 149, 255) solid",
                marginRight: "10px",
              }}
            >
              完成率<br></br>
              <span
                style={{
                  fontWeight: "bold",
                  fontSize: "20px",
                  color: "orange",
                }}
              >
                {allFinishRate}%
              </span>
            </Button>
            <Button
              style={{
                width: "100px",
                height: "60px",
                borderRadius: "8px",
                border: "1px RGB(24, 149, 255) solid",
                marginRight: "10px",
              }}
            >
              及时完成率<br></br>
              <span
                style={{
                  fontWeight: "bold",
                  fontSize: "20px",
                  color: "orange",
                }}
              >
                {finishRate}%
              </span>
            </Button>
          </div> */}

          {/* <Col  span={4}>  <Button type='link' style= {{color:weekColor,marginRight:"5px"}} onClick={() => this.getDate("Week")}>最近1周</Button></Col> */}
          {/* <Col  span={4}>  <Button type='link' style= {{color:monthColor,marginRight:"5px"}} onClick={() => this.getDate("Month")}>最近1月</Button></Col> */}
          {/* <Col  span={4}>  <Button type='link' style= {{color:threeMonthColor,marginRight:"5px"}} onClick={() => this.getDate("ThreeMonth")}>最近3月</Button></Col> */}
          {/* <Col span={4}>  <Button type='link' style= {{color:sixMonthColor,marginRight:"5px"}} onClick={() => this.getDate("SixMonth")}>最近半年</Button></Col> */}
          {/* <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("Year")}>最近1年</Button></Col> */}
          {/* <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("All")}>全部</Button></Col> */}

          <hr
            style={{
              border: "1px dashed #ccc",
              marginBottom: "20px",
              marginTop: "20px",
            }}
          ></hr>
          <Row style={{ marginTop: "10px" }}>
            <Col span={24}>
              <h2 style={{ textAlign: "center", fontWeight: "bold" }}>
                矿山部-安全生产标准化运行走势图
              </h2>
              <div
                id="ksRun"
                style={{
                  height: "350px",
                  // marginLeft: "50px",
                  // marginRight: "30px",
                  backgroundColor: "white",
                  borderStyle: "solid",
                  borderColor: "#ccc",
                  borderWidth: "1px",
                }}
              ></div>
            </Col>
          </Row>
          <Row style={{ marginTop: "10px" }}>
            <Col span={24}>
              <h2
                style={{
                  textAlign: "left",
                  fontWeight: "bold",
                  marginLeft: "30px",
                }}
              >
                <Icon type="appstore" /> 部门统计分析
              </h2>
              <Table
                style={{
                  width: "1100px",
                  marginLeft: "30px",
                  textAlign: "center",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
              />
            </Col>
          </Row>
          <hr
            style={{
              border: "1px dashed #ccc",
              marginBottom: "20px",
              marginTop: "20px",
            }}
          ></hr>
          <Row style={{ marginBottom: "10px" }}>
            <Col span={12}>
              <h2
                style={{
                  textAlign: "left",
                  fontWeight: "bold",
                  marginLeft: "30px",
                }}
              >
                <Icon type="appstore" /> 模块统计分析
              </h2>
              <Table
                style={{
                  marginLeft: "30px",
                  width: "600px",
                  textAlign: "center",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.detailData}
                columns={this.state.detailColumns}
                pagination={false}
                loading={false}
                size="small"
              />
            </Col>
            <Col span={12}>
              <h2 style={{ textAlign: "center", fontWeight: "bold" }}>
                选矿部-安全生产标准化运行走势图
              </h2>
              <div
                id="xkRun"
                style={{
                  height: "350px",
                  marginLeft: "50px",
                  marginRight: "30px",
                  backgroundColor: "white",
                  borderStyle: "solid",
                  borderColor: "#ccc",
                  borderWidth: "1px",
                }}
              ></div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI006FormRunAnalysis
);