From 06d3d15a5a08637041cc601101c063b11b07a346 Mon Sep 17 00:00:00 2001
From: net <net@netdeMBP.lan>
Date: 星期五, 14 二月 2025 17:25:21 +0800
Subject: [PATCH] 合并理去杀杀人
---
zhitan-vue/src/views/monitor/cache/index.vue | 137 +++++++++++++++++++++++++++++++--------------
1 files changed, 93 insertions(+), 44 deletions(-)
diff --git a/zhitan-vue/src/views/monitor/cache/index.vue b/zhitan-vue/src/views/monitor/cache/index.vue
index aa46bf2..02a99b7 100644
--- a/zhitan-vue/src/views/monitor/cache/index.vue
+++ b/zhitan-vue/src/views/monitor/cache/index.vue
@@ -3,39 +3,72 @@
<el-row>
<el-col :span="24" class="card-box">
<el-card>
- <template #header><Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">鍩烘湰淇℃伅</span></template>
+ <template #header
+ ><Monitor style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">鍩烘湰淇℃伅</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">Redis鐗堟湰</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">杩愯妯″紡</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "鍗曟満" : "闆嗙兢" }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">
+ {{ cache.info.redis_mode == "standalone" ? "鍗曟満" : "闆嗙兢" }}
+ </div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">绔彛</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">瀹㈡埛绔暟</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">杩愯鏃堕棿(澶�)</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">浣跨敤鍐呭瓨</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">浣跨敤CPU</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">
+ {{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}
+ </div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">鍐呭瓨閰嶇疆</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">AOF鏄惁寮�鍚�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "鍚�" : "鏄�" }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "鍚�" : "鏄�" }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">RDB鏄惁鎴愬姛</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">Key鏁伴噺</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">缃戠粶鍏ュ彛/鍑哄彛</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="cache.info">
+ {{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
+ </div>
+ </td>
</tr>
</tbody>
</table>
@@ -45,7 +78,10 @@
<el-col :span="12" class="card-box">
<el-card>
- <template #header><PieChart style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">鍛戒护缁熻</span></template>
+ <template #header
+ ><PieChart style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">鍛戒护缁熻</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="commandstats" style="height: 420px" />
</div>
@@ -54,7 +90,10 @@
<el-col :span="12" class="card-box">
<el-card>
- <template #header><Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">鍐呭瓨淇℃伅</span></template>
+ <template #header
+ ><Odometer style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">鍐呭瓨淇℃伅</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="usedmemory" style="height: 420px" />
</div>
@@ -65,25 +104,25 @@
</template>
<script setup name="Cache">
-import { getCache } from '@/api/monitor/cache';
-import * as echarts from 'echarts';
+import { getCache } from "@/api/monitor/cache"
+import * as echarts from "echarts"
-const cache = ref([]);
-const commandstats = ref(null);
-const usedmemory = ref(null);
-const { proxy } = getCurrentInstance();
+const cache = ref([])
+const commandstats = ref(null)
+const usedmemory = ref(null)
+const { proxy } = getCurrentInstance()
function getList() {
- proxy.$modal.loading("姝ｅ湪鍔犺浇缂撳瓨鐩戞帶鏁版嵁锛岃绋嶅�欙紒");
- getCache().then(response => {
- proxy.$modal.closeLoading();
- cache.value = response.data;
+ proxy.$modal.loading("姝ｅ湪鍔犺浇缂撳瓨鐩戞帶鏁版嵁锛岃绋嶅�欙紒")
+ getCache().then((response) => {
+ proxy.$modal.closeLoading()
+ cache.value = response.data
- const commandstatsIntance = echarts.init(commandstats.value, "macarons");
+ const commandstatsIntance = echarts.init(commandstats.value, "macarons")
commandstatsIntance.setOption({
tooltip: {
trigger: "item",
- formatter: "{a} <br/>{b} : {c} ({d}%)"
+ formatter: "{a} <br/>{b} : {c} ({d}%)",
},
series: [
{
@@ -94,14 +133,14 @@
center: ["50%", "38%"],
data: response.data.commandStats,
animationEasing: "cubicInOut",
- animationDuration: 1000
- }
- ]
- });
- const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
+ animationDuration: 1000,
+ },
+ ],
+ })
+ const usedmemoryInstance = echarts.init(usedmemory.value, "macarons")
usedmemoryInstance.setOption({
tooltip: {
- formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
+ formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human,
},
series: [
{
@@ -110,23 +149,33 @@
min: 0,
max: 1000,
detail: {
- formatter: cache.value.info.used_memory_human
+ formatter: cache.value.info.used_memory_human,
},
data: [
{
value: parseFloat(cache.value.info.used_memory_human),
- name: "鍐呭瓨娑堣��"
- }
- ]
- }
- ]
+ name: "鍐呭瓨娑堣��",
+ },
+ ],
+ },
+ ],
})
- window.addEventListener("resize", () => {
- commandstatsIntance.resize();
- usedmemoryInstance.resize();
- },{passive: true});
+ window.addEventListener(
+ "resize",
+ () => {
+ commandstatsIntance.resize()
+ usedmemoryInstance.resize()
+ },
+ { passive: true }
+ )
})
}
-getList();
+getList()
</script>
+
+<style lang="scss" scoped>
+.el-table {
+ color: #333;
+}
+</style>
--
Gitblit v1.9.3