Merge branch 'master' of http://118.178.224.202:3000/ewide/ewide_core
This commit is contained in:
@@ -139,6 +139,8 @@
|
||||
}
|
||||
}
|
||||
&--row-no {
|
||||
width: 30px !important;
|
||||
|
||||
background-color: @table-header-bg;
|
||||
}
|
||||
}
|
||||
|
||||
33
web-react/src/pages/system/machine/base.jsx
Normal file
33
web-react/src/pages/system/machine/base.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Col, Descriptions } from 'antd'
|
||||
|
||||
export default class base extends Component {
|
||||
render() {
|
||||
const { base } = this.props
|
||||
|
||||
const { hostName, systemOs, wanIp, lanIp, osArchitecture, frameworkDescription } = base
|
||||
|
||||
return (
|
||||
<>
|
||||
<Col span={24}>
|
||||
<Card bordered={false}>
|
||||
<Descriptions
|
||||
column={2}
|
||||
labelStyle={{ fontSize: '14px', color: 'rgba(0,0,0,.45)' }}
|
||||
contentStyle={{ fontSize: '14px' }}
|
||||
>
|
||||
<Descriptions.Item label="主机名称">{hostName}</Descriptions.Item>
|
||||
<Descriptions.Item label="操作系统">{systemOs}</Descriptions.Item>
|
||||
<Descriptions.Item label="外网信息">{wanIp}</Descriptions.Item>
|
||||
<Descriptions.Item label="内网IP">{lanIp}</Descriptions.Item>
|
||||
<Descriptions.Item label="系统架构">{osArchitecture}</Descriptions.Item>
|
||||
<Descriptions.Item label="运行框架">
|
||||
{frameworkDescription}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</Col>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
107
web-react/src/pages/system/machine/disk-charts.jsx
Normal file
107
web-react/src/pages/system/machine/disk-charts.jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Col, Row } from 'antd'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default class diskCharts extends Component {
|
||||
diskInfo = []
|
||||
|
||||
diskChart1 = []
|
||||
diskChart2 = []
|
||||
diskChart3 = []
|
||||
diskChart4 = []
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
const { base } = props
|
||||
|
||||
this.diskInfo = base.diskInfo
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.diskInfo.forEach(({ size, freeSpace }, i) => {
|
||||
const dom = this.refs[`disk-chart-${i}`]
|
||||
this[`diskChart${i}`] = echarts.init(dom)
|
||||
|
||||
const usedSpace = size - freeSpace
|
||||
const sizeGB = (size / 1024 / 1024 / 1024).toFixed(1)
|
||||
const usedGB = (usedSpace / 1024 / 1024 / 1024).toFixed(1)
|
||||
const freeGB = (freeSpace / 1024 / 1024 / 1024).toFixed(1)
|
||||
|
||||
const option = {
|
||||
tooltip: false,
|
||||
series: [
|
||||
{
|
||||
name: '磁盘使用量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '100%'],
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
position: 'center',
|
||||
formatter: `共 ${sizeGB} GB`,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
formatter: '{b}{c}GB({d}%)',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: usedGB,
|
||||
name: '已用',
|
||||
itemStyle: {
|
||||
color: usedGB / sizeGB >= 0.85 ? '#ff4d4f' : '#007bff',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: freeGB,
|
||||
name: '可用',
|
||||
itemStyle: { color: '#e0e0e0' },
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
animation: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
this[`diskChart${i}`].setOption(option)
|
||||
})
|
||||
|
||||
window.addEventListener('resize', this.onResizeCharts)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.onResizeCharts)
|
||||
}
|
||||
|
||||
onResizeCharts = () => {
|
||||
this.diskInfo.forEach((item, i) => {
|
||||
this[`diskChart${i}`].resize()
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { diskInfo } = this
|
||||
|
||||
return (
|
||||
<>
|
||||
{diskInfo.map((item, i) => (
|
||||
<Col key={i} xl={6} lg={12}>
|
||||
<Card bordered={false}>
|
||||
<div className="h4 mb-md">
|
||||
{item.description}({item.name})
|
||||
</div>
|
||||
<div className="h-200" ref={`disk-chart-${i}`}></div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
44
web-react/src/pages/system/machine/index.jsx
Normal file
44
web-react/src/pages/system/machine/index.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Col, Descriptions, Row, Statistic } from 'antd'
|
||||
import { api } from 'common/api'
|
||||
import { Container } from 'components'
|
||||
import { isEqual } from 'lodash'
|
||||
import moment from 'moment'
|
||||
|
||||
import Base from './base'
|
||||
import UseCharts from './use-charts'
|
||||
import DiskCharts from './disk-charts'
|
||||
|
||||
export default class index extends Component {
|
||||
state = {
|
||||
loading: true,
|
||||
base: {},
|
||||
network: {},
|
||||
}
|
||||
|
||||
shouldComponentUpdate(props, state) {
|
||||
return !isEqual(this.state, state) || this.props.paneActived !== props.paneActived
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { data: base } = await api.sysMachineBase()
|
||||
this.setState({ loading: false, base })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { paneActived } = this.props
|
||||
|
||||
const { loading } = this.state
|
||||
|
||||
return (
|
||||
<Container mode="fluid">
|
||||
<br />
|
||||
<Row gutter={16}>
|
||||
{!loading && <Base {...this.state} />}
|
||||
{!loading && <UseCharts {...this.state} actived={paneActived} />}
|
||||
{!loading && <DiskCharts {...this.state} />}
|
||||
</Row>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
297
web-react/src/pages/system/machine/use-charts.jsx
Normal file
297
web-react/src/pages/system/machine/use-charts.jsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Col, Descriptions, Row, Statistic } from 'antd'
|
||||
import * as echarts from 'echarts'
|
||||
import moment from 'moment'
|
||||
import { api } from 'common/api'
|
||||
|
||||
export default class useCharts extends Component {
|
||||
state = {
|
||||
use: {},
|
||||
|
||||
nowMoment: moment(),
|
||||
}
|
||||
|
||||
timer = null
|
||||
timerMoment = null
|
||||
|
||||
systemStart = moment()
|
||||
|
||||
now = Date.now()
|
||||
|
||||
cpuChart = null
|
||||
cpuData = []
|
||||
|
||||
ramChart = null
|
||||
ramData = []
|
||||
|
||||
shouldComponentUpdate(props) {
|
||||
// 当前页签未选中时停止获取状态
|
||||
if (this.props.actived !== props.actived) {
|
||||
if (props.actived) {
|
||||
this.start()
|
||||
} else {
|
||||
this.stop()
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.systemStart = moment().add(-this.props.base.runTime)
|
||||
this.initCpuChart()
|
||||
this.initRamChart()
|
||||
|
||||
this.start()
|
||||
|
||||
window.addEventListener('resize', this.onResizeCharts)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.stop()
|
||||
|
||||
window.removeEventListener('resize', this.onResizeCharts)
|
||||
}
|
||||
|
||||
start() {
|
||||
this.timer = setInterval(() => {
|
||||
this.refreshData()
|
||||
}, 3000)
|
||||
this.refreshData()
|
||||
this.timerMoment = setInterval(() => {
|
||||
this.setState({ nowMoment: moment() })
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
stop() {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.timerMoment)
|
||||
}
|
||||
|
||||
async refreshData() {
|
||||
const { data: use } = await api.sysMachineUse()
|
||||
|
||||
this.now = Date.now()
|
||||
|
||||
this.cpuData.shift()
|
||||
this.cpuData.push({
|
||||
name: this.now,
|
||||
value: [this.now, use.cpuRate],
|
||||
})
|
||||
this.cpuChart.setOption({
|
||||
series: [{ data: this.cpuData }],
|
||||
})
|
||||
|
||||
this.ramData.shift()
|
||||
this.ramData.push({
|
||||
name: this.now,
|
||||
value: [this.now, use.ramRate],
|
||||
})
|
||||
this.ramChart.setOption({
|
||||
series: [{ data: this.ramData }],
|
||||
})
|
||||
|
||||
this.setState({ use })
|
||||
}
|
||||
|
||||
initCpuChart() {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const past = this.now - (60 - i) * 1000
|
||||
this.cpuData.push({
|
||||
name: past,
|
||||
value: [past, -1],
|
||||
})
|
||||
}
|
||||
|
||||
const dom = this.refs['cpu-chart']
|
||||
this.cpuChart = echarts.init(dom)
|
||||
const option = {
|
||||
grid: {
|
||||
show: true,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderColor: 'rgba(0, 123, 255, 1)',
|
||||
borderWidth: 2,
|
||||
zlevel: 2,
|
||||
},
|
||||
tooltip: false,
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
hoverAnimation: false,
|
||||
animation: false,
|
||||
data: this.cpuData,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(0, 123, 255, .8)',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(0, 123, 255, .3)',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.cpuChart.setOption(option)
|
||||
}
|
||||
|
||||
initRamChart() {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const past = this.now - (60 - i) * 1000
|
||||
this.ramData.push({
|
||||
name: past,
|
||||
value: [past, -1],
|
||||
})
|
||||
}
|
||||
|
||||
const dom = this.refs['ram-chart']
|
||||
this.ramChart = echarts.init(dom)
|
||||
const option = {
|
||||
grid: {
|
||||
show: true,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderColor: 'rgba(83, 29, 171, 1)',
|
||||
borderWidth: 2,
|
||||
zlevel: 2,
|
||||
},
|
||||
tooltip: false,
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
hoverAnimation: false,
|
||||
animation: false,
|
||||
data: this.ramData,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(83, 29, 171, .8)',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(83, 29, 171, .3)',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.ramChart.setOption(option)
|
||||
}
|
||||
|
||||
onResizeCharts = () => {
|
||||
this.cpuChart.resize()
|
||||
this.ramChart.resize()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { base } = this.props
|
||||
const { use, nowMoment } = this.state
|
||||
const { cpuName, cpuBaseSpeed, processorCount, totalRam } = base
|
||||
const { cpuRate, ramRate } = use
|
||||
|
||||
const diffDays = nowMoment.diff(this.systemStart, 'days')
|
||||
const diff =
|
||||
diffDays + ':' + moment(nowMoment.diff(this.systemStart)).utc().format('HH:mm:ss')
|
||||
|
||||
return (
|
||||
<>
|
||||
<Col xl={12} lg={24}>
|
||||
<Card bordered={false}>
|
||||
<Row align="bottom" justify="space-between">
|
||||
<div className="h2">CPU</div>
|
||||
<div className="h5">{cpuName}</div>
|
||||
</Row>
|
||||
<div className="h-200 mt-md mb-md" ref="cpu-chart"></div>
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Statistic title="使用率" value={(cpuRate || 0) + ' %'} />
|
||||
<Statistic title="正常运行时间" value={diff} />
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Descriptions column={1}>
|
||||
<Descriptions.Item label="基准速度">
|
||||
<b>{((cpuBaseSpeed || 0) / 1000).toFixed(2)} GHz</b>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="逻辑处理器">
|
||||
<b>{processorCount || 0}</b>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={12} lg={24}>
|
||||
<Card bordered={false}>
|
||||
<Row align="bottom" justify="space-between">
|
||||
<div className="h2">内存</div>
|
||||
<div className="h5">{((totalRam || 0) / 1024).toFixed(1)} GB</div>
|
||||
</Row>
|
||||
<div className="h-200 mt-md mb-md" ref="ram-chart"></div>
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Statistic
|
||||
title="使用中"
|
||||
value={
|
||||
(((totalRam || 0) / 1024) * ((ramRate || 1) / 100)).toFixed(
|
||||
1
|
||||
) + ' GB'
|
||||
}
|
||||
/>
|
||||
<Statistic
|
||||
title="可用"
|
||||
value={
|
||||
(
|
||||
((totalRam || 0) / 1024) *
|
||||
(1 - (ramRate || 1) / 100)
|
||||
).toFixed(1) + ' GB'
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -113,13 +113,15 @@ export default class index extends Component {
|
||||
render() {
|
||||
this.panes = []
|
||||
|
||||
const { actived } = this.state
|
||||
|
||||
return (
|
||||
<Layout.Content>
|
||||
<div className="yo-tab-external-mount">
|
||||
<Tabs
|
||||
type="editable-card"
|
||||
hideAdd
|
||||
activeKey={this.state.actived}
|
||||
activeKey={actived}
|
||||
onChange={activeKey => this.onChange(activeKey)}
|
||||
onEdit={(targetKey, action) => this.onClose(targetKey, action)}
|
||||
>
|
||||
@@ -183,7 +185,7 @@ export default class index extends Component {
|
||||
<div
|
||||
key={pane.key}
|
||||
className={
|
||||
(pane.key === this.state.actived
|
||||
(pane.key === actived
|
||||
? 'yo-tab-external-tabpane-active'
|
||||
: 'yo-tab-external-tabpane-inactive') +
|
||||
' yo-tab-external-tabpane'
|
||||
@@ -194,6 +196,7 @@ export default class index extends Component {
|
||||
id={pane.key}
|
||||
key={pane.key}
|
||||
param={pane.param}
|
||||
paneActived={pane.key === actived}
|
||||
onRef={p => this.panes.push(p)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user