mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 04:57:10 +08:00
refactor(cache): 优化缓存监控页面
This commit is contained in:
冷冷
parent
137ce3d01b
commit
decad4f25d
5
auto-imports.d.ts
vendored
5
auto-imports.d.ts
vendored
@ -3,6 +3,7 @@
|
|||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
// noinspection JSUnusedGlobalSymbols
|
// noinspection JSUnusedGlobalSymbols
|
||||||
// Generated by unplugin-auto-import
|
// Generated by unplugin-auto-import
|
||||||
|
// biome-ignore lint: disable
|
||||||
export {}
|
export {}
|
||||||
declare global {
|
declare global {
|
||||||
const EffectScope: typeof import('vue')['EffectScope']
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
@ -46,6 +47,7 @@ declare global {
|
|||||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
const onUpdated: typeof import('vue')['onUpdated']
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
|
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||||
const provide: typeof import('vue')['provide']
|
const provide: typeof import('vue')['provide']
|
||||||
const reactive: typeof import('vue')['reactive']
|
const reactive: typeof import('vue')['reactive']
|
||||||
const readonly: typeof import('vue')['readonly']
|
const readonly: typeof import('vue')['readonly']
|
||||||
@ -67,10 +69,13 @@ declare global {
|
|||||||
const useAttrs: typeof import('vue')['useAttrs']
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
const useCssModule: typeof import('vue')['useCssModule']
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
const useCssVars: typeof import('vue')['useCssVars']
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
|
const useId: typeof import('vue')['useId']
|
||||||
const useLink: typeof import('vue-router')['useLink']
|
const useLink: typeof import('vue-router')['useLink']
|
||||||
|
const useModel: typeof import('vue')['useModel']
|
||||||
const useRoute: typeof import('vue-router')['useRoute']
|
const useRoute: typeof import('vue-router')['useRoute']
|
||||||
const useRouter: typeof import('vue-router')['useRouter']
|
const useRouter: typeof import('vue-router')['useRouter']
|
||||||
const useSlots: typeof import('vue')['useSlots']
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||||
const watch: typeof import('vue')['watch']
|
const watch: typeof import('vue')['watch']
|
||||||
const watchEffect: typeof import('vue')['watchEffect']
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pig-ui",
|
"name": "pig-ui",
|
||||||
"version": "3.8.0",
|
"version": "3.8.1",
|
||||||
"description": "PIGCLOUD微服务开发平台",
|
"description": "PIGCLOUD微服务开发平台",
|
||||||
"author": "pig4cloud",
|
"author": "pig4cloud",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
|
|||||||
@ -1,135 +1,193 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-padding cache">
|
<div class="layout-padding">
|
||||||
<el-card class="!border-none" shadow="never">
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
<div>
|
<div
|
||||||
<div class="mb-4 lg">基本信息</div>
|
class="p-4 min-w-[375px] md:min-w-[700px] xl:min-w-[800px] mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6">
|
||||||
|
<div
|
||||||
|
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||||
|
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||||
|
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||||
|
<span class="flex items-center text-brand-500 dark:text-white">
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="h-7 w-7"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||||
|
<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||||
|
<p class="font-dm text-sm font-medium text-gray-600">Redis版本</p>
|
||||||
|
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.redis_version }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||||
|
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||||
|
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||||
|
<span class="flex items-center text-brand-500 dark:text-white">
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
class="h-6 w-6"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M298.39 248a4 4 0 002.86-6.8l-78.4-79.72a4 4 0 00-6.85 2.81V236a12 12 0 0012 12z"></path>
|
||||||
|
<path
|
||||||
|
d="M197 267a43.67 43.67 0 01-13-31v-92h-72a64.19 64.19 0 00-64 64v224a64 64 0 0064 64h144a64 64 0 0064-64V280h-92a43.61 43.61 0 01-31-13zm175-147h70.39a4 4 0 002.86-6.8l-78.4-79.72a4 4 0 00-6.85 2.81V108a12 12 0 0012 12z"></path>
|
||||||
|
<path
|
||||||
|
d="M372 152a44.34 44.34 0 01-44-44V16H220a60.07 60.07 0 00-60 60v36h42.12A40.81 40.81 0 01231 124.14l109.16 111a41.11 41.11 0 0111.83 29V400h53.05c32.51 0 58.95-26.92 58.95-60V152z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||||
|
<p class="font-dm text-sm font-medium text-gray-600">客户端数</p>
|
||||||
|
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.connected_clients }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||||
|
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||||
|
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||||
|
<span class="flex items-center text-brand-500 dark:text-white">
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="h-7 w-7"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||||
|
<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||||
|
<p class="font-dm text-sm font-medium text-gray-600">运行时间(天)</p>
|
||||||
|
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.uptime_in_days }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||||
|
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||||
|
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||||
|
<span class="flex items-center text-brand-500 dark:text-white">
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="h-6 w-6"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||||
|
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||||
|
<p class="font-dm text-sm font-medium text-gray-600">使用内存</p>
|
||||||
|
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.used_memory_human }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||||
|
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||||
|
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||||
|
<span class="flex items-center text-brand-500 dark:text-white">
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="h-7 w-7"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||||
|
<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||||
|
<p class="font-dm text-sm font-medium text-gray-600">AOF是否开启</p>
|
||||||
|
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-grow !flex-row items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||||
|
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||||
|
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||||
|
<span class="flex items-center text-brand-500 dark:text-white">
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
class="h-6 w-6"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M208 448V320h96v128h97.6V256H464L256 64 48 256h62.4v192z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||||
|
<p class="font-dm text-sm font-medium text-gray-600">RDB是否成功</p>
|
||||||
|
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="el-table--enable-row-transition el-table--large el-table">
|
<div class="sm:flex">
|
||||||
<el-scrollbar>
|
<!-- 命令统计 -->
|
||||||
<table class="el-table__body" cellspacing="0">
|
<el-card class="sm:mr-4 flex-1 !border-none mt-4" shadow="never">
|
||||||
<tbody>
|
<div>
|
||||||
<tr class="el-table__row">
|
<div class="mb-10 font-semibold">命令统计</div>
|
||||||
<td class="el-table__cell">
|
<div class="flex h-[30vh] items-center" ref="commandChartRef"></div>
|
||||||
<div class="cell">Redis版本</div>
|
</div>
|
||||||
</td>
|
</el-card>
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">{{ baseInfo.redis_version }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">运行模式</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">
|
|
||||||
{{ baseInfo.redis_mode == 'standalone' ? '单机' : '集群' }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">端口</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">{{ baseInfo.tcp_port }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">客户端数</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">{{ baseInfo.connected_clients }}</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="el-table__row">
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">运行时间(天)</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">{{ baseInfo.uptime_in_days }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">使用内存</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">
|
|
||||||
{{ baseInfo.used_memory_human }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">使用CPU</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">
|
|
||||||
{{ baseInfo.used_cpu_user_children }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">内存配置</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">{{ baseInfo.maxmemory_human }}</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="el-table__row">
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">AOF是否开启</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">
|
|
||||||
{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">RDB是否成功</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">
|
|
||||||
{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">Key数量</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">{{ baseInfo.dbSize }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">网络入口/出口</div>
|
|
||||||
</td>
|
|
||||||
<td class="el-table__cell">
|
|
||||||
<div class="cell">
|
|
||||||
{{ baseInfo.instantaneous_input_kbps }}
|
|
||||||
/
|
|
||||||
{{ baseInfo.instantaneous_output_kbps }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<div class="sm:flex">
|
<!-- 内存信息 -->
|
||||||
<!-- 命令统计 -->
|
<el-card class="flex-1 !border-none mt-4" shadow="never">
|
||||||
<el-card class="sm:mr-4 flex-1 !border-none mt-4" shadow="never">
|
<div>
|
||||||
<div>
|
<div class="mb-10 font-semibold">内存信息</div>
|
||||||
<div class="mb-10">命令统计</div>
|
<div class="flex h-[30vh] items-center" ref="memoryChartRef"></div>
|
||||||
<div class="flex h-[300px] items-center" ref="commandChartRef"></div>
|
</div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-card>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 内存信息 -->
|
</div>
|
||||||
<el-card class="flex-1 !border-none mt-4" shadow="never">
|
|
||||||
<div>
|
|
||||||
<div class="mb-10">内存信息</div>
|
|
||||||
<div class="flex h-[300px] items-center" ref="memoryChartRef"></div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="cache">
|
<script setup lang="ts" name="cache">
|
||||||
import { systemCache } from '/@/api/admin/system';
|
import {systemCache} from '/@/api/admin/system';
|
||||||
import { markRaw } from 'vue';
|
import {markRaw} from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
const baseInfo = ref<any>({});
|
const baseInfo = ref<any>({});
|
||||||
@ -137,111 +195,111 @@ const commandChartRef = ref();
|
|||||||
const memoryChartRef = ref();
|
const memoryChartRef = ref();
|
||||||
|
|
||||||
const chartOptions = reactive({
|
const chartOptions = reactive({
|
||||||
commandChartOption: {
|
commandChartOption: {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
// formatter: '{b} : {d}%'
|
// formatter: '{b} : {d}%'
|
||||||
},
|
},
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: '85%',
|
radius: '85%',
|
||||||
color: [
|
color: [
|
||||||
'#0D47A1',
|
'#0D47A1',
|
||||||
'#1565C0',
|
'#1565C0',
|
||||||
'#1976D2',
|
'#1976D2',
|
||||||
'#1E88E5',
|
'#1E88E5',
|
||||||
'#2196F3',
|
'#2196F3',
|
||||||
'#42A5F5',
|
'#42A5F5',
|
||||||
'#64B5F6',
|
'#64B5F6',
|
||||||
'#90CAF9',
|
'#90CAF9',
|
||||||
'#BBDEFB',
|
'#BBDEFB',
|
||||||
'#E3F2FD',
|
'#E3F2FD',
|
||||||
'#CAF0F8',
|
'#CAF0F8',
|
||||||
'#ADE8F4',
|
'#ADE8F4',
|
||||||
'#90E0EF',
|
'#90E0EF',
|
||||||
'#48CAE4',
|
'#48CAE4',
|
||||||
'#00B4D8',
|
'#00B4D8',
|
||||||
'#0096C7',
|
'#0096C7',
|
||||||
'#0077B6',
|
'#0077B6',
|
||||||
'#023E8A',
|
'#023E8A',
|
||||||
'#03045E',
|
'#03045E',
|
||||||
'#8ecae6',
|
'#8ecae6',
|
||||||
'#98c1d9',
|
'#98c1d9',
|
||||||
'#D9ED92',
|
'#D9ED92',
|
||||||
'#B5E48C',
|
'#B5E48C',
|
||||||
'#99D98C',
|
'#99D98C',
|
||||||
'#76C893',
|
'#76C893',
|
||||||
'#52B69A',
|
'#52B69A',
|
||||||
'#34A0A4',
|
'#34A0A4',
|
||||||
'#168AAD',
|
'#168AAD',
|
||||||
'#1A759F',
|
'#1A759F',
|
||||||
'#1E6091',
|
'#1E6091',
|
||||||
'#184E77',
|
'#184E77',
|
||||||
'#457b9d',
|
'#457b9d',
|
||||||
],
|
],
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: '',
|
value: '',
|
||||||
name: '',
|
name: '',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
emphasis: {
|
emphasis: {
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
memoryChartOption: {
|
memoryChartOption: {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: '{a} <br/>{b} : {c}%',
|
formatter: '{a} <br/>{b} : {c}%',
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Pressure',
|
name: 'Pressure',
|
||||||
type: 'gauge',
|
type: 'gauge',
|
||||||
radius: '100%',
|
radius: '100%',
|
||||||
detail: {
|
detail: {
|
||||||
formatter: '{value}',
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: '',
|
value: '',
|
||||||
name: '内存消耗',
|
name: '内存消耗',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const getSystemCache = async () => {
|
const getSystemCache = async () => {
|
||||||
const res = await systemCache();
|
const res = await systemCache();
|
||||||
|
|
||||||
baseInfo.value = res.data.info;
|
baseInfo.value = res.data.info;
|
||||||
baseInfo.value.dbSize = res.data.dbSize;
|
baseInfo.value.dbSize = res.data.dbSize;
|
||||||
|
|
||||||
chartOptions.commandChartOption.series[0].data = res.data.commandStats;
|
chartOptions.commandChartOption.series[0].data = res.data.commandStats;
|
||||||
|
|
||||||
chartOptions.memoryChartOption.series[0].data[0].value = (res.data.info.used_memory / 1024 / 1024).toFixed(2);
|
chartOptions.memoryChartOption.series[0].data[0].value = (res.data.info.used_memory / 1024 / 1024).toFixed(2);
|
||||||
chartOptions.memoryChartOption.series[0].detail.formatter = '{value}' + 'M';
|
chartOptions.memoryChartOption.series[0].detail.formatter = '{value}' + 'M';
|
||||||
|
|
||||||
const commandChart = markRaw(echarts.init(commandChartRef.value));
|
const commandChart = markRaw(echarts.init(commandChartRef.value));
|
||||||
const memoryChart = markRaw(echarts.init(memoryChartRef.value));
|
const memoryChart = markRaw(echarts.init(memoryChartRef.value));
|
||||||
commandChart.setOption(chartOptions.commandChartOption);
|
commandChart.setOption(chartOptions.commandChartOption);
|
||||||
memoryChart.setOption(chartOptions.memoryChartOption);
|
memoryChart.setOption(chartOptions.memoryChartOption);
|
||||||
};
|
};
|
||||||
|
|
||||||
getSystemCache();
|
getSystemCache();
|
||||||
@ -249,6 +307,6 @@ getSystemCache();
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.el-table .el-table__cell {
|
.el-table .el-table__cell {
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user