任务完成情况统计分析（个人）

src/components/CustomPages/BI/BI011FormRunAnalysis.js

@@ -1,55 +1,66 @@
-import React from 'react'
+import React from "react";
-import { connect } from 'dva'
+import { connect } from "dva";
-import { initFilter, extendRule, extendOrder } from "../../../utils/common"
+import { initFilter, extendRule, extendOrder } from "../../../utils/common";
-import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
+import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
-import { Table, Button,Input,  Row, Col,Modal ,Icon,Progress} from 'antd';
+import {
-import echarts from 'echarts';
+  Table,
-import styles from '../HI/StepForm.css';
+  Button,
-import moment from 'moment'
+  Input,
-import { T } from 'antd/lib/upload/utils';
+  Row,
-import FormPage from '../../FormPage'
+  Col,
+  Modal,
+  Icon,
+  Progress,
+  Divider,
+} from "antd";
+import echarts from "echarts";
+import styles from "../HI/StepForm1.css";
+import moment from "moment";
+import { T } from "antd/lib/upload/utils";
+import FormPage from "../../FormPage";
 class BI011FormRunAnalysis extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
       visible: false,
-      loading:false,
+      loading: false,
-      noticeTitle: '',
+      noticeTitle: "",
       tmpData: {},
       tableKey: "1",
-      startTime: moment(new Date().setDate(1)).subtract(5,'months').format("YYYY-MM-DD"),
+      startTime: moment(new Date().setDate(1))
-        endTime:moment(new Date()).format("YYYY-MM-DD"),
+        .subtract(5, "months")
+        .format("YYYY-MM-DD"),
+      endTime: moment(new Date()).format("YYYY-MM-DD"),
       timeType: 5,
-        totalCount:0,
+      totalCount: 0,
-        finishCount:0,
+      finishCount: 0,
-        overtimeCount:0,
+      overtimeCount: 0,
-        unfinishCount:0,
+      unfinishCount: 0,
-        dtotalCount:0,
+      dtotalCount: 0,
-        dfinishCount:0,
+      dfinishCount: 0,
-        dovertimeCount:0,
+      dovertimeCount: 0,
-        dunfinishCount:0,
+      dunfinishCount: 0,
-        inputText:this.props.login.user.NAME,
+      inputText: this.props.login.user.NAME,
-        drate:'0%',
+      drate: "0%",
-        dnormalRate:'0%',
+      dnormalRate: "0%",
-        weekColor:'black',
+      weekColor: "black",
-        monthColor:'orange',
+      monthColor: "orange",
-        threeMonthColor:'black',
+      threeMonthColor: "black",
-        sixMonthColor:'black',
+      sixMonthColor: "black",
-        yearColor:'black',
+      yearColor: "black",
-        retData:[],
+      retData: [],
-        groupData:[],
+      groupData: [],
-        detailData:[],
+      detailData: [],
-        newData:[],
+      newData: [],
-        detailDataH:[],
+      detailDataH: [],
-        displayHr:'none',
+      displayHr: "none",
-        displaydetail:'none',
+      displaydetail: "none",
       columns: [
         {
           width: "30px",
-                title: '月份',
+          title: "月份",
-                dataIndex: 'MONTHStr',
+          dataIndex: "MONTHStr",
-                key: 'MONTHStr',
+          key: "MONTHStr",
           // render: (text, record) => (
           //   <span>
           //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
@@ -58,17 +69,17 @@ class BI011FormRunAnalysis extends React.Component {
         },
         {
           width: "30px",
-                title: '任务数',
+          title: "任务数",
-                dataIndex: 'TOTAL_QTY',
+          dataIndex: "TOTAL_QTY",
-                key: 'TOTAL_QTY'
+          key: "TOTAL_QTY",
-              },{
+        },
+        {
           width: "30px",
-                  title: '完成率',
+          title: "完成率",
-                  dataIndex: 'FINISH_RATE',
+          dataIndex: "FINISH_RATE",
-                  key: 'FINISH_RATE',
+          key: "FINISH_RATE",
           render: (text, record) => (
-                  
+            <Progress percent={record.FINISH_RATE.split("%")[0]} />
-                    <Progress percent={record.FINISH_RATE.split('%')[0]}  />
             // <span>
             //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
             // </span>
@@ -76,16 +87,22 @@ class BI011FormRunAnalysis extends React.Component {
         },
         {
           width: "30px",
-                  title: '及时完成率',
+          title: "及时完成率",
-                  dataIndex: 'NORMAL_FINISH_RATE',
+          dataIndex: "NORMAL_FINISH_RATE",
-                  key: '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)' }}  />
+            <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>
           ),
-                }
+        },
       ],
       detailColumns: [
         // {
@@ -96,9 +113,9 @@ class BI011FormRunAnalysis extends React.Component {
         //   },
         {
           width: "100px",
-              title: '模块名称',
+          title: "模块名称",
-              dataIndex: 'MOUDLE_NAME',
+          dataIndex: "MOUDLE_NAME",
-              key: 'MOUDLE_NAME',
+          key: "MOUDLE_NAME",
           // render: (text, record) => (
           //   <span>
           //     <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
@@ -107,87 +124,101 @@ class BI011FormRunAnalysis extends React.Component {
         },
         {
           width: "60px",
-              title: '总任务数',
+          title: "总任务数",
-              dataIndex: 'TOTAL_QTY',
+          dataIndex: "TOTAL_QTY",
-              key: 'TOTAL_QTY'
+          key: "TOTAL_QTY",
         },
         {
           width: "60px",
-              title: '正常已办',
+          title: "正常已办",
-              dataIndex: 'FINISH_QTY',
+          dataIndex: "FINISH_QTY",
-              key: 'FINISH_QTY'
+          key: "FINISH_QTY",
         },
         {
           width: "60px",
-              title: '超时已办',
+          title: "超时已办",
-              dataIndex: 'OVER_FINISH_QTY',
+          dataIndex: "OVER_FINISH_QTY",
-              key: 'OVER_FINISH_QTY'
+          key: "OVER_FINISH_QTY",
         },
         {
           width: "50px",
-              title: '未完成',
+          title: "未完成",
-              dataIndex: 'UNFINISH_QTY',
+          dataIndex: "UNFINISH_QTY",
-              key: 'UNFINISH_QTY',
+          key: "UNFINISH_QTY",
         },
         {
           width: "50px",
-                title: '完成率',
+          title: "完成率",
-                dataIndex: 'FINISH_RATE',
+          dataIndex: "FINISH_RATE",
-                key: 'FINISH_RATE',
+          key: "FINISH_RATE",
         },
         {
           width: "70px",
-              title: '及时完成率',
+          title: "及时完成率",
-              dataIndex: 'NORMAL_FINISH_RATE',
+          dataIndex: "NORMAL_FINISH_RATE",
-              key: 'NORMAL_FINISH_RATE',
+          key: "NORMAL_FINISH_RATE",
           render: (text, record) => (
             <span>
-                 {record.NORMAL_FINISH_RATE}{"%"}
+              {record.NORMAL_FINISH_RATE}
+              {"%"}
             </span>
           ),
-            }
+        },
       ],
     };
-  };
+  }
 
   componentDidMount() {
-    this.loadData()
+    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+"安全生产标准化运行情况",
+        onCancel: this.handleCancel,
+        tableKey: this.state.tableKey,
+        homeReload: true,
+      },
+      formCode: "BI007_RUNANALYSIS",
+    };
+    this.setState(
+      {
+        id: departmentId,
+        name: departmentName,
+        noticeTitle: departmentName + "安全生产标准化运行情况",
         tmpData: newtmpData,
-      currActivatedMenu: ''
+        currActivatedMenu: "",
-    }, () => this.setState({
+      },
-      visible: true
+      () =>
-    }));
+        this.setState({
-  }
+          visible: true,
-  showFormModal=(mouldName)=>{
+        })
+    );
+  };
+  showFormModal = (mouldName) => {
     const newtmpData = {
       data: {
-        name: mouldName, onCancel: this.handleCancel, tableKey: this.state.tableKey,
+        name: mouldName,
-        homeReload: true
+        onCancel: this.handleCancel,
+        tableKey: this.state.tableKey,
+        homeReload: true,
       },
       formCode: "BI008_RUNANALYSIS",
-    }
+    };
-    this.setState({
+    this.setState(
+      {
         name: mouldName,
-      noticeTitle: mouldName+"安全生产标准化运行情况",
+        noticeTitle: mouldName + "安全生产标准化运行情况",
         tmpData: newtmpData,
-      currActivatedMenu: ''
+        currActivatedMenu: "",
-    }, () => this.setState({
+      },
-      visible: true
+      () =>
-    }));
+        this.setState({
-  }
+          visible: true,
+        })
+    );
+  };
   // showEditModal = (dataId, formCode, TaskID, title, taskCode) => {
 
   //   const newtmpData = {
@@ -212,7 +243,7 @@ class BI011FormRunAnalysis extends React.Component {
     // this.ksRun();
     this.getMould(this.props.login.user.NAME);
     // this.getDepartment();
-  }
+  };
   //矿山
   ksRun = (data) => {
     // let data = {
@@ -233,196 +264,500 @@ class BI011FormRunAnalysis extends React.Component {
       let month = [];
       let company = [];
       let department = [];
-      data.forEach(item => {
+      let color = [
+        "#0090FF",
+        "#36CE9E",
+        "#FFC005",
+        "#FF515A",
+        "#8B5CFF",
+        "#00CA69",
+      ];
+      const hexToRgba = (hex, opacity) => {
+        let rgbaColor = "";
+        let reg = /^#[\da-f]{6}$/i;
+        if (reg.test(hex)) {
+          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+            "0x" + hex.slice(3, 5)
+          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+        }
+        return rgbaColor;
+      };
+      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'));
+      let myChart = echarts.init(document.getElementById("ksRun"));
       myChart.setOption({
+        color: color,
         title: {
           text: "任务及时完成率（近6个月）",
-            left: 'center',
+          left: "center",
-            top:'2%'
+          top: "2%",
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           formatter: function (params) {
-            let temp=''
+            let temp = "";
-            params.forEach(t=>{
+            params.forEach((t) => {
-                temp=temp+t.marker + t.seriesName +":"+t.value+"%"+'<br />';
+              temp =
-               
+                temp + t.marker + t.seriesName + ":" + t.value + "%" + "<br />";
-            })
+            });
             return temp;
-          }
           },
-        legend: {
-          // data: ['部门'],
-          data: ['完成率', '及时完成率'],
-          bottom: '5px'
         },
         grid: {
-          left: '3%',
+          left: "10%",
-          right: '4%',
+          right: "5%",
-          top: '12%',
-          containLabel: true
         },
-        toolbox: {
+        legend: {
-          feature: {
+          left: "center",
-            // saveAsImage: {}
+          align: "left",
-          }
+          bottom: "2%",
+          textStyle: {
+            color: "#000",
+          },
+          itemWidth: 10,
+          itemHeight: 10,
         },
         xAxis: {
-          type: 'category',
+          type: "category",
-          boundaryGap: false,
           data: month,
-          axisLine: {
+          boundaryGap: false,
-            show: false,
-            // lineStyle: {
-            //   color: 'rgba(192, 192, 102)'
-            // }
-          },
-          axisTick: {
-            show: false
-          },
           axisLabel: {
-            color: '#000',
+            textStyle: {
-            rotate: 40,
+              color: "#333",
-            formatter: function (value) { // 自定义文字超出部分 ...
+            },
-              if (value.length > 10) {
+          },
-                return `${value.slice(0, 10)}...`;
+          axisLine: {
-              }
+            lineStyle: {
-              return value;
+              color: "#D9D9D9",
-            }
+            },
-          }
+          },
         },
         yAxis: {
+          type: "value",
           axisLabel: {
-            formatter: function (val) {
+            textStyle: {
-              return (val)+ '%';
+              color: "#666",
-            }
+            },
+          },
+          nameTextStyle: {
+            color: "#666",
+            fontSize: 12,
+            lineHeight: 40,
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#E9E9E9",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
           },
         },
         series: [
           {
-            name: '完成率',
+            name: "完成率",
-            type: 'line',
+            type: "line",
-            color: '#4b9bf3',
             data: company,
-            smooth: true
+            smooth: true,
+            symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              normal: {
+                color: color[0],
+                shadowBlur: 3,
+                shadowColor: hexToRgba(color[0], 0.5),
+                shadowOffsetY: 8,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: hexToRgba(color[0], 0.3),
                     },
                     {
-            name: '及时完成率',
+                      offset: 1,
-            type: 'line',
+                      color: hexToRgba(color[0], 0.1),
-            color: '#FCD149',
-            data: department,
-            smooth: true
                     },
-        ]
+                  ],
-      })
+                  false
+                ),
+                shadowColor: hexToRgba(color[0], 0.1),
+                shadowBlur: 10,
+              },
+            },
+          },
+          {
+            name: "及时完成率",
+            type: "line",
+            data: department,
+            smooth: true,
+            symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              normal: {
+                color: color[1],
+                shadowBlur: 3,
+                shadowColor: hexToRgba(color[1], 0.5),
+                shadowOffsetY: 8,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: hexToRgba(color[1], 0.3),
+                    },
+                    {
+                      offset: 1,
+                      color: hexToRgba(color[1], 0.1),
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: hexToRgba(color[1], 0.1),
+                shadowBlur: 10,
+              },
+            },
+          },
+        ],
+      });
     }
-  }
+  };
-  getMould=(inputText)=>{
+  getMould = (inputText) => {
-    this.setState({loading:true
+    this.setState({ loading: true });
-  })
+    var orgId = this.props.login ? this.props.login.OrgId : "";
-    var orgId = this.props.login ? this.props.login.OrgId : '';
+    let json = initFilter(
-    let json = initFilter(orgId,inputText,"","","",this.state.startTime,this.state.endTime);
+      orgId,
+      inputText,
+      "",
+      "",
+      "",
+      this.state.startTime,
+      this.state.endTime
+    );
     this.props.dispatch({
-              type: 'app/getDataByPost',
+      type: "app/getDataByPost",
       payload: json,
-              url: 'BI/BIStatiscialAnalysisController/GetPersonAnalyze',
+      url: "BI/BIStatiscialAnalysisController/GetPersonAnalyze",
       onComplete: (ret) => {
         if (ret) {
           this.setState({
-                        retData:ret.groupData,
+            retData: ret.groupData,
-                        totalCount:ret.TotalCount,
+            totalCount: ret.TotalCount,
-                        finishCount:ret.doneCount,
+            finishCount: ret.doneCount,
-                        overtimeCount:ret.timeOverCount,
+            overtimeCount: ret.timeOverCount,
-                        unfinishCount:ret.unfinishCount,
+            unfinishCount: ret.unfinishCount,
-                        dovertimeCount:ret.timeOverWaitCount,
+            dovertimeCount: ret.timeOverWaitCount,
-                        loading:false
+            loading: false,
-                    })
+          });
           this.ksRun(ret.groupDataLine);
-                }
+        } else {
-                else
-                {
           this.setState({
-                    retData:[],
+            retData: [],
-                    totalCount:0,
+            totalCount: 0,
-                    finishCount:0,
+            finishCount: 0,
-                    overtimeCount:0,
+            overtimeCount: 0,
-                    unfinishCount:0,
+            unfinishCount: 0,
-                    dovertimeCount:0,
+            dovertimeCount: 0,
-                    loading:false
+            loading: false,
-                })
+          });
-                }
-              }
-              })
         }
+      },
+    });
+  };
 
-  closeModal = () => { // 退出弹窗
+  closeModal = () => {
+    // 退出弹窗
     this.clearData();
-  }
+  };
   clearData = () => {
-    let newtmpData = { ...this.state.tmpData }
+    let newtmpData = { ...this.state.tmpData };
-    newtmpData["data"].id = '';
+    newtmpData["data"].id = "";
     newtmpData["data"].homeReload = false;
-    newtmpData.formCode = '';
+    newtmpData.formCode = "";
     this.setState({
       visible: false,
       tmpData: newtmpData,
-    })
+    });
-  }
+  };
-  handleCancel = () => { // 退出弹窗
+  handleCancel = () => {
+    // 退出弹窗
     this.clearData();
-  }
+  };
   handleSearch = (evt) => {
-    const { value } = evt.target
+    const { value } = evt.target;
-    this.setState({ inputText: value ? value : this.props.login.user.NAME })
+    this.setState({ inputText: value ? value : this.props.login.user.NAME });
-  }
+  };
   render() {
-    const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,inputText,
+    const {
-        weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,dovertimeCount
+      startTime,
+      endTime,
+      finishCount,
+      overtimeCount,
+      totalCount,
+      unfinishCount,
+      inputText,
+      weekColor,
+      monthColor,
+      threeMonthColor,
+      sixMonthColor,
+      yearColor,
+      dovertimeCount,
     } = this.state;
-    let allFinishRate=(totalCount ===0||totalCount==undefined) ?0:((finishCount+overtimeCount)/totalCount * 100).toFixed(1);
+    let allFinishRate =
-    let finishRate=(totalCount ===0||totalCount==undefined)?0:(finishCount/totalCount * 100).toFixed(1);
+      totalCount === 0 || totalCount == undefined
-    return <div>
+        ? 0
+        : (((finishCount + overtimeCount) / totalCount) * 100).toFixed(1);
+    let finishRate =
+      totalCount === 0 || totalCount == undefined
+        ? 0
+        : ((finishCount / totalCount) * 100).toFixed(1);
+    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',}}>
+        <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'
+            className="antd-modal-fullscreen"
             closeModal={this.closeModal}
             // forceRender={true}
           >
             <FormPage {...this.state.tmpData} />
           </Modal>
-        <h1 style={{ textAlign:"center", verticalAlign:"Bottom",marginTop:'20px',marginBottom:'20px',fontWeight:'bold'}}>任务完成情况统计分析(个人)</h1>
+          <h1
-        <Row style={{ fontSize:'15px',marginTop:'10px',marginLeft:"30px",height:"35px"}}> 
+            style={{
-        <span style={{marginLeft:"10px",width:'100px'}}><b>姓名：</b>{inputText}</span>
+              textAlign: "center",
-        <span style={{marginLeft:"30px",width:'100px'}}><b>统计区间：</b>{startTime} - {endTime}</span>
+              verticalAlign: "Bottom",
-        <span style={{float:"right",marginRight:'30px'}}><Input onChange={this.handleSearch} style={{width:'150px',marginRight:'10px'}} defaultValue={this.props.login.user.NAME}></Input><Button onClick={() => this.getMould(inputText)} style={{width:'80px'}} type='primary'>查询</Button></span>
+              marginTop: "20px",
+              marginBottom: "40px",
+              fontWeight: "bold",
+            }}
+          >
+            任务完成情况统计分析(个人)
+          </h1>
+          <Row
+            style={{
+              fontSize: "15px",
+              marginTop: "10px",
+              // marginLeft: "30px",
+              margin: "0px 100px",
+              height: "35px",
+            }}
+          >
+            <span style={{ marginLeft: "10px", width: "100px" }}>
+              <b>姓名：</b>
+              {inputText}
+            </span>
+            <span style={{ marginLeft: "30px", width: "100px" }}>
+              <b>统计区间：</b>
+              {startTime} - {endTime}
+            </span>
+            <span style={{ float: "right", marginRight: "30px" }}>
+              <Input
+                onChange={this.handleSearch}
+                style={{ width: "150px", marginRight: "10px" }}
+                defaultValue={this.props.login.user.NAME}
+              ></Input>
+              <Button
+                onClick={() => this.getMould(inputText)}
+                style={{ width: "80px" }}
+                type="primary"
+              >
+                查询
+              </Button>
+            </span>
           </Row>
 
-        <hr style={{width:"98%"}}></hr>
+          {/* <hr style={{ width: "98%" }}></hr> */}
           <br></br>
-        <span style={{width:"800px",marginLeft:"30px",marginBottom:"20px"}}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginTop: "10px",
+              //   marginBottom: "20px",
+            }}
+          >
+            <div className={styles.menuPie}>
+              <li>
+                总任务数
+                <br />
+                <div className={styles.dataStyle}>
+                  {totalCount ? totalCount : 0}
+                </div>
+              </li>
+              <Divider
+                type="vertical"
+                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
+              />
+              <li>
+                待办数
+                <br />
+                <div className={styles.dataStyle1}>
+                  {unfinishCount ? unfinishCount : 0}
+                </div>
+              </li>
+              <Divider
+                type="vertical"
+                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
+              />
+              <li>
+                超时待办数
+                <br />
+                <div className={styles.dataStyle3}>
+                  {dovertimeCount ? dovertimeCount : 0}
+                </div>
+              </li>
+              <Divider
+                type="vertical"
+                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
+              />
+              <li>
+                已办事项
+                <br />
+                <div className={styles.dataStyle2}>
+                  {finishCount + overtimeCount
+                    ? finishCount + overtimeCount
+                    : 0}
+                </div>
+                {/* <a href="#" style={{ color: "red" }}> */}
+                {/* </a> */}
+              </li>
+              <Divider
+                type="vertical"
+                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
+              />
+              <li>
+                完成率
+                <br />
+                <div className={styles.dataStyle3}>
+                  {allFinishRate ? allFinishRate : 0}%
+                </div>
+                {/* <a href="#" style={{ color: "red" }}> */}
+                {/* </a> */}
+              </li>
+              <Divider
+                type="vertical"
+                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
+              />
+              <li>
+                及时完成率
+                <br />
+                <div className={styles.dataStyle3}>
+                  {finishRate ? finishRate : 0}%
+                </div>
+              </li>
+            </div>
+          </div>
+          {/* <span style={{width:"800px",marginLeft:"30px",marginBottom:"20px"}}>
           <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'black'}}>{totalCount?totalCount:0}</span></Button>
           <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'red'}}>{unfinishCount?unfinishCount:0}</span></Button>
           <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{dovertimeCount?dovertimeCount:0}</span></Button>
           <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>已办事项<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'green'}}>{(finishCount+overtimeCount)?(finishCount+overtimeCount):0}</span></Button>
           <Button style={{width:"130px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{allFinishRate?allFinishRate:0}%</span></Button>
           <Button style={{width:"140px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{finishRate?finishRate:0}%</span></Button>
-        </span>
+        </span> */}
           {/* <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr> */}
-        <Row style={{marginTop:"20px"}}>
+          <Row
-            <Col span={9}>
+            style={{
+              marginTop: "20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Col
+              span={24}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "1100px",
+              }}
+            >
+              {/* <h2 style={{textAlign:'center',fontWeight:'bold'}}>任务及时完成率（近12个月）</h2> */}
+              <div
+                id="ksRun"
+                style={{
+                  width: "100%",
+                  height: "400px",
+                  backgroundColor: "white",
+                  borderStyle: "solid",
+                  borderColor: "#ccc",
+                  borderWidth: "1px",
+                }}
+              ></div>
+              {/* <br></br> */}
+              {/* <span style={{ width: "100%" }}>
+                * 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
+                <br></br>
+                <br></br>
+              </span> */}
+            </Col>
+          </Row>
+          <Row
+            style={{
+              marginTop: "20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Col
+              span={24}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "1100px",
+              }}
+            >
               {/* <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 部门统计分析</h2> */}
-            <Table style={{width:'400px',marginLeft:"30px",textAlign:'center',marginBottom:'30px'}}
+              <Table
+                style={{
+                  width: "100%",
+                  // marginLeft: "30px",
+                  textAlign: "center",
+                  marginBottom: "30px",
+                }}
                 // scroll={{ y: 400 }}
                 dataSource={this.state.retData}
                 columns={this.state.columns}
@@ -432,16 +767,12 @@ class BI011FormRunAnalysis extends React.Component {
                 bordered
               />
             </Col>
-            <Col span={14}>
-            {/* <h2 style={{textAlign:'center',fontWeight:'bold'}}>任务及时完成率（近12个月）</h2> */}
-            <div id="ksRun" style={{width:'100%', height: '500px',marginLeft:"20px" ,marginRight:"30px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
-            <br></br>
-            <span style={{width:'100%'}}>* 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}<br></br><br></br></span>
-            
-            </Col>
           </Row>
         </div>
-    </div >
+      </div>
+    );
   }
 }
-export default connect(({ login, app,loading }) => ({ login, app ,loading}))(BI011FormRunAnalysis)
+export default connect(({ login, app, loading }) => ({ login, app, loading }))(
+  BI011FormRunAnalysis
+);