日志报告

src/view/Manage/DatasourceManage/Component/TaskReportModal.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Row, Col, Card, Table, Typography, Spin, Empty, Button } from 'antd';
+import { Modal, Row, Col, Card, Table, Typography, Spin, Empty, Button, DatePicker } from 'antd';
 import classNames from 'classnames';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 
 import { dispatch, dispatchLatest } from '../../../../model';
 import './TaskReportModal.less';
 
 const { Meta } = Card;
+const { RangePicker } = DatePicker;
 
 const TaskReportModal = (props) => {
   const { visible, onCancel, scope } = props;
 
-  const [ confirmLoading, setConfirmLoading ] = useState(false);
   const [ summaryDatas, setSummaryDatas ] = useState([]);
   const [ currentSummaryData, setCurrentSummaryData ] = useState({});
   const [ reportDetail, setReportDetail ] = useState({});
   const [ taskTracersBindStateId, setTaskTracersBindStateId ] = useState([]);
+  const [ rangeValue, setRangeValue ] = useState([]);
 
   useEffect(() => {
 
     if (visible) {
-      getTaskReportSummary();
+      getTaskReportSummary((rangeValue.length)>=1?rangeValue[0]: null, (rangeValue.length)===2?rangeValue[1]: null);
     }
     
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ visible ])
+  }, [ visible, rangeValue ])
 
-  const getTaskReportSummary = () => {
+  const getTaskReportSummary = (startTime=null, endTime=null) => {
     dispatch({
       type: 'datasource.getTaskReportSummary',
       payload: {
-        namespace: ((scope||[]).length>0?scope[0]:'')
+        namespace: ((scope||[]).length>0?scope[0]:''),
+        startTime,
+        endTime
       },
       callback: data => {
 
@@ -44,17 +49,19 @@ const TaskReportModal = (props) => {
 
         const _currentSummaryData = (data||[]).length>0?data[0]:{};
         setCurrentSummaryData(_currentSummaryData);
-        getTaskReportDetail(_currentSummaryData.params);
+        getTaskReportDetail(_currentSummaryData.params, startTime, endTime);
       }
     })
   }
 
-  const getTaskReportDetail = (params) => {
+  const getTaskReportDetail = (params, startTime, endTime) => {
     dispatchLatest({
       type: 'datasource.getTaskReportDetail',
       payload: {
         namespace: ((scope||[]).length>0?scope[0]:''),
         params,
+        startTime,
+        endTime
       },
       callback: data => {
 
@@ -89,6 +96,25 @@ const TaskReportModal = (props) => {
     });
   }
 
+  const onTimeChange = (value, dateString) => {
+    if (value === null) {
+      setRangeValue([]);
+    }
+  }
+
+  const onTimeOk = (value) => {
+
+    const _moments = [];
+
+    value.forEach(item => {
+      if ((item||'') !== '') {
+        _moments.push(item.valueOf());
+      }
+    })
+
+    setRangeValue(_moments);
+  }
+
   const onSummaryDataChange = (item) => {
     if (item.hasDetail) {
       setCurrentSummaryData(item);
@@ -111,7 +137,6 @@ const TaskReportModal = (props) => {
       title={'日志报告'}
       visible={visible}
       width={1000}
-      confirmLoading={confirmLoading}
       onCancel={() => { 
         reset();
         onCancel && onCancel() 
@@ -129,10 +154,21 @@ const TaskReportModal = (props) => {
         </Button>
       }
     >
-      <Row gutter={20}>
+      <div className='d-flex' style={{ alignItems: 'center' }}>
+        <span>查询报告:</span>
+        <RangePicker
+          className='ml-3'
+          locale={locale}
+          showTime={{ format: 'HH:mm' }}
+          format="YYYY-MM-DD HH:mm"
+          onChange={onTimeChange}
+          onOk={onTimeOk}
+        />
+      </div>
+      <Row className='mt-5' gutter={20}>
       {
         summaryDatas && summaryDatas.map((item, index) => {
-          const classes = classNames( (item===currentSummaryData)?'title-highlight': 'title' , {
+          const classes = classNames((item===currentSummaryData)?'title-highlight':'title' , {
             'pointer': item.hasDetail
           }); 
 
@@ -145,7 +181,12 @@ const TaskReportModal = (props) => {
                     {item.cnName||''}  
                     </div>
                   }
-                  description={item.value||''}
+                  description={
+                    <div style={{ color: '#000', fontSize: 16 }}>
+                      <span>{item.value||0}</span>
+                      <span>{item.unit?` (${item.unit}) `: ''}</span>
+                    </div>
+                  }
                 />
               </Card>
             </Col>