|
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
|
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
|
|
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
|
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: {customRender: 'param'}
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: {customRender: 'text'}
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: {customRender: 'value'}
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'system.cpu.count': {color: 'green', text: 'CPU 数量', unit: '核'},
'system.cpu.usage': {color: 'green', text: '系统 CPU 使用率', unit: '%'},
'process.start.time': {color: 'purple', text: '应用启动时间点', unit: ''},
'process.uptime': {color: 'purple', text: '应用已运行时间', unit: '秒'},
'process.cpu.usage': {color: 'purple', text: '当前应用 CPU 使用率', unit: '%'}
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
|
|
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/system.cpu.count'),
getAction('actuator/metrics/system.cpu.usage'),
getAction('actuator/metrics/process.start.time'),
getAction('actuator/metrics/process.uptime'),
getAction('actuator/metrics/process.cpu.usage')
]).then((res) => {
let info = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
let val = value.measurements[idx].value
if (param === 'system.cpu.usage' || param === 'process.cpu.usage') {
val = this.convert(val, Number)
}
if (param === 'process.start.time') {
val = this.convert(val, Date)
|