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,Progress} from 'antd';
import echarts from 'echarts';
import styles from '../HI/StepForm.css';
import moment from 'moment'
import { T } from 'antd/lib/upload/utils';
import FormPage from '../../FormPage'

class BI007FormRunAnalysis extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: 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:[],
        groupData:[],
        detailData:[],
        newData:[],
        detailDataH:[],
        displayHr:'none',
        displaydetail:'none',
        columns: [
            {
                width: "100px",
                title: '车间(人数)',
                dataIndex: 'DEPARTMENT_NAME',
                key: 'DEPARTMENT_NAME',
                // render: (text, record) => (
                //   <span>
                //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                //   </span>
                // ),
              },
              {
                width: "60px",
                title: '总任务数',
                dataIndex: 'TOTAL_QTY',
                key: 'TOTAL_QTY'
              },
              {
                width: "60px",
                title: '正常已办',
                dataIndex: 'FINISH_QTY',
                key: 'FINISH_QTY'
              },
              {
                width: "60px",
                title: '超时已办',
                dataIndex: 'OVER_FINISH_QTY',
                key: 'OVER_FINISH_QTY'
              },
              {
                width: "50px",
                title: '未完成',
                dataIndex: 'UNFINISH_QTY',
                key: 'UNFINISH_QTY',
              },
              {
                width: "50px",
                  title: '完成率',
                  dataIndex: 'FINISH_RATE',
                  key: 'FINISH_RATE',
                },
                {
                    width: "70px",
                  title: '及时完成率',
                  dataIndex: 'NORMAL_FINISH_RATE',
                  key: 'NORMAL_FINISH_RATE',
                }
        ],
        detailColumns: [
          {
              width: "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
  })
  }
  // showEditModal = (dataId, formCode, TaskID, title, taskCode) => {

  //   const newtmpData = {
  //     data: {
  //       id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
  //       homeReload: true
  //     },
  //     formCode: formCode,
  //   }
  //   this.setState({
  //     noticeTitle: title,
  //     taskCode: taskCode,
  //     tmpData: newtmpData,
  //     currActivatedMenu: ''
  //   }, () => this.setState({
  //     visible: true
  //   }));
  // }
   
    getDate=(type)=>{
        let  date = new Date()
        let  y = date .getFullYear()
        let  m = date .getMonth() + 1
        let  d = date .getDate();
        //  当前日期
        let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
        let pastDate = moment(nowDate).add(-1, "month").format('YYYYMMDD')
            let weekColor='black';
            let monthColor='orange';
            let threeMonthColor='black';
            let sixMonthColor='black';
            let yearColor='black';
            let timeType=5;
             if(type==="Week")
            {
                pastDate=moment(nowDate).add(-7, "d").format("YYYYMMDD")
                weekColor='orange';
                monthColor='black';
                threeMonthColor='black';
                sixMonthColor='black';
                yearColor='black';
                timeType=1;
            }
            if(type==="ThreeMonth")
            {
                pastDate=moment(nowDate).add(-3, "month").format("YYYYMMDD")
                weekColor='black';
                monthColor='black';
                threeMonthColor='orange';
                sixMonthColor='black';
                yearColor='black';
                timeType=10;
            }
            if(type==="SixMonth")
            {
                pastDate=moment(nowDate).add(-6, "month").format("YYYYMMDD")
                weekColor='black';
                monthColor='black';
                threeMonthColor='black';
                sixMonthColor='orange';
                yearColor='black';
                timeType=15;
            }
            if(type==="Year")
            {
                pastDate=moment(nowDate).add(-1, "year").format("YYYYMMDD")
                weekColor='black';
                monthColor='black';
                threeMonthColor='black';
                sixMonthColor='black';
                yearColor='orange';
                timeType=20;
            }
            this.setState({
              startTime: pastDate,
                timeType: timeType,
                weekColor:weekColor,
                monthColor:monthColor,
                threeMonthColor:threeMonthColor,
                sixMonthColor:sixMonthColor,
                yearColor:yearColor
              },()=>{
                if(type)
                {
                  this.loadData();
                }
              })
            return pastDate;
    }
  //加载数据赋值
  loadData = () => {
    // this.ksRun();
    // this.xkRun();
    this.getClassDepartment();
    this.getShopDepartment();
  }
  //矿山
  ksRun = () => {
    let json = initFilter(this.props.login.OrgId);
    extendRule(json, 'DEPARTMENT_NAME', 1, "矿山部");
    extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/DepartmentMonthRun/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data && data.IsSuccessful) {
      let month = [];
      let company = [];
      let department = [];
      data.Data.forEach(item => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
      })
      let myChart = echarts.init(document.getElementById('ksRun'));
      myChart.setOption({
        // title: {
        //     text: "矿山部-安全生产标准化运行走势图",
        //     left: 'center'
        //   },
        tooltip: {
          trigger: 'axis',
        //   formatter: function (params) {
        //     let temp=''
        //     params.forEach(t=>{
        //         temp=temp+t.seriesName +":"+t.value+"%"+'<br />';
               
        //     })
        //     return temp;
        //   }
        },
        legend: {
          // data: ['部门'],
          data: ['完成率', '及时完成率'],
          bottom: '10px'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: month,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000',
            rotate: 40,
            formatter: function (value) { // 自定义文字超出部分 ...
              if (value.length > 10) {
                return `${value.slice(0, 10)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
        axisLabel: {
            formatter: function (val) {
              return (val)+ '%';
            }
          },
        },
        series: [
          {
            name: '完成率',
            type: 'line',
            color: '#4b9bf3',
            data: company
          },
          {
            name: '及时完成率',
            type: 'line',
            color: '#FCD149',
            data: department
          },
         
        ]
      })
    }
      }
    });
  }
  //选矿
   xkRun = () => {
    let json = initFilter(this.props.login.OrgId);
    extendRule(json, 'DEPARTMENT_NAME', 1, "选矿部");
    extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/DepartmentMonthRun/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data && data.IsSuccessful) {
      let month = [];
      let company = [];
      let department = [];
      data.Data.forEach(item => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
      })
      let myChart = echarts.init(document.getElementById('xkRun'));
      myChart.setOption({
        // title: {
        //     text: "选矿部-安全生产标准化运行走势图",
        //     padding: [0,100,100,100],
        //     left: 'center'
        //   },
        tooltip: {
          trigger: 'axis',
        //   formatter: function (params) {
        //     let temp=''
        //     params.forEach(t=>{
        //         temp=temp+t.seriesName +":"+t.value+"%"+'<br />';
               
        //     })
        //     return temp;
        //   }
        },
        legend: {
          // data: ['部门'],
          data: ['完成率', '及时完成率'],
          bottom: '10px'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: month,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000',
            rotate: 40,
            formatter: function (value) { // 自定义文字超出部分 ...
              if (value.length > 10) {
                return `${value.slice(0, 10)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
        axisLabel: {
            formatter: function (val) {
              return (val)+ '%';
            }
          },
        },
        series: [
          {
            name: '完成率',
            type: 'line',
            color: '#4b9bf3',
            data: company
          },
          {
            name: '及时完成率',
            type: 'line',
            color: '#FCD149',
            data: department
          },
         
        ]
      })
    }
      }
    });
  }
  //
  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 = []
  //     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 = [];
      // 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)
      // })
      retData.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=()=>{
    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=[];
            retDepart.forEach(t=>{
              let tempNow={
                DEPARTMENT_ID:t.ID,
                DEPARTMENT_NAME:t.NAME,
                TOTAL_QTY:0,
                FINISH_QTY:0,
                OVER_FINISH_QTY:0,
                UNFINISH_QTY:0,
                FINISH_RATE:"0%",
                NORMAL_FINISH_RATE:"0%"};
                tempDepart.push(tempNow);
            })
            
            let json = initFilter(orgId);
            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);
            this.props.dispatch({
              type: 'app/getDataByPost',
              payload: json,
              url: 'BI/SystemRunSummary/OrderEntities',
              onComplete: (ret) => {
                if (ret) {
                  let temp=[];
                  if(ret)
                  {
                    tempDepart.forEach(t=>{
                      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+"%";
                       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
                    })
                  //   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);
                  // })
                }
                   
                }
              }
              })
          }
      }
  })
 }
 getShopDepartment=()=>{
    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=[];
            retDepart.forEach(t=>{
              let tempNow={
                DEPARTMENT_ID:t.ID,
                DEPARTMENT_NAME:t.NAME,
                TOTAL_QTY:0,
                FINISH_QTY:0,
                OVER_FINISH_QTY:0,
                UNFINISH_QTY:0,
                FINISH_RATE:"0%",
                NORMAL_FINISH_RATE:"0%"};
                tempDepart.push(tempNow);
            })
            
            let json = initFilter(orgId);
            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/SystemRunSummary/OrderEntities',
              onComplete: (ret) => {
                if (ret) {
                  let temp=[];
                  if(ret)
                  {
                    let t1 = 0;
                    let t2 = 0;
                    let t3 = 0;
                    let t4 = 0;
                    tempDepart.forEach(t=>{
                      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,
                        totalCount:t1,
                        finishCount:t2,
                        overtimeCount:t3,
                        unfinishCount:t4,
                        rate:t5,
                        normalRate:t6,
                    },()=>{
                      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();
  }
  render() {
    const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,
        weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,
      } = this.state;
    let allFinishRate=totalCount ===0?0:((finishCount+overtimeCount)/totalCount * 100).toFixed(0);
    let finishRate=totalCount ===0?0:(finishCount/totalCount * 100).toFixed(0);
    return <div>
      {/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
       <div style={{backgroundColor:'white',width:'1200px',top:'0',bottom:'0',left:'0',right:'0',margin:'auto',borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px',}}>
       <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.closeModal}
          // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
          {/* {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>
        <span style={{width:"800px",marginLeft:"20px"}}>
          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{totalCount}</span></Button>
          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>正常已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{finishCount}</span></Button>
          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{overtimeCount}</span></Button>
          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>未完成数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{unfinishCount}</span></Button>
          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{allFinishRate}%</span></Button>
          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{finishRate}%</span></Button>
        </span>
        <span style={{float:"right",marginTop:"20px",width:"400px"}}>
          <Col  span={4}>  <Button type='link' style= {{color:weekColor,marginRight:"5px"}} onClick={() => this.getDate("Week")}>最近1周</Button></Col>
          <Col  span={4}>  <Button type='link' style= {{color:monthColor,marginRight:"5px"}} onClick={() => this.getDate("Month")}>最近1月</Button></Col>
          <Col  span={4}>  <Button type='link' style= {{color:threeMonthColor,marginRight:"5px"}} onClick={() => this.getDate("ThreeMonth")}>最近3月</Button></Col>
          <Col span={4}>  <Button type='link' style= {{color:sixMonthColor,marginRight:"5px"}} onClick={() => this.getDate("SixMonth")}>最近半年</Button></Col>
          <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("Year")}>最近1年</Button></Col>
          {/* <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("All")}>全部</Button></Col> */}
        </span>
        <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr>
        <Row style={{marginTop:"10px"}}>
            <Col span={11}>
            <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"20px"}}><Icon type="appstore"/> 车间统计分析</h2>
            <Table style={{width:'560px',marginLeft:"20px",textAlign:'center'}}
            // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </Col>
            <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>
            <Col span={6}>
            <h3 style={{textAlign:'center',fontWeight:'bold'}}>{this.props.data.name}安全任务完成率</h3>
              <div id="mainJobPie2" style={{ height: '350px',marginLeft:"0px" ,marginRight:"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={{marginBottom:"10px"}}>
            <Col span={24}>
            <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 班组统计分析</h2>
            <Table style={{marginLeft:"20px",marginRight:"20px",width:'1150px',textAlign:'center'}}
            // scroll={{ y: 400 }}
            dataSource={this.state.detailData}
            columns={this.state.detailColumns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </Col>
        </Row>
        
      </div>
    </div >
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI007FormRunAnalysis)