新需求

src/pages/statistical/activity/compenents/NewUsers.jsx

@@ -19,8 +19,6 @@ const NewUsers = (props) => {
 
   useEffect(() => {
     NewsUserCount({
-      // startDate: `${moment(props.startDate).format('YYYY-MM-DD HH:mm:ss')}`, 
-      // endDate: `${moment(props.endDate).format('YYYY-MM-DD HH:mm:ss')}`, 
       startDate: props.startDate, 
       endDate: props.endDate, 
       buildingId: props.buildingId, 

src/pages/statistical/activity/compenents/OverView.jsx

@@ -25,45 +25,75 @@ let tableTitle = ['类型']
 let columns = [
   {
     title: '日期',
-    dataIndex: 'createTime',
-    key: 'createTime',
+    dataIndex: 'date',
+    key: 'date',
   },
   {
     title: '分享人数',
     dataIndex: 'sharePersonNum',
     key: 'sharePersonNum',
+    sorter: true,
   },
   {
     title: '分享次数',
     dataIndex: 'shareNum',
     key: 'shareNum',
+    sorter: true,
   },
   {
     title: '访问人数',
     dataIndex: 'visitPersonNum',
     key: 'visitPersonNum',
+    sorter: true,
   },
   {
     title: '访问次数',
     dataIndex: 'visitNum',
     key: 'visitNum',
+    sorter: true,
   },
   {
     title: '新增注册用户',
     dataIndex: 'addRegistNum',
     key: 'addRegistNum',
+    sorter: true,
   },
 ]
 
 
+function getDayBegin(dt) {
+  return moment(dt, 'day').hours(0).minutes(0).seconds(0).milliseconds(0).toDate();
+}
+
+
+function getDayEnd(dt) {
+  return moment(dt, 'day').hours(23).minutes(59).seconds(59).milliseconds(999).toDate();
+}
+
+
 class OverView extends React.Component {
 
   constructor(props) {
     super(props)
+
+    const defaultDays = 7
+
     this.state = {
+      radioVal: defaultDays,
+      formData: {
+        startDate: moment().subtract(7, 'day').toDate(),
+        endDate: new Date,
+        buildingId: '',
+        targetType: '',
+        pageNum:'',
+        pageSize:'',
+        sort:null,
+        colKey:null
+      },
       personData: [],  
       dataSoures: [],
       tableData: [],
+      barData: {},
       userType: 'all',
       endDate: '',
       startDate: '',
@@ -74,11 +104,13 @@ class OverView extends React.Component {
 
   componentDidMount() {
     this.getList()
+    this.getTableList()
   }
 
-  getList (params) {
-    console.log("params",params);
-    request({ ...apis.activityDataStatis.total, params: { ...params } }).then(res => {
+  getList () {
+    console.log('getlist')
+    const { formData } = this.state
+    request({ ...apis.activityDataStatis.total, params: formData }).then(res => {
       this.setState({ personData: res })
     }).catch(err => {
       <Alert
@@ -92,6 +124,25 @@ class OverView extends React.Component {
     })
   }
 
+  getTableList () {
+    const { formData } = this.state
+    request({ ...apis.activityDataStatis.tableData, params: formData }).then(data => {
+      console.log(data)
+      this.setState({ tableData: data.records, total: data.total})
+    }).catch()
+  }
+
+  getBarData = (startDate, endDate) => {
+    console.log(startDate, 'startDate')
+    console.log(endDate, 'endDate')
+    request({
+      ...apis.activityDataStatis.selectAllActivityUser,
+      params: { startDate, endDate }
+    }).then((data) => {
+      this.setState({barData: data})
+    })
+  }
+
   formatDate = (start, end) => {
     const tempStartDate = `${moment(start).format('YYYY-MM-DDT00:00:00.000')}Z`
     const tempEndDate = `${moment(end).format('YYYY-MM-DDT23:59:59.999')}Z`
@@ -104,7 +155,6 @@ class OverView extends React.Component {
   }
 
   handleSubmit = (e, props) => {
-    console.log(this.props.form.getFieldValue("startDate"), 'eeeeeee')
     let startDate = null
     let endDate = null
     const buildingId = this.props.form.getFieldValue("buildingId");
@@ -115,12 +165,16 @@ class OverView extends React.Component {
     if (this.props.form.getFieldValue("endDate") != undefined){
       endDate = this.props.form.getFieldValue("endDate").toDate()
     }
-    e.preventDefault();
-    props.form.validateFields((err, values) => {
-        if (!err) {
-          this.getList({buildingId: buildingId, targetType: targetType, startDate: startDate, endDate: endDate})
-        }
-      });
+    const { formData } = this.state
+    this.setState({
+      formData: {
+        ...formData,
+        startDate: startDate,
+        endDate: endDate,
+        buildingId: buildingId,
+        targetType: targetType
+      }
+    }, this.getAllList)
     this.setState({ startDate: startDate, endDate: endDate, buildingId: this.props.form.getFieldValue("buildingId"), targetType: this.props.form.getFieldValue("targetType") })
   }
 
@@ -129,8 +183,23 @@ class OverView extends React.Component {
     this.props.form.resetFields()
   }
 
+  exportActivityStats = () => {
+    const { formData } = this.state
+    request({ ...apis.activityDataStatis.tableDataExport, params: formData }).then(data => {
+      if (!data) {
+        return
+      }
+      const url = window.URL.createObjectURL(new Blob([data]))
+        const link = document.createElement('a')
+        link.style.display = 'none'
+        link.href = url
+        link.setAttribute('download', '活动统计.xlsx')
+        document.body.append(link)
+        link.click()
+    }).catch()
+  }
+
   getDataOf = (days) => {
-    console.log(77777777)
     this.setState({ endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
     this.getList({ endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
   }
@@ -179,15 +248,49 @@ class OverView extends React.Component {
 
   }
 
-  handleSelectChange = (e) => {
-    this.setState({ userType: e }, () => {
-      this.onTabledatas(this.state.dataSoures)
-    })
+  //排序
+  handleTableChange = (pagination, filters, sorter) => {
+    console.log(pagination, filters, sorter)
+    const { formData } = this.state
+    this.setState({
+      formData: {
+        ...formData,
+        startDate: formData.startDate,
+        endDate: formData.endDate,
+        buildingId: formData.buildingId,
+        targetType: formData.targetType,
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize,
+        sort: sorter.order,
+        colKey: sorter.columnKey
+      }
+    }, this.getAllList)
+  };
+
+  getAllList(){
+    this.getList()
+    this.getTableList()
+  }
+
+  handleRadioChange = (e) => {
+    const { formData } = this.state
+    const val = e.target.value;
+    this.setState({
+      radioVal: val - 0,
+      formData: {
+        ...formData,
+        startDate: moment().subtract(val, 'day').toDate(),
+        endDate: new Date,
+      }
+    }, this.getAllList)
   }
 
 
   render() {
+    const { radioVal } = this.state
     const { getFieldDecorator } = this.props.form;
+    const startDate = this.state.formData.startDate
+    const endDate = this.state.formData.endDate
 
     return (
     <>
@@ -198,19 +301,23 @@ class OverView extends React.Component {
         borderRadius: '12px',
         minHeight: '60vh'
       }}>
-        <Radio.Group buttonStyle="solid" defaultValue="a">
-          <Radio.Button value="c" onClick={() => this.getDataOf(1)}>今日</Radio.Button>
-          <Radio.Button value="a" onClick={() => this.getDataOf(7)}>最近7天</Radio.Button>
-          <Radio.Button value="b" onClick={() => this.getDataOf(30)}>最近1月</Radio.Button>
+        <Radio.Group buttonStyle="solid" value={radioVal} onChange={this.handleRadioChange}>
+          <Radio.Button value={0}>今日</Radio.Button>
+          <Radio.Button value={7}>最近7天</Radio.Button>
+          <Radio.Button value={30}>最近1月</Radio.Button>
         </Radio.Group>
         <Form layout="inline" onSubmit={e => this.handleSubmit(e, this.props)}>
             <Form.Item style={{marginTop:'20px', marginBottom:'20px'}}>
-            {getFieldDecorator('startDate')(
+            {getFieldDecorator('startDate', {initialValue: moment(startDate)
+              
+            })(
                 <DatePicker placeholder="开始日期"/>,
             )}
             </Form.Item>
             <Form.Item style={{marginTop:'20px', marginBottom:'20px'}}>
-            {getFieldDecorator('endDate')(
+            {getFieldDecorator('endDate', {initialValue: moment(endDate)
+              
+            })(
                 <DatePicker placeholder="结束日期"/>,
             )}
             </Form.Item>
@@ -274,15 +381,15 @@ class OverView extends React.Component {
           
             <div style={{ display: 'flex' }}>
                 <div className={style.bar}>
-                    <NewUsers startDate={this.state.startDate} endDate={this.state.endDate} buildingId={this.state.buildingId} targetType={this.state.targetType} dataZoom={false}></NewUsers>
+                    <NewUsers startDate={this.state.formData.startDate} endDate={this.state.formData.endDate} buildingId={this.state.buildingId} targetType={this.state.targetType} dataZoom={false}></NewUsers>
                 </div>
             </div >
             <AuthButton name="admin.customer.import" noRight={null}>
-            <Button type="primary" style={{ float: 'right', margin: '20px 0', zIndex: 1 }}>
+            <Button type="primary" style={{ float: 'right', margin: '20px 0', zIndex: 1 }} onClick={this.exportActivityStats}>
                 导出
             </Button>
             </AuthButton>
-          <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
+          <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={{ total: this.state.total}} onChange={this.handleTableChange} scroll={{ y: 500 }}></Table>
         </div>
       </div>
     </>

src/services/apis.js

@@ -1589,9 +1589,19 @@ export default {
     },
     selectAllActivityUser: {
       method: 'GET',
-      url: `${prefix}/selectAllActivityUser`,
+      url: `${prefix}/activityStatistical/selectAllActivityUser`,
       action: 'admin.contract.list.get',
     },
+    tableData: {
+      method: 'GET',
+      url: `${prefix}/activityStatistical/selectTableData`,
+      action: 'admin.contract.list.get',
+    },
+    tableDataExport: {
+      method: 'GET',
+      url: `${prefix}/activityStatistical/tableDataExport`,
+      action: 'admin.contract.list.get',
+    }
   },
   stats: {
     barList: {