import React from 'react'
import { connect } from 'dva'
import { initFilter, extendRule, extendInclude } from "../../../utils/common"
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
import { Table, Button,  Row, Col,Modal } 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 BI003StatiscialAnalysis extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      noticeTitle: '',
      tmpData: {},
      tableKey: "1",
        startTime: this.getDate(),
        endTime:moment(new Date()).format("YYYYMMDD"),
        totalCount:1,
        finishCount:0,
        overtimeCount:0,
        unfinishCount:0,
        dtotalCount:1,
        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',
        departmentName:'矿山部',
        columns: [
            {
                width: "90px",
                title: '部门',
                dataIndex: 'departmentName',
                key: 'departmentName',
                render: (text, record) => (
                  <span>
                    <a onClick={() => this.showEditModal(record)}>{record.departmentName}</a>
                  </span>
                ),
              },
              {
                width: "80px",
                title: '正常已办',
                dataIndex: 'doneCount',
                key: 'doneCount'
              },
              {
                width: "80px",
                title: '超时已办',
                dataIndex: 'timeOverCount',
                key: 'timeOverCount'
              },
              {
                width: "60px",
                title: '未完成',
                dataIndex: 'unDoneCount',
                key: 'unDoneCount',
              },
              {
                width: "60px",
                  title: '完成率',
                  dataIndex: 'allDoneRate',
                  key: 'allDoneRate',
                },
                {
                    width: "90px",
                  title: '及时完成率',
                  dataIndex: 'doneRate',
                  key: 'doneRate',
                }
        ],
        detailColumns: [
          {
              width: "10px",
              title: '序号',
              dataIndex: 'NUM',
              key: 'NUM',
            },
            {
              width: "80px",
              title: '表单名称',
              dataIndex: 'formName',
              key: 'formName',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showFormModal(record)}>{record.formName}</a>
                </span>
              ),
            },
            {
              width: "80px",
              title: '总任务数',
              dataIndex: 'TotalCount',
              key: 'TotalCount'
            },
            {
              width: "80px",
              title: '正常已办',
              dataIndex: 'doneCount',
              key: 'doneCount'
            },
            {
              width: "80px",
              title: '超时已办',
              dataIndex: 'timeOverCount',
              key: 'timeOverCount'
            },
            {
              width: "60px",
              title: '未完成',
              dataIndex: 'unDoneCount',
              key: 'unDoneCount',
            },
            {
              width: "60px",
                title: '完成率',
                dataIndex: 'allDoneRate',
                key: 'allDoneRate',
              },
              {
                width: "90px",
              title: '及时完成率',
              dataIndex: 'doneRate',
              key: 'doneRate',
            }
      ],
      viewColumns: [
        {
          width: "80px",
          title: '表单名称',
          dataIndex: 'formName',
          key: 'formName',
          render:(value,record,index)=>{
            const obj={
                children:value,
                props:{}
            };
            let arr=this.state.detailDataH.filter((res)=>{
                return res.formName==record.formName;
            });
            if(index==0 || this.state.detailDataH[index-1].formName!=record.formName)
            {
                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',
            render: (text, record) => (
              <span>
                <a onClick={() => this.showViewModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE,record.CODE )}>{record.NOTICE_TITLE}</a>
              </span>
            ),
          },
          {
            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 = (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
    }));
  }
  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=(record)=>{
    const {groupData} = this.state; 
    let detailData=[]
    let temp=groupData.filter(t=>t.departmentId===record.departmentId);
    if(temp.length>0)
    {
      let i=1;
      temp.forEach(t=>{
          t.NUM=i;
          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)+"%";
          detailData.push(t);
          i++;
        })
    }
    else
    {
      detailData=[]
    }
    this.setState({displayHr:'block',displaydetail:'none',
    detailData:detailData,
    departmentName:record.departmentName,
    dtotalCount:record.TotalCount,
    dfinishCount:record.doneCount,
    dovertimeCount:record.timeOverCount,
    dunfinishCount:record.unDoneCount,
    drate :record.TotalCount===0?0:((record.doneCount +record.timeOverCount)/record.TotalCount*100).toFixed(0)+"%",
    dnormalRate :record.TotalCount===0?0: (record.doneCount/record.TotalCount*100).toFixed(0)+"%",
  })
  }
   //主要工作分布图（饼图）
   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 moduleData = []
      let showData = []
      let dataColor = []
      retData.forEach(item => {
        moduleData.push(item.departmentName)
        let valueTemp=item.doneCount+item.timeOverCount
        showData.push({ value: valueTemp, name: item.departmentName })
        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)'
              }
            }
          }
        ]
      });
  }
  //工作票完成情况统计图
  workTicket = () => {
    const {retData} = this.state;
          let teamName = [];
          let wattingQty = [];
          let finishQty = [];
          let overFinishQty = [];
          let totalQty = [];
          retData.forEach(item => {
            teamName.push(item.departmentName);
            wattingQty.push(item.unDoneCount);
            finishQty.push(item.doneCount);
            overFinishQty.push(item.timeOverCount);
            totalQty.push(item.TotalCount);
          })
          //图标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)
                    }
                  },
                },
              ],
            });
          }
  }
    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);
        //   一月的时候年份要减一
        //  if(m == 1) {    	
        //     y--
        //     m = 12
        //   }else if(m == 3 && d > 28) {
         
        //     //三月要考虑是否为闰年
        //      m--
        //      if(y%4 == 0 && y%100!=0 || y%400 == 0) {
        //          d = 29
        //      }else {
        //          d-28
        //      }
        //    }else if((m != 12 || m != 8 )&& d == 31) {
                
        //         //31号的月份要考虑上个月是否有31号
        //         m--
        //         d = 30
        //     }else {
        //         m--
        //     }

             // 一个月前的日期(默认月份)
             //let pastDate = 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';
             if(type==="Week")
            {
                pastDate=moment(nowDate).add(-7, "d").format("YYYYMMDD")
                weekColor='orange';
                monthColor='black';
                threeMonthColor='black';
                sixMonthColor='black';
                yearColor='black';
            }
            if(type==="ThreeMonth")
            {
                pastDate=moment(nowDate).add(-3, "month").format("YYYYMMDD")
                weekColor='black';
                monthColor='black';
                threeMonthColor='orange';
                sixMonthColor='black';
                yearColor='black';
            }
            if(type==="SixMonth")
            {
                pastDate=moment(nowDate).add(-6, "month").format("YYYYMMDD")
                weekColor='black';
                monthColor='black';
                threeMonthColor='black';
                sixMonthColor='orange';
                yearColor='black';
            }
            if(type==="Year")
            {
                pastDate=moment(nowDate).add(-1, "year").format("YYYYMMDD")
                weekColor='black';
                monthColor='black';
                threeMonthColor='black';
                sixMonthColor='black';
                yearColor='orange';
            }
            this.setState({
                startTime: pastDate,
                weekColor:weekColor,
                monthColor:monthColor,
                threeMonthColor:threeMonthColor,
                sixMonthColor:sixMonthColor,
                yearColor:yearColor
              },()=>{
                if(type)
                {
                  this.loadData();
                }
              })
            return pastDate;
    }
  //加载数据赋值
  loadData = () => {
    var orgId = this.props.login ? this.props.login.OrgId : '';
    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")
    const jsonTemp = initFilter(orgId)
    extendRule(jsonTemp, "DEPARTMENT_TYPE", 1, 0);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: jsonTemp,
      url: 'FM/Department/OrderEntities',
      onComplete: (retDepart) => {
          if (retDepart) {
            let tempDepart=[];
            retDepart.forEach(t=>{
              let tempNow={
                departmentId:t.ID,
                departmentName:t.NAME,
                TotalCount:0,
                doneCount:0,
                timeOverCount:0,
                unDoneCount:0,
                allDoneRate:"0%",
                doneRate:"0%"};
                tempDepart.push(tempNow);
            })
            let json = initFilter(orgId,'','','','',startTime,endTime);
            this.props.dispatch({
              type: 'app/getDataByPost',
              payload: json,
              url: 'BI/BIStatiscialAnalysisController/',
              onComplete: (ret) => {
                if (ret) {
                  let temp=[];
                  if(ret.groupData)
                  {
                    tempDepart.forEach(t=>{
                      let group=ret.groupData.filter(m=>m.departmentId === t.departmentId)
                      if(group.length>0)
                      {
                        let tCount=0;
                        let dCount=0;
                        let oCount=0;
                        let uCount=0;
                        group.forEach(t1=>{
                          tCount=tCount+t1.TotalCount;
                          dCount=dCount+t1.doneCount;
                          oCount=oCount+t1.timeOverCount;
                        })
                        t.TotalCount = tCount;
                        t.doneCount = dCount;
                        t.timeOverCount = oCount;
                        t.unDoneCount = tCount-dCount -oCount;
                        t.allDoneRate = tCount===0?0:((dCount +oCount)/tCount*100).toFixed(0)+"%";
                        t.doneRate =tCount===0?0: (dCount/tCount*100).toFixed(0)+"%";
                      }
                      temp.push(t);
                    })
                  //   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);
                  // })
                }
                    this.setState({
                      totalCount:ret.TotalCount,
                finishCount:ret.doneCount,
                overtimeCount:ret.timeOverCount,
                unfinishCount:ret.TotalCount-ret.doneCount-ret.timeOverCount,
                retData:temp,
                groupData:ret.groupData,
                newData:ret.newData,
                displayHr:'none',
                displaydetail:'none'
                    })
                    this.workTicket();
                    this.mainJobPie2();
                }
              }
              })
          }
      }
  })
  }

  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,departmentName,
        dtotalCount,dfinishCount,dovertimeCount,dunfinishCount,drate,dnormalRate,
      } = this.state;
    let allFinishRate=((finishCount+overtimeCount)/totalCount * 100).toFixed(0);
    let finishRate=(finishCount/totalCount * 100).toFixed(0);
    return <div>
       <div className='route-home' style={{minHeight:"1000px"}}>
       <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.closeModal}
          // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
        <h1 style={{ textAlign: "center"}}>行洛坑钨矿安全事务执行情况综合统计分析</h1>
        <h3 style={{ textAlign: 'center' }}>({startTime}-{endTime})</h3>
        <span>
          <Button style={{width:"100px",height:"50px",borderRadius: '8px',border:'2px 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:"50px",borderRadius: '8px',border:'2px 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:"50px",borderRadius: '8px',border:'2px 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:"50px",borderRadius: '8px',border:'2px 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:"50px",borderRadius: '8px',border:'2px 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:"50px",borderRadius: '8px',border:'2px 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"}}>
          <Button type='link' style= {{color:weekColor,fontWeight:"bold"}} onClick={() => this.getDate("Week")}>最近1周</Button>
          <Button type='link' style= {{color:monthColor,fontWeight:"bold"}} onClick={() => this.getDate("Month")}>最近1月</Button>
          <Button type='link' style= {{color:threeMonthColor,fontWeight:"bold"}} onClick={() => this.getDate("ThreeMonth")}>最近3月</Button>
          <Button type='link' style= {{color:sixMonthColor,fontWeight:"bold"}} onClick={() => this.getDate("SixMonth")}>最近半年</Button>
          <Button type='link' style= {{color:yearColor,fontWeight:"bold"}} onClick={() => this.getDate("Year")}>最近1年</Button>
          {/* <Button onClick={() => this.getBaseInfoData(0)}>全部</Button> */}
        </span>
        <br></br>
        <hr style={{border:'1px dashed #ccc'}}></hr>
        <Row style={{marginTop:"10px"}}>
            <Col span={10}>
            <Table style={{height:"400px"}}
            scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
              />
            </Col>
            <Col span={8}>
              <div id="workTicket" style={{ height: '350px',marginLeft:"20px",backgroundColor:"white" }}></div>
            </Col>
            <Col span={6}>
              <div id="mainJobPie2" style={{ height: '350px',marginLeft:"20px" ,backgroundColor:"white"}}></div>
            </Col>
        </Row>
        <hr style={{border:'1px dashed #ccc'}}></hr>
        <Row style={{display:this.state.displayHr}}>
        <h1 style={{ textAlign: "center"}}>{departmentName}安全事务执行情况综合统计分析</h1>
        <h3 style={{ textAlign: 'center' }}>({startTime}-{endTime})</h3>
        </Row>
        <br></br>
        <Row style={{display:this.state.displayHr}}>
          <Col span={6}>
            <Row>
              <Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{dtotalCount}</span></Button>
              <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>正常已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{dfinishCount}</span></Button></Col>
            </Row>
            <Row style={{marginTop:"10px"}}>
              <Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginRight:"10px"}}>未完成数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{dunfinishCount}</span></Button>
              <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>超时已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{dovertimeCount}</span></Button></Col>
            </Row>
            <Row style={{marginTop:"10px"}}>
              <Col><Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{drate}</span></Button>
              <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'2px green solid'}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{dnormalRate}</span></Button></Col>
            </Row>
          </Col>
          <Col span={18}>
          <Table style={{backgroundColor:"white"}}
                dataSource={this.state.detailData}
                columns={this.state.detailColumns}
                pagination={false}
                loading={false}
                size="small"
              />
          </Col>
        </Row>
        <br></br>
        <Row style={{display:this.state.displaydetail}}>
        <Table
              style={{backgroundColor:"white"}}
                dataSource={this.state.detailDataH}
                columns={this.state.viewColumns}
                pagination={false}
                loading={false}
                size="small"
              />
        </Row>
      </div>
    </div >
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI003StatiscialAnalysis)