chore: 脚手架
This commit is contained in:
dap
83
apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
vendored
Normal file
83
apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CommandChart',
|
||||
props: {
|
||||
data: {
|
||||
default: () => [],
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
setup(props, { expose }) {
|
||||
expose({});
|
||||
|
||||
const commandHtmlRef = ref<HTMLDivElement>();
|
||||
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!commandHtmlRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
echartsInstance.value = echarts.init(
|
||||
commandHtmlRef.value,
|
||||
preferences.theme.mode,
|
||||
);
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
(mode) => {
|
||||
echartsInstance.value?.dispose();
|
||||
echartsInstance.value = echarts.init(commandHtmlRef.value, mode);
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
);
|
||||
|
||||
function setEchartsOption(data: any[]) {
|
||||
const option: EChartsOption = {
|
||||
series: [
|
||||
{
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicInOut',
|
||||
center: ['50%', '38%'],
|
||||
data,
|
||||
name: '命令',
|
||||
radius: [15, 95],
|
||||
roseType: 'radius',
|
||||
type: 'pie',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
trigger: 'item',
|
||||
},
|
||||
};
|
||||
echartsInstance.value?.setOption(option);
|
||||
}
|
||||
|
||||
return {
|
||||
commandHtmlRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="commandHtmlRef" class="h-[400px] w-full"></div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
102
apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
vendored
Normal file
102
apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
vendored
Normal file
@@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MemoryChart',
|
||||
props: {
|
||||
data: {
|
||||
default: '0',
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props, { expose }) {
|
||||
expose({});
|
||||
|
||||
const memoryHtmlRef = ref<HTMLDivElement>();
|
||||
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!memoryHtmlRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
echartsInstance.value = echarts.init(
|
||||
memoryHtmlRef.value,
|
||||
preferences.theme.mode,
|
||||
);
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
(mode) => {
|
||||
echartsInstance.value?.dispose();
|
||||
echartsInstance.value = echarts.init(memoryHtmlRef.value, mode);
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
);
|
||||
|
||||
function getNearestPowerOfTen(num: number) {
|
||||
let power = 10;
|
||||
while (power <= num) {
|
||||
power *= 10;
|
||||
}
|
||||
return power;
|
||||
}
|
||||
|
||||
function setEchartsOption(value: string) {
|
||||
// x10
|
||||
const formattedValue = Math.floor(Number.parseFloat(value));
|
||||
// 最大值 10以内取10 100以内取100 以此类推
|
||||
const max = getNearestPowerOfTen(formattedValue);
|
||||
const options: EChartsOption = {
|
||||
series: [
|
||||
{
|
||||
animation: true,
|
||||
animationDuration: 1000,
|
||||
data: [
|
||||
{
|
||||
name: '内存消耗',
|
||||
value: Number.parseFloat(value),
|
||||
},
|
||||
],
|
||||
detail: {
|
||||
formatter: `${value}M`,
|
||||
valueAnimation: true,
|
||||
},
|
||||
max,
|
||||
min: 0,
|
||||
name: '峰值',
|
||||
type: 'gauge',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: `{b} <br/>{a} : ${value}M`,
|
||||
},
|
||||
};
|
||||
echartsInstance.value?.setOption(options);
|
||||
}
|
||||
|
||||
return {
|
||||
memoryHtmlRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="memoryHtmlRef" class="h-[400px] w-full"></div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
65
apps/web-antd/src/views/monitor/cache/components/RedisDescription.vue
vendored
Normal file
65
apps/web-antd/src/views/monitor/cache/components/RedisDescription.vue
vendored
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import type { RedisInfo } from '#/api/monitor/cache';
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||
|
||||
interface IRedisInfo extends RedisInfo {
|
||||
dbSize: string;
|
||||
}
|
||||
|
||||
defineProps({
|
||||
data: {
|
||||
required: true,
|
||||
type: Object as PropType<IRedisInfo>,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Descriptions
|
||||
:column="{ xs: 1, sm: 1, md: 3, lg: 4, xl: 4 }"
|
||||
bordered
|
||||
size="small"
|
||||
>
|
||||
<DescriptionsItem label="redis版本">
|
||||
{{ data.redis_version }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="redis模式">
|
||||
{{ data.redis_mode === 'standalone' ? '单机模式' : '集群模式' }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="tcp端口">
|
||||
{{ data.tcp_port }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="客户端数">
|
||||
{{ data.connected_clients }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="运行时间">
|
||||
{{ `${data.uptime_in_days}天` }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="使用内存">
|
||||
{{ data.used_memory_human }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="使用CPU">
|
||||
{{ parseFloat(data.used_cpu_user_children!).toFixed(2) }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="内存配置">
|
||||
{{ data.maxmemory_human }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="AOF是否开启">
|
||||
{{ data.aof_enabled === '0' ? '否' : '是' }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="RDB是否成功">
|
||||
{{ data.rdb_last_bgsave_status }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="Key数量">
|
||||
{{ data.dbSize }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="网络入口/出口">
|
||||
{{
|
||||
`${data.instantaneous_input_kbps}kps/${data.instantaneous_output_kbps}kps`
|
||||
}}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</template>
|
||||
94
apps/web-antd/src/views/monitor/cache/index.vue
vendored
Normal file
94
apps/web-antd/src/views/monitor/cache/index.vue
vendored
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
|
||||
import { Button, Card, Col, Row } from 'ant-design-vue';
|
||||
|
||||
import { redisCacheInfo, type RedisInfo } from '#/api/monitor/cache';
|
||||
|
||||
import CommandChart from './components/CommandChart.vue';
|
||||
import MemoryChart from './components/MemoryChart.vue';
|
||||
import RedisDescription from './components/RedisDescription.vue';
|
||||
|
||||
const baseSpan = { lg: 12, md: 24, sm: 24, xl: 12, xs: 24 };
|
||||
|
||||
const chartData = reactive<{ command: any[]; memory: string }>({
|
||||
command: [],
|
||||
memory: '0',
|
||||
});
|
||||
|
||||
interface IRedisInfo extends RedisInfo {
|
||||
dbSize: string;
|
||||
}
|
||||
const redisInfo = ref<IRedisInfo>();
|
||||
|
||||
onMounted(async () => {
|
||||
await loadInfo();
|
||||
});
|
||||
|
||||
async function loadInfo() {
|
||||
try {
|
||||
const ret = await redisCacheInfo();
|
||||
|
||||
// 单位MB 保留两位小数
|
||||
const usedMemory = (
|
||||
Number.parseInt(ret.info.used_memory!) /
|
||||
1024 /
|
||||
1024
|
||||
).toFixed(2);
|
||||
chartData.memory = usedMemory;
|
||||
// 命令统计
|
||||
chartData.command = ret.commandStats;
|
||||
// redis信息
|
||||
redisInfo.value = { ...ret.info, dbSize: String(ret.dbSize) };
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-[16px]">
|
||||
<Row :gutter="[15, 15]">
|
||||
<Col :span="24">
|
||||
<Card size="small">
|
||||
<template #title>
|
||||
<div class="flex items-center justify-start gap-[6px]">
|
||||
<span class="icon-[logos--redis]"></span>
|
||||
<span>redis信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<Button size="small" @click="loadInfo">
|
||||
<div class="flex">
|
||||
<span class="icon-[charm--refresh]"></span>
|
||||
</div>
|
||||
</Button>
|
||||
</template>
|
||||
<RedisDescription v-if="redisInfo" :data="redisInfo" />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col v-bind="baseSpan">
|
||||
<Card size="small">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-[6px]">
|
||||
<span class="icon-[flat-color-icons--command-line]"></span>
|
||||
<span>命令统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<CommandChart :data="chartData.command" />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col v-bind="baseSpan">
|
||||
<Card size="small">
|
||||
<template #title>
|
||||
<div class="flex items-center justify-start gap-[6px]">
|
||||
<span class="icon-[la--memory]"></span>
|
||||
<span>内存占用</span>
|
||||
</div>
|
||||
</template>
|
||||
<MemoryChart :data="chartData.memory" />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user