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 BI009FormRunAnalysis extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      noticeTitle: '',
      tmpData: {},
      tableKey: "1",
        timeType: 5,
        ordinaryCount:0,
        crucialCount:0,
        activityCount:0,
        postCount:0,
        postChangeCount:0,
        taskCount:0,
        weekColor:'black',
        monthColor:'orange',
        threeMonthColor:'black',
        sixMonthColor:'black',
        yearColor:'black',
        retData:[],
        groupData:[],
        detailData:[],
        newData:[],
        detailDataH:[],
        displayHr:'none',
        displaydetail:'none',
        columns: [
            {
                width: "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: "100px",
                title: '班组',
                dataIndex: 'TEAM_NAME',
                key: 'TEAM_NAME',
                // render: (text, record) => (
                //   <span>
                //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                //   </span>
                // ),
              },
              {
                title: '完成率',
                children: [
                  {
                    title: '班前会议',
                    render: (text, record) => (<span>{record.FO01_TOTAL == 0?'0%':(((record.FO01_FINISH +record.FO01_OVERTIME)/ record.FO01_TOTAL)*100).toFixed(0)+"%"}</span>)
                  },
                  {
                    title: '岗位交接班',
                    render: (text, record) => (<span>{record.FO03_TOTAL == 0?'0%':(((record.FO03_FINISH +record.FO03_OVERTIME)/ record.FO03_TOTAL)*100).toFixed(0)+"%"}</span>)
                  },
                  {
                    title: '岗位当班记录',
                    render: (text, record) => (<span>{record.FO02_TOTAL == 0?'0%':(((record.FO02_FINISH +record.FO02_OVERTIME)/ record.FO02_TOTAL)*100).toFixed(0)+"%"}</span>)
                  },
                ],
              },
              // {
              //   title: '及时完成率',
              //   children: [
              //     {
              //       title: '班前会议',
              //       render: (text, record) => (<span>{record.FO01_TOTAL == 0?'0%':((record.FO01_FINISH/ record.FO01_TOTAL)*100).toFixed(0)+"%"}</span>)
              //     },
              //     {
              //       title: '岗位交接班',
              //       render: (text, record) => (<span>{record.FO03_TOTAL == 0?'0%':((record.FO03_FINISH / record.FO03_TOTAL)*100).toFixed(0)+"%"}</span>)
              //     },
              //     {
              //       title: '岗位当班记录',
              //       render: (text, record) => (<span>{record.FO02_TOTAL == 0?'0%':((record.FO02_FINISH / record.FO02_TOTAL)*100).toFixed(0)+"%"}</span>)
              //     },
              //   ],
              // },
        ],
        detailColumns: [
          {
              width: "60px",
              title: '班组',
              dataIndex: 'DEPARTMENT_NAME',
              key: 'DEPARTMENT_NAME',
              // render: (text, record) => (
              //   <span>
              //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
              //   </span>
              // ),
            },
            {
              width: "60px",
              title: '总任务数',
              dataIndex: 'TOTAL_QTY',
              key: 'TOTAL_QTY'
            },
            {
              width: "60px",
              title: '正常已办',
              dataIndex: 'FINISH_QTY',
              key: 'FINISH_QTY'
            },
            {
              width: "60px",
              title: '超时已办',
              dataIndex: 'OVER_FINISH_QTY',
              key: 'OVER_FINISH_QTY'
            },
            {
              width: "50px",
              title: '未完成',
              dataIndex: 'UNFINISH_QTY',
              key: 'UNFINISH_QTY',
            },
            {
              width: "100px",
                title: '完成率',
                dataIndex: 'FINISH_RATE',
                key: 'FINISH_RATE',
                render: (text, record) => (
                  
                  <Progress percent={record.FINISH_RATE.split('%')[0]}  />
                  // <span>
                  //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                  // </span>
                ),
              },
              {
                  width: "100px",
                title: '及时完成率',
                dataIndex: 'NORMAL_FINISH_RATE',
                key: 'NORMAL_FINISH_RATE',
                render: (text, record) => (
                  <Progress percent={record.NORMAL_FINISH_RATE.split('%')[0] }  strokeColor={{ from: 'rgba(82, 196, 26)', to: 'rgba(82, 196, 26)' }}  />
                  // <span>
                  //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                  // </span>
                ),
              }
      ],
      };
  };

  componentDidMount() {
    this.loadData()
  };
  showEditModal = (departmentId, departmentName) => {
    const newtmpData = {
      data: {
        id: departmentId, name: departmentName, onCancel: this.handleCancel, tableKey: this.state.tableKey,
        homeReload: true
      },
      formCode: "BI007_RUNANALYSIS",
    }
    this.setState({
      id: departmentId,
      name: departmentName,
      noticeTitle: departmentName+"安全生产标准化运行情况",
      tmpData: newtmpData,
      currActivatedMenu: ''
    }, () => this.setState({
      visible: true
    }));
  }
  showFormModal=(record)=>{
    const {newData} = this.state;
    let newDataTemp=[]
    let temp=newData.filter(t=>t.DEPARTMENT_ID===record.departmentId && t.SOURCE_FORMCODE ===record.formCode);
    if(temp.length>0)
    {
      let i=1;
      temp.forEach(t=>{
          t.ROW_NO=i;
          t.formName=record.formName;
          newDataTemp.push(t);
          i++;
        })
    }
    else
    {
      newDataTemp=[]
    }
    this.setState({displaydetail:'block',detailDataH:newDataTemp
  })
  }
   
    
  //加载数据赋值
  loadData = () => {
    this.getCount();
    this.workTicket();
    this.workTicket2();
    this.mainJobPie2();
    this.getBaseInfoData();
  }
  //获取数据
  getBaseInfoData = () => {
    let json = initFilter(this.props.login.OrgId, "", "DEPARTMENT_NAME", "asc");
    extendRule(json, "FILTER_TIME", 1, 0);
    extendRule(json, "DEPARTMENT_NAME", 2, "宁化行洛坑钨矿有限公司");
    extendRule(json, "DEPARTMENT_NAME", 2, "都昌金鼎钨钼矿业有限公司");
    extendRule(json, "DEPARTMENT_NAME", 2, "技术管理部");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/SafetaskFinish/OrderEntities',
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if(ret && ret.Data)
        {
          this.state.retData = ret.Data;
        }
      }
    })
  };
  getCount=()=>{
    var orgId = this.props.login ? this.props.login.OrgId : '';
    const jsonTemp = initFilter(orgId)
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: jsonTemp,
      url: 'BI/BIStatiscialAnalysisController/GetTotalCount',
      onComplete: (ret) => {
          if (ret) {
            let riskLevels = document.getElementById('mainJobPie');
          if (riskLevels) {
            let myChart = echarts.init(riskLevels);
            myChart.setOption({
              series: [
                {
                  type: 'gauge',
                  progress: {
                    show: true,
                    width: 18
                  },
                  axisLine: {
                    lineStyle: {
                      width: 18
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  splitLine: {
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: '#999'
                    }
                  },
                  // axisLabel: {
                  //   distance: 25,
                  //   color: '#999',
                  //   fontSize: 20
                  // },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                      borderWidth: 10
                    }
                  },
                  // title: {
                  //   show: false
                  // },
                  detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                  },
                  data: [
                    {
                      value: ret.shiftMeetingFinishRate,
                      name: '班前会议完成率（%）'
                    }
                  ]
                }
              ]
            });
          }
          let riskLevel1s = document.getElementById('mainJobPie1');
          if (riskLevel1s) {
            let myChart1 = echarts.init(riskLevel1s);
            myChart1.setOption({
              series: [
                {
                  type: 'gauge',
                  progress: {
                    show: true,
                    width: 18
                  },
                  axisLine: {
                    lineStyle: {
                      width: 18
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  splitLine: {
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: '#999'
                    }
                  },
                  // axisLabel: {
                  //   distance: 25,
                  //   color: '#999',
                  //   fontSize: 20
                  // },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                      borderWidth: 10
                    }
                  },
                  // title: {
                  //   show: false
                  // },
                  detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                  },
                  data: [
                    {
                      value: ret.postFinishRate,
                      name: '岗位当班记录完成率（%）'
                    }
                  ]
                }
              ]
            });
          }
          let riskLevel3s = document.getElementById('mainJobPie3');
          if (riskLevel3s) {
            let myChart3 = echarts.init(riskLevel3s);
            myChart3.setOption({
              series: [
                {
                  type: 'gauge',
                  progress: {
                    show: true,
                    width: 18
                  },
                  axisLine: {
                    lineStyle: {
                      width: 18
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  splitLine: {
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: '#999'
                    }
                  },
                  // axisLabel: {
                  //   distance: 25,
                  //   color: '#999',
                  //   fontSize: 20
                  // },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                      borderWidth: 10
                    }
                  },
                  // title: {
                  //   show: false
                  // },
                  detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                  },
                  data: [
                    {
                      value: ret.postChangeFinishRate,
                      name: '岗位交接班完成率（%）'
                    }
                  ]
                }
              ]
            });
          }
            this.setState({
              ordinaryCount:ret.ordinaryCount,
              crucialCount:ret.crucialCount,
              activityCount:ret.activityCount,
              postCount:ret.postCount,
              postChangeCount:ret.postChangeCount,
              taskCount:ret.taskCount,
            })
          }
      }
  })
  }
  //
  workTicket = () => {
    let json = initFilter(this.props.login.OrgId, "10", "NUM", "asc");
    // extendRule(json, "DEPARTMENT_NAME", 1,"选矿部");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.teamTop = data.Data.length;
          let teamName = [];
          let finishQty = [];
          data.Data.forEach((item) => {
            teamName.push(item.TEAM_NAME);
            let finishData = Number(item.CALC * 100).toFixed(2);
            finishQty.push(finishData);
            });
          let departmentCompletions = document.getElementById('workTicket');
          if (departmentCompletions) {
            let myChart = echarts.init(departmentCompletions);
            myChart.setOption(
              {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter: function (param) {
                    return (
                      param[0].name +
                      "<br>" +
                      param[0].marker +
                      " " +
                      param[0].seriesName +
                      "：" +
                      param[0].value +
                      "%"
                    );
                  },
                },
                grid: {
                  top: "2%",
                  bottom: -15,
                  right: "10%",
                  left: "10%",
                  containLabel: true,
                },
                xAxis: {
                  show: false,
                },
                yAxis: [
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: teamName,
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      interval: 0,
                      color: "#666",
                      align: "right",
                      margin: 20,
                      fontSize: 13,
      
                      rich: {
                        idx0: {
                          color: "#FB375E",
                          backgroundColor: "#FFE8EC",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx1: {
                          color: "#FF9023",
                          backgroundColor: "#FFEACF",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx2: {
                          color: "#01B599",
                          backgroundColor: "#E1F7F3",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx: {
                          color: "#333",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        title: {
                          width: 165,
                        },
                      },
                    },
                  },
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: finishQty,
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      interval: 0,
                      color: "#666",
                      align: "left",
                      margin: 20,
                      fontSize: 12,
                      formatter: function (value) {
                        return value + "%";
                      },
                    },
                  },
                ],
                series: [
                  {
                    name: "完成率",
                    type: "bar",
                    yAxisIndex: 0,
                    data: finishQty,
                    barWidth: 10,
                    itemStyle: {
                      color: "#1990FF",
                      barBorderRadius: 30,
                    },
                    formatter: "{value}%",
                  },
                ],
              },
              true
            );
          }
        }
      }
    });
  }
  workTicket2 = () => {
    let json = initFilter(this.props.login.OrgId, "30", "NUM", "asc");
    // extendRule(json, "DEPARTMENT_NAME", 1,"选矿部");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.teamTop = data.Data.length;
          let teamName = [];
          let finishQty = [];
          data.Data.forEach((item) => {
            teamName.push(item.TEAM_NAME);
            let finishData = Number(item.CALC * 100).toFixed(2);
            finishQty.push(finishData);
            });
          let departmentCompletions = document.getElementById('workTicket2');
          if (departmentCompletions) {
            let myChart = echarts.init(departmentCompletions);
            myChart.setOption(
              {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter: function (param) {
                    return (
                      param[0].name +
                      "<br>" +
                      param[0].marker +
                      " " +
                      param[0].seriesName +
                      "：" +
                      param[0].value +
                      "%"
                    );
                  },
                },
                grid: {
                  top: "2%",
                  bottom: -15,
                  right: "10%",
                  left: "10%",
                  containLabel: true,
                },
                xAxis: {
                  show: false,
                },
                yAxis: [
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: teamName,
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      interval: 0,
                      color: "#666",
                      align: "right",
                      margin: 20,
                      fontSize: 13,
      
                      rich: {
                        idx0: {
                          color: "#FB375E",
                          backgroundColor: "#FFE8EC",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx1: {
                          color: "#FF9023",
                          backgroundColor: "#FFEACF",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx2: {
                          color: "#01B599",
                          backgroundColor: "#E1F7F3",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        idx: {
                          color: "#333",
                          borderRadius: 100,
                          padding: [5, 8],
                        },
                        title: {
                          width: 165,
                        },
                      },
                    },
                  },
                  {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: finishQty,
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      interval: 0,
                      color: "#666",
                      align: "left",
                      margin: 20,
                      fontSize: 12,
                      formatter: function (value) {
                        return value + "%";
                      },
                    },
                  },
                ],
                series: [
                  {
                    name: "完成率",
                    type: "bar",
                    yAxisIndex: 0,
                    data: finishQty,
                    barWidth: 10,
                    itemStyle: {
                      color: "#1990FF",
                      barBorderRadius: 30,
                    },
                    formatter: "{value}%",
                  },
                ],
              },
              true
            );
          }
        }
      }
    });
  }
  //关键许可工作票（饼图）
  mainJobPie2 = () => {
    let json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/BIStatiscialAnalysisController/GetLicenseJob",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let riskLevel = []
          let showData = []
          let color = ["#C00000", "#FFC000", "#FFFF00", "#00B0F0", "#00B0C0"]
          data.Data.forEach(item => {
            riskLevel.push(item.RISK_LEVEL)
            showData.push({ value: item.COUNT, name: item.RISK_LEVEL })
          })
          let riskLevels = document.getElementById('mainJobPie2');
          if (riskLevels) {
            let myChart = echarts.init(riskLevels);
            myChart.setOption({
              tooltip: {
                trigger: 'item',
                //formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: '{b} : {c} ({d}%)'
              },
              legend: {
                bottom: '0px',
                data: riskLevel
              },
              series: [
                {
                  name: '主要工作分布',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '42%'],
                  label: {
                    formatter: '{b}:({d}%)',
                  },
                  data: showData,
                  color: color,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      //shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
          }
        }
      }
    });
  }
  compare = (val1, val2) => {
    return val2.NUM - val1.NUM;
};
  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() {
    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'}}>行洛坑钨矿-作业现场管理统计分析</h1>
        <br></br>
        <span style={{width:"1000px",marginLeft:"20px"}}>
          <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>一般作业活动记录<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{this.state.ordinaryCount}</span></Button>
          <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>许可作业活动记录<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{this.state.crucialCount}</span></Button>
          <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>班组安全活动<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{this.state.activityCount}</span></Button>
          <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>岗位当班记录<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{this.state.postCount}</span></Button>
          <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>岗位交接班记录<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{this.state.postChangeCount}</span></Button>
          {/* <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>班前会议记录<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{this.state.ordinaryCount}</span></Button> */}
          <Button style={{width:"150px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>作业任务库<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{this.state.taskCount}</span></Button>
        </span>
        <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr>
        <Row style={{marginTop:"10px"}}>
          <Col span={8}>
              <div id="mainJobPie" style={{ width:'360px',height: '350px',marginLeft:"20px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
              </Col>
              <Col span={8}>
              <div id="mainJobPie1" style={{ width:'360px',height: '350px',marginLeft:"20px",backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
              </Col>
              <Col span={8}>
              <div id="mainJobPie3" style={{ width:'360px',height: '350px',marginLeft:"20px" ,marginRight:"10px",backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
              </Col>
        </Row>
        <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr>
        <Row>
        <Col span={11}>
                <h3 style={{textAlign:'center',fontWeight:'bold'}}>关键作业/许可作业</h3>
              <div id="mainJobPie2" style={{ width:'560px',height: '350px',marginLeft:"20px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
              </Col>
              <Col span={13}>
            <h3 style={{textAlign:'center',fontWeight:'bold'}}>选矿部-班组及时完成率排名(%)</h3>
            <div id="workTicket" style={{ height: '350px',marginLeft:"40px" ,marginRight:"10px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
            </Col>
                </Row>
        <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr>
        <Row style={{marginTop:"10px"}}>
            <Col span={11}>
                <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={13}>
            <h3 style={{textAlign:'center',fontWeight:'bold'}}>矿山部-班组及时完成率排名(%)</h3>
            <div id="workTicket2" style={{ height: '350px',marginLeft:"40px" ,marginRight:"10px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
            </Col>
         
        </Row>
        
      </div>
    </div >
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI009FormRunAnalysis)
