报表BI008

src/components/CustomPages/BI/BI008FormRunAnalysis.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'dva'
 import { initFilter, extendRule, extendOrder } from "../../../utils/common"
 import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
-import { Table, Button,  Row, Col,Modal ,Icon} from 'antd';
+import { Table, Button,  Row, Col,Modal,Form ,DatePicker,Icon} from 'antd';
 import echarts from 'echarts';
 import styles from '../HI/StepForm.css';
 import moment from 'moment'
@@ -22,6 +22,8 @@ class BI008FormRunAnalysis extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      selectStartTime: moment(this.getStartDate(), 'YYYY-MM-DD 00:00:00'),
+      selectEndTime:moment(this.getEndDate(), 'YYYY-MM-DD 23:59:59'),
       visible: false,
       noticeTitle: '',
       tmpData: {},
@@ -300,7 +302,27 @@ class BI008FormRunAnalysis extends React.Component {
   //     visible: true
   //   }));
   // }
+  getStartDate=()=>{
+    let  date = new Date()
+    let  y = date.getFullYear()
+    let  m = date.getMonth() + 1
+    let  d = date.getDate();
+    //  当前日期
+    let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
+         let pastDate = moment(nowDate).add(-1, "month").format('YYYY-MM-DD 00:00:00')
+        return pastDate;
+  }
   
+  getEndDate=()=>{
+    let  date = new Date()
+    let  y = date.getFullYear()
+    let  m = date.getMonth() + 1
+    let  d = date.getDate();
+    //  当前日期
+    let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
+         let pastDate = moment(nowDate).format('YYYY-MM-DD 23:59:59')
+        return pastDate;
+  }
     getDate=(type)=>{
         let  date = new Date()
         let  y = date .getFullYear()
@@ -587,6 +609,18 @@ class BI008FormRunAnalysis extends React.Component {
       }
   })
  }
+ startChange=(value)=>{
+  this.setState({
+    selectStartTime:value,
+    startTime:value.format("YYYYMMDD")
+  })
+};
+endChange=(value)=>{
+  this.setState({
+    selectEndTime:value,
+    endTime:value.format("YYYYMMDD")
+  })
+};
   closeModal = () => { // 退出弹窗
     this.clearData();
   }
@@ -607,6 +641,10 @@ class BI008FormRunAnalysis extends React.Component {
     const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,
         weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,
       } = this.state;
+      const formItemLayout = {
+        labelCol: { span: 10 },
+        wrapperCol: { span: 14 },
+      }
     let allFinishRate=totalCount ===0?0:((finishCount+overtimeCount)/totalCount * 100).toFixed(0);
     let finishRate=totalCount ===0?0:(finishCount/totalCount * 100).toFixed(0);
     return <div>
@@ -615,22 +653,52 @@ class BI008FormRunAnalysis extends React.Component {
         <h1 style={{ textAlign: "center",marginTop:'30px',fontWeight:'bold'}}>{this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS}安全生产标准化运行情况</h1>
         <Row style={{ textAlign: 'center',fontSize:'15px'}}> <span>({startTime}-{endTime})</span></Row>
         <br></br>
-        <span style={{width:"800px",marginLeft:"30px"}}>
+        <Row>
-          <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{totalCount}</span></Button>
+       <Col span={14} style={{ marginLeft: "10px" }}>
+       <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'black'}}>{totalCount}</span></Button>
           <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>正常已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'green'}}>{finishCount}</span></Button>
           <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时已办<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{overtimeCount}</span></Button>
           <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>未完成数<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'red'}}>{unfinishCount}</span></Button>
           <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{allFinishRate}%</span></Button>
           <Button style={{width:"100px",height:"60px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"20px",color:'orange'}}>{finishRate}%</span></Button>
-        </span>
+            </Col>
-        <span style={{float:"right",marginTop:"20px",width:"400px"}}>
+            <Col span={3} style={{ marginLeft: "10px",marginTop:'20px' }}> 
-          <Col  span={4}>  <Button type='link' style= {{color:weekColor,marginRight:"5px"}} onClick={() => this.getDate("Week")}>最近1周</Button></Col>
+          <Form.Item
-          <Col  span={4}>  <Button type='link' style= {{color:monthColor,marginRight:"5px"}} onClick={() => this.getDate("Month")}>最近1月</Button></Col>
+                  label={'查询时间'}
-          <Col  span={4}>  <Button type='link' style= {{color:threeMonthColor,marginRight:"5px"}} onClick={() => this.getDate("ThreeMonth")}>最近3月</Button></Col>
+                  {...formItemLayout}
-          <Col span={4}>  <Button type='link' style= {{color:sixMonthColor,marginRight:"5px"}} onClick={() => this.getDate("SixMonth")}>最近半年</Button></Col>
+                >
-          <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("Year")}>最近1年</Button></Col>
+                   <DatePicker 
+                   style={{ width: "120px" }}
+                  //  defaultValue={moment(this.state.startTime, 'YYYY-MM-DD 00:00:00')}
+                   value={this.state.selectStartTime} 
+                   format="YYYY-MM-DD"  onChange={this.startChange}/>
+                </Form.Item>
+               
+          </Col>
+         
+          <Col span={3} style={{ marginLeft: "10px",marginTop:'20px'  }}>
+          <Form.Item
+                  label={'至'}
+                  {...formItemLayout}
+                >
+                   <DatePicker 
+                    style={{ width: "120px" }}
+                    // defaultValue={moment(this.state.endTime, 'YYYY-MM-DD 23:59:59')}
+                   value={this.state.selectEndTime}
+                   format="YYYY-MM-DD"  onChange={this.endChange}/>
+                </Form.Item>
+           </Col>
+           <Col span={1} style={{ marginLeft: "50px" ,marginTop:'20px' }}><Button type='primary' onClick={() => this.loadData()}>查询</Button></Col>
+
+       </Row>
+        
+          {/* <Col  span={4}>  <Button type='link' style= {{color:weekColor,marginRight:"5px"}} onClick={() => this.getDate("Week")}>最近1周</Button></Col> */}
+          {/* <Col  span={4}>  <Button type='link' style= {{color:monthColor,marginRight:"5px"}} onClick={() => this.getDate("Month")}>最近1月</Button></Col> */}
+          {/* <Col  span={4}>  <Button type='link' style= {{color:threeMonthColor,marginRight:"5px"}} onClick={() => this.getDate("ThreeMonth")}>最近3月</Button></Col> */}
+          {/* <Col span={4}>  <Button type='link' style= {{color:sixMonthColor,marginRight:"5px"}} onClick={() => this.getDate("SixMonth")}>最近半年</Button></Col> */}
+          {/* <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("Year")}>最近1年</Button></Col> */}
           {/* <Col span={4}>  <Button type='link' style= {{color:yearColor,marginRight:"5px"}} onClick={() => this.getDate("All")}>全部</Button></Col> */}
-        </span>
+
         <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr>
         <Row style={{marginTop:"10px"}}>
             <Col span={4}>