From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/infra/redis/index.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 269 insertions(+), 0 deletions(-)
diff --git a/src/views/infra/redis/index.vue b/src/views/infra/redis/index.vue
new file mode 100644
index 0000000..a897b7c
--- /dev/null
+++ b/src/views/infra/redis/index.vue
@@ -0,0 +1,269 @@
+<template>
+ <doc-alert title="Redis 缂撳瓨" url="https://doc.iocoder.cn/redis-cache/" />
+ <doc-alert title="鏈湴缂撳瓨" url="https://doc.iocoder.cn/local-cache/" />
+
+ <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
+ <el-row>
+ <!-- 鍩烘湰淇℃伅 -->
+ <el-col :span="24" class="card-box" shadow="hover">
+ <el-card>
+ <el-descriptions title="鍩烘湰淇℃伅" :column="6" border>
+ <el-descriptions-item label="Redis鐗堟湰 :">
+ {{ cache?.info?.redis_version }}
+ </el-descriptions-item>
+ <el-descriptions-item label="杩愯妯″紡 :">
+ {{ cache?.info?.redis_mode == 'standalone' ? '鍗曟満' : '闆嗙兢' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="绔彛 :">
+ {{ cache?.info?.tcp_port }}
+ </el-descriptions-item>
+ <el-descriptions-item label="瀹㈡埛绔暟 :">
+ {{ cache?.info?.connected_clients }}
+ </el-descriptions-item>
+ <el-descriptions-item label="杩愯鏃堕棿(澶�) :">
+ {{ cache?.info?.uptime_in_days }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浣跨敤鍐呭瓨 :">
+ {{ cache?.info?.used_memory_human }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浣跨敤CPU :">
+ {{ cache?.info ? parseFloat(cache?.info?.used_cpu_user_children).toFixed(2) : '' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鍐呭瓨閰嶇疆 :">
+ {{ cache?.info?.maxmemory_human }}
+ </el-descriptions-item>
+ <el-descriptions-item label="AOF鏄惁寮�鍚� :">
+ {{ cache?.info?.aof_enabled == '0' ? '鍚�' : '鏄�' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="RDB鏄惁鎴愬姛 :">
+ {{ cache?.info?.rdb_last_bgsave_status }}
+ </el-descriptions-item>
+ <el-descriptions-item label="Key鏁伴噺 :">
+ {{ cache?.dbSize }}
+ </el-descriptions-item>
+ <el-descriptions-item label="缃戠粶鍏ュ彛/鍑哄彛 :">
+ {{ cache?.info?.instantaneous_input_kbps }}kps/
+ {{ cache?.info?.instantaneous_output_kbps }}kps
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+ </el-col>
+ <!-- 鍛戒护缁熻 -->
+ <el-col :span="12" class="mt-3">
+ <el-card :gutter="12" shadow="hover">
+ <Echart :options="commandStatsRefChika" :height="420" />
+ </el-card>
+ </el-col>
+ <!-- 鍐呭瓨浣跨敤閲忕粺璁� -->
+ <el-col :span="12" class="mt-3">
+ <el-card class="ml-3" :gutter="12" shadow="hover">
+ <Echart :options="usedmemoryEchartChika" :height="420" />
+ </el-card>
+ </el-col>
+ </el-row>
+ </el-scrollbar>
+</template>
+<script lang="ts" setup>
+import * as RedisApi from '@/api/infra/redis'
+import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
+const cache = ref<RedisMonitorInfoVO>()
+
+// 鍩烘湰淇℃伅
+const readRedisInfo = async () => {
+ const data = await RedisApi.getCache()
+ cache.value = data
+}
+
+// 鍐呭瓨浣跨敤鎯呭喌
+const usedmemoryEchartChika = reactive<any>({
+ title: {
+ // 浠〃鐩樻爣棰樸��
+ text: '鍐呭瓨浣跨敤鎯呭喌',
+ left: 'center',
+ show: true, // 鏄惁鏄剧ず鏍囬,榛樿 true銆�
+ offsetCenter: [0, '20%'], //鐩稿浜庝华琛ㄧ洏涓績鐨勫亸绉讳綅缃紝鏁扮粍绗竴椤规槸姘村钩鏂瑰悜鐨勫亸绉伙紝绗簩椤规槸鍨傜洿鏂瑰悜鐨勫亸绉汇�傚彲浠ユ槸缁濆鐨勬暟鍊硷紝涔熷彲浠ユ槸鐩稿浜庝华琛ㄧ洏鍗婂緞鐨勭櫨鍒嗘瘮銆�
+ color: 'yellow', // 鏂囧瓧鐨勯鑹�,榛樿 #333銆�
+ fontSize: 20 // 鏂囧瓧鐨勫瓧浣撳ぇ灏�,榛樿 15銆�
+ },
+ toolbox: {
+ show: false,
+ feature: {
+ restore: { show: true },
+ saveAsImage: { show: true }
+ }
+ },
+ series: [
+ {
+ name: '宄板��',
+ type: 'gauge',
+ min: 0,
+ max: 50,
+ splitNumber: 10,
+ //杩欐槸鎸囬拡鐨勯鑹�
+ color: '#F5C74E',
+ radius: '85%',
+ center: ['50%', '50%'],
+ startAngle: 225,
+ endAngle: -45,
+ axisLine: {
+ // 鍧愭爣杞寸嚎
+ lineStyle: {
+ // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [
+ [0.2, '#7FFF00'],
+ [0.8, '#00FFFF'],
+ [1, '#FF0000']
+ ],
+ //width: 6 澶栨鐨勫ぇ灏忥紙鐜殑瀹藉害锛�
+ width: 10
+ }
+ },
+ axisTick: {
+ // 鍧愭爣杞村皬鏍囪
+ //閲岄潰鐨勭嚎闀挎槸5锛堢煭绾匡級
+ length: 5, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: {
+ // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: '#76D9D7'
+ }
+ },
+ splitLine: {
+ // 鍒嗛殧绾�
+ length: 20, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: {
+ // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: '#76D9D7'
+ }
+ },
+ axisLabel: {
+ color: '#76D9D7',
+ distance: 15,
+ fontSize: 15
+ },
+ pointer: {
+ // 鎸囬拡鐨勫ぇ灏�
+ width: 7,
+ show: true
+ },
+ detail: {
+ textStyle: {
+ fontWeight: 'normal',
+ // 閲岄潰鏂囧瓧涓嬬殑鏁板�煎ぇ灏忥紙50锛�
+ fontSize: 15,
+ color: '#FFFFFF'
+ },
+ valueAnimation: true
+ },
+ progress: {
+ show: true
+ }
+ }
+ ]
+})
+
+// 鎸囦护浣跨敤鎯呭喌
+const commandStatsRefChika = reactive({
+ title: {
+ text: '鍛戒护缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ type: 'scroll',
+ orient: 'vertical',
+ right: 30,
+ top: 10,
+ bottom: 20,
+ data: [] as any[],
+ textStyle: {
+ color: '#a1a1a1'
+ }
+ },
+ series: [
+ {
+ name: '鍛戒护',
+ type: 'pie',
+ radius: [20, 120],
+ center: ['40%', '60%'],
+ data: [] as any[],
+ roseType: 'radius',
+ label: {
+ show: true
+ },
+ emphasis: {
+ label: {
+ show: true
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+})
+
+/** 鍔犺浇鏁版嵁 */
+const getSummary = () => {
+ // 鍒濆鍖栧懡浠ゅ浘琛�
+ initCommandStatsChart()
+ usedMemoryInstance()
+}
+
+/** 鍛戒护浣跨敤鎯呭喌 */
+const initCommandStatsChart = async () => {
+ usedmemoryEchartChika.series[0].data = []
+ // 鍙戣捣璇锋眰
+ try {
+ const data = await RedisApi.getCache()
+ cache.value = data
+ // 澶勭悊鏁版嵁
+ const commandStats = [] as any[]
+ const nameList = [] as string[]
+ data.commandStats.forEach((row) => {
+ commandStats.push({
+ name: row.command,
+ value: row.calls
+ })
+ nameList.push(row.command)
+ })
+ commandStatsRefChika.legend.data = nameList
+ commandStatsRefChika.series[0].data = commandStats
+ } catch {}
+}
+const usedMemoryInstance = async () => {
+ try {
+ const data = await RedisApi.getCache()
+ cache.value = data
+ // 浠〃鐩樿鎯咃紝鐢ㄤ簬鏄剧ず鏁版嵁銆�
+ usedmemoryEchartChika.series[0].detail = {
+ show: true, // 鏄惁鏄剧ず璇︽儏,榛樿 true銆�
+ offsetCenter: [0, '50%'], // 鐩稿浜庝华琛ㄧ洏涓績鐨勫亸绉讳綅缃紝鏁扮粍绗竴椤规槸姘村钩鏂瑰悜鐨勫亸绉伙紝绗簩椤规槸鍨傜洿鏂瑰悜鐨勫亸绉汇�傚彲浠ユ槸缁濆鐨勬暟鍊硷紝涔熷彲浠ユ槸鐩稿浜庝华琛ㄧ洏鍗婂緞鐨勭櫨鍒嗘瘮銆�
+ color: 'auto', // 鏂囧瓧鐨勯鑹�,榛樿 auto銆�
+ fontSize: 30, // 鏂囧瓧鐨勫瓧浣撳ぇ灏�,榛樿 15銆�
+ formatter: cache.value!.info.used_memory_human // 鏍煎紡鍖栧嚱鏁版垨鑰呭瓧绗︿覆
+ }
+
+ usedmemoryEchartChika.series[0].data[0] = {
+ value: cache.value!.info.used_memory_human,
+ name: '鍐呭瓨娑堣��'
+ }
+ console.log(cache.value!.info)
+ usedmemoryEchartChika.tooltip = {
+ formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
+ }
+ } catch {}
+}
+
+/** 鍒濆鍖� **/
+onMounted(() => {
+ // 璇诲彇 redis 淇℃伅
+ readRedisInfo()
+ // 鍔犺浇鏁版嵁
+ getSummary()
+})
+</script>
--
Gitblit v1.8.0