gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

缓存监控

Browse Source
This commit is contained in:
陈红丽 2024-08-06 08:36:42 +08:00
parent cef8b4a5a1
commit 48b122a348
3 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/monitor/cache/gaugeBox.vue vendored Normal file
View File

@ -0,0 +1,50 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
data: {
type: String,
default: ''
}
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
name: 'Pressure',
type: 'gauge',
radius: '100%',
detail: {
formatter: '{value}'+'M',
},
data: [
{
value: props.data,
name: '内存消耗',
},
],
}
]
};
onMounted(() => {
setOptions(option as any);
});
</script>

88
src/views/monitor/cache/index.vue vendored Normal file
View File

@ -0,0 +1,88 @@
<template>
<PageWrapper>
<el-card :bordered="false" header="基本信息" style="margin-bottom:20px;">
<el-table :data="tabledata" :show-header="false">
<el-table-column width="150" align="center">Redis版本</el-table-column>
<el-table-column>{{ baseInfo.redis_version }}</el-table-column>
<el-table-column width="150" align="center">运行模式</el-table-column>
<el-table-column align="center">{{ baseInfo.redis_mode == 'standalone' ? '单机' : '集群' }}</el-table-column>
<el-table-column width="150" align="center">端口</el-table-column>
<el-table-column>{{ baseInfo.tcp_port }}</el-table-column>
<el-table-column width="150" align="center">客户端数</el-table-column>
<el-table-column align="center">{{ baseInfo.connected_clients }}</el-table-column>
</el-table>
<el-table :data="tabledata" :show-header="false">
<el-table-column width="150" align="center">运行时间(天)</el-table-column>
<el-table-column>{{ baseInfo.uptime_in_days }}</el-table-column>
<el-table-column width="150" align="center">使用内存</el-table-column>
<el-table-column align="center">{{ baseInfo.used_memory_human }}</el-table-column>
<el-table-column width="150" align="center">使用CUP</el-table-column>
<el-table-column>{{ baseInfo.used_cpu_user_children }}</el-table-column>
<el-table-column width="150" align="center">内存配置</el-table-column>
<el-table-column align="center">{{ baseInfo.maxmemory_human }}</el-table-column>
</el-table>
<el-table :data="tabledata" :show-header="false">
<el-table-column width="150" align="center">AOF是否开启</el-table-column>
<el-table-column>{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}</el-table-column>
<el-table-column width="150" align="center">RDB是否成功</el-table-column>
<el-table-column align="center">{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}</el-table-column>
<el-table-column width="150" align="center">key数量</el-table-column>
<el-table-column>{{ baseInfo.dbSize }}</el-table-column>
<el-table-column width="150" align="center">网络入口/出口</el-table-column>
<el-table-column align="center">
{{ baseInfo.instantaneous_input_kbps }}
/
{{ baseInfo.instantaneous_output_kbps }}</el-table-column>
</el-table>
</el-card>
<div class="cache-box">
<el-card :bordered="false" header="命令统计">
<pie-box :pieData="commandStats" v-if="commandStats.length > 0" />
</el-card>
<el-card :bordered="false" header="内存信息">
<gauge-box :data="gaugeValue" v-if="gaugeValue"/>
</el-card>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted} from 'vue';
import { getCacheInfo } from '@/api/monitor/cache';
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="scss" scoped>
.cache-box {
display: flex;
>.el-card {
flex: 1;
&:nth-child(2) {
margin: 0 15px;
}
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

43
src/views/monitor/cache/pieBox.vue vendored Normal file
View File

@ -0,0 +1,43 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
pieData:{
type:Array,
default:[]
}
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
data: props.pieData,
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
},
]
};
onMounted(() => {
setOptions(option as any);
});
</script>