mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-21 20:47:10 +08:00
Merge branch 'dev'
Some checks failed
build / task (18.x, npm, macOS-latest) (push) Has been cancelled
build / task (18.x, npm, ubuntu-latest) (push) Has been cancelled
build / task (18.x, npm, windows-latest) (push) Has been cancelled
build / task (18.x, pnpm, macOS-latest) (push) Has been cancelled
build / task (18.x, pnpm, ubuntu-latest) (push) Has been cancelled
build / task (18.x, pnpm, windows-latest) (push) Has been cancelled
build / task (18.x, yarn, macOS-latest) (push) Has been cancelled
build / task (18.x, yarn, ubuntu-latest) (push) Has been cancelled
build / task (18.x, yarn, windows-latest) (push) Has been cancelled
同步代码 / gitcode (push) Has been cancelled
同步代码 / gitlink (push) Has been cancelled
同步代码 / gitee (push) Has been cancelled
Some checks failed
build / task (18.x, npm, macOS-latest) (push) Has been cancelled
build / task (18.x, npm, ubuntu-latest) (push) Has been cancelled
build / task (18.x, npm, windows-latest) (push) Has been cancelled
build / task (18.x, pnpm, macOS-latest) (push) Has been cancelled
build / task (18.x, pnpm, ubuntu-latest) (push) Has been cancelled
build / task (18.x, pnpm, windows-latest) (push) Has been cancelled
build / task (18.x, yarn, macOS-latest) (push) Has been cancelled
build / task (18.x, yarn, ubuntu-latest) (push) Has been cancelled
build / task (18.x, yarn, windows-latest) (push) Has been cancelled
同步代码 / gitcode (push) Has been cancelled
同步代码 / gitlink (push) Has been cancelled
同步代码 / gitee (push) Has been cancelled
This commit is contained in:
冷冷
commit
45f851e005
5
auto-imports.d.ts
vendored
5
auto-imports.d.ts
vendored
@ -3,6 +3,7 @@
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
@ -46,6 +47,7 @@ declare global {
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
@ -67,10 +69,13 @@ declare global {
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pig-ui",
|
||||
"version": "3.8.0",
|
||||
"version": "3.8.1",
|
||||
"description": "PIGCLOUD微服务开发平台",
|
||||
"author": "pig4cloud",
|
||||
"license": "Apache-2.0",
|
||||
@ -34,8 +34,8 @@
|
||||
"sm-crypto": "0.3.13",
|
||||
"sortablejs": "1.15.3",
|
||||
"splitpanes": "3.1.5",
|
||||
"tailwindcss": "3.4.11",
|
||||
"vue": "3.5.6",
|
||||
"tailwindcss": "3.4.12",
|
||||
"vue": "3.5.8",
|
||||
"vue-clipboard3": "2.0.0",
|
||||
"vue-echarts": "7.0.3",
|
||||
"vue-i18n": "9.14.0",
|
||||
|
||||
@ -1,135 +1,193 @@
|
||||
<template>
|
||||
<div class="layout-padding cache">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<div>
|
||||
<div class="mb-4 lg">基本信息</div>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<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">
|
||||
<el-scrollbar>
|
||||
<table class="el-table__body" cellspacing="0">
|
||||
<tbody>
|
||||
<tr class="el-table__row">
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">Redis版本</div>
|
||||
</td>
|
||||
<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="sm:mr-4 flex-1 !border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<div class="mb-10 font-semibold">命令统计</div>
|
||||
<div class="flex h-[30vh] items-center" ref="commandChartRef"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="sm:flex">
|
||||
<!-- 命令统计 -->
|
||||
<el-card class="sm:mr-4 flex-1 !border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<div class="mb-10">命令统计</div>
|
||||
<div class="flex h-[300px] items-center" ref="commandChartRef"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 内存信息 -->
|
||||
<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>
|
||||
<!-- 内存信息 -->
|
||||
<el-card class="flex-1 !border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<div class="mb-10 font-semibold">内存信息</div>
|
||||
<div class="flex h-[30vh] items-center" ref="memoryChartRef"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="cache">
|
||||
import { systemCache } from '/@/api/admin/system';
|
||||
import { markRaw } from 'vue';
|
||||
import {systemCache} from '/@/api/admin/system';
|
||||
import {markRaw} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const baseInfo = ref<any>({});
|
||||
@ -137,111 +195,111 @@ const commandChartRef = ref();
|
||||
const memoryChartRef = ref();
|
||||
|
||||
const chartOptions = reactive({
|
||||
commandChartOption: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
// formatter: '{b} : {d}%'
|
||||
},
|
||||
commandChartOption: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
// formatter: '{b} : {d}%'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
type: 'pie',
|
||||
radius: '85%',
|
||||
color: [
|
||||
'#0D47A1',
|
||||
'#1565C0',
|
||||
'#1976D2',
|
||||
'#1E88E5',
|
||||
'#2196F3',
|
||||
'#42A5F5',
|
||||
'#64B5F6',
|
||||
'#90CAF9',
|
||||
'#BBDEFB',
|
||||
'#E3F2FD',
|
||||
'#CAF0F8',
|
||||
'#ADE8F4',
|
||||
'#90E0EF',
|
||||
'#48CAE4',
|
||||
'#00B4D8',
|
||||
'#0096C7',
|
||||
'#0077B6',
|
||||
'#023E8A',
|
||||
'#03045E',
|
||||
'#8ecae6',
|
||||
'#98c1d9',
|
||||
'#D9ED92',
|
||||
'#B5E48C',
|
||||
'#99D98C',
|
||||
'#76C893',
|
||||
'#52B69A',
|
||||
'#34A0A4',
|
||||
'#168AAD',
|
||||
'#1A759F',
|
||||
'#1E6091',
|
||||
'#184E77',
|
||||
'#457b9d',
|
||||
],
|
||||
data: [
|
||||
{
|
||||
value: '',
|
||||
name: '',
|
||||
},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
type: 'pie',
|
||||
radius: '85%',
|
||||
color: [
|
||||
'#0D47A1',
|
||||
'#1565C0',
|
||||
'#1976D2',
|
||||
'#1E88E5',
|
||||
'#2196F3',
|
||||
'#42A5F5',
|
||||
'#64B5F6',
|
||||
'#90CAF9',
|
||||
'#BBDEFB',
|
||||
'#E3F2FD',
|
||||
'#CAF0F8',
|
||||
'#ADE8F4',
|
||||
'#90E0EF',
|
||||
'#48CAE4',
|
||||
'#00B4D8',
|
||||
'#0096C7',
|
||||
'#0077B6',
|
||||
'#023E8A',
|
||||
'#03045E',
|
||||
'#8ecae6',
|
||||
'#98c1d9',
|
||||
'#D9ED92',
|
||||
'#B5E48C',
|
||||
'#99D98C',
|
||||
'#76C893',
|
||||
'#52B69A',
|
||||
'#34A0A4',
|
||||
'#168AAD',
|
||||
'#1A759F',
|
||||
'#1E6091',
|
||||
'#184E77',
|
||||
'#457b9d',
|
||||
],
|
||||
data: [
|
||||
{
|
||||
value: '',
|
||||
name: '',
|
||||
},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
memoryChartOption: {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Pressure',
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
detail: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: '',
|
||||
name: '内存消耗',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
memoryChartOption: {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Pressure',
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
detail: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: '',
|
||||
name: '内存消耗',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const getSystemCache = async () => {
|
||||
const res = await systemCache();
|
||||
const res = await systemCache();
|
||||
|
||||
baseInfo.value = res.data.info;
|
||||
baseInfo.value.dbSize = res.data.dbSize;
|
||||
baseInfo.value = res.data.info;
|
||||
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].detail.formatter = '{value}' + 'M';
|
||||
chartOptions.memoryChartOption.series[0].data[0].value = (res.data.info.used_memory / 1024 / 1024).toFixed(2);
|
||||
chartOptions.memoryChartOption.series[0].detail.formatter = '{value}' + 'M';
|
||||
|
||||
const commandChart = markRaw(echarts.init(commandChartRef.value));
|
||||
const memoryChart = markRaw(echarts.init(memoryChartRef.value));
|
||||
commandChart.setOption(chartOptions.commandChartOption);
|
||||
memoryChart.setOption(chartOptions.memoryChartOption);
|
||||
const commandChart = markRaw(echarts.init(commandChartRef.value));
|
||||
const memoryChart = markRaw(echarts.init(memoryChartRef.value));
|
||||
commandChart.setOption(chartOptions.commandChartOption);
|
||||
memoryChart.setOption(chartOptions.memoryChartOption);
|
||||
};
|
||||
|
||||
getSystemCache();
|
||||
@ -249,6 +307,6 @@ getSystemCache();
|
||||
|
||||
<style scoped>
|
||||
.el-table .el-table__cell {
|
||||
min-width: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user