116 lines
3.7 KiB
Plaintext
116 lines
3.7 KiB
Plaintext
<template>
|
|
<PageWrapper>
|
|
<a-card :bordered="false" style="margin-bottom: 20px">
|
|
<template #title>
|
|
<div class="flex items-center">
|
|
<DesktopOutlined style="margin-right: 6px" />
|
|
基本信息
|
|
</div>
|
|
</template>
|
|
<a-descriptions :column="4" bordered :labelStyle="{ width: '150px' }">
|
|
<a-descriptions-item label="Redis版本">{{ baseInfo.redis_version }}</a-descriptions-item>
|
|
<a-descriptions-item label="运行模式">{{
|
|
baseInfo.redis_mode == 'standalone' ? '单机' : '集群'
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="端口">{{ baseInfo.tcp_port }}</a-descriptions-item>
|
|
<a-descriptions-item label="客户端数">{{ baseInfo.connected_clients }}</a-descriptions-item>
|
|
<a-descriptions-item label="运行时间(天)">{{
|
|
baseInfo.uptime_in_days
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="使用内存">{{ baseInfo.used_memory_human }}</a-descriptions-item>
|
|
<a-descriptions-item label="使用CUP">{{
|
|
baseInfo.used_cpu_user_children
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="内存配置">{{ baseInfo.maxmemory_human }}</a-descriptions-item>
|
|
<a-descriptions-item label="AOF是否开启">{{
|
|
baseInfo.aof_enabled == 0 ? '开启' : '关闭'
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="RDB是否成功">{{
|
|
baseInfo.aof_enabled == 'ok' ? '成功' : '失败'
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="key数量">{{ baseInfo.dbSize }}</a-descriptions-item>
|
|
<a-descriptions-item label="网络入口/出口"
|
|
>{{ baseInfo.instantaneous_input_kbps }}
|
|
/
|
|
{{ baseInfo.instantaneous_output_kbps }}</a-descriptions-item
|
|
>
|
|
</a-descriptions>
|
|
</a-card>
|
|
<div class="cache-box">
|
|
<a-card :bordered="false">
|
|
<template #title>
|
|
<div class="flex items-center">
|
|
<PieChartOutlined style="margin-right: 6px" />
|
|
命令统计
|
|
</div>
|
|
</template>
|
|
<pie-box :pieData="commandStats" v-if="commandStats.length > 0" />
|
|
</a-card>
|
|
<a-card :bordered="false">
|
|
<template #title>
|
|
<div class="flex items-center">
|
|
<a-icon class="a-input__icon" size="16px" style="margin-right: 6px">
|
|
<Odometer />
|
|
</a-icon>
|
|
<DashboardOutlined style="margin-right: 6px" />
|
|
内存信息
|
|
</div>
|
|
</template>
|
|
<gauge-box :data="gaugeValue" v-if="gaugeValue" />
|
|
</a-card>
|
|
</div>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { getCacheInfo } from '@/api/monitor/cache';
|
|
import { PieChartOutlined, DesktopOutlined, DashboardOutlined } from '@ant-design/icons-vue';
|
|
import pieBox from './pieBox.vue';
|
|
import gaugeBox from './gaugeBox.vue';
|
|
|
|
/**
|
|
* 定义参数变量
|
|
*/
|
|
const baseInfo = ref<any>({});
|
|
const commandStats = ref([]);
|
|
const gaugeValue = ref('');
|
|
|
|
/**
|
|
* 获取缓存信息
|
|
*/
|
|
const loadCacheInfo = async () => {
|
|
const result = await getCacheInfo();
|
|
commandStats.value = result.commandStats;
|
|
baseInfo.value = result.info;
|
|
baseInfo.value.dbSize = result.dbSize;
|
|
gaugeValue.value = (result.info.used_memory / 1024 / 1024).toFixed(2);
|
|
};
|
|
|
|
/**
|
|
* 钩子函数
|
|
*/
|
|
onMounted(() => {
|
|
loadCacheInfo();
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.cache-box {
|
|
display: flex;
|
|
|
|
> .ant-card {
|
|
flex: 1;
|
|
|
|
&:nth-child(2) {
|
|
margin: 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|