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} 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'
function groupBy(array,id){
    let groups = {};
    array.forEach( function( o ) {
        let group = JSON.stringify( o[id] );
        groups[group] = groups[group] || [];
        groups[group].push( o );
    });
    return Object.values(groups);
}
class BI008FormRunAnalysis 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:[],
        formData:[],
        detailData:[],
        newData:[],
        detailDataH:[],
        userData:[],
        displayHr:'none',
        displaydetail:'none',
        columns:  [
            // {
            //     width: "55px",
            //     title: '序号',
            //     dataIndex: 'NUM',
            //     key: 'NUM',
            //   },
              {
                width: "100px",
                title: '模块名称',
                dataIndex: 'MOUDLE_NAME',
                key: 'MOUDLE_NAME',
                render: (text, record) => (
                  <span>
                    <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
                  </span>
                ),
              },
              {
                width: "60px",
                title: '总任务数',
                dataIndex: 'TOTAL_QTY',
                key: 'TOTAL_QTY'
              },
              {
                width: "60px",
                title: '正常已办',
                dataIndex: 'FINISH_QTY',
                key: 'FINISH_QTY'
              },
              {
                width: "60px",
                title: '超时已办',
                dataIndex: 'OVER_FINISH_QTY',
                key: 'OVER_FINISH_QTY'
              },
              {
                width: "50px",
                title: '未完成',
                dataIndex: 'UNFINISH_QTY',
                key: 'UNFINISH_QTY',
              },
              {
                width: "50px",
                  title: '完成率',
                  dataIndex: 'FINISH_RATE',
                  key: 'FINISH_RATE',
                },
                {
                  width: "70px",
                title: '及时完成率',
                dataIndex: 'NORMAL_FINISH_RATE',
                key: 'NORMAL_FINISH_RATE',
              }
        ],
        detailColumns: [
          {
              width: "100px",
              title: '表单名称',
              dataIndex: 'SOURCE_FORMCODE',
              key: 'SOURCE_FORMCODE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showViewModal(record)}>{record.SOURCE_FORMCODE}</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',
              }
      ],
      viewColumns: [
        // {
        //   width: "80px",
        //   title: '表单名称',
        //   dataIndex: 'SOURCE_FORMCODE',
        //   key: 'SOURCE_FORMCODE',
        //   render:(value,record,index)=>{
        //     const obj={
        //         children:value,
        //         props:{}
        //     };
        //     let arr=this.state.detailDataH.filter((res)=>{
        //         return res.SOURCE_FORMCODE==record.SOURCE_FORMCODE;
        //     });
        //     if(index==0 || this.state.detailDataH[index-1].SOURCE_FORMCODE!=record.SOURCE_FORMCODE)
        //     {
        //         obj.props.rowSpan=arr.length;
        //     }else{
        //         obj.props.rowSpan=0;
        //     }
        //     return obj;
        // },
        // },
        {
            width: "10px",
            title: '序号',
            dataIndex: 'ROW_NO',
            key: 'ROW_NO',
          },
          {
            width: "80px",
            title: '任务名称',
            dataIndex: 'NOTICE_TITLE',
            key: 'NOTICE_TITLE',
          },
          {
            width: "80px",
            title: '发起日期',
            dataIndex: 'CREATE_TIME',
            key: 'CREATE_TIME'
          },
          {
            width: "60px",
            title: '发起人',
            dataIndex: 'USER_NAME',
            key: 'USER_NAME',
          },
          {
            width: "60px",
              title: '状态',
              dataIndex: 'NOTICE_STATUS',
              key: 'NOTICE_STATUS',
              render: (text, record) => (
                <span>
                    {this.props.data.enums ? this.props.data.enums.FMNoticeStatusEnum.enums[record.NOTICE_STATUS] :this.props.app.enums.FMNoticeStatusEnum.enums[record.NOTICE_STATUS]}
                </span>
              ),
          },
    ],
      };
  };

  componentDidMount() {
    this.loadData()
  };
  showViewModal = (record) => {
    const {newData,formData,userData} = this.state;
    let newDataTemp=[]
    let form = formData.filter(t=>t.NAME ===record.SOURCE_FORMCODE);
    let temp=newData.filter(t=>t.SOURCE_FORMCODE ===form[0]?.CODE);
    if(temp.length>0)
    {
   let i=1;
      temp.forEach(t=>{
        let user=userData.filter(m=>m.ID ===t.CREATE_USER_ID);
        t.USER_NAME = user && user[0]? user[0].NAME:"管理员"
        t.ROW_NO=i;
          newDataTemp.push(t);
       i++;
        })
    }
    else
    {
      newDataTemp=[]
    }
    this.setState({displayHr:'block',detailDataH:newDataTemp
  })
  }
  showFormModal=(mouldName)=>{
    const {newData,formData} = this.state;
    
    let newDataTemp=[]
    let temp=newData.filter(t=>t.MOUDLE_NAME===mouldName);
    if(temp.length>0)
    {
        let tempa = groupBy(temp,'SOURCE_FORMCODE')
        
    //   let i=1;
      tempa.forEach(item=>{
        let xx=item.filter(t=>t.SOURCE_FORMCODE===item[0].SOURCE_FORMCODE);
        if(xx.length>0)
        {
            let form = formData.filter(t=>t.CODE ===item[0].SOURCE_FORMCODE);
            let finishQty=xx.filter(y=>y.NOTICE_STATUS===1).length;
            let overfinishQty=xx.filter(y=>y.NOTICE_STATUS===2).length;
            let tempb= {
                SOURCE_FORMCODE : form[0]?.NAME,
                TOTAL_QTY :xx.length,
                FINISH_QTY : finishQty,
                OVER_FINISH_QTY : overfinishQty,
                UNFINISH_QTY : xx.length -finishQty -overfinishQty,
                FINISH_RATE : xx.length ===0?"0%": ((finishQty+overfinishQty)/xx.length *100).toFixed(0)+"%",
                NORMAL_FINISH_RATE : xx.length===0?"0%":(finishQty/xx.length *100).toFixed(0)+"%",
              }
              newDataTemp.push(tempb);
        }
        //   i++;
        })
    }
    else
    {
      newDataTemp=[]
    }
    this.setState({displaydetail:'block',displayHr:'none',detailData: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.getShopDepartment();
  }
 
 getShopDepartment=()=>{
    let allData= [{
        MOUDLE_NAME : "风险管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "安全检查",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "作业现场管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "法律法规与其他要求",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "安全教育培训",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "方针与目标管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "绩效测量与评价",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "生产工艺管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "事故事件",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "安全生产组织保障",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },{
        MOUDLE_NAME : "安全投入、科技与工伤",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },
      {
        MOUDLE_NAME : "职业卫生",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },
      {
        MOUDLE_NAME : "应急管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },
      {
        MOUDLE_NAME : "机电安全管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },
      {
        MOUDLE_NAME : "会议管理",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },
      {
        MOUDLE_NAME : "标准化创建",
        TOTAL_QTY :0,
        FINISH_QTY : 0,
        OVER_FINISH_QTY : 0,
        UNFINISH_QTY : 0,
        FINISH_RATE : 0+"%",
        NORMAL_FINISH_RATE : 0+"%",
      },
      ]
    var orgId = this.props.login ? this.props.login.OrgId : '';
    const jsonTemp = initFilter(orgId)
    extendRule(jsonTemp, "DEPARTMENT_TYPE", 1, 0);
    extendRule(jsonTemp, 'NAME', 1, this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: jsonTemp,
      url: 'FM/Department/Get',
      onComplete: (retDepart) => {
          if (retDepart) {
            let startTime=this.state.startTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1-$2-$3")
            let endTime=this.state.endTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1-$2-$3")
            let json = initFilter(orgId,retDepart.ID,'','','',startTime,endTime);
            this.props.dispatch({
              type: 'app/getDataByPost',
              payload: json,
              url: 'BI/BIStatiscialAnalysisController/GetFormTask',
              onComplete: (ret) => {
                if (ret) {
                  let temp=[];
                  if(ret)
                  {
                    let t1 = 0;
                    let t2 = 0;
                    let t3 = 0;
                    let t4 = 0;
                    allData.forEach(t=>{
                      let group=ret.groupData.filter(m=>m.mouldName === t.MOUDLE_NAME)
                      if(group.length>0)
                      {
                        t.MOUDLE_NAME = group[0].mouldName;
                        t.TOTAL_QTY = group[0].totalCount;
                        t.FINISH_QTY = group[0].doneCount;
                        t.OVER_FINISH_QTY = group[0].timeOverCount;
                        t.UNFINISH_QTY = group[0].totalCount - group[0].doneCount -group[0].timeOverCount;
                        t.FINISH_RATE = group[0].totalCount === 0?"0%":((group[0].doneCount+group[0].timeOverCount)/group[0].totalCount *100).toFixed(0)+"%";
                        t.NORMAL_FINISH_RATE =group[0].totalCount === 0?"0%":(group[0].doneCount/group[0].totalCount *100).toFixed(0)+"%";
                        t1 = t1 + group[0].totalCount;
                        t2 = t2 + group[0].doneCount;
                        t3 = t3 + group[0].timeOverCount;
                      }
                      temp.push(t);
                    })
                    t4 = t1 -t2 -t3;
                    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,
                      formData:ret.formData,
                      newData:ret.newData,
                      userData:ret.userData,
                        totalCount:t1,
                        finishCount:t2,
                        overtimeCount:t3,
                        unfinishCount:t4,
                        rate:t5,
                        normalRate:t6,
                        displayHr:'none',
                displaydetail:'none'
                    })
                  //   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',}}>
        <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:"30px"}}>
          <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={4}>
            {
                                    this.state.retData && this.state.retData.map((item,i)=>{
                                        if(i<=8)
                                        {
                                            return <tr>
                                            <td>
                                            <Button style={{width:"200px",height:"60px",borderRadius: '8px',border:'1px green solid',marginLeft:"30px",marginTop:"10px"}}>{item.MOUDLE_NAME}<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{item.TOTAL_QTY}</span></Button>
                                            </td>
                                        </tr>
                                        }
                                       
                                    })
                                }
                                
            {/* <Row>
              <Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginLeft:"30px",marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{totalCount}</span></Button>
              <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>正常已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{finishCount}</span></Button></Col>
            </Row>
            <Row style={{marginTop:"10px"}}>
              <Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginLeft:"30px",marginRight:"10px"}}>未完成数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{unfinishCount}</span></Button>
              <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>超时已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{overtimeCount}</span></Button></Col>
            </Row>
            <Row style={{marginTop:"10px"}}>
              <Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginLeft:"30px",marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{allFinishRate}</span></Button>
              <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{finishRate}</span></Button></Col>
            </Row> */}
          </Col>
          <Col span={4} style={{marginLeft:"10px"}}>
                                 {
                                    this.state.retData && this.state.retData.map((item,i)=>{
                                        if(i>8)
                                        {
                                            return <tr>
                                            <td>
                                            <Button style={{width:"200px",height:"60px",borderRadius: '8px',border:'1px green solid',marginLeft:"30px",marginTop:"10px"}}>{item.MOUDLE_NAME}<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{item.TOTAL_QTY}</span></Button>
                                            </td>
                                        </tr>
                                        }
                                       
                                    })
                                }
          </Col>
            <Col span={12} style={{marginLeft:"30px"}}>
            <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 模块统计分析</h2>
            <Table style={{width:'700px',marginLeft:"30px",marginRight:"30px",textAlign:'center'}}
            // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
              />
            </Col>
        </Row>
        <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr>
        <Row style={{display:this.state.displaydetail,marginBottom:"10px"}}>
            <Col span={24}>
            <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 表单统计分析</h2>
            <Table style={{marginLeft:"30px",marginRight:"30px",width:'1140px',textAlign:'center'}}
            // scroll={{ y: 400 }}
            dataSource={this.state.detailData}
            columns={this.state.detailColumns}
                pagination={false}
                loading={false}
                size="small"
              />
            </Col>
        </Row>
        <Row style={{display:this.state.displayHr}}>
        <Table
             style={{marginLeft:"30px",marginRight:"30px",width:'1140px',textAlign:'center',marginBottom:"10px"}}
       
             dataSource={this.state.detailDataH}
                columns={this.state.viewColumns}
                pagination={false}
                loading={false}
                size="small"
              />
        </Row>
      </div>
    </div >
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI008FormRunAnalysis)
