From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/views/monitor/cache/index.vue | 301 ++++++++++++++++++++++++++++++--------------------
1 files changed, 180 insertions(+), 121 deletions(-)
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
index b3fadf7..65082b0 100644
--- a/src/views/monitor/cache/index.vue
+++ b/src/views/monitor/cache/index.vue
@@ -1,129 +1,188 @@
-<template>
- <div class="app-container">
- <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>
- <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">杩愯妯″紡</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">瀹㈡埛绔暟</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">浣跨敤鍐呭瓨</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">鍐呭瓨閰嶇疆</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">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">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">缃戠粶鍏ュ彛/鍑哄彛</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>
- </div>
- </el-card>
- </el-col>
-
- <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>
- <div class="el-table el-table--enable-row-hover el-table--medium">
- <div ref="commandstats" style="height: 420px" />
- </div>
- </el-card>
- </el-col>
-
- <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>
- <div class="el-table el-table--enable-row-hover el-table--medium">
- <div ref="usedmemory" style="height: 420px" />
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
-</template>
-
-<script setup name="Cache">
+<script setup name="Cache" lang="ts">
import { getCache } from '@/api/monitor/cache';
import * as echarts from 'echarts';
+import { ComponentInternalInstance } from "vue";
-const cache = ref([]);
-const commandstats = ref(null);
-const usedmemory = ref(null);
-const { proxy } = getCurrentInstance();
+const cache = ref<any>({});
+const commandstats = ref();
+const usedmemory = ref();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-function getList() {
- proxy.$modal.loading("姝ｅ湪鍔犺浇缂撳瓨鐩戞帶鏁版嵁锛岃绋嶅�欙紒");
- getCache().then(response => {
- proxy.$modal.closeLoading();
- cache.value = response.data;
+const getList = async () => {
+ proxy?.$modal.loading("姝ｅ湪鍔犺浇缂撳瓨鐩戞帶鏁版嵁锛岃绋嶅�欙紒");
+ const res = await getCache();
+ proxy?.$modal.closeLoading();
+ cache.value = res.data;
+ const commandstatsIntance = echarts.init(commandstats.value, "macarons");
+ commandstatsIntance.setOption({
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
+ },
+ series: [
+ {
+ name: "鍛戒护",
+ type: "pie",
+ roseType: "radius",
+ radius: [15, 95],
+ center: ["50%", "38%"],
+ data: res.data.commandStats,
+ animationEasing: "cubicInOut",
+ animationDuration: 1000
+ }
+ ]
+ });
- const commandstatsIntance = echarts.init(commandstats.value, "macarons");
- commandstatsIntance.setOption({
- tooltip: {
- trigger: "item",
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- series: [
- {
- name: "鍛戒护",
- type: "pie",
- roseType: "radius",
- radius: [15, 95],
- center: ["50%", "38%"],
- data: response.data.commandStats,
- animationEasing: "cubicInOut",
- animationDuration: 1000
- }
- ]
- });
-
- const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
- usedmemoryInstance.setOption({
- tooltip: {
- formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
- },
- series: [
- {
- name: "宄板��",
- type: "gauge",
- min: 0,
- max: 1000,
- detail: {
- formatter: cache.value.info.used_memory_human
- },
- data: [
- {
- value: parseFloat(cache.value.info.used_memory_human),
- name: "鍐呭瓨娑堣��"
- }
- ]
- }
- ]
- })
- })
+ const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
+ usedmemoryInstance.setOption({
+ tooltip: {
+ formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
+ },
+ series: [
+ {
+ name: "宄板��",
+ type: "gauge",
+ min: 0,
+ max: 1000,
+ detail: {
+ formatter: cache.value.info.used_memory_human
+ },
+ data: [
+ {
+ value: parseFloat(cache.value.info.used_memory_human),
+ name: "鍐呭瓨娑堣��"
+ }
+ ]
+ }
+ ]
+ })
}
-getList();
+onMounted(() => {
+ getList();
+})
</script>
+<template>
+ <div class="p-2">
+ <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>
+
+ <div class="el-table el-table--enable-row-hover el-table--medium">
+ <table 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">杩愯妯″紡</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">瀹㈡埛绔暟</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">浣跨敤鍐呭瓨</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">鍐呭瓨閰嶇疆</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">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">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">缃戠粶鍏ュ彛/鍑哄彛</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>
+ </div>
+ </el-card>
+ </el-col>
+
+ <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>
+ <div class="el-table el-table--enable-row-hover el-table--medium">
+ <div ref="commandstats" style="height: 420px" />
+ </div>
+ </el-card>
+ </el-col>
+
+ <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>
+ <div class="el-table el-table--enable-row-hover el-table--medium">
+ <div ref="usedmemory" style="height: 420px" />
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+</template>
--
Gitblit v1.9.3