93 lines
3.8 KiB
Plaintext
93 lines
3.8 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 tabledata = ref([{}])
|
|
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> |