物业代码生成

apps/web-antd/src/views/monitor/cache/components/command-chart.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onActivated, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+interface Props {
+  data?: { name: string; value: string }[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => [],
+});
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+watch(
+  () => props.data,
+  () => {
+    if (!chartRef.value) return;
+    setEchartsOption(props.data);
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  setEchartsOption(props.data);
+});
+/**
+ * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+ * 该饼图组件需要关闭animation
+ */
+onActivated(() => resize(false));
+
+type EChartsOption = Parameters<typeof renderEcharts>['0'];
+function setEchartsOption(data: any[]) {
+  const option: EChartsOption = {
+    series: [
+      {
+        animationDuration: 1000,
+        animationEasing: 'cubicInOut',
+        center: ['50%', '50%'],
+        data,
+        name: '命令',
+        radius: [15, 95],
+        roseType: 'radius',
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+      trigger: 'item',
+    },
+  };
+  renderEcharts(option);
+}
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="400px" width="100%" />
+</template>

apps/web-antd/src/views/monitor/cache/components/index.ts

@@ -0,0 +1,3 @@
+export { default as CommandChart } from './command-chart.vue';
+export { default as MemoryChart } from './memory-chart.vue';
+export { default as RedisDescription } from './redis-description.vue';

apps/web-antd/src/views/monitor/cache/components/memory-chart.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onActivated, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+interface Props {
+  data?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: '0',
+});
+
+const memoryHtmlRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
+
+watch(
+  () => props.data,
+  () => {
+    if (!memoryHtmlRef.value) return;
+    setEchartsOption(props.data);
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  setEchartsOption(props.data);
+});
+// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+onActivated(resize);
+
+/**
+ * 获取最近的十的幂次
+ * 该函数用于寻找大于给定数字num的最近的10的幂次
+ * 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
+ *
+ * @param num {number} 输入的数字，用于寻找最近的十的幂次
+ */
+function getNearestPowerOfTen(num: number) {
+  let power = 10;
+  while (power <= num) {
+    power *= 10;
+  }
+  return power;
+}
+
+type EChartsOption = Parameters<typeof renderEcharts>['0'];
+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: '峰值',
+        progress: {
+          show: true,
+        },
+        type: 'gauge',
+      },
+    ],
+    tooltip: {
+      formatter: `{b} <br/>{a} : ${value}M`,
+    },
+  };
+  renderEcharts(options);
+}
+</script>
+
+<template>
+  <EchartsUI ref="memoryHtmlRef" height="400px" width="100%" />
+</template>

apps/web-antd/src/views/monitor/cache/components/redis-description.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { RedisInfo } from '#/api/monitor/cache';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+
+interface IRedisInfo extends RedisInfo {
+  dbSize: string;
+}
+
+defineProps<{ data: IRedisInfo }>();
+</script>
+
+<template>
+  <Descriptions
+    bordered
+    :column="{ lg: 4, md: 3, sm: 1, xl: 4, xs: 1 }"
+    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">
+      {{ Number.parseFloat(data?.used_cpu_user_children ?? '0').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>