From ade1d01e31ba7c04fa9f10a72df644be8c0e5cc8 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期六, 25 六月 2022 09:42:31 +0800
Subject: [PATCH] 新增缓存列表菜单功能
---
src/views/monitor/cache/index.vue | 6
src/views/monitor/cache/list.vue | 241 ++++++++++++++++++++++++++++++++++++++++++++++++
src/api/monitor/cache.js | 50 +++++++++
src/assets/icons/svg/redis-list.svg | 2
4 files changed, 295 insertions(+), 4 deletions(-)
diff --git a/src/api/monitor/cache.js b/src/api/monitor/cache.js
index 202a02c..e1f2c87 100644
--- a/src/api/monitor/cache.js
+++ b/src/api/monitor/cache.js
@@ -6,4 +6,52 @@
url: '/monitor/cache',
method: 'get'
})
-}
\ No newline at end of file
+}
+
+// 鏌ヨ缂撳瓨鍚嶇О鍒楄〃
+export function listCacheName() {
+ return request({
+ url: '/monitor/cache/getNames',
+ method: 'get'
+ })
+}
+
+// 鏌ヨ缂撳瓨閿悕鍒楄〃
+export function listCacheKey(cacheName) {
+ return request({
+ url: '/monitor/cache/getKeys/' + cacheName,
+ method: 'get'
+ })
+}
+
+// 鏌ヨ缂撳瓨鍐呭
+export function getCacheValue(cacheName, cacheKey) {
+ return request({
+ url: '/monitor/cache/getValue/' + cacheName + '/' + cacheKey,
+ method: 'get'
+ })
+}
+
+// 娓呯悊鎸囧畾鍚嶇О缂撳瓨
+export function clearCacheName(cacheName) {
+ return request({
+ url: '/monitor/cache/clearCacheName/' + cacheName,
+ method: 'delete'
+ })
+}
+
+// 娓呯悊鎸囧畾閿悕缂撳瓨
+export function clearCacheKey(cacheKey) {
+ return request({
+ url: '/monitor/cache/clearCacheKey/' + cacheKey,
+ method: 'delete'
+ })
+}
+
+// 娓呯悊鍏ㄩ儴缂撳瓨
+export function clearCacheAll() {
+ return request({
+ url: '/monitor/cache/clearCacheAll',
+ method: 'delete'
+ })
+}
diff --git a/src/assets/icons/svg/redis-list.svg b/src/assets/icons/svg/redis-list.svg
new file mode 100644
index 0000000..98a15b2
--- /dev/null
+++ b/src/assets/icons/svg/redis-list.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656035183065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M958.88 730.06H65.12c-18.28 0-33.12-14.82-33.12-33.12V68.91c0-18.29 14.83-33.12 33.12-33.12h893.77c18.28 0 33.12 14.82 33.12 33.12v628.03c-0.01 18.3-14.84 33.12-33.13 33.12zM98.23 663.83h827.53v-561.8H98.23v561.8z" p-id="3396"></path><path d="M512 954.55c-18.28 0-33.12-14.82-33.12-33.12V733.92c0-18.29 14.83-33.12 33.12-33.12s33.12 14.82 33.12 33.12v187.51c0 18.3-14.84 33.12-33.12 33.12z" p-id="3397"></path><path d="M762.01 988.21H261.99c-18.28 0-33.12-14.82-33.12-33.12 0-18.29 14.83-33.12 33.12-33.12h500.03c18.28 0 33.12 14.82 33.12 33.12-0.01 18.29-14.84 33.12-33.13 33.12zM514.74 578.55c-21.63 0-43.31-3.87-64.21-11.65-45.95-17.13-82.49-51.13-102.86-95.74-5.07-11.08-0.19-24.19 10.89-29.26 11.08-5.09 24.19-0.18 29.26 10.91 15.5 33.88 43.25 59.7 78.14 72.71 34.93 12.99 72.79 11.64 106.66-3.85 33.22-15.17 58.8-42.26 72.03-76.3 4.42-11.37 17.21-17.01 28.57-12.58 11.36 4.42 16.99 17.22 12.57 28.58-17.42 44.82-51.1 80.5-94.82 100.47-24.34 11.12-50.25 16.71-76.23 16.71z" p-id="3398"></path><path d="M325.27 528.78c-1.66 0-3.34-0.18-5.02-0.57-11.88-2.77-19.28-14.63-16.49-26.51l18.84-81c1.34-5.82 5-10.84 10.13-13.92 5.09-3.09 11.3-3.96 17.03-2.41l80.51 21.43c11.79 3.14 18.8 15.23 15.67 27.02-3.15 11.79-15.42 18.75-27.02 15.65l-58.49-15.57-13.69 58.81c-2.37 10.2-11.45 17.07-21.47 17.07zM360.8 351.01c-2.65 0-5.37-0.49-8-1.51-11.36-4.41-16.99-17.21-12.59-28.57 17.4-44.79 51.06-80.47 94.8-100.48 92.15-42.06 201.25-1.39 243.31 90.68 5.07 11.08 0.19 24.19-10.89 29.26-11.13 5.07-24.19 0.17-29.26-10.91-31.97-69.91-114.9-100.82-184.79-68.86-33.22 15.19-58.8 42.28-71.99 76.29-3.41 8.74-11.75 14.1-20.59 14.1z" p-id="3399"></path><path d="M684.68 376.74c-1.47 0-2.95-0.15-4.42-0.44l-81.61-16.68c-11.94-2.45-19.64-14.11-17.21-26.06 2.44-11.96 14.1-19.64 26.04-17.22l59.29 12.12 10.23-59.5c2.05-12 13.52-20.19 25.48-18.01 12.03 2.06 20.09 13.48 18.02 25.5l-14.08 81.96a22.089 22.089 0 0 1-9.29 14.49c-3.7 2.51-8.03 3.84-12.45 3.84z" p-id="3400"></path></svg>
\ No newline at end of file
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
index 4a7b2f4..02d2f7a 100644
--- a/src/views/monitor/cache/index.vue
+++ b/src/views/monitor/cache/index.vue
@@ -66,7 +66,7 @@
</div>
</template>
-<script setup>
+<script setup name="Cache">
import { getCache } from '@/api/monitor/cache';
import * as echarts from 'echarts';
@@ -98,7 +98,7 @@
animationEasing: "cubicInOut",
animationDuration: 1000
}
- ],
+ ]
});
const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
@@ -122,7 +122,7 @@
}
]
}
- ],
+ ]
})
})
}
diff --git a/src/views/monitor/cache/list.vue b/src/views/monitor/cache/list.vue
new file mode 100644
index 0000000..fbdcf0d
--- /dev/null
+++ b/src/views/monitor/cache/list.vue
@@ -0,0 +1,241 @@
+<template>
+ <div class="app-container">
+ <el-row :gutter="10">
+ <el-col :span="8">
+ <el-card style="height: calc(100vh - 125px)">
+ <template #header>
+ <span>缂撳瓨鍒楄〃</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ type="text"
+ icon="Refresh"
+ @click="refreshCacheNames()"
+ ></el-button>
+ </template>
+ <el-table
+ v-loading="loading"
+ :data="cacheNames"
+ :height="tableHeight"
+ highlight-current-row
+ @row-click="getCacheKeys"
+ style="width: 100%"
+ >
+ <el-table-column
+ label="搴忓彿"
+ width="60"
+ type="index"
+ ></el-table-column>
+
+ <el-table-column
+ label="缂撳瓨鍚嶇О"
+ align="center"
+ prop="cacheName"
+ :show-overflow-tooltip="true"
+ :formatter="nameFormatter"
+ ></el-table-column>
+
+ <el-table-column
+ label="澶囨敞"
+ align="center"
+ prop="remark"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="鎿嶄綔"
+ width="60"
+ align="center"
+ class-name="small-padding fixed-width"
+ >
+ <template #default="scope">
+ <el-button
+ type="text"
+ icon="Delete"
+ @click="handleClearCacheName(scope.row)"
+ ></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ </el-col>
+
+ <el-col :span="8">
+ <el-card style="height: calc(100vh - 125px)">
+ <template #header>
+ <span>閿悕鍒楄〃</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ type="text"
+ icon="Refresh"
+ @click="refreshCacheKeys()"
+ ></el-button>
+ </template>
+ <el-table
+ v-loading="subLoading"
+ :data="cacheKeys"
+ :height="tableHeight"
+ highlight-current-row
+ @row-click="handleCacheValue"
+ style="width: 100%"
+ >
+ <el-table-column
+ label="搴忓彿"
+ width="60"
+ type="index"
+ ></el-table-column>
+ <el-table-column
+ label="缂撳瓨閿悕"
+ align="center"
+ :show-overflow-tooltip="true"
+ :formatter="keyFormatter"
+ >
+ </el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ width="60"
+ align="center"
+ class-name="small-padding fixed-width"
+ >
+ <template #default="scope">
+ <el-button
+ type="text"
+ icon="Delete"
+ @click="handleClearCacheKey(scope.row)"
+ ></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ </el-col>
+
+ <el-col :span="8">
+ <el-card :bordered="false" style="height: calc(100vh - 125px)">
+ <template #header>
+ <span>缂撳瓨鍐呭</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ type="text"
+ icon="Refresh"
+ @click="handleClearCacheAll()"
+ >娓呯悊鍏ㄩ儴</el-button
+ >
+ </template>
+ <el-form :model="form">
+ <el-row :gutter="32">
+ <el-col :offset="1" :span="22">
+ <el-form-item label="缂撳瓨鍚嶇О:" prop="cacheName">
+ <el-input v-model="cacheForm.cacheName" :readOnly="true" />
+ </el-form-item>
+ </el-col>
+ <el-col :offset="1" :span="22">
+ <el-form-item label="缂撳瓨閿悕:" prop="cacheKey">
+ <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
+ </el-form-item>
+ </el-col>
+ <el-col :offset="1" :span="22">
+ <el-form-item label="缂撳瓨鍐呭:" prop="cacheValue">
+ <el-input
+ v-model="cacheForm.cacheValue"
+ type="textarea"
+ :rows="8"
+ :readOnly="true"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script setup name="CacheList">
+import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
+
+const { proxy } = getCurrentInstance();
+
+const cacheNames = ref([]);
+const cacheKeys = ref([]);
+const cacheForm = ref({});
+const loading = ref(true);
+const subLoading = ref(false);
+const nowCacheName = ref("");
+const tableHeight = ref(window.innerHeight - 200);
+
+/** 鏌ヨ缂撳瓨鍚嶇О鍒楄〃 */
+function getCacheNames() {
+ loading.value = true;
+ listCacheName().then(response => {
+ cacheNames.value = response.data;
+ loading.value = false;
+ });
+}
+
+/** 鍒锋柊缂撳瓨鍚嶇О鍒楄〃 */
+function refreshCacheNames() {
+ getCacheNames();
+ proxy.$modal.msgSuccess("鍒锋柊缂撳瓨鍒楄〃鎴愬姛");
+}
+
+/** 娓呯悊鎸囧畾鍚嶇О缂撳瓨 */
+function handleClearCacheName(row) {
+ clearCacheName(row.cacheName).then(response => {
+ proxy.$modal.msgSuccess("娓呯悊缂撳瓨鍚嶇О[" + nowCacheName.value + "]鎴愬姛");
+ getCacheKeys();
+ });
+}
+
+/** 鏌ヨ缂撳瓨閿悕鍒楄〃 */
+function getCacheKeys(row) {
+ const cacheName = row !== undefined ? row.cacheName : nowCacheName.value;
+ if (cacheName === "") {
+ return;
+ }
+ subLoading.value = true;
+ listCacheKey(cacheName).then(response => {
+ cacheKeys.value = response.data;
+ subLoading.value = false;
+ nowCacheName.value = cacheName;
+ });
+}
+
+/** 鍒锋柊缂撳瓨閿悕鍒楄〃 */
+function refreshCacheKeys() {
+ getCacheKeys();
+ proxy.$modal.msgSuccess("鍒锋柊閿悕鍒楄〃鎴愬姛");
+}
+
+/** 娓呯悊鎸囧畾閿悕缂撳瓨 */
+function handleClearCacheKey(cacheKey) {
+ clearCacheKey(cacheKey).then(response => {
+ proxy.$modal.msgSuccess("娓呯悊缂撳瓨閿悕[" + cacheKey + "]鎴愬姛");
+ getCacheKeys();
+ });
+}
+
+/** 鍒楄〃鍓嶇紑鍘婚櫎 */
+function nameFormatter(row) {
+ return row.cacheName.replace(":", "");
+}
+
+/** 閿悕鍓嶇紑鍘婚櫎 */
+function keyFormatter(cacheKey) {
+ return cacheKey.replace(nowCacheName.value, "");
+}
+
+/** 鏌ヨ缂撳瓨鍐呭璇︾粏 */
+function handleCacheValue(cacheKey) {
+ getCacheValue(nowCacheName.value, cacheKey).then(response => {
+ cacheForm.value = response.data;
+ });
+}
+
+/** 娓呯悊鍏ㄩ儴缂撳瓨 */
+function handleClearCacheAll() {
+ clearCacheAll().then(response => {
+ proxy.$modal.msgSuccess("娓呯悊鍏ㄩ儴缂撳瓨鎴愬姛");
+ });
+}
+
+getCacheNames();
+</script>
--
Gitblit v1.9.3