新增缓存列表菜单功能

RuoYi

2022-06-25 ade1d01e31ba7c04fa9f10a72df644be8c0e5cc8

新增缓存列表菜单功能

 src/api/monitor/cache.js

@@ -6,4 +6,52 @@
    url: '/monitor/cache',

    method: 'get'

  })

}
}



// 鏌ヨ缂撳瓨鍚嶇О鍒楄〃

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'

  })

}


 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>

 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 @@
            }

          ]

        }

      ],

      ]

    })

  })

}


 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>