diff --git a/web/config/router.config.js b/web/config/router.config.js index ebeb066e..9cc69ad9 100644 --- a/web/config/router.config.js +++ b/web/config/router.config.js @@ -18,7 +18,7 @@ export default [ authority: ['admin', 'user'], routes: [ // cluster - { path: '/', redirect: '/cluster/overview/' }, + { path: '/', redirect: '/cluster/overview' }, { path: '/cluster', name: 'cluster', @@ -34,10 +34,10 @@ export default [ // ], // }, { - path: '/cluster/overview/:cluster_id', + path: '/cluster/overview', name: 'overview', component: './Cluster/Overview', - hideInMenu: true, + // hideInMenu: true, routes:[ { path: '/', redirect: '/' }, ], diff --git a/web/src/models/global.js b/web/src/models/global.js index 2ada05f1..a7fcea33 100644 --- a/web/src/models/global.js +++ b/web/src/models/global.js @@ -250,6 +250,8 @@ export default { let clusterVisible = true; if(pathname.startsWith("/system")){ clusterVisible = false; + }else if(pathname.startsWith("/cluster/overview")){ + clusterVisible = false; }else{ if(!pathname.startsWith("/exception")){ dispatch({ diff --git a/web/src/pages/Cluster/Overview.js b/web/src/pages/Cluster/Overview.js index befd99da..4be8b364 100644 --- a/web/src/pages/Cluster/Overview.js +++ b/web/src/pages/Cluster/Overview.js @@ -1,102 +1,135 @@ -import React, {Fragment} from 'react'; -import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions, Button} from "antd"; -import {Link} from "umi" -import moment from "moment"; +import React from 'react'; +import {List,Card,Row,Icon,Col} from "antd"; import styles from "./Overview.less"; import {connect} from "dva"; -import {ClusterItem} from "./ClusterList"; -import CalendarHeatmap from 'react-calendar-heatmap'; -import 'react-calendar-heatmap/dist/styles.css'; -import { Avatar } from 'antd'; -import { Tabs } from 'antd'; -const { TabPane } = Tabs; -import ClusterLoadMore from "../../components/List/LoadMoreList" -const data = [ +import {formatGigNumber} from "@/utils/utils"; + + +const tabList = [ { - title: 'Ant Design Title 1', + key: 'tabCluster', + tab: '集群', }, { - title: 'Ant Design Title 2', + key: 'tabHost', + tab: '主机', }, { - title: 'Ant Design Title 3', - }, - { - title: 'Ant Design Title 4', + key: 'tabNode', + tab: '节点', }, ]; + @connect(({global}) => ({ - selectedCluster: global.selectedCluster + })) class Overview extends React.Component { + state = { + tabkey: 'tabCluster', + }; - render() { - return ( -
- - - - (value.count > 0 ? 'blue' : 'white') - // } - // onClick={value => alert(`Clicked on value with count: ${value.count}`)} - /> - + onOperationTabChange = key => { + this.setState({ tabkey: key }); + }; - - ( - - } - title={{item.title}} - description="Ant Design, a design language for background applications, is refined by Ant UED Team" - /> - - )} - /> - - - - - - - + render() { - - - Content of Tab Pane 2 - - - - - + const { tabkey } = this.state; + const contentList = { + tabCluster: ( + +
+ + 暂无数据 +
+ + ), + tabHost: ( + +
+ + 暂无数据 +
+ + ), + tabNode: ( + +
+ + 暂无数据 +
+ + ), + }; + return ( +
+ + + + +
+ 1 +
+ + + + + +
+ 1 +
+ + + + + +
+ 1 +
+ + + + + +
+ 100GB +
+ + + -
- ) - } + + + + {contentList[tabkey]} + + + +
+ ) + } } export default Overview; diff --git a/web/src/pages/Cluster/Overview.less b/web/src/pages/Cluster/Overview.less index 093d1072..d08c4e12 100644 --- a/web/src/pages/Cluster/Overview.less +++ b/web/src/pages/Cluster/Overview.less @@ -1,27 +1,25 @@ -.overview{ - :global(.ant-descriptions-row){ - border-bottom: none; - } - :global(.ant-descriptions-item-label){ - border-right: none; - background-color: #fff; - font-weight: bold; - } - :global(.ant-descriptions-view){ - border: none; - } - :global(.ant-descriptions-item-content){ - color: #333; - } - .light{ - color: #666; - } -} -.clusterItemCard { - text-align: center; +.tabsCard { + :global { + .ant-card-head { + padding: 0 16px; + } + } } - -.card { - margin-bottom: 24px; +.rowSpace { + margin-bottom: 20px; } +.clusterMeta { + .title { + padding-bottom: 10px; + border-bottom: 1px solid #eef1f4; + } + .total { + font-size: 40px; + } + .unit { + color: #767676; + font-size: 12px; + font-weight: normal; + } +} \ No newline at end of file diff --git a/web/src/pages/Cluster/OverviewV1.js b/web/src/pages/Cluster/OverviewV1.js new file mode 100644 index 00000000..befd99da --- /dev/null +++ b/web/src/pages/Cluster/OverviewV1.js @@ -0,0 +1,102 @@ +import React, {Fragment} from 'react'; +import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions, Button} from "antd"; +import {Link} from "umi" +import moment from "moment"; +import styles from "./Overview.less"; +import {connect} from "dva"; +import {ClusterItem} from "./ClusterList"; +import CalendarHeatmap from 'react-calendar-heatmap'; +import 'react-calendar-heatmap/dist/styles.css'; +import { Avatar } from 'antd'; +import { Tabs } from 'antd'; +const { TabPane } = Tabs; +import ClusterLoadMore from "../../components/List/LoadMoreList" +const data = [ + { + title: 'Ant Design Title 1', + }, + { + title: 'Ant Design Title 2', + }, + { + title: 'Ant Design Title 3', + }, + { + title: 'Ant Design Title 4', + }, +]; + +@connect(({global}) => ({ + selectedCluster: global.selectedCluster +})) + + +class Overview extends React.Component { + + render() { + return ( +
+ + + + (value.count > 0 ? 'blue' : 'white') + // } + // onClick={value => alert(`Clicked on value with count: ${value.count}`)} + /> + + + + ( + + } + title={{item.title}} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + )} + /> + + + + + + + + + + + Content of Tab Pane 2 + + + + + + + + +
+ ) + } +} + +export default Overview; diff --git a/web/src/pages/Cluster/OverviewV1.less b/web/src/pages/Cluster/OverviewV1.less new file mode 100644 index 00000000..093d1072 --- /dev/null +++ b/web/src/pages/Cluster/OverviewV1.less @@ -0,0 +1,27 @@ +.overview{ + :global(.ant-descriptions-row){ + border-bottom: none; + } + :global(.ant-descriptions-item-label){ + border-right: none; + background-color: #fff; + font-weight: bold; + } + :global(.ant-descriptions-view){ + border: none; + } + :global(.ant-descriptions-item-content){ + color: #333; + } + .light{ + color: #666; + } +} + +.clusterItemCard { + text-align: center; +} + +.card { + margin-bottom: 24px; +} diff --git a/web/src/utils/utils.js b/web/src/utils/utils.js index f65ac6fe..f94b6c5e 100644 --- a/web/src/utils/utils.js +++ b/web/src/utils/utils.js @@ -180,4 +180,51 @@ export function formatWan(val) { export function isAntdPro() { return window.location.hostname === 'preview.pro.ant.design'; +} + +/** + * 大数字转换，将大额数字转换为万、千万、亿等 + * @param value 数字值 + */ +export function formatGigNumber (value) { + const newValue = ['', '', ''] + let fr = 1000 + let num = 3 + let text1 = '' + let fm = 1 + while (value / fr >= 1) { + fr *= 10 + num += 1 + // console.log('数字', value / fr, 'num:', num) + } + if (num <= 4) { // 千 + newValue[0] = value + '' + newValue[1] = '' + } else if (num <= 8) { // 万 + fm = 10000 + newValue[0] = parseFloat(value / fm).toFixed(2) + '' + newValue[1] = '万' + } else if (num <= 16) { // 亿 + text1 = (num - 8) / 3 > 1 ? '千亿' : '亿' + text1 = (num - 8) / 4 > 1 ? '万亿' : text1 + text1 = (num - 8) / 7 > 1 ? '千万亿' : text1 + // tslint:disable-next-line:no-shadowed-variable + fm = 1 + if (text1 === '亿') { + fm = 100000000 + } else if (text1 === '千亿') { + fm = 100000000000 + } else if (text1 === '万亿') { + fm = 1000000000000 + } else if (text1 === '千万亿') { + fm = 1000000000000000 + } + if (value % fm === 0) { + newValue[0] = parseInt(value / fm) + '' + } else { + newValue[0] = parseFloat(value / fm).toFixed(2) + '' + } + newValue[1] = text1 + } + return newValue } \ No newline at end of file