From d160c3a61cc38359de4794b208884bba430f0a1c Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期一, 10 七月 2023 22:56:42 +0800
Subject: [PATCH] merge
---
src/views/monitor/cache/index.vue | 137 +++++++++++++++++++++++----------------------
1 files changed, 70 insertions(+), 67 deletions(-)
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
index 9af7d50..8719c94 100644
--- a/src/views/monitor/cache/index.vue
+++ b/src/views/monitor/cache/index.vue
@@ -1,72 +1,8 @@
-<script setup name="Cache" lang="ts">
-import { getCache } from '@/api/monitor/cache';
-import * as echarts from 'echarts';
-import { ComponentInternalInstance } from "vue";
-
-const cache = ref<any>({});
-const commandstats = ref();
-const usedmemory = ref();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-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 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: "鍐呭瓨娑堣��"
- }
- ]
- }
- ]
- })
-}
-
-onMounted(() => {
- getList();
-})
-</script>
<template>
<div class="p-2">
<el-row>
<el-col :span="24" class="card-box">
- <el-card>
+ <el-card shadow="hover">
<template #header>
<Monitor style="width: 1em; height: 1em; vertical-align: middle;" />
<span style="vertical-align: middle;">鍩烘湰淇℃伅</span>
@@ -162,7 +98,7 @@
</el-col>
<el-col :span="12" class="card-box">
- <el-card>
+ <el-card shadow="hover">
<template #header>
<PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
<span style="vertical-align: middle;">鍛戒护缁熻</span>
@@ -174,7 +110,7 @@
</el-col>
<el-col :span="12" class="card-box">
- <el-card>
+ <el-card shadow="hover">
<template #header>
<Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">鍐呭瓨淇℃伅</span>
</template>
@@ -186,3 +122,70 @@
</el-row>
</div>
</template>
+
+<script setup name="Cache" lang="ts">
+import { getCache } from '@/api/monitor/cache';
+import * as echarts from 'echarts';
+
+const cache = ref<any>({});
+const commandstats = ref();
+const usedmemory = ref();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+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 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: "鍐呭瓨娑堣��"
+ }
+ ]
+ }
+ ]
+ })
+ window.addEventListener("resize",()=>{
+ commandstatsIntance.resize()
+ usedmemoryInstance.resize()
+ });
+}
+
+onMounted(() => {
+ getList();
+})
+</script>
--
Gitblit v1.9.3