Skip to content

N
netdisc
Commit fbd7f48d authored by rocosen's avatar rocosen
Browse files
Options

fix：bug

parent 4aac67f7
Hide whitespace changes
Inline Side-by-side
Showing with 465 additions and 28 deletions
src/commons/routes/index.jsx
View file @ fbd7f48d
......@@ -4,10 +4,13 @@ import Init from '../../renderer/console/initialization';
import Home from '../../renderer/console/home';
import User from '../../renderer/console/userDetails';
var indexRoutes = [
{ exact: false, path: '/', name: 'Page', component: <Login /> }, //登录页面
{ exact: false, path: '/init', name: 'Page2', component: <Init /> }, //初始化
{ exact: false, path: '/home', name: 'Page0', component: <Home /> }, //主页面
{ exact: false, path: '/details', name: 'Page4', component: <User /> }, //账号详情
];
export default indexRoutes;
src/commons/utils/ajaxOption.js
View file @ fbd7f48d
import API from './api_manager';
import { getCurrentZone } from './publicMethod';
// 获取用户基础信息
export const userInfo = () => {
......@@ -9,3 +10,23 @@ export const userInfo = () => {
actions: true,
};
};
// 退出登录
export const logout = () => {
return {
url: API.API_USER_LOGOUT,
type: 'delete',
param: {},
actions: true,
};
};
//获取余额
export const getAccountBalance = () => {
return {
url: API.API_DASHBOARD_ACCOUNT + `?zone=${getCurrentZone()}`,
type: 'get',
param: {},
actions: true,
};
};
src/commons/utils/api_address.js
View file @ fbd7f48d
//const BACKEND_API_URI_PREFIX = 'https://www.cloudam.cn';
const BACKEND_API_URI_PREFIX = 'https://www.cloudam.cn';
//const BACKEND_API_URI_PREFIX = 'http://47.57.4.97'
const BACKEND_API_URI_PREFIX = 'http://47.75.104.171';
//const BACKEND_API_URI_PREFIX = 'http://47.75.104.171';
export { BACKEND_API_URI_PREFIX };
src/commons/utils/api_manager.js
View file @ fbd7f48d
......@@ -2,5 +2,7 @@ import { BACKEND_API_URI_PREFIX } from './api_address';
const API = {
API_USER_LOGIN: `${BACKEND_API_URI_PREFIX}/uaa/oauth/token`, //登录
API_USER_CURRENT: `${BACKEND_API_URI_PREFIX}/accounts/current`, //获取账号信息
API_USER_LOGOUT: `${BACKEND_API_URI_PREFIX}/uaa/users/token`, //退出登录
API_DASHBOARD_ACCOUNT: `${BACKEND_API_URI_PREFIX}/accounts/dashboard/account`, //获取余额
};
export default API;
src/commons/utils/publicMethod.js
View file @ fbd7f48d
......@@ -6,3 +6,32 @@ export const getUserInfo = () => {
JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))
);
};
export const getCurrentZone = () => {
let localUtc = new Date().getTimezoneOffset() / 60;
let Rounding = parseInt(localUtc);
let Remainder = new Date().getTimezoneOffset() % 60;
let Remainder2 = Math.abs(Remainder);
let Remainder3 = '00';
let timezone = '%2B08:00';
if ([0, '0'].includes(Remainder2)) {
Remainder3 = '00';
} else {
Remainder3 = Remainder2;
}
if (Rounding > 0) {
if (Rounding >= 10) {
timezone = '-1' * Rounding + ':' + Remainder3;
} else {
timezone = '-0' + Rounding + ':' + Remainder3;
}
} else {
let localTime = Math.abs(Rounding);
if (localTime < 10) {
timezone = '%2B0' + localTime + ':' + Remainder3;
} else {
timezone = '%2B' + localTime + ':' + Remainder3;
}
}
return timezone;
};
src/renderer/components/head.jsx
View file @ fbd7f48d
......@@ -14,8 +14,9 @@ import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
import MenuItem from '@mui/material/MenuItem';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import Tooltip from '@mui/material/Tooltip';
import avatar from '../../commons/assets/img/avatar.svg';
import fileIcon from '../../commons/assets/img/fileIcon.svg';
import appIcon from '../../commons/assets/img/appIcon.svg';
import commandIcon from '../../commons/assets/img/commandIcon.svg';
......@@ -35,6 +36,21 @@ const useStyles = makeStyles()((theme) => {
leftBox: {
display: 'flex',
alignItems: 'end',
height: '38px',
cursor: 'pointer',
},
name: {
fontSize: '14px',
fontWeight: '500',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '110px',
},
leftBox2: {
display: 'flex',
alignItems: 'center',
height: '38px',
},
rightBox: {
display: 'flex',
......@@ -44,18 +60,20 @@ const useStyles = makeStyles()((theme) => {
});
const list = [
{ id: '1', value: fileIcon },
{ id: '2', value: appIcon },
{ id: '3', value: commandIcon },
{ id: '4', value: homeIcon },
{ id: '5', value: siteIcon },
{ id: '1', value: fileIcon, lable: '云文件' },
{ id: '2', value: appIcon, lable: '云应用' },
{ id: '3', value: commandIcon, lable: '云终端' },
{ id: '4', value: homeIcon, lable: '控制台' },
{ id: '5', value: siteIcon, lable: '设置' },
];
export default (props) => {
console.log('props: ', props);
const { classes } = useStyles();
const { render, navigate } = public();
console.log(getUserInfo(), 'wwwwwwwww');
const [level, setLevel] = useState(props.level);
const [hover, setHover] = useState(false);
const iconClick = (e) => {
console.log('e: ', e);
......@@ -63,29 +81,72 @@ export default (props) => {
return (
<Grid className={classes.headBody}>
<Grid className={classes.leftBox}>
<img src={avatar} alt="" />
<Grid sx={{ marginLeft: '8px' }}>
<Grid sx={{ fontSize: '14px', color: '#1E2633' }}>
{getUserInfo().name}
{!level ? (
<Grid
className={classes.leftBox}
onClick={() => {
setLevel(true);
navigate('/details');
}}
onMouseEnter={() => {
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
>
<img src={avatar} alt="" />
<Grid sx={{ marginLeft: '8px' }}>
<Grid
className={classes.name}
sx={{ color: hover ? '#1370FF' : '#1E2633' }}
>
{/* {getUserInfo().name} */}
yaojierui100@gamil.com
</Grid>
<Grid sx={{ fontSize: '12px', color: '#B7B9BD' }}>
已用200TB
</Grid>
</Grid>
<Grid sx={{ fontSize: '12px', color: '#B7B9BD' }}>
已用200TB
</Grid>
) : (
<Grid className={classes.leftBox2}>
<KeyboardArrowLeftIcon
onClick={() => {
setLevel(false);
navigate('/home');
}}
style={{ cursor: 'pointer' }}
/>
<Grid
sx={{
fontSize: '14px',
color: '#1E2633',
marginLeft: '5px',
fontWeight: '600',
}}
>
账号详情
</Grid>
</Grid>
</Grid>
)}
<Grid className={classes.rightBox}>
{list.map((e) => {
{list.map((e, key) => {
return (
<img
src={e.value}
alt={e.id}
style={{ marginLeft: '14px', cursor: 'pointer' }}
onClick={() => {
iconClick(e.id);
}}
/>
<Tooltip title={e.lable} arrow key={key}>
<img
src={e.value}
alt={e.id}
style={{
marginLeft: '14px',
cursor: 'pointer',
}}
onClick={() => {
iconClick(e.id);
}}
/>
</Tooltip>
);
})}
</Grid>
......
src/renderer/console/home.jsx
View file @ fbd7f48d
......@@ -20,7 +20,8 @@ export default (props) => {
return (
<Grid className={classes.initBody}>
<Head />
<Head level={false} />
<Grid>11111111111111111</Grid>
</Grid>
);
};
src/renderer/console/login.jsx
View file @ fbd7f48d
......@@ -17,7 +17,6 @@ import logo from '../../commons/assets/img/logo.svg';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { makeStyles } from 'tss-react/mui';
import Button from '@mui/material/Button';
const { ipcRenderer } = require('electron');
const electron = window.require('electron');
......
src/renderer/console/userDetails.jsx 0 → 100644
View file @ fbd7f48d
import React, { useEffect, useState } from 'react';
import Head from '../components/head';
//js
import { getUserInfo } from '../../commons/utils/publicMethod';
import public from 'commons/public';
import Axios from '../../commons/axios/Axios';
import API from '../../commons/utils/api_manager';
import { Constants } from '../../commons/utils/constants';
import { logout, getAccountBalance } from '../../commons/utils/ajaxOption';
//ui
import { Button, Grid } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
import avatar from '../../commons/assets/img/avatar.svg';
const useStyles = makeStyles()((theme) => {
return {
initBody: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
leftBox: {
display: 'flex',
alignItems: 'end',
height: '38px',
cursor: 'pointer',
},
rootButton: {
backgroundColor: '#1370FF',
boxShadow: 'none !important',
color: '#ffffff',
'&:hover': { backgroundColor: '#0055D9', transform: 'inherit' },
},
userBox: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '300px',
marginTop: '10px',
},
signOutTetx: {
fontSize: '14px',
color: '#AAB1BD',
cursor: 'pointer',
},
bar: {
display: 'flex',
alignContent: 'center',
width: '300px',
marginTop: '16px',
marginLeft: '0px',
},
linebody: {
height: '20px',
color: '#FFFFFF',
fontWeight: '600',
fontSize: '11px',
display: 'flex',
paddingLeft: '8px',
alignItems: 'center',
},
zoneList: {
display: 'flex',
flexWrap: 'wrap',
width: '300px',
marginTop: '10px',
},
zoneRound: {
width: '8px',
height: '8px',
minWidth: '8px',
borderRadius: '50%',
},
zoneLable: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#1E2633',
fontSize: '12px',
marginLeft: '4px',
},
accountBox: {
width: '300px',
background: '#F4F5F7',
borderRadius: '8px',
padding: '16px 20px',
marginTop: '16px',
},
otherTitle: {
color: '#B7B9BD',
fontSize: '12px',
},
otherValue: {
color: '#565C66',
marginTop: '2px',
},
line: {
width: '1px',
height: '20px',
border: '1px solid #DDE1E6',
margin: '0px 20px',
},
};
});
const zoneStorageList = [
{ id: 'ce-1', lable: '通用计算区', value: '5', color: '#1370FF' },
{
id: 'ce-2',
lable: '网络增强计算区',
value: '3',
color: '#4AB4F8',
},
{ id: 'ce-3', lable: 'GPU计算区', value: '2', color: '#0DD09B' },
{ id: 'ce-4', lable: 'EDA计算区', value: '2', color: '#FF9742' },
// { id: 'ce-3', lable: 'GPU111计算区', value: '2', color: '#0DD09B' },
// { id: 'ce-4', lable: 'EDA222计算区', value: '2', color: '#FF9742' },
// { id: 'ce-3', lable: 'GPU22计算区', value: '2', color: '#0DD09B' },
// { id: 'ce-4', lable: 'EDA计算区', value: '2', color: '#FF9742' },
// { id: 'ce-3', lable: 'GPU计算区', value: '2', color: '#0DD09B' },
// { id: 'ce-4', lable: 'EDA计算区', value: '2', color: '#FF9742' },
// {
// id: 'ce-5',
// lable: 'roco超级无敌极限计算区',
// value: '1',
// color: '#FFB919',
// },
];
export default (props) => {
const { classes } = useStyles();
const { render, navigate } = public();
const [balanceData, setBalanceValue] = useState({});
const getBalance = async () => {
let data = await Axios.request(getAccountBalance());
if (data && data.code === 200) {
setBalanceValue(data.res.data);
}
};
const sigout = async () => {
let data = await Axios.request(logout());
if (data && data.code === 200) {
navigate('/');
localStorage.removeItem(Constants.TOKEN_KEY);
localStorage.removeItem(Constants.USER_INFO_TOKEN_KEY);
// localStorage.removeItem(Constants.CURRENT_REGION_SELECT_KEY);
// localStorage.removeItem(Constants.RAYSYNC_ADDR_TOKEN_KEY);
}
};
console.log(getUserInfo(), 'tttttttt');
useEffect(() => {
getBalance();
}, []);
return (
<Grid className={classes.initBody}>
<Head level={true} />
<Grid className={classes.userBox}>
<Grid className={classes.leftBox}>
<img src={avatar} alt="" />
<Grid sx={{ marginLeft: '8px' }}>
<Grid sx={{ fontSize: '14px', color: '#1E2633' }}>
{getUserInfo().name}
</Grid>
<Grid sx={{ fontSize: '12px', color: '#B7B9BD' }}>
云空间：已用200TB
</Grid>
</Grid>
</Grid>
<Grid className={classes.signOutTetx} onClick={() => sigout()}>
退出账号
</Grid>
</Grid>
<Grid
className={classes.bar}
container
spacing={zoneStorageList.length}
>
{zoneStorageList.map((e, key) => {
console.log('key: ', key);
return (
<Grid
xs={e.value}
key={key}
className={classes.linebody}
sx={{
background: e.color,
// marginRight: `${-0.1 - key * 0.1}rem`,
// zIndex: `${100 - key}`,
// borderRadius: key ? '0px 4px 4px 0px' : '4px',
}}
>
{e.value}TB
</Grid>
);
})}
</Grid>
<Grid className={classes.zoneList}>
{zoneStorageList.map((e, key) => {
return (
<Grid
sx={{
display: 'flex',
alignItems: 'center',
width: '100px',
}}
key={key}
>
<Grid
className={classes.zoneRound}
sx={{ background: e.color }}
></Grid>
<Grid className={classes.zoneLable}>{e.lable}</Grid>
</Grid>
);
})}
</Grid>
<Grid className={classes.accountBox}>
<Grid sx={{ fontSize: '12px', color: '#8A9099' }}>
账户余额
</Grid>
<Grid
sx={{
display: 'flex',
justifyContent: 'space-between',
marginTop: '10px',
}}
>
<Grid sx={{ display: 'flex', alignItems: 'end' }}>
<Grid
sx={{
fontWeight: '600',
color: '#1E2633',
fontSize: '16px',
marginRight: '10px',
}}
>
¥
</Grid>
<Grid
sx={{
color: '#1E2633',
fontSize: '30px',
fontWeight: '600',
lineHeight: '30px',
}}
>
{balanceData.balance}
</Grid>
</Grid>
<Button
variant="contained"
sx={{ width: '68px', height: '30px' }}
classes={{
root: classes.rootButton,
}}
onClick={() => {}}
>
充值
</Button>
</Grid>
<Grid
sx={{
display: 'flex',
marginTop: '16px',
alignItems: 'center',
}}
>
<Grid
sx={{ display: balanceData.coupon ? 'block' : 'none' }}
>
<Grid className={classes.otherTitle}>体验金</Grid>
<Grid className={classes.otherValue}>
¥{balanceData.coupon}
</Grid>
</Grid>
<Grid
sx={{
display: balanceData.creditLimit ? 'block' : 'none',
}}
className={classes.line}
></Grid>
<Grid
sx={{
display: balanceData.creditLimit ? 'block' : 'none',
}}
>
<Grid className={classes.otherTitle}>信用额度</Grid>
<Grid className={classes.otherValue}>
¥{balanceData.creditLimit}
</Grid>
</Grid>
<Grid
sx={{
display: balanceData.daysLimit ? 'block' : 'none',
}}
className={classes.line}
></Grid>
<Grid
sx={{
display: balanceData.daysLimit ? 'block' : 'none',
}}
>
<Grid className={classes.otherTitle}>可透支天数</Grid>
<Grid className={classes.otherValue}>
{balanceData.daysLimit}天
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment