tangjiang
5 years ago
parent
51205c9056
commit
841968d741
@ -1,69 +1,80 @@
|
|||||||
/*
|
/*
|
||||||
* @Description: 展示表格数据
|
* @Description:
|
||||||
* @Author: tangjiang
|
* @Author: tangjiang
|
||||||
* @Github:
|
* @Github:
|
||||||
* @Date: 2020-01-10 13:46:30
|
* @Date: 2020-01-14 13:39:12
|
||||||
* @LastEditors : tangjiang
|
* @LastEditors : tangjiang
|
||||||
* @LastEditTime : 2020-01-11 17:35:03
|
* @LastEditTime : 2020-01-14 16:30:05
|
||||||
*/
|
*/
|
||||||
import 'antd-table-infinity/dist/index.css';
|
|
||||||
import 'antd-table-infinity/index.css';
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
import { Spin } from 'antd';
|
import { Table } from 'antd';
|
||||||
// import {SumTable as Table} from 'antd-table-infinity';
|
import ReactDom from 'react-dom';
|
||||||
import { SumTable as Table } from 'antd-table-infinity';
|
|
||||||
import { columns, fetchData, sumData } from './mockData';
|
|
||||||
|
|
||||||
const DisplayTableData = ({
|
const DisplayTableData = (props) => {
|
||||||
// columns = [],
|
const {columns, datas, fetchData, total} = props;
|
||||||
// datas,
|
let tableEl = useRef(null);
|
||||||
// fetchData
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
const [data, setData] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const handleFetchData = () => {
|
const renderFooter = (obj = {}) => {
|
||||||
setLoading(true);
|
const {course_count, student_count, choice_shixun_num, choice_shixun_frequency, total} = obj;
|
||||||
fetchData(data.length).then(newData => {
|
if (!obj) return ''
|
||||||
setLoading(false);
|
else {
|
||||||
const _data = data.concat(newData);
|
return (
|
||||||
setData(_data);
|
<ul className="footer_list">
|
||||||
})
|
<li className="footer_item footer-total">总计</li>
|
||||||
|
<li className="footer_name">{total || '-'}</li>
|
||||||
|
<li className="footer_item">{course_count || '-'}</li>
|
||||||
|
<li className="footer_item">{student_count || '-'}</li>
|
||||||
|
<li className="footer_item">{choice_shixun_num || '-'}</li>
|
||||||
|
<li className="footer_item">{choice_shixun_frequency || '-'}</li>
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleFetchData();
|
const table = ReactDom.findDOMNode(tableEl);
|
||||||
|
// console.log(table);
|
||||||
|
const tableBody = table.querySelector('.ant-table-body');
|
||||||
|
let _scrollTop = 0;//保存上次滚动距离
|
||||||
|
let isRun = false;//是否执行查询
|
||||||
|
tableBody.addEventListener('scroll', () => {
|
||||||
|
if(tableBody.scrollTop === 0 ){
|
||||||
|
_scrollTop = 0;
|
||||||
|
}
|
||||||
|
// 上一次滚动高度与当前滚动高度不同则是纵向滚动
|
||||||
|
if (_scrollTop !== tableBody.scrollTop) {
|
||||||
|
//是否滑动到距离底部40px的位置
|
||||||
|
const scorll = _scrollTop >= tableBody.scrollHeight-tableBody.clientHeight-40;
|
||||||
|
//isRun为true时 代表已经执行查询
|
||||||
|
if(isRun && scorll){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//_scrollTop < tableBody.scrollTop 判断是否向下滑动
|
||||||
|
isRun = _scrollTop < tableBody.scrollTop && scorll;
|
||||||
|
//保存当前滚动位置
|
||||||
|
_scrollTop = tableBody.scrollTop;
|
||||||
|
if (isRun) {
|
||||||
|
fetchData && fetchData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const loadMoreContent = () => (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
textAlign: 'center',
|
|
||||||
paddingTop: 40,
|
|
||||||
paddingBottom: 40,
|
|
||||||
border: '1px solid #e8e8e8',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Spin tip="Loading..." />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
className='statc_table'
|
className='static_table'
|
||||||
key="key"
|
rowKey={record => record.id}
|
||||||
loading={loading}
|
|
||||||
onFetch={handleFetchData}
|
|
||||||
pageSize={50}
|
|
||||||
loadingIndicator={loadMoreContent}
|
|
||||||
columns={columns}
|
columns={columns}
|
||||||
sumData={sumData}
|
dataSource={datas}
|
||||||
scroll={{ y: 500 }}
|
pagination={false}
|
||||||
dataSource={data}
|
loading={loading}
|
||||||
// bordered
|
scroll={{y: 500}}
|
||||||
// debug
|
ref={(ref)=>tableEl=ref}
|
||||||
|
footer={total ? () => renderFooter(total) : ''}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default DisplayTableData;
|
export default DisplayTableData;
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2020-01-14 09:44:02
|
||||||
|
* @LastEditors : tangjiang
|
||||||
|
* @LastEditTime : 2020-01-14 17:02:45
|
||||||
|
*/
|
||||||
|
import types from "./actionTypes";
|
||||||
|
import { fetchStaticList } from "../../services/staticService";
|
||||||
|
|
||||||
|
export const staticList = (id) => {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const { params, total_count, other_info } = getState().staticReducer;
|
||||||
|
|
||||||
|
if (total_count !== 0 && total_count === other_info.length) return;
|
||||||
|
fetchStaticList(id, params).then(res => {
|
||||||
|
// console.log('统计数据=====>>>>>', res);
|
||||||
|
const {data} = res;
|
||||||
|
if (data.status === 0) {
|
||||||
|
dispatch({
|
||||||
|
type: types.GET_STATIC_INFO,
|
||||||
|
payload: data.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const changeParams = (params) => {
|
||||||
|
return {
|
||||||
|
type: types.CHANGE_STATIC_PARAMS,
|
||||||
|
payload: params
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const initTotal = () => {
|
||||||
|
return {
|
||||||
|
type: types.CHANGE_STATIC_TOTAL
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
/*
|
||||||
|
* @Description: 统计
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2020-01-14 09:34:49
|
||||||
|
* @LastEditors : tangjiang
|
||||||
|
* @LastEditTime : 2020-01-14 15:49:55
|
||||||
|
*/
|
||||||
|
import types from "../actions/actionTypes";
|
||||||
|
|
||||||
|
// const maps = {
|
||||||
|
// 1: 'shixun_info', // 实训使用情况
|
||||||
|
// 2: 'user_info', // 用户使用情况
|
||||||
|
// 3: 'subject_info' // 实践课程使用情况
|
||||||
|
// }
|
||||||
|
const initalState = {
|
||||||
|
subject_info: {},
|
||||||
|
other_info: [],
|
||||||
|
total_count: 0,
|
||||||
|
total: {},
|
||||||
|
params: {
|
||||||
|
// sort_by: '',
|
||||||
|
// sort_direction: 'desc', // desc || asc
|
||||||
|
limit: 20, // 一页多少条
|
||||||
|
page: 1, // 第几页
|
||||||
|
type: 'subject_info' // 类型: 实训 shixun_info,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// const getGuid = () =>
|
||||||
|
// 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||||
|
// /* eslint-disable */
|
||||||
|
// let r = (Math.random() * 16) | 0,
|
||||||
|
// v = c == 'x' ? r : (r & 0x3) | 0x8;
|
||||||
|
// return v.toString(16);
|
||||||
|
// });
|
||||||
|
|
||||||
|
const staticReducer = (state = initalState, action) => {
|
||||||
|
const { payload = {}, type } = action;
|
||||||
|
const {subject_info, other_info = [], total = {}, total_count} = payload;
|
||||||
|
switch (type) {
|
||||||
|
case types.GET_STATIC_INFO:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
subject_info,
|
||||||
|
other_info: state.other_info.concat(other_info),
|
||||||
|
total,
|
||||||
|
total_count,
|
||||||
|
params: Object.assign({}, state.params, { page: state.params.page + 1 })
|
||||||
|
}
|
||||||
|
case types.CHANGE_STATIC_PARAMS: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
params: Object.assign({}, state.params, payload)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case types.CHANGE_STATIC_TOTAL: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
other_info: [],
|
||||||
|
total: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default staticReducer;
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2020-01-14 09:40:53
|
||||||
|
* @LastEditors : tangjiang
|
||||||
|
* @LastEditTime : 2020-01-14 10:47:19
|
||||||
|
*/
|
||||||
|
export async function fetchStaticList (id, params) {
|
||||||
|
const url = `/paths/${id}/statistics_info.json`;
|
||||||
|
return axios.get(url, { params });
|
||||||
|
}
|
||||||
Loading…
Reference in new issue