138 lines
4.2 KiB
Java
138 lines
4.2 KiB
Java
<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>
|
||
import moment from 'moment'
|
||
import { getAction } from '@/api/manage'
|
||
|
||
moment.locale('zh-cn')
|
||
|
||
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() {
|
||
this.loadTomcatInfo()
|
||
},
|
||
|
||
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)
|
||
}
|
||
info.push({ id: param + id, param, text: 'false value', value: val })
|
||
})
|
||
})
|
||
this.dataSource = info
|
||
}).catch((e) => {
|
||
console.error(e)
|
||
this.$message.error('获取服务器信息失败')
|
||
}).finally(() => {
|
||
this.loading = false
|
||
this.tableLoading = false
|
||
})
|
||
},
|
||
|
||
convert(value, type) {
|
||
if (type === Number) {
|
||
return Number(value * 100).toFixed(2)
|
||
} else if (type === Date) {
|
||
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
return value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style></style>
|