SystemInfo.vue
3.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<div class="jvm-info" style="background-color: #ffffff">
<div class="alert">
<a-alert type="success" :show-icon="true">
<div slot="message">
数据获取时间 {{this.time}}
<a style="margin-left: 24px" @click="create">点击刷新</a>
</div>
</a-alert>
</div>
<table>
<tr>
<th>参数</th>
<th>描述</th>
<th>当前值</th>
</tr>
<tr>
<td><a-tag color="green">system.cpu.count</a-tag></td>
<td>CPU 数量</td>
<td>{{system.cpu.count}} 核</td>
</tr>
<tr>
<td><a-tag color="green">system.cpu.usage</a-tag></td>
<td>系统 CPU 使用率</td>
<td>{{system.cpu.usage}} %</td>
</tr>
<tr>
<td><a-tag color="purple">process.start.time</a-tag></td>
<td>应用启动时间点</td>
<td>{{system.process.startTime}}</td>
</tr>
<tr>
<td><a-tag color="purple">process.uptime</a-tag></td>
<td>应用已运行时间</td>
<td>{{system.process.uptime}} 秒</td>
</tr>
<tr>
<td><a-tag color="purple">process.cpu.usage</a-tag></td>
<td>当前应用 CPU 使用率</td>
<td>{{system.process.cpuUsage}} %</td>
</tr>
</table>
</div>
</a-skeleton>
</template>
<script>
import axios from 'axios'
import moment from 'moment'
import {getAction} from '@/api/manage'
moment.locale('zh-cn')
export default {
data () {
return {
time: '',
loading: true,
system: {
cpu: {
count: 0,
usage: 0
},
process: {
cpuUsage: 0,
uptime: 0,
startTime: 0
}
}
}
},
mounted () {
this.create()
},
methods: {
create () {
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
axios.all([
getAction('actuator/metrics/system.cpu.count'),
getAction('actuator/metrics/system.cpu.usage'),
getAction('actuator/metrics/process.uptime'),
getAction('actuator/metrics/process.start.time'),
getAction('actuator/metrics/process.cpu.usage')
]).then((r) => {
this.system.cpu.count = r[0].measurements[0].value
this.system.cpu.usage = this.convert(r[1].measurements[0].value)
this.system.process.uptime = r[2].measurements[0].value
this.system.process.startTime = moment(r[3].measurements[0].value * 1000).format('YYYY-MM-DD HH:mm:ss')
this.system.process.cpuUsage = this.convert(r[4].measurements[0].value)
this.loading = false
}).catch((r) => {
console.error(r)
this.$message.error('获取服务器信息失败')
})
},
convert (value) {
return Number(value * 100).toFixed(2)
}
}
}
</script>
<style lang="less">
.jvm-info {
width: 100%;
table {
width: 100%;
tr {
line-height: 1.5rem;
border-bottom: 1px solid #f1f1f1;
th {
background: #fafafa;
padding: .5rem;
}
td {
padding: .5rem;
.ant-tag {
font-size: .8rem !important;
}
}
}
}
.alert {
margin-bottom: .5rem;
}
}
</style>