diff --git a/public/react/src/modules/developer/components/userInfo/index.js b/public/react/src/modules/developer/components/userInfo/index.js index 455902e13..3508135ba 100644 --- a/public/react/src/modules/developer/components/userInfo/index.js +++ b/public/react/src/modules/developer/components/userInfo/index.js @@ -14,7 +14,7 @@ function UserInfo (props) { const {image_url, name} = props.userInfo; return (
- 用户头像 + 用户头像 {name || ''} diff --git a/public/react/src/modules/tpm/jupyter/index.js b/public/react/src/modules/tpm/jupyter/index.js index 6a84f964e..cd947df85 100644 --- a/public/react/src/modules/tpm/jupyter/index.js +++ b/public/react/src/modules/tpm/jupyter/index.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-12-11 08:35:23 * @LastEditors: tangjiang - * @LastEditTime: 2019-12-12 20:19:48 + * @LastEditTime: 2019-12-13 15:25:50 */ import './index.scss'; import React, { useEffect, useState } from 'react'; @@ -26,16 +26,20 @@ function JupyterTPI (props) { }, url, loading, // 保存按钮状态 + total, + pagination, dataSets, // 数据集 jupyter_info, getJupyterInfo, syncJupyterCode, jupyter_tpi_url_state, - // getJupyterTpiDataSet, + getJupyterTpiDataSet, getJupyterTpiUrl, saveJupyterTpi, changeLoadingState, - changeGetJupyterUrlState + changeGetJupyterUrlState, + jupyter_identifier, + changeCurrentPage } = props; const {identifier} = params; @@ -107,6 +111,7 @@ function JupyterTPI (props) { const handleClickQuitTpi = () => { // console.log(jupyterInfo); const { identifier } = jupyterInfo; + if (!identifier) return; props.history.push(`/shixuns/${identifier}/challenges`); } @@ -125,6 +130,14 @@ function JupyterTPI (props) { saveJupyterTpi(); } + // 分页信息改变时 + const handlePageChange = (current) => { + // 改变当前页 + changeCurrentPage(current); + // 分页查找数据 + getJupyterTpiDataSet(jupyter_identifier); + } + return (
@@ -152,7 +165,12 @@ function JupyterTPI (props) {
- +
{ jupyter_info, jupyter_tpi_url, jupyter_data_set, - jupyter_tpi_url_state + jupyter_tpi_url_state, + jupyter_data_set_count, + jupyter_pagination, + jupyter_identifier } = state.jupyterReducer; const { loading } = state.commonReducer; return { @@ -184,7 +205,10 @@ const mapStateToProps = (state) => { jupyter_info, url: jupyter_tpi_url, dataSets: jupyter_data_set, - jupyter_tpi_url_state + jupyter_tpi_url_state, + total: jupyter_data_set_count, + pagination: jupyter_pagination, + jupyter_identifier }; } @@ -193,10 +217,11 @@ const mapDispatchToProps = (dispatch) => ({ getJupyterInfo: (identifier) => dispatch(actions.getJupyterInfo(identifier)), // 重置代码 syncJupyterCode: (identifier, msg) => dispatch(actions.syncJupyterCode(identifier, msg)), - // getJupyterTpiDataSet: (identifier) => dispatch(actions.getJupyterTpiDataSet(identifier)), + getJupyterTpiDataSet: (identifier, current) => dispatch(actions.getJupyterTpiDataSet(identifier, current)), getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)), saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()), - changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)) + changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)), + changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current)) }); export default connect( diff --git a/public/react/src/modules/tpm/jupyter/leftPane/index.js b/public/react/src/modules/tpm/jupyter/leftPane/index.js index f8cbbeccd..0af5b3f96 100644 --- a/public/react/src/modules/tpm/jupyter/leftPane/index.js +++ b/public/react/src/modules/tpm/jupyter/leftPane/index.js @@ -4,17 +4,22 @@ * @Github: * @Date: 2019-12-12 10:34:03 * @LastEditors: tangjiang - * @LastEditTime: 2019-12-12 20:18:46 + * @LastEditTime: 2019-12-13 15:31:35 */ import './index.scss'; import React, { useState, useEffect } from 'react'; -import {Icon, Empty} from 'antd'; +import {Icon, Empty, Pagination, Tooltip } from 'antd'; import MyIcon from '../../../../common/components/MyIcon'; function LeftPane (props) { // 获取数据集 - const { dataSets = [] } = props; + const { + dataSets = [], + total, + pagination, + onPageChange + } = props; const emptyCtx = (
@@ -31,8 +36,10 @@ function LeftPane (props) { const oList = dataSets.map((item, i) => { return (
  • - - {item.title} + + + {item.title} +
    • ); }); @@ -46,37 +53,30 @@ function LeftPane (props) { setRenderCtx(oUl); } }, [props]); - // 渲染数据集 - // const renderList = () => { - // // 空数据 - // if (dataSets.length === 0) { - // return
    - // - //
    - // } else { - // // 渲染列表 - // const oList = dataSets.map((item, i) => { - // return ( - //
  • - // - // {item.title} - //
    • - // ); - // }); - // return ( - //
      - // { oList } - //
    - // ); - // } - // } - + + // 分页处理 + const handleChangePage = (page) => { + // console.log(page, pageSize); + // setCurrent(page); + onPageChange && onPageChange(page); + } return (

    数据集 + {/* 数据集 */}

    { renderCtx } +
    + +
    +
    ) } diff --git a/public/react/src/modules/tpm/jupyter/leftPane/index.scss b/public/react/src/modules/tpm/jupyter/leftPane/index.scss index c53b46362..9c95b1aae 100644 --- a/public/react/src/modules/tpm/jupyter/leftPane/index.scss +++ b/public/react/src/modules/tpm/jupyter/leftPane/index.scss @@ -1,10 +1,16 @@ .jupyter_data_sets_area{ height: 100%; + background: #fff; .jupyter_h2_title{ height: 44px; line-height: 44px; - background-color: #EEEEEE; + // background-color: #EEEEEE; + background: #fff; padding: 0 30px; + font-size: 16px; + // box-size: border-box; + box-sizing: border-box; + border-bottom: 1px solid rgba(238,238,238,1); .jupyter_data_icon{ // color: #7286ff; color: #1890ff; @@ -18,7 +24,7 @@ .jupyter_data_list, .jupyter_empty{ - height: calc(100vh - 104px); + height: calc(100vh - 160px); overflow-y: auto; } @@ -54,4 +60,13 @@ justify-content: center; width: 100%; } + + .jupyter_pagination{ + display: flex; + justify-content: center; + align-items: center; + height: 56px; + box-sizing: border-box; + border-top: 1px solid rgba(238,238,238,1); + } } \ No newline at end of file diff --git a/public/react/src/redux/actions/actionTypes.js b/public/react/src/redux/actions/actionTypes.js index 8831e8de1..55aa42799 100644 --- a/public/react/src/redux/actions/actionTypes.js +++ b/public/react/src/redux/actions/actionTypes.js @@ -57,6 +57,7 @@ const types = { SAVE_JUPYTER_INFO: 'SAVE_JUPYTER_INFO', // 保存 jupyter 信息 CHANGE_JUPYTER_URL_STATE: 'CHANGE_JUPYTER_URL_STATE', // 获取url返回的状态值 SAVE_JUPYTER_TPI: 'SAVE_JUPYTER_TPI', // 保存 jupyter tpi + CHANGE_JUPYTER_CURRENT_PAGE: 'CHANGE_JUPYTER_CURRENT_PAGE' } export default types; diff --git a/public/react/src/redux/actions/index.js b/public/react/src/redux/actions/index.js index b9cf858dd..465ab1385 100644 --- a/public/react/src/redux/actions/index.js +++ b/public/react/src/redux/actions/index.js @@ -68,7 +68,8 @@ import { getJupyterInfo, syncJupyterCode, changeGetJupyterUrlState, - saveJupyterTpi + saveJupyterTpi, + changeCurrentPage } from './jupyter'; export default { @@ -119,6 +120,7 @@ export default { getJupyterInfo, syncJupyterCode, changeGetJupyterUrlState, - saveJupyterTpi + saveJupyterTpi, + changeCurrentPage // isUpdateCodeCtx } \ No newline at end of file diff --git a/public/react/src/redux/actions/jupyter.js b/public/react/src/redux/actions/jupyter.js index 65c0e14ab..5df1babf6 100644 --- a/public/react/src/redux/actions/jupyter.js +++ b/public/react/src/redux/actions/jupyter.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-12-12 09:01:30 * @LastEditors: tangjiang - * @LastEditTime: 2019-12-12 17:58:38 + * @LastEditTime: 2019-12-13 15:27:13 */ import types from "./actionTypes"; import { message } from 'antd'; @@ -18,20 +18,22 @@ import { // 获取 jupyter 相关信息 export const getJupyterInfo = (id) => { - return (dispatch) => { + return (dispatch, getState) => { + const { jupyter_pagination } = getState().jupyterReducer; + console.log(jupyter_pagination); fetchJupyterInfo(id).then(res => { if (res.data.status === 401) return; if (res.status === 200) { const { data } = res; - console.log(data); if (data.status === 0) { dispatch({ type: types.SAVE_JUPYTER_INFO, payload: data }); const { identifier, myshixun_identifier } = data; + dispatch(saveJupyterIdentifier(identifier)); // 调用获取数据集接口 - dispatch(getJupyterTpiDataSet(identifier)); + dispatch(getJupyterTpiDataSet(identifier, jupyter_pagination)); // 调用获取url接口 dispatch(getJupyterTpiUrl({identifier: myshixun_identifier})); } @@ -40,16 +42,21 @@ export const getJupyterInfo = (id) => { } } // 获取 jupyter tpi 数据集 -export const getJupyterTpiDataSet = (identifier) => { - return (dispatch) => { - fetchJupyterTpiDataSet(identifier).then(res => { +export const getJupyterTpiDataSet = (identifier, params) => { + return (dispatch, getState) => { + if (!params) { + params = getState().jupyterReducer.jupyter_pagination; + } + fetchJupyterTpiDataSet(identifier, params).then(res => { if (res.data.status === 401) return; // 用户未登录 - console.log('数据集:', res); if (res.status === 200) { - const {data_sets} = res.data; + const {data_sets, data_sets_count} = res.data; dispatch({ type: types.GET_JUPYTER_DATA_SETS, - payload: data_sets + payload: { + data_sets, + data_sets_count + } }); } }); @@ -59,7 +66,6 @@ export const getJupyterTpiDataSet = (identifier) => { export const getJupyterTpiUrl = (obj) => { return (dispatch, getState) => { const {jupyter_info} = getState().jupyterReducer; - console.log(obj.identifier, jupyter_info.myshixun_identifier); if (!obj.identifier && !jupyter_info.myshixun_identifier) return; const id = obj.identifier || jupyter_info.myshixun_identifier; fetchJupyterTpiUrl({identifier: id}).then(res => { @@ -136,4 +142,11 @@ export const saveJupyterTpi = () => { }); }); } +} +// 改变当前页数 +export const changeCurrentPage = (current) => { + return { + type: types.CHANGE_JUPYTER_CURRENT_PAGE, + payload: current + } } \ No newline at end of file diff --git a/public/react/src/redux/reducers/jupyterReducer.js b/public/react/src/redux/reducers/jupyterReducer.js index aca8bf647..f8825fb36 100644 --- a/public/react/src/redux/reducers/jupyterReducer.js +++ b/public/react/src/redux/reducers/jupyterReducer.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-12-12 09:01:39 * @LastEditors: tangjiang - * @LastEditTime: 2019-12-12 17:23:54 + * @LastEditTime: 2019-12-13 15:28:45 */ import types from "../actions/actionTypes"; @@ -14,15 +14,22 @@ const initState = { jupyter_data_set: [], jupyter_identifier: '', jupyter_tpi_url_state: -1, // 获取 url 状态值: 0 成功, 其它 失败 - jupyter_tpi_code: '' // 端口号 + jupyter_tpi_code: '', // 端口号 + jupyter_data_set_count: 1, // 数据集总数 + jupyter_pagination: { + page: 1, + limit: 20 // 默认加载20条 + } }; const JupyterReducer = (state = initState, action) => { switch (action.type) { case types.GET_JUPYTER_DATA_SETS: + const { data_sets, data_sets_count } = action.payload; return { ...state, - jupyter_data_set: action.payload + jupyter_data_set: data_sets, + jupyter_data_set_count: data_sets_count } case types.GET_JUPYTER_TPI_URL: const {url, status, port} = action.payload; @@ -33,6 +40,7 @@ const JupyterReducer = (state = initState, action) => { jupyter_tpi_code: port } case types.SAVE_JUPYTER_IDENTIFIER: + console.log('保存的jupyter_identifier', action.payload); return { ...state, jupyter_identifier: action.payload @@ -47,6 +55,11 @@ const JupyterReducer = (state = initState, action) => { ...state, jupyter_tpi_url_state: action.payload } + case types.CHANGE_JUPYTER_CURRENT_PAGE: + return { + ...state, + jupyter_pagination: Object.assign({}, state.jupyter_pagination, { page: action.payload }) + } default: return { ...state diff --git a/public/react/src/services/jupyterServer.js b/public/react/src/services/jupyterServer.js index bfc8788f8..3c14b4b45 100644 --- a/public/react/src/services/jupyterServer.js +++ b/public/react/src/services/jupyterServer.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-12-12 09:07:07 * @LastEditors: tangjiang - * @LastEditTime: 2019-12-12 17:46:17 + * @LastEditTime: 2019-12-13 14:30:51 */ import axios from 'axios'; @@ -14,9 +14,9 @@ export async function fetchJupyterInfo (identifier) { return axios.get(url); } // 获取数据集 -export async function fetchJupyterTpiDataSet (identifier) { +export async function fetchJupyterTpiDataSet (identifier, params) { const url = `/shixuns/${identifier}/jupyter_data_sets.json`; - return axios.get(url); + return axios.get(url, { params }); } // 获取 tpi url export async function fetchJupyterTpiUrl (params) {