调整

5 years ago · f8b9f369ec
parent 0d4afbdcce
commit f8b9f369ec
10 changed files with 134 additions and 26 deletions
--- a/public/react/public/js/jupyter.js
+++ b/public/react/public/js/jupyter.js
@ -0,0 +1,11 @@
+//用于嵌入到jupyter pod中的js
+//guange 2019.12.18
+
+window.onload=function(){
+  require(["base/js/namespace"],function(Jupyter) {
+    Jupyter.notebook.save_checkpoint();
+  });
+}
+
+
+ 
--- a/public/react/src/modules/page/VNC.css
+++ b/public/react/src/modules/page/VNC.css
@ -14,4 +14,29 @@
    color: #fff;
    left: 13px;
    user-select: none;
+}
+
+.jupyter_float_button {
+    background-image: url(./images/float_switch.jpg);
+    height: 112px;
+    width: 38px;
+    position: absolute;
+    right: 0px;
+    top: 32%;
+    cursor: pointer;
+    left:auto;
+    z-index: 99999999;
+}
+
+.jupyter_float_button .text {
+    position: relative;
+    writing-mode: vertical-rl;
+    top: 36px;
+    color: #fff;
+    left: 13px;
+    user-select: none;
+}
+
+.newjupyter_float_button{
+    right: 257px;
 }
--- a/public/react/src/modules/page/component/FloatButton.js
+++ b/public/react/src/modules/page/component/FloatButton.js
@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import '../VNC.css'
 const $ = window.$;
 class FloatButton extends Component {
 	componentDidMount() {
--- a/public/react/src/modules/tpm/TPMBanner.js
+++ b/public/react/src/modules/tpm/TPMBanner.js
@ -851,8 +851,6 @@ class TPMBanner extends Component {

                  </li>
                </ul>
-								{
-									this.props.is_jupyter===true?"":

                      <Popover placement="right" content={
                        <div style={{"width": "530px"}} >
@ -917,7 +915,7 @@ class TPMBanner extends Component {
                        </div>
                      </Popover>

-								}
+


                {
--- a/public/react/src/modules/tpm/jupyter/index.js
+++ b/public/react/src/modules/tpm/jupyter/index.js
@ -9,10 +9,11 @@
 import './index.scss';
 import React, { useEffect, useState } from 'react';
 import SplitPane from 'react-split-pane';
-import { Button, Modal } from 'antd';
+import { Button, Modal,Drawer } from 'antd';
 import {
  connect
 } from 'react-redux';
+import FloatButton from '../../page/component/FloatButton';
 import UserInfo from '../../developer/components/userInfo';
 import actions from '../../../redux/actions';
 import LeftPane from './leftPane';
@ -39,7 +40,9 @@ function JupyterTPI (props) {
    changeLoadingState,
    changeGetJupyterUrlState,
    jupyter_identifier,
-    changeCurrentPage
+    changeCurrentPage,
+    changeshowDrawer,
+    drawervisible,
  } = props;

  const {identifier} = params;  
@ -107,6 +110,28 @@ function JupyterTPI (props) {
    })
  }

+
+  // 重置环境
+  const handleEnvironmentTpi = () => {
+    Modal.confirm({
+      title: '重置环境',
+      content: (
+        <p style={{ lineHeight: '24px' }}>
+          你在本文件中修改的内容将丢失,<br />
+          是否确定重置环境？
+        </p>
+      ),
+      okText: '确定',
+      cancelText: '取消',
+      onOk () {
+        // console.log('调用重置代码....', myIdentifier);
+        // if (myIdentifier) {
+        //   syncJupyterCode(myIdentifier, '重置成功');
+        // }
+      }
+    })
+  }
+
  // 退出实训
  const handleClickQuitTpi = () => {
    // console.log(jupyterInfo);
@ -138,6 +163,13 @@ function JupyterTPI (props) {
    getJupyterTpiDataSet(jupyter_identifier);
  }

+  const swtichFirstDrawer = () => {
+    changeshowDrawer(!drawervisible)
+  }
+
+  const firstDrawerWidth = ()=>{
+    return 260
+  };
  return (
    <div className="jupyter_area">
      <div className="jupyter_header">
@ -151,9 +183,17 @@ function JupyterTPI (props) {
          <Button 
            className="btn_common" 
            type="link" 
-            icon="sync"
+            icon="history"
            onClick={handleClickResetTpi}
-          >重置实训</Button> 
+          >重置实训</Button>
+
+          <Button
+            className="btn_common"
+            type="link"
+            icon="sync"
+            onClick={handleEnvironmentTpi}
+          >重置环境</Button>
+
          <Button 
            className="btn_common" 
            type="link" 
@ -162,16 +202,17 @@ function JupyterTPI (props) {
          >退出实训</Button> 
        </p>
      </div>
+
      <div className="jupyter_ctx">
-        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
-          <div className={'split-pane-left'}>
-            <LeftPane 
-              dataSets={dataSets} 
-              total={total}
-              pagination={pagination}
-              onPageChange={handlePageChange}
-            />
-          </div>
+        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="100%">
+          {/*<div className={'split-pane-left'}>*/}
+          {/*  <LeftPane */}
+          {/*    dataSets={dataSets} */}
+          {/*    total={total}*/}
+          {/*    pagination={pagination}*/}
+          {/*    onPageChange={handlePageChange}*/}
+          {/*  />*/}
+          {/*</div>*/}
          <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
            <RightPane
              identifier={myIdentifier}
@ -181,9 +222,21 @@ function JupyterTPI (props) {
              onReloadUrl={handleOnReloadUrl}
              onSave={handleOnSave}
            />
-            <div />
+            <FloatButton onClick={swtichFirstDrawer} className={drawervisible===false?"jupyter_float_button":"jupyter_float_button newjupyter_float_button"}>{"数据集"}</FloatButton>
          </SplitPane>
+
        </SplitPane>
+        <Drawer
+          placement={"right"}
+          closable={false}
+          mask={false}
+          // onClose={this.onClose}
+          visible={drawervisible}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
      </div>
    </div>
  );
@ -199,7 +252,7 @@ const mapStateToProps = (state) => {
    jupyter_pagination,
    jupyter_identifier
  } = state.jupyterReducer;
-  const { loading } = state.commonReducer;
+  const { loading ,drawervisible} = state.commonReducer;
  return {
    loading,
    jupyter_info,
@ -208,7 +261,8 @@ const mapStateToProps = (state) => {
    jupyter_tpi_url_state,
    total: jupyter_data_set_count,
    pagination: jupyter_pagination,
-    jupyter_identifier
+    jupyter_identifier,
+    drawervisible,
  };
 }

@ -221,7 +275,9 @@ const mapDispatchToProps = (dispatch) => ({
  getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)),
  saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()),
  changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
-  changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current))
+  changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current)),
+  //展开Drawer
+  changeshowDrawer: (type) => dispatch(actions.changeshowDrawer(type))
 });

 export default connect(
--- a/public/react/src/modules/tpm/jupyter/index.scss
+++ b/public/react/src/modules/tpm/jupyter/index.scss
@ -9,7 +9,7 @@
  -webkit-background-clip: padding;
  background-clip: padding-box;
 }
- 
+
 .Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
@ -56,6 +56,7 @@
    line-height: 60px;
    background-color: #070F1A;
    padding-left: 30px;
+    z-index:999999;
    .jupyter_title{
      display: flex;
      flex-direction: column;
--- a/public/react/src/redux/actions/actionTypes.js
+++ b/public/react/src/redux/actions/actionTypes.js
@ -57,7 +57,8 @@ 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'
+  CHANGE_JUPYTER_CURRENT_PAGE: 'CHANGE_JUPYTER_CURRENT_PAGE',
+  CHANGE_SHOW_DRAWER: 'CHANGE_SHOW_DRAWER',
 }

 export default types;
--- a/public/react/src/redux/actions/index.js
+++ b/public/react/src/redux/actions/index.js
@ -70,7 +70,8 @@ import {
  syncJupyterCode,
  changeGetJupyterUrlState,
  saveJupyterTpi,
-  changeCurrentPage
+  changeCurrentPage,
+  changeshowDrawer,
 } from './jupyter';

 export default {
@ -123,6 +124,7 @@ export default {
  syncJupyterCode,
  changeGetJupyterUrlState,
  saveJupyterTpi,
-  changeCurrentPage
+  changeCurrentPage,
+  changeshowDrawer
  // isUpdateCodeCtx
 }
--- a/public/react/src/redux/actions/jupyter.js
+++ b/public/react/src/redux/actions/jupyter.js
@ -154,4 +154,12 @@ export const changeCurrentPage = (current) => {
    type: types.CHANGE_JUPYTER_CURRENT_PAGE,
    payload: current
  }
+}
+
+// 改变当前页数
+export const changeshowDrawer = (type) => {
+  return {
+    type: types.CHANGE_SHOW_DRAWER,
+    payload: type
+  }
 }
--- a/public/react/src/redux/reducers/commonReducer.js
+++ b/public/react/src/redux/reducers/commonReducer.js
@ -14,7 +14,8 @@ const initialState = {
  excuteState: '', // 代码执行状态
  submitLoading: false, // 提交按钮状态
  publishLoading: false, // 发布
-  isMySource: false
+  isMySource: false,
+  drawervisible:false
 }

 const commonReducer = (state = initialState, action) => {
@ -50,6 +51,11 @@ const commonReducer = (state = initialState, action) => {
        ...state,
        isMySource: action.payload
      }
+    case types.CHANGE_SHOW_DRAWER:
+      return {
+        ...state,
+        drawervisible: action.payload
+      }
    default:
      return state;
  }