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,
  Progress,
  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 BI009FormRunAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableTitle :"",
      selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD 00:00:00"),
      selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD 23:59:59"),
      visible: false,
      noticeTitle: "",
      tmpData: {},
      tableKey: "1",
      timeType: 5,
      ordinaryCount: 0,
      crucialCount: 0,
      activityCount: 0,
      postCount: 0,
      postChangeCount: 0,
      taskCount: 0,
      weekColor: "black",
      monthColor: "orange",
      threeMonthColor: "black",
      sixMonthColor: "black",
      yearColor: "black",
      retData: [],
      groupData: [],
      detailData: [],
      newData: [],
      detailDataH: [],
      displayHr: "none",
      displaydetail: "none",
      columns: [
        {
          width: "80px",
          title: "序号",
          dataIndex: "Num",
          key: "Num",
          render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
          width: "250px",
          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: "250px",
          title: "班组",
          dataIndex: "TEAM_NAME",
          key: "TEAM_NAME",
          // render: (text, record) => (
          //   <span>
          //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
          //   </span>
          // ),
        },
        {
          title: "完成率",
          children: [
            {
              title: "班前会议",
              render: (text, record) => (
                <span>
                  {record.FO01_TOTAL == 0
                    ? "0%"
                    : (
                        ((record.FO01_FINISH + record.FO01_OVERTIME) /
                          record.FO01_TOTAL) *
                        100
                      ).toFixed(0) + "%"}
                </span>
              ),
            },
            {
              title: "岗位交接班",
              render: (text, record) => (
                <span>
                  {record.FO03_TOTAL == 0
                    ? "0%"
                    : (
                        ((record.FO03_FINISH + record.FO03_OVERTIME) /
                          record.FO03_TOTAL) *
                        100
                      ).toFixed(0) + "%"}
                </span>
              ),
            },
            {
              title: "岗位当班记录",
              render: (text, record) => (
                <span>
                  {record.FO02_TOTAL == 0
                    ? "0%"
                    : (
                        ((record.FO02_FINISH + record.FO02_OVERTIME) /
                          record.FO02_TOTAL) *
                        100
                      ).toFixed(0) + "%"}
                </span>
              ),
            },
          ],
        },
        // {
        //   title: '及时完成率',
        //   children: [
        //     {
        //       title: '班前会议',
        //       render: (text, record) => (<span>{record.FO01_TOTAL == 0?'0%':((record.FO01_FINISH/ record.FO01_TOTAL)*100).toFixed(0)+"%"}</span>)
        //     },
        //     {
        //       title: '岗位交接班',
        //       render: (text, record) => (<span>{record.FO03_TOTAL == 0?'0%':((record.FO03_FINISH / record.FO03_TOTAL)*100).toFixed(0)+"%"}</span>)
        //     },
        //     {
        //       title: '岗位当班记录',
        //       render: (text, record) => (<span>{record.FO02_TOTAL == 0?'0%':((record.FO02_FINISH / record.FO02_TOTAL)*100).toFixed(0)+"%"}</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",
        },
        {
          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>
          ),
        },
      ],
    };
    
  }

  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 = (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 });
  };

  //加载数据赋值
  loadData = () => {
    // this.getCompany();
    this.getCount();
    this.workTicket();
    this.workTicket2();
    this.mainJobPie2();
    this.getBaseInfoData();
  };
  // getCompany = ()=>
  // {
  //   let json = initFilter(this.props.login.OrgId);
  //   extendRule(json, "PARENT_ID", 1, null);
  //   extendRule(json, "DEPARTMENT_TYPE", 1, 3);
  //   extendRule(json, "ENABLE_STATUS", 1, 0);
  //   this.props.dispatch({
  //     type: "app/getDataByPost",
  //     url: "FM/Department/Get",
  //     payload: json,
  //     onlyData: false,
  //     onComplete: (ret) => {
  //       if (ret && ret.Data) {
  //         this.setState({
  //           tableTitle : ret.Data.NAME+"-"
  //         });
  //       }
  //     },
  //   });
  // };
  getDiffDay(date_1, date_2) {
    // 计算两个日期之间的差值
    let totalDays, diffDate;
    let myDate_1 = Date.parse(date_1);
    let myDate_2 = Date.parse(date_2);
    // 将两个日期都转换为毫秒格式，然后做差
    diffDate = Math.abs(myDate_1 - myDate_2); // 取相差毫秒数的绝对值

    totalDays = Math.floor(diffDate / (1000 * 3600 * 24)); // 向下取整
    // console.log(totalDays)

    return totalDays; // 相差的天数
  }

  //获取数据
  getBaseInfoData = () => {
    let json = initFilter(this.props.login.OrgId, "", "DEPARTMENT_NAME", "asc");
    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 span = this.getDiffDay(startTime, endTime);
    if (span <= 7) {
      extendRule(json, "FILTER_TIME", 1, 1);
    } else if (span > 7 && span <= 30) {
      extendRule(json, "FILTER_TIME", 1, 5);
    } else if (span > 30 && span <= 90) {
      extendRule(json, "FILTER_TIME", 1, 10);
    } else if (span > 90 && span <= 180) {
      extendRule(json, "FILTER_TIME", 1, 15);
    } else if (span > 180 && span <= 365) {
      extendRule(json, "FILTER_TIME", 1, 20);
    } else {
      extendRule(json, "FILTER_TIME", 1, 0);
    }
    extendRule(json, "DEPARTMENT_NAME", 2, "宁化行洛坑钨矿有限公司");
    extendRule(json, "DEPARTMENT_NAME", 2, "都昌金鼎钨钼矿业有限公司");
    extendRule(json, "DEPARTMENT_NAME", 2, "技术管理部");
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/SafetaskFinish/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.Data) {
          this.state.retData = ret.Data;
        }
      },
    });
  };
  getCount = () => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    const jsonTemp = initFilter(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");
    extendRule(jsonTemp, "CREATE_TIME", 6, startTime);
    extendRule(jsonTemp, "CREATE_TIME", 4, endTime);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: jsonTemp,
      url: "BI/BIStatiscialAnalysisController/GetTotalCount",
      onComplete: (ret) => {
        if (ret) {
          let riskLevels = document.getElementById("mainJobPie");
          if (riskLevels) {
            let myChart = echarts.init(riskLevels);
            myChart.setOption({
              backgroundColor: "#FFFFFF",
              title: [
                {
                  text: "班前会议完成率",
                  bottom: "12%",
                  x: "center",
                  // borderColor: "#1598FF",
                  // borderWidth: 1,
                  borderRadius: 15,
                  // backgroundColor: "#1598FF",
                  padding: [7, 14],
                  textStyle: {
                    // fontWeight: "bold",
                    fontSize: 14,
                    color: "#000",
                  },
                },
              ],
              angleAxis: {
                show: false,
                max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
                type: "value",
                startAngle: 225, //极坐标初始角度
                splitLine: {
                  show: false,
                },
              },
              barMaxWidth: 10, //圆环宽度
              radiusAxis: {
                show: false,
                type: "category",
              },
              //圆环位置和大小
              polar: {
                center: ["50%", "50%"],
                radius: "120%",
              },
              series: [
                {
                  type: "bar",
                  data: [
                    {
                      //上层圆环，显示数据
                      value: 95,
                      itemStyle: {
                        color: "#1598FF",
                      },
                    },
                  ],
                  barGap: "-100%", //柱间距离,上下两层圆环重合
                  coordinateSystem: "polar",
                  roundCap: true, //顶端圆角
                  z: 3, //圆环层级，同zindex
                },
                {
                  //下层圆环，显示最大值
                  type: "bar",
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        color: "#1598FF",
                        opacity: 0.2,
                        borderWidth: 0,
                      },
                    },
                  ],
                  barGap: "-100%",
                  coordinateSystem: "polar",
                  roundCap: true,
                  z: 1,
                },
                //仪表盘
                {
                  type: "gauge",
                  startAngle: 225, //起始角度，同极坐标
                  endAngle: -45, //终止角度，同极坐标
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  splitLabel: {
                    show: false,
                  },
                  pointer: {
                    // 分隔线
                    shadowColor: "auto", //默认透明
                    shadowBlur: 5,
                    length: "50%",
                    width: "1",
                  },
                  itemStyle: {
                    color: "#1598FF",
                    borderColor: "#1598FF",
                    borderWidth: 2,
                  },
                  detail: {
                    formatter: function (params) {
                      return 95 + "%";
                    },
                    color: "#1598FF",
                    fontSize: 20,
                    offsetCenter: [0, 80],
                  },
                  title: {
                    show: false,
                  },
                  data: [
                    {
                      value: 95,
                    },
                  ],
                },
                {
                  name: "外部刻度",
                  type: "gauge",
                  //  center: ['20%', '50%'],
                  radius: "73%",
                  min: 0, //最小刻度
                  max: 100, //最大刻度
                  splitNumber: 10, //刻度数量
                  startAngle: 225,
                  endAngle: -45,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 1,
                      color: [[1, "rgba(0,0,0,0)"]],
                    },
                  }, //仪表盘轴线
                  axisLabel: {
                    show: false,
                    color: "#4d5bd1",
                    distance: 25,
                  }, //刻度标签。
                  axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                      color: "#C7CBCF", //用颜色渐变函数不起作用
                      width: 2,
                    },
                    length: -8,
                  }, //刻度样式
                  splitLine: {
                    show: false,
                    length: -20,
                    lineStyle: {
                      color: "#C7CBCF", //用颜色渐变函数不起作用
                    },
                  }, //分隔线样式
                  detail: {
                    show: false,
                  },
                  pointer: {
                    show: false,
                  },
                },
                {
                  //指针外环
                  type: "pie",
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ["10%", "13%"],
                  z: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        normal: {
                          color: "#1598FF",
                        },
                      },
                    },
                  ],
                },
                {
                  //指针内环
                  type: "pie",
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ["0%", "10%"],
                  z: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        normal: {
                          color: "#FFFFFF",
                        },
                      },
                    },
                  ],
                },
              ],
            });
          }
          let riskLevel1s = document.getElementById("mainJobPie1");
          if (riskLevel1s) {
            let myChart1 = echarts.init(riskLevel1s);
            myChart1.setOption({
              backgroundColor: "#FFFFFF",
              title: [
                {
                  text: "岗位当班记录完成率",
                  bottom: "12%",
                  x: "center",
                  // borderColor: "#1598FF",
                  // borderWidth: 1,
                  borderRadius: 15,
                  // backgroundColor: "#1598FF",
                  padding: [7, 14],
                  textStyle: {
                    // fontWeight: "bold",
                    fontSize: 14,
                    color: "#000",
                  },
                },
              ],
              angleAxis: {
                show: false,
                max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
                type: "value",
                startAngle: 225, //极坐标初始角度
                splitLine: {
                  show: false,
                },
              },
              barMaxWidth: 10, //圆环宽度
              radiusAxis: {
                show: false,
                type: "category",
              },
              //圆环位置和大小
              polar: {
                center: ["50%", "50%"],
                radius: "120%",
              },
              series: [
                {
                  type: "bar",
                  data: [
                    {
                      //上层圆环，显示数据
                      value: 97,
                      itemStyle: {
                        color: "#f8a035",
                      },
                    },
                  ],
                  barGap: "-100%", //柱间距离,上下两层圆环重合
                  coordinateSystem: "polar",
                  roundCap: true, //顶端圆角
                  z: 3, //圆环层级，同zindex
                },
                {
                  //下层圆环，显示最大值
                  type: "bar",
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        color: "#f8a035",
                        opacity: 0.2,
                        borderWidth: 0,
                      },
                    },
                  ],
                  barGap: "-100%",
                  coordinateSystem: "polar",
                  roundCap: true,
                  z: 1,
                },
                //仪表盘
                {
                  type: "gauge",
                  startAngle: 225, //起始角度，同极坐标
                  endAngle: -45, //终止角度，同极坐标
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  splitLabel: {
                    show: false,
                  },
                  pointer: {
                    // 分隔线
                    shadowColor: "auto", //默认透明
                    shadowBlur: 5,
                    length: "50%",
                    width: "1",
                  },
                  itemStyle: {
                    color: "#f8a035",
                    borderColor: "#f8a035",
                    borderWidth: 2,
                  },
                  detail: {
                    formatter: function (params) {
                      return 97 + "%";
                    },
                    color: "#f8a035",
                    fontSize: 20,
                    offsetCenter: [0, 80],
                  },
                  title: {
                    show: false,
                  },
                  data: [
                    {
                      value: 97,
                    },
                  ],
                },
                {
                  name: "外部刻度",
                  type: "gauge",
                  //  center: ['20%', '50%'],
                  radius: "73%",
                  min: 0, //最小刻度
                  max: 100, //最大刻度
                  splitNumber: 10, //刻度数量
                  startAngle: 225,
                  endAngle: -45,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 1,
                      color: [[1, "rgba(0,0,0,0)"]],
                    },
                  }, //仪表盘轴线
                  axisLabel: {
                    show: false,
                    color: "#4d5bd1",
                    distance: 25,
                  }, //刻度标签。
                  axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                      color: "#C7CBCF", //用颜色渐变函数不起作用
                      width: 2,
                    },
                    length: -8,
                  }, //刻度样式
                  splitLine: {
                    show: false,
                    length: -20,
                    lineStyle: {
                      color: "#C7CBCF", //用颜色渐变函数不起作用
                    },
                  }, //分隔线样式
                  detail: {
                    show: false,
                  },
                  pointer: {
                    show: false,
                  },
                },
                {
                  //指针外环
                  type: "pie",
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ["10%", "13%"],
                  z: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        normal: {
                          color: "#f8a035",
                        },
                      },
                    },
                  ],
                },
                {
                  //指针内环
                  type: "pie",
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ["0%", "10%"],
                  z: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        normal: {
                          color: "#FFFFFF",
                        },
                      },
                    },
                  ],
                },
              ],
            });
          }
          let riskLevel3s = document.getElementById("mainJobPie3");
          if (riskLevel3s) {
            let myChart3 = echarts.init(riskLevel3s);
            myChart3.setOption({
              backgroundColor: "#FFFFFF",
              title: [
                {
                  text: "岗位交接班完成率",
                  bottom: "12%",
                  x: "center",
                  // borderColor: "#1598FF",
                  // borderWidth: 1,
                  borderRadius: 15,
                  // backgroundColor: "#1598FF",
                  padding: [7, 14],
                  textStyle: {
                    // fontWeight: "bold",
                    fontSize: 14,
                    color: "#000",
                  },
                },
              ],
              angleAxis: {
                show: false,
                max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
                type: "value",
                startAngle: 225, //极坐标初始角度
                splitLine: {
                  show: false,
                },
              },
              barMaxWidth: 10, //圆环宽度
              radiusAxis: {
                show: false,
                type: "category",
              },
              //圆环位置和大小
              polar: {
                center: ["50%", "50%"],
                radius: "120%",
              },
              series: [
                {
                  type: "bar",
                  data: [
                    {
                      //上层圆环，显示数据
                      value: 99,
                      itemStyle: {
                        color: "#f1516d",
                      },
                    },
                  ],
                  barGap: "-100%", //柱间距离,上下两层圆环重合
                  coordinateSystem: "polar",
                  roundCap: true, //顶端圆角
                  z: 3, //圆环层级，同zindex
                },
                {
                  //下层圆环，显示最大值
                  type: "bar",
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        color: "#f1516d",
                        opacity: 0.2,
                        borderWidth: 0,
                      },
                    },
                  ],
                  barGap: "-100%",
                  coordinateSystem: "polar",
                  roundCap: true,
                  z: 1,
                },
                //仪表盘
                {
                  type: "gauge",
                  startAngle: 225, //起始角度，同极坐标
                  endAngle: -45, //终止角度，同极坐标
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  splitLabel: {
                    show: false,
                  },
                  pointer: {
                    // 分隔线
                    shadowColor: "auto", //默认透明
                    shadowBlur: 5,
                    length: "50%",
                    width: "1",
                  },
                  itemStyle: {
                    color: "#f1516d",
                    borderColor: "#f1516d",
                    borderWidth: 2,
                  },
                  detail: {
                    formatter: function (params) {
                      return 99 + "%";
                    },
                    color: "#f1516d",
                    fontSize: 20,
                    offsetCenter: [0, 80],
                  },
                  title: {
                    show: false,
                  },
                  data: [
                    {
                      value: 99,
                    },
                  ],
                },
                {
                  name: "外部刻度",
                  type: "gauge",
                  //  center: ['20%', '50%'],
                  radius: "73%",
                  min: 0, //最小刻度
                  max: 100, //最大刻度
                  splitNumber: 10, //刻度数量
                  startAngle: 225,
                  endAngle: -45,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 1,
                      color: [[1, "rgba(0,0,0,0)"]],
                    },
                  }, //仪表盘轴线
                  axisLabel: {
                    show: false,
                    color: "#4d5bd1",
                    distance: 25,
                  }, //刻度标签。
                  axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                      color: "#C7CBCF", //用颜色渐变函数不起作用
                      width: 2,
                    },
                    length: -8,
                  }, //刻度样式
                  splitLine: {
                    show: false,
                    length: -20,
                    lineStyle: {
                      color: "#C7CBCF", //用颜色渐变函数不起作用
                    },
                  }, //分隔线样式
                  detail: {
                    show: false,
                  },
                  pointer: {
                    show: false,
                  },
                },
                {
                  //指针外环
                  type: "pie",
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ["10%", "13%"],
                  z: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        normal: {
                          color: "#f1516d",
                        },
                      },
                    },
                  ],
                },
                {
                  //指针内环
                  type: "pie",
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ["0%", "10%"],
                  z: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 100,
                      itemStyle: {
                        normal: {
                          color: "#FFFFFF",
                        },
                      },
                    },
                  ],
                },
              ],
            });
          }
          this.setState({
            ordinaryCount: ret.ordinaryCount,
            crucialCount: ret.crucialCount,
            activityCount: ret.activityCount,
            postCount: ret.postCount,
            postChangeCount: ret.postChangeCount,
            taskCount: ret.taskCount,
          });
        }
      },
    });
  };
  //
  workTicket = () => {
    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(
      this.props.login.OrgId,
      "10",
      "NUM",
      "asc",
      "",
      8,
      startTime,
      endTime
    );
    // extendRule(json, "DEPARTMENT_NAME", 1,"选矿部");
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.teamTop = data.Data.length;
          let teamName = [];
          let finishQty = [];
          data.Data.forEach((item) => {
            teamName.push(item.TEAM_NAME);
            let finishData = Number(item.CALC * 100).toFixed(2);
            finishQty.push(finishData);
          });
          let departmentCompletions = document.getElementById("workTicket");
          if (departmentCompletions) {
            let myChart = echarts.init(departmentCompletions);
            myChart.setOption(
              {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter: function (param) {
                    return (
                      param[0].name +
                      "<br>" +
                      param[0].marker +
                      " " +
                      param[0].seriesName +
                      "：" +
                      param[0].value +
                      "%"
                    );
                  },
                },
                grid: {
                  top: "2%",
                  bottom: -15,
                  right: "10%",
                  left: "10%",
                  containLabel: true,
                },
                xAxis: {
                  show: false,
                },
                yAxis: [
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: teamName,
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      interval: 0,
                      color: "#666",
                      align: "right",
                      margin: 20,
                      fontSize: 13,

                      rich: {
                        idx0: {
                          color: "#FB375E",
                          backgroundColor: "#FFE8EC",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx1: {
                          color: "#FF9023",
                          backgroundColor: "#FFEACF",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx2: {
                          color: "#01B599",
                          backgroundColor: "#E1F7F3",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx: {
                          color: "#333",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        title: {
                          width: 165,
                        },
                      },
                    },
                  },
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: finishQty,
                    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,
                    data: finishQty,
                    barWidth: 10,
                    itemStyle: {
                      color: "#1990FF",
                      barBorderRadius: 30,
                    },
                    formatter: "{value}%",
                  },
                ],
              },
              true
            );
          }
        }
      },
    });
  };
  workTicket2 = () => {
    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(
      this.props.login.OrgId,
      "30",
      "NUM",
      "asc",
      "",
      8,
      startTime,
      endTime
    );
    // extendRule(json, "DEPARTMENT_NAME", 1,"选矿部");
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.teamTop = data.Data.length;
          let teamName = [];
          let finishQty = [];
          data.Data.forEach((item) => {
            teamName.push(item.TEAM_NAME);
            let finishData = Number(item.CALC * 100).toFixed(2);
            finishQty.push(finishData);
          });
          let departmentCompletions = document.getElementById("workTicket2");
          if (departmentCompletions) {
            let myChart = echarts.init(departmentCompletions);
            myChart.setOption(
              {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter: function (param) {
                    return (
                      param[0].name +
                      "<br>" +
                      param[0].marker +
                      " " +
                      param[0].seriesName +
                      "：" +
                      param[0].value +
                      "%"
                    );
                  },
                },
                grid: {
                  top: "2%",
                  bottom: -15,
                  right: "10%",
                  left: "10%",
                  containLabel: true,
                },
                xAxis: {
                  show: false,
                },
                yAxis: [
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: teamName,
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      interval: 0,
                      color: "#666",
                      align: "right",
                      margin: 20,
                      fontSize: 13,

                      rich: {
                        idx0: {
                          color: "#FB375E",
                          backgroundColor: "#FFE8EC",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx1: {
                          color: "#FF9023",
                          backgroundColor: "#FFEACF",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx2: {
                          color: "#01B599",
                          backgroundColor: "#E1F7F3",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx: {
                          color: "#333",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        title: {
                          width: 165,
                        },
                      },
                    },
                  },
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: finishQty,
                    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,
                    data: finishQty,
                    barWidth: 10,
                    itemStyle: {
                      color: "#1990FF",
                      barBorderRadius: 30,
                    },
                    formatter: "{value}%",
                  },
                ],
              },
              true
            );
          }
        }
      },
    });
  };
  //关键许可工作票（饼图）
  mainJobPie2 = () => {
    let json = initFilter(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");
    extendRule(json, "CREATE_TIME", 6, startTime);
    extendRule(json, "CREATE_TIME", 4, endTime);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetLicenseJob",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let riskLevel = [];
          let showData = [];
          let color = ["#C00000", "#FFC000", "#006600", "#00B0F0", "#00B0C0"];
          let numAll = 0;
          data.Data.forEach((item) => {
            riskLevel.push(item.RISK_LEVEL);
            showData.push({ value: item.COUNT, name: item.RISK_LEVEL });
            numAll = numAll + item.COUNT;
          });
         
          let riskLevels = document.getElementById("mainJobPie2");
          if (riskLevels) {
            let myChart = echarts.init(riskLevels);
            myChart.setOption({
              color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
              title: [
                {
                  text: numAll,
                  x: "24%",
                  y: "40%",
                  textStyle: {
                    fontSize: 26,
                    fontWeight: "normal",
                    color: ["#333"],
                  },
                },
                {
                  text: "关键作业/许可作业",
                  x: "20%",
                  y: "55%",
                  textStyle: {
                    color: "#666",
                    fontSize: 12,
                  },
                },
              ],
              tooltip: {
                trigger: "item",
                formatter: "{b}:({d}%)",
              },
              legend: {
                icon: "pin",
                orient: "vartical",
                // x: "right",
                // top: "18%",
                x: "60%",
                y: "center",
                // bottom: "20%",
                data: riskLevel,
                // itemWidth: 20,
                // itemHeight: 14,
                itemGap: 25,
                formatter: function (name) {
                  //通过name获取到数组对象中的单个对象
                  let singleData = showData.filter(function (item) {
                    return item.name == name;
                  });
                  let countAll = 0;
                  showData.map((item) => {
                    countAll = countAll + item.value;
                  });

                  return (
                    name +
                    "  |  " +
                    singleData[0].value +
                    "   |   " +
                    Number((singleData[0].value / countAll) * 100).toFixed(2) +
                    "%"
                  );
                },
              },
              grid: {
                left: 30,
                containLabel: true,
                bottom: 10,
                top: 10,
                right: 30,
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  clockwise: false,
                  // minAngle: 20,
                  avoidLabelOverlap: false,
                  radius: ["50%", "65%"],
                  center: ["30%", "50%"],
                  itemStyle: {
                    //图形样式
                    normal: {
                      borderColor: "#ffffff",
                      borderWidth: 4,
                      padding: "0 20px",
                      borderRadius: 50,
                    },
                  },
                  label: {
                    show: false,
                  },
                  // color: color,
                  data: showData,
                },
              ],
            });
          }
        }
      },
    });
  };
  compare = (val1, val2) => {
    return val2.NUM - val1.NUM;
  };
  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;
  };
  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 formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    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>
          {/* {this.props.data.name} */}
          <h1
            style={{
              textAlign: "center",
              marginTop: "30px",
              fontWeight: "bold",
            }}
          >

            {/* {this.state.tableTitle} */}
            作业现场管理统计分析
          </h1>
          <br></br>
          <Row>
            <Col span={7} style={{ marginLeft: "10px" }}></Col>
            <Col span={4} style={{ align: "center" }}>
              <Form.Item label={"查询时间"} {...formItemLayout}>
                <DatePicker
                  style={{ width: "150px" }}
                  //  defaultValue={moment(this.state.startTime, 'YYYY-MM-DD 00:00:00')}
                  value={this.state.selectStartTime}
                  format="YYYY-MM-DD"
                  onChange={this.startChange}
                />
              </Form.Item>
            </Col>

            <Col span={4} style={{ align: "center" }}>
              <Form.Item label={"至"} {...formItemLayout}>
                <DatePicker
                  style={{ width: "150px" }}
                  // defaultValue={moment(this.state.endTime, 'YYYY-MM-DD 23:59:59')}
                  value={this.state.selectEndTime}
                  format="YYYY-MM-DD"
                  onChange={this.endChange}
                />
              </Form.Item>
            </Col>
            <Col span={3} style={{ marginLeft: "50px" }}>
              <Button type="primary" onClick={() => this.loadData()}>
                查询
              </Button>
            </Col>
          </Row>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginTop: "10px",
              //   marginBottom: "20px",
            }}
          >
            <div className={styles.menuPie}>
              <li>
                一般作业活动记录
                <br />
                <div className={styles.dataStyle}>
                  {this.state.ordinaryCount}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                许可作业活动记录
                <br />
                <div className={styles.dataStyle1}>
                  {this.state.crucialCount}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                班组安全活动
                <br />
                <div className={styles.dataStyle3}>
                  {this.state.activityCount}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                岗位当班记录
                <br />
                <div className={styles.dataStyle2}>{this.state.postCount}</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}>
                  {this.state.postChangeCount}
                </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}>{this.state.taskCount}</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",
              }}
            >
              <Col span={12}>
                <Col span={8}>
                  <div
                    id="mainJobPie"
                    style={{ width: "100%", height: "350px" }}
                  ></div>
                </Col>
                <Col span={8}>
                  <div
                    id="mainJobPie1"
                    style={{ width: "100%", height: "350px" }}
                  ></div>
                </Col>
                <Col span={8}>
                  <div
                    id="mainJobPie3"
                    style={{ width: "100%", height: "350px" }}
                  ></div>
                </Col>
              </Col>

              <Col span={12}>
                <div
                  id="mainJobPie2"
                  style={{ width: "100%", height: "350px" }}
                ></div>
              </Col>
            </div>
          </Row>
          <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",
              }}
            >
              <Col span={12} style={{ borderRight: "1px solid #e7e6e4" }}>
                <h3 style={{ textAlign: "center", fontWeight: "bold" }}>
                  矿山部-班组及时完成率排名(%)
                </h3>
                <div
                  id="workTicket2"
                  style={{
                    height: "350px",
                    // marginLeft: "40px",
                    // marginRight: "10px",
                    backgroundColor: "white",
                  }}
                ></div>
              </Col>
              <Col span={12}>
                <h3 style={{ textAlign: "center", fontWeight: "bold" }}>
                  选矿部-班组及时完成率排名(%)
                </h3>
                <div
                  id="workTicket"
                  style={{
                    height: "350px",
                    // marginLeft: "40px",
                    // marginRight: "10px",
                    backgroundColor: "white",
                  }}
                ></div>
              </Col>
            </div>
            {/* <Col span={11}>
              <h3 style={{ textAlign: "center", fontWeight: "bold" }}>
                关键作业/许可作业
              </h3>
              <div
                id="mainJobPie2"
                style={{
                  width: "560px",
                  height: "350px",
                  marginLeft: "20px",
                  backgroundColor: "white",
                  borderStyle: "solid",
                  borderColor: "#ccc",
                  borderWidth: "1px",
                }}
              ></div>
            </Col> */}
          </Row>
          <hr
            style={{
              border: "1px dashed #ccc",
              marginBottom: "20px",
              marginTop: "20px",
            }}
          ></hr>
          <Row
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              margin: "10px 0px",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                alignItems: "center",
                width: "1000px",
              }}
            >
              <Table
                style={{
                  width: "100%",
                  // marginLeft: "20px",
                  textAlign: "center",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </div>
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI009FormRunAnalysis
);