缓存监控

src/views/monitor/cache/gaugeBox.vue

@@ -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>

src/views/monitor/cache/index.vue

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

src/views/monitor/cache/pieBox.vue

@@ -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>