diff --git a/src/component/Quota.js b/src/component/Quota.js
new file mode 100644
index 0000000..694b9bf
--- /dev/null
+++ b/src/component/Quota.js
@@ -0,0 +1,246 @@
+import React, { Component } from 'react'
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux'
+import classNames from 'classnames';
+import { toggleSnackbar, } from "../actions/index"
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import axios from 'axios'
+
+
+const styles = theme => ({
+ layout: {
+ width: 'auto',
+ marginTop: '50px',
+ marginLeft: theme.spacing.unit * 3,
+ marginRight: theme.spacing.unit * 3,
+ [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
+ width: 1100,
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ },
+ },
+
+ gird: {
+ marginTop: "30px",
+ },
+ paper: {
+ padding: theme.spacing.unit * 2,
+ color: theme.palette.text.secondary,
+ },
+ data: {
+ fontSize: "25px",
+ color: theme.palette.primary.main,
+ },
+ proBar:{
+ height: "10px",
+ },
+ r1:{
+ backgroundColor:"#f0ad4e",
+ transition:"width .6s ease",
+ height: "100%",
+ fontSize: "12px",
+ lineHeight: "20px",
+ float: "left",
+ },
+ r2:{
+ backgroundColor:"#4caf50",
+ transition:"width .6s ease",
+ height: "100%",
+ fontSize: "12px",
+ lineHeight: "20px",
+ float: "left",
+ },
+ r3:{
+ backgroundColor:"#5bc0de",
+ transition:"width .6s ease",
+ height: "100%",
+ fontSize: "12px",
+ lineHeight: "20px",
+ float: "left",
+ },
+ note_block:{
+ width: "10px",
+ height: "10px",
+ display: "inline-block",
+ position: "relative",
+ marginLeft: "10px",
+ marginRight: "3px",
+ },
+ r1_block:{
+ backgroundColor:"#f0ad4e",
+ },
+ r2_block:{
+ backgroundColor:"#4caf50",
+ },
+ r3_block:{
+ backgroundColor:"#5bc0de",
+ },
+ title:{
+ marginTop: "30px",
+ marginBottom: "30px",
+ },
+ button: {
+ margin: theme.spacing.unit,
+ },
+ table:{
+ overflowX:"auto",
+ },
+})
+const mapStateToProps = state => {
+ return {
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ toggleSnackbar: (vertical, horizontal, msg, color) => {
+ dispatch(toggleSnackbar(vertical, horizontal, msg, color))
+ },
+ }
+}
+
+class QuotaCompoment extends Component {
+
+ state = {
+ data: {
+ basic: "--",
+ used: "--",
+ total: "--",
+ pack: "--",
+ r1:0,
+ r2:0,
+ r3:0,
+ },
+ };
+
+ firstLoad = true;
+
+ componentDidMount(){
+ if(this.firstLoad){
+ this.firstLoad = !this.firstLoad;
+ axios.get("/Member/Memory")
+ .then( (response)=> {
+ this.setState({
+ data:{
+ used:response.data.used,
+ pack:response.data.pack,
+ total:response.data.total,
+ basic:response.data.basic,
+ r1:response.data.r1,
+ r2:response.data.r2,
+ r3:response.data.r3,
+ }
+ });
+
+ })
+ .catch((error) =>{
+ this.setState({
+ loading:false,
+ });
+ this.props.toggleSnackbar("top","right",error.message ,"error");
+ });
+ }
+ }
+
+ render() {
+ const { classes } = this.props;
+
+
+ return (
+
+
容量配额
+
+
+
+ {this.state.data.basic}
+ 用户组基础容量
+
+
+
+
+ {this.state.data.pack}
+ 有效容量包附加附加容量
+
+
+
+
+ {this.state.data.used}
+ 已使用容量
+
+
+
+
+ {this.state.data.total}
+ 总容量
+
+
+
+
+
+
+ 已用容量
+ 用户组基础容量
+ 有效容量包附加附加容量
+
+
+
+
+
可用容量包
+
+
+
+
+
+
+
+ 容量包名称
+ 大小
+ 激活日期
+ 有效期
+ 过期日期
+
+
+
+ {window.list.map(row => (
+
+
+ {row.p_name}
+
+ {row.pack_size}
+ {row.act_time}
+ {row.active_time}天
+ {row.dlay_time}
+
+ ))}
+
+
+
+
+ );
+ }
+
+}
+
+const Quota = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(withStyles(styles)(QuotaCompoment))
+
+export default Quota
diff --git a/src/component/StorageBar.js b/src/component/StorageBar.js
index 7f3de25..1ef5629 100644
--- a/src/component/StorageBar.js
+++ b/src/component/StorageBar.js
@@ -57,7 +57,7 @@ const styles = theme => ({
bottom: "0px",
position: "absolute",
backgroundColor:theme.palette.background.paper,
- }
+ },
})
class StorageBarCompoment extends Component {
@@ -72,8 +72,8 @@ class StorageBarCompoment extends Component {
componentDidMount = ()=>{
if(this.firstLoad){
- this.updateStatus();
this.firstLoad = !this.firstLoad;
+ this.updateStatus();
}
}
diff --git a/src/pages/quota.app.js b/src/pages/quota.app.js
new file mode 100644
index 0000000..325ebbd
--- /dev/null
+++ b/src/pages/quota.app.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { withStyles } from '@material-ui/core/styles';
+import Navbar from "../component/Navbar.js"
+import AlertBar from "../component/Snackbar"
+import Quota from "../component/Quota"
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme(window.colorTheme);
+const styles = theme => ({
+
+ root: {
+ display: 'flex',
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing.unit * 0,
+ minWidth: 0,
+ },
+ toolbar: theme.mixins.toolbar,
+});
+
+class QuatoApp extends Component {
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+ );
+ }
+}
+
+QuatoApp.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(QuatoApp);
diff --git a/src/pages/quota.js b/src/pages/quota.js
new file mode 100644
index 0000000..d3e5d71
--- /dev/null
+++ b/src/pages/quota.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import QuotaApp from "./quota.app"
+import cloureveApp from '../reducers'
+
+const defaultStatus = {
+ navigator:{
+ path:window.path,
+ refresh:true,
+ },
+ viewUpdate:{
+ open:window.isHomePage,
+ explorerViewMethod: "icon",
+ sortMethod:"timePos",
+ contextType:"none",
+ menuOpen:false,
+ navigatorLoading:true,
+ navigatorError:false,
+ navigatorErrorMsg:null,
+ modalsLoading:false,
+ storageRefresh:false,
+ modals:{
+ createNewFolder:false,
+ rename:false,
+ move:false,
+ remove:false,
+ share:false,
+ music:false,
+ remoteDownload:false,
+ torrentDownload:false,
+ },
+ snackbar:{
+ toggle:false,
+ vertical:"top",
+ horizontal:"center",
+ msg:"",
+ color:"",
+ }
+ },
+ explorer:{
+ fileList:[],
+ dirList:[
+ ],
+ selected:[],
+ selectProps:{
+ isMultiple:false,
+ withFolder:false,
+ withFile:false,
+ },
+ imgPreview:{
+ first:null,
+ other:[],
+ },
+ keywords:null,
+ }
+};
+
+let store = createStore(cloureveApp,defaultStatus)
+ReactDOM.render(
+
+
+
+, document.getElementById('root'));