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,
  Icon,
  Form,
  DatePicker,
  Progress,
  message,
  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 BI007FormRunAnalysisNew extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD 00:00:00"),
      selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD 23:59:59"),
      visible: false,
      unfinishVisible: false,
      noticeTitle: "",
      tmpData: {},
      tableKey: "1",
      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: [],
      allData: [],
      unFinishData: [],
      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",
          render: (text, record) => (
            <span>
              <a onClick={() => this.showUnfinishModal(record,1)}>
                {record.UNFINISH_QTY}
              </a>
            </span>
          ),
        },
        {
          width: "50px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
          render: (text, record) => (
            <span>{record.FINISH_RATE}%</span>
          ),
        },
        {
          width: "70px",
          title: "及时完成率",
          dataIndex: "NORMAL_FINISH_RATE",
          key: "NORMAL_FINISH_RATE",
          render: (text, record) => (
            <span>{record.NORMAL_FINISH_RATE}%</span>
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
      ],
      detailColumns: [
        {
          width: "60px",
          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",
          render: (text, record) => (
            <span>
              <a onClick={() => this.showUnfinishModal(record,2)}>
                {record.UNFINISH_QTY}
              </a>
            </span>
          ),
        },
        // {
        //   width: "50px",
        //   title: "未完成",
        //   dataIndex: "UNFINISH_QTY",
        //   key: "UNFINISH_QTY",
        // },
        {
          width: "100px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
          render: (text, record) => (
            <Progress percent={record.FINISH_RATE.split("%")[0]} />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
        {
          width: "100px",
          title: "及时完成率",
          dataIndex: "NORMAL_FINISH_RATE",
          key: "NORMAL_FINISH_RATE",
          render: (text, record) => (
            <Progress
              percent={record.NORMAL_FINISH_RATE.split("%")[0]}
              strokeColor={{
                from: "rgba(82, 196, 26)",
                to: "rgba(82, 196, 26)",
              }}
            />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
      ],
      unfinishColumns: [
        {
          width: "50px",
          title: "序号",
          dataIndex: "ROW_NO",
          key: "ROW_NO",
          // render:(value,record,index)=>{

          // },
        },
        {
          width: "100px",
          title: "车间/班组(人数)",
          dataIndex: "DEPARTMENT_NAME",
          key: "DEPARTMENT_NAME",
          // render:(value,record,index)=>{

          // },
        },
        {
          width: "100px",
          title: "待办名称",
          dataIndex: "NOTICE_TITLE",
          key: "NOTICE_TITLE",
          // render:(value,record,index)=>{

          // },
        },
        {
          width: "200px",
          title: "待办人",
          dataIndex: "USER_NAME",
          key: "USER_NAME",
        },
        {
          width: "100px",
          title: "开始时间",
          dataIndex: "TASK_STARTDT",
          key: "TASK_STARTDT",
        },
        {
          width: "100px",
          title: "结束时间",
          dataIndex: "TASK_ENDDT",
          key: "TASK_ENDDT",
        },
        {
          width: "80px",
          title: "状态",
          dataIndex: "STATUS_NAME",
          key: "STATUS_NAME",
        },
      ],
    };
  }

  componentDidMount() {
    this.loadData();
  }
  showUnfinishModal = (record,num) => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    let json = initFilter(orgId, "", "TASK_STARTDT");
    let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
    let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
    extendRule(json, "CREATE_DATE", 6, startTime);
    extendRule(json, "CREATE_DATE", 4, endTime);
    extendRule(json, "NOTICE_STATUS", 1, 0);
    extendRule(json, "NOTICE_TYPE", 2, 2);
    if(num === 1)
    {
      extendRule(json, "SHOP_DEPARTMENT_ID", 1, record.DEPARTMENT_ID);
    }
    else
    {
      extendRule(json, "CLASS_DEPARTMENT_ID", 1, record.DEPARTMENT_ID);
    }
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/NotificationTaskNew/OrderEntities",
      onComplete: (ret) => {
        if (ret) {
          let newDataTemp = [];
          let i = 1;
          ret.forEach((t) => {
            t.ROW_NO = i;
            t.DEPARTMENT_NAME = record.DEPARTMENT_NAME;
            t.STATUS_NAME = "未完成";
            newDataTemp.push(t);
            i++;
          });
          this.setState({ unfinishVisible: true, unFinishData: newDataTemp });
        }
      },
    });
  };
  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 = (record) => {
    const { newData } = this.state;
    let newDataTemp = [];
    let temp = newData.filter(
      (t) =>
        t.DEPARTMENT_ID === record.departmentId &&
        t.SOURCE_FORMCODE === record.formCode
    );
    if (temp.length > 0) {
      let i = 1;
      temp.forEach((t) => {
        t.ROW_NO = i;
        t.formName = record.formName;
        newDataTemp.push(t);
        i++;
      });
    } else {
      newDataTemp = [];
    }
    this.setState({ displaydetail: "block", detailDataH: newDataTemp });
  };
  // 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
  //   }));
  // }
  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;
  };

  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;
  };
  getDepartId = () => {};
  //加载数据赋值
  loadData = () => {
    // this.ksRun();
    // this.xkRun();
    var orgId = this.props.login ? this.props.login.OrgId : "";
    const jsonTemp = initFilter(orgId);
    extendRule(
      jsonTemp,
      "NAME",
      1,
      this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS
    );
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: jsonTemp,
      url: "FM/Department/OrderEntities",
      onComplete: (retDepart) => {
        if (retDepart) {
          // this.getClassDepartment(retDepart[0].ID);
          this.getShopDepartment(retDepart[0].ID);
        } else {
          message.error(
            "未找到部门" +
              this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS +
              "，请先维护"
          );
        }
      },
    });
  };
  //
  workTicket = () => {
    const { retData } = this.state;
    let teamName = [];
    let wattingQty = [];
    let finishQty = [];
    let overFinishQty = [];
    let totalQty = [];
    retData.forEach((item) => {
      teamName.push(item.DEPARTMENT_NAME);
      wattingQty.push(item.UNFINISH_QTY);
      finishQty.push(item.FINISH_QTY);
      overFinishQty.push(item.OVER_FINISH_QTY);
      totalQty.push(item.TOTAL_QTY);
    });
    //图标2
    let workTickets = document.getElementById("workTicket");
    if (workTickets) {
      let myChart = echarts.init(workTickets);
      myChart.setOption({
        // title: {
        //   text: "部门级-安全事务完成情况",
        //   left: 'center'
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: teamName,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#000",
            rotate: 40,
            formatter: function (value) {
              // 自定义文字超出部分 ...
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
              }
              return value;
            },
          },
        },
        legend: {
          data: ["正常已办", "超时已办", "未完成"],
          bottom: "0px",
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#172749",
            },
          },
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          // {
          //   name: '总数',
          //   type: 'bar',
          //   stack: '',
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#000',
          //   },
          //   data: totalQty,
          //   barGap: '-100%',
          //   z: -1,
          //   itemStyle: {
          //     normal: {
          //       color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
          //     }
          //   },
          // },
          {
            name: "正常已办",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              color: "#000",
            },
            emphasis: {
              //折线图的高亮状态。
              focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
            },
            data: finishQty,
            barGap: "-100%",
            z: -1,
            itemStyle: {
              // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#01AEF6" },
                { offset: 1, color: "rgba(16,36,95,0.6)" }, //rgba(16,36,95,0.6) #9999FF
              ]),
              // normal: {
              //   color: '#5B9BD5',
              // }
            },
          },
          {
            name: "超时已办",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              color: "#000",
            },
            emphasis: {
              //折线图的高亮状态。
              focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
            },
            data: overFinishQty,
            barGap: "-100%",
            z: -1,
            itemStyle: {
              // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#ED7D31" },
                { offset: 1, color: "#FFFF33" }, //rgba(255,255,0,0.6)
              ]),
              // normal: {
              //   color: '#ED7D31',
              // }
            },
          },
          {
            name: "未完成",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              color: "#000",
            },
            emphasis: {
              //折线图的高亮状态。
              focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
            },
            data: wattingQty,
            barGap: "-100%",
            z: -1,
            itemStyle: {
              normal: {
                color: "#CCCCCC", //rgba(128, 128, 128, 0.3)
              },
            },
          },
        ],
      });
    }
  }; //主要工作分布图（饼图）
  // mainJobPie2Old = () => {
  //   const {retData} = this.state;
  //   // let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "安全检查", "COUNT": 3, "COLOR": "#CD0505" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "作业现场", "COUNT": 2, "COLOR": "#FCD149" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "应急管理", "COUNT": 1, "COLOR": "#60A9F8" }], "TotalCount": 0, "ErrorMessage": null }

  //     let moduleData = []
  //     let showData = []
  //     let dataColor = ["#FFFF00","#FF3300","#FF9900","#669900","#33FFFF","#CCCC66","#003399","#FFFFCC"]
  //     retData.forEach(item => {
  //       moduleData.push(item.DEPARTMENT_NAME)
  //       let valueTemp=item.FINISH_QTY+item.OVER_FINISH_QTY
  //       showData.push({ value: valueTemp, name: item.DEPARTMENT_NAME })
  //       // let agb=`rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
  //       // dataColor.push(agb)
  //     })
  //     let myChart = echarts.init(document.getElementById('mainJobPie2'));
  //     myChart.setOption({
  //       // title: {
  //       //   text: "部门级-安全事务完成率",
  //       //   left: 'center'
  //       // },
  //       tooltip: {
  //         trigger: 'item',
  //         //formatter: '{a} <br/>{b} : {c} ({d}%)'
  //         formatter: '{b} : {c} ({d}%)'
  //       },
  //       legend: {
  //         bottom: '10px',
  //         data: moduleData
  //       },
  //       series: [
  //         {
  //           name: '主要工作分布',
  //           type: 'pie',
  //           radius: '55%',
  //           center: ['50%', '42%'],
  //           label: {
  //             formatter: '{b}:({d}%)',
  //             normal:{
  //               show: true,
  //               position:'inner',
  //               formatter: '{d}%',
  //             }
  //           },
  //           data: showData,
  //           color: dataColor,
  //           emphasis: {
  //             itemStyle: {
  //               shadowBlur: 10,
  //               shadowOffsetX: 0,
  //               //shadowColor: 'rgba(0, 0, 0, 0.5)'
  //             }
  //           }
  //         }
  //       ]
  //     });
  // }
  mainJobPie2 = () => {
    const { retData } = this.state;
    // let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "安全检查", "COUNT": 3, "COLOR": "#CD0505" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "作业现场", "COUNT": 2, "COLOR": "#FCD149" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "应急管理", "COUNT": 1, "COLOR": "#60A9F8" }], "TotalCount": 0, "ErrorMessage": null }

    let month = [];
    let company = [];
    let department = [];
    let totalCount = [];
    let retDataTemp = retData.filter(
      (m) => m.PARENT_DEPARTMENT_ID !== null
    );
    retDataTemp.forEach((item) => {
      month.push(item.DEPARTMENT_NAME);
      company.push(item.FINISH_RATE);
      department.push(item.NORMAL_FINISH_RATE);
      totalCount.push(item.FINISH_QTY + item.OVER_FINISH_QTY);
    });
    let myChart = echarts.init(document.getElementById("mainJobPie2"));
    myChart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        transitionDuration: 0,
        formatter: function (params) {
          return (
            params[0].marker +
            params[0].seriesName +
            " : " +
            params[0].value +
            "</br>" +
            params[1].marker +
            params[1].seriesName +
            " : " +
            params[1].value + "%"+
            "</br>" +
            params[2].marker +
            params[2].seriesName +
            " : " +
            params[2].value+ "%"
          );
        },
      },
      title: {
        text: "安全任务完成率",
        left: "center",
        top: "5%",
      },
      legend: {
        data: ["完成数", "完成率", "及时完成率"],
        left: "center",
        align: "left",
        bottom: "2%",
        textStyle: {
          color: "#000",
        },
        itemWidth: 10,
        itemHeight: 10,
        // itemGap: 35,
      },
      grid: {
        left: "3%",
        right: "4%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: month,
        axisLabel: {
          showMaxLabel: true,
        },
      },
      yAxis: [
        {
          type: "value",
          position: "left",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#f2f2f2"],
              // opacity:0.2
              // zlevel: -1,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            color: "rgb(170,170,170)",
            formatter: "{value} ",
          },
        },
        {
          type: "value",
          position: "right",
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#f2f2f2"],
            },
          },
          axisLine: {
            lineStyle: {
              color: "#f2f2f2",
            },
          },
          axisLabel: {
            color: "rgb(170,170,170)",
            formatter: "{value} %",
          },
        },
      ],
      series: [
        {
          name: "完成数",
          type: "bar",
          color: "#72b85b",
          data: totalCount,
          barWidth: "20%",
          barGap: "10%",
          stack: null,
        },
        {
          name: "完成率",
          type: "line",
          color: "#4b9bf3",
          data: company,
          yAxisIndex: 1,
          smooth: true,
          // zlevel:100,
        },
        {
          name: "及时完成率",
          type: "line",
          color: "#FCD149",
          data: department,
          yAxisIndex: 1,
          smooth: true,
          // zlevel:100,
        },
      ],
    });
  };
  compare = (val1, val2) => {
    return val2.NUM - val1.NUM;
  };
  getClassDepartment = (dataTemp) => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    const jsonTemp = initFilter(orgId);
    extendRule(jsonTemp, "DEPARTMENT_TYPE", 1, 2);
    // extendRule(jsonTemp, 'Nav_Parent.PARENT_ID', 1, this.props.data.id);
    extendRule(
      jsonTemp,
      "Nav_Parent.Nav_Parent.NAME",
      1,
      this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS
    );
    extendOrder(jsonTemp, "PARENT_ID", 0);
    extendOrder(jsonTemp, "NAME", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: jsonTemp,
      url: "FM/Department/OrderEntities",
      onComplete: (retDepart) => {
        if (retDepart) {
          let tempDepart = [];
          for (const t of retDepart) {
            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);
          }
          // retDepart.forEach(t=>{

          // })

          // let json = initFilter(orgId,departId,'',1,'',this.state.selectStartTime,this.state.selectEndTime);
          // extendRule(json, 'TYPE', 1, this.state.timeType);
          // extendRule(json, 'DEPARTMENT_TYPE', 1, 2);
          // extendRule(json, 'PARENT_DEPARTMENT_ID', 1, this.props.data.id);
          // extendOrder(json, "PARENT_DEPARTMENT_ID", 0);
          // extendOrder(json, "FINISH_RATE", 1);
          if (dataTemp) {
            let temp = [];
            for (const t of tempDepart) {
              let group = dataTemp.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 + "%";
                t.NUM =
                  group[0].TOTAL_QTY === 0
                    ? 0
                    : group[0].FINISH_QTY / group[0].TOTAL_QTY;
              }
              temp.push(t);
            }
            temp = temp.sort(this.compare);
            this.setState({
              detailData: temp,
            });
          }
          // this.props.dispatch({
          //   type: 'app/getDataByPost',
          //   payload: json,
          //   url: 'BI/BIStatiscialAnalysisController/GetDepartmentAnalyze',
          //   onComplete: (ret) => {
          //     if (ret) {

          //     }
          //   }
          //   })
        }
      },
    });
  };

  getShopDepartment = (departId) => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    const jsonTemp = initFilter(orgId);
    extendRule(jsonTemp, "DEPARTMENT_TYPE", 1, 1);
    // extendRule(jsonTemp, 'PARENT_ID', 1, this.props.data.id);
    extendRule(
      jsonTemp,
      "Nav_Parent.NAME",
      1,
      this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS
    );
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: jsonTemp,
      url: "FM/Department/OrderEntities",
      onComplete: (retDepart) => {
        if (retDepart) {
          let tempDepart = [];
          for (const t of retDepart) {
            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);
          }
          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, departId, "", 1, "", startTime, endTime);
          // extendRule(json, 'TYPE', 1, this.state.timeType);
          // extendRule(json, 'DEPARTMENT_TYPE', 1, 1);
          // extendRule(json, 'PARENT_DEPARTMENT_ID', 1, this.props.data.id);
          this.props.dispatch({
            type: "app/getDataByPost",
            payload: json,
            url: "BI/BIStatiscialAnalysisController/GetDepartmentAnalyzeNew",
            onComplete: (ret) => {
              if (ret) {
                let temp = [];
                if (ret) {
                  let t1 = 0;
                  let t2 = 0;
                  let t3 = 0;
                  let t4 = 0;
                  for (const t of tempDepart) {
                    let group = ret.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,
                      allData: ret,
                      totalCount: t1,
                      finishCount: t2,
                      overtimeCount: t3,
                      unfinishCount: t4,
                      rate: t5,
                      normalRate: t6,
                    },
                    () => {
                      this.getClassDepartment(ret);
                      // this.workTicket();
                      this.mainJobPie2();
                    }
                  );
                  //   ret.groupData.forEach(t=>{
                  //   t.unDoneCount = t.TotalCount-t.doneCount -t.timeOverCount;
                  //   t.allDoneRate = ((t.doneCount +t.timeOverCount)/t.TotalCount*100).toFixed(0)+"%";
                  //   t.doneRate = (t.doneCount/t.TotalCount*100).toFixed(0)+"%";
                  //   temp.push(t);
                  // })
                }
              }
            },
          });
        }
      },
    });
  };
  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();
  };
  startChange = (value) => {
    this.setState({
      selectStartTime: value,
      startTime: value.format("YYYYMMDD"),
    });
  };
  endChange = (value) => {
    this.setState({
      selectEndTime: value,
      endTime: value.format("YYYYMMDD"),
    });
  };
  clearUnfinishData = () => {
    this.setState({
      unfinishVisible: false,
      unFinishData: [], //newtmpData
    });
  };
  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.unfinishVisible}
            title="未完成明细"
            maskClosable={false}
            onCancel={this.clearUnfinishData}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.clearUnfinishData}
          >
            <Table
              dataSource={this.state.unFinishData}
              columns={this.state.unfinishColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <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>
          {/* {this.props.data.name} */}
          <h1
            style={{
              textAlign: "center",
              marginTop: "30px",
              fontWeight: "bold",
            }}
          >
            {this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS}{" "}
            安全生产标准化运行情况
          </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"
                loading={this.state.searchLoading}
                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.dataStyle3}>{overtimeCount}</div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                未完成数
                <br />
                <div className={styles.dataStyle2}>{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.dataStyle3}>{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.dataStyle3}>{finishRate}%</div>
              </li>
            </div>
          </div>
          <hr
            style={{
              border: "1px dashed #ccc",
              marginBottom: "20px",
              marginTop: "20px",
            }}
          ></hr>
          <Row
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                alignItems: "center",
                width: "1100px",
                border: "1px solid #e7e6e4",
              }}
            >
              <Col span={24}>
                {/* <h3 style={{textAlign:'center',fontWeight:'bold'}}>{this.props.data.name}安全任务完成率</h3> */}
                <div
                  id="mainJobPie2"
                  style={{
                    height: "350px",
                    backgroundColor: "white",
                  }}
                ></div>
              </Col>
            </div>
          </Row>
          <Row
            style={{
              marginTop: "20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                alignItems: "center",
                width: "1100px",
              }}
            >
              <Col span={24}>
                <h2
                  style={{
                    textAlign: "center",
                    fontWeight: "bold",
                    // marginLeft: "20px",
                  }}
                >
                  <Icon type="appstore" /> 车间统计分析
                </h2>
                <Table
                  style={{ textAlign: "center" }}
                  // scroll={{ y: 400 }}
                  dataSource={this.state.retData}
                  columns={this.state.columns}
                  pagination={false}
                  loading={false}
                  size="small"
                  bordered
                />
              </Col>
            </div>

            {/* <Col span={7}>
            <h3 style={{textAlign:'center',fontWeight:'bold'}}>{this.props.data.name}安全任务完成情况</h3>
            <div id="workTicket" style={{ height: '350px',marginLeft:"40px" ,marginRight:"10px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
            </Col> */}
          </Row>
          <hr
            style={{
              border: "1px dashed #ccc",
              marginBottom: "20px",
              marginTop: "20px",
            }}
          ></hr>
          <Row
            style={{
              marginTop: "20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginBottom:'20px'
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                alignItems: "center",
                width: "1100px",
              }}
            >
              <Col span={24}>
                <h2
                  style={{
                    textAlign: "center",
                    fontWeight: "bold",
                  }}
                >
                  <Icon type="appstore" /> 班组统计分析
                </h2>
                <Table
                  style={{ textAlign: "center" }}
                  // scroll={{ y: 400 }}
                  dataSource={this.state.detailData}
                  columns={this.state.detailColumns}
                  pagination={false}
                  loading={false}
                  size="small"
                  bordered
                />
              </Col>
            </div>
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI007FormRunAnalysisNew
);