<template>
|
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
<a-card>
|
<!-- Radis 信息实时监控 -->
|
<a-row :gutter="8">
|
<a-col :sm="24" :xl="12">
|
<area-chart-ty v-bind="memory"/>
|
</a-col>
|
<a-col :sm="24" :xl="12">
|
<area-chart-ty v-bind="key"/>
|
</a-col>
|
</a-row>
|
|
<h3>Redis 详细信息</h3>
|
<a-table
|
:loading="tableLoading"
|
:columns="columns"
|
:dataSource="redisInfo"
|
:pagination="false"/>
|
|
</a-card>
|
</a-skeleton>
|
</template>
|
<script>
|
import moment from 'moment'
|
import { getAction } from '@/api/manage'
|
import AreaChartTy from '@/components/chart/AreaChartTy'
|
|
export default {
|
name: 'RedisInfo',
|
components: {
|
AreaChartTy
|
},
|
data() {
|
return {
|
loading: true,
|
tableLoading: true,
|
// 定时器ID
|
timer: null,
|
// 定时器周期
|
millisec: 3000,
|
// Key 实时数量
|
key: {
|
title: 'Radis Key 实时数量（个）',
|
dataSource: [],
|
y: '数量（个）',
|
height: 340,
|
min: 0,
|
max: 100,
|
color: '#FF6987',
|
lineSize: 8,
|
lineColor: '#DC143C'
|
},
|
// 内存实时占用情况
|
memory: {
|
title: 'Radis 内存实时占用情况（KB）',
|
dataSource: [],
|
y: '内存（KB）',
|
min: 0,
|
max: 3000,
|
height: 340,
|
lineSize: 8
|
},
|
redisInfo: [],
|
columns: [{
|
title: 'Key',
|
align: 'center',
|
dataIndex: 'key'
|
}, {
|
title: 'Description',
|
align: 'left',
|
dataIndex: 'description'
|
}, {
|
title: 'Value',
|
align: 'center',
|
dataIndex: 'value'
|
}],
|
url: {
|
keysSize: '/actuator/redis/keysSize',
|
memoryInfo: '/actuator/redis/memoryInfo',
|
info: '/actuator/redis/info'
|
},
|
path: '/monitor/redis/info'
|
}
|
},
|
mounted() {
|
this.openTimer()
|
this.loadRedisInfo()
|
setTimeout(() => {
|
this.loadData()
|
}, 1000)
|
},
|
beforeDestroy() {
|
this.closeTimer()
|
},
|
methods: {
|
|
/** 开启定时器 */
|
openTimer() {
|
this.loadData()
|
this.closeTimer()
|
this.timer = setInterval(() => {
|
if (this.$route.path === this.path) {
|
this.loadData()
|
}
|
}, this.millisec)
|
},
|
|
/** 关闭定时器 */
|
closeTimer() {
|
if (this.timer) clearInterval(this.timer)
|
},
|
|
/** 查询数据 */
|
loadData() {
|
Promise.all([
|
getAction(this.url.keysSize),
|
getAction(this.url.memoryInfo)
|
]).then((res) => {
|
let time = moment().format('hh:mm:ss')
|
|
let [{ dbSize: currentSize }, memoryInfo] = res
|
let currentMemory = memoryInfo.used_memory / 1000
|
|
// push 数据
|
this.key.dataSource.push({ x: time, y: currentSize })
|
this.memory.dataSource.push({ x: time, y: currentMemory })
|
// 最大长度为6
|
if (this.key.dataSource.length > 6) {
|
this.key.dataSource.splice(0, 1)
|
this.memory.dataSource.splice(0, 1)
|
}
|
|
// 计算 Key 最大最小值
|
let keyPole = this.getMaxAndMin(this.key.dataSource, 'y')
|
this.key.max = Math.floor(keyPole[0]) + 10
|
this.key.min = Math.floor(keyPole[1]) - 10
|
if (this.key.min < 0) this.key.min = 0
|
|
// 计算 Memory 最大最小值
|
let memoryPole = this.getMaxAndMin(this.memory.dataSource, 'y')
|
this.memory.max = Math.floor(memoryPole[0]) + 100
|
this.memory.min = Math.floor(memoryPole[1]) - 100
|
if (this.memory.min < 0) this.memory.min = 0
|
|
}).catch((e) => {
|
console.error(e)
|
this.closeTimer()
|
this.$message.error('获取 Redis 信息失败')
|
}).finally(() => {
|
this.loading = false
|
})
|
|
},
|
|
// 获取一组数据中最大和最小的值
|
getMaxAndMin(dataSource, field) {
|
let maxValue = null, minValue = null
|
dataSource.forEach(item => {
|
let value = Number.parseInt(item[field])
|
// max
|
if (maxValue == null) {
|
maxValue = value
|
} else if (value > maxValue) {
|
maxValue = value
|
}
|
// min
|
if (minValue == null) {
|
minValue = value
|
} else if (value < minValue) {
|
minValue = value
|
}
|
})
|
return [maxValue, minValue]
|
},
|
|
loadRedisInfo() {
|
this.tableLoading = true
|
getAction(this.url.info).then((res) => {
|
this.redisInfo = res.result
|
}).finally(() => {
|
this.tableLoading = false
|
})
|
}
|
|
}
|
}
|
</script>
|
<style></style>
|
