From bf629a95549757faa90362b5d3c0c6a2e6a443a4 Mon Sep 17 00:00:00 2001
From: Chika <wbs_2018@sina.com>
Date: Fri, 12 May 2023 15:30:01 +0800
Subject: [PATCH] =?UTF-8?q?Redis=E7=9B=91=E6=8E=A7=E5=9B=BE=E6=A0=87?=
=?UTF-8?q?=E4=BD=BF=E7=94=A8Echart=E7=BB=84=E4=BB=B6=E6=95=B4=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/router/modules/remaining.ts | 22 +++
src/views/infra/redis/index.vue | 279 +++++++++++++++++++++-----------
2 files changed, 209 insertions(+), 92 deletions(-)
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 8886e388..ed0d6720 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -318,6 +318,28 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
]
},
+ {
+ path: '/infra',
+ component: Layout,
+ name: 'InfraRedis',
+ meta: {
+ hidden: true
+ },
+ children: [
+ {
+ path: '/infra/redis',
+ component: () => import('@/views/infra/redis/index.vue'),
+ name: 'InfraRedis',
+ meta: {
+ noCache: true,
+ hidden: true,
+ canTo: true,
+ title: 'REDIS测试测试测试',
+ activeMenu: 'infra/redis/index'
+ }
+ }
+ ]
+ },
{
path: '/property',
component: Layout,
diff --git a/src/views/infra/redis/index.vue b/src/views/infra/redis/index.vue
index 246b90ee..948148ad 100644
--- a/src/views/infra/redis/index.vue
+++ b/src/views/infra/redis/index.vue
@@ -1,7 +1,6 @@
<template>
<doc-alert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
<doc-alert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
-
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-row>
<!-- 基本信息 -->
@@ -51,126 +50,222 @@
<!-- 命令统计 -->
<el-col :span="12" class="mt-3">
<el-card :gutter="12" shadow="hover">
- <div ref="commandStatsRef" class="h-88"></div>
+ <Echart :options="commandStatsRefChika" :height="420" />
</el-card>
</el-col>
<!-- 内存使用量统计 -->
<el-col :span="12" class="mt-3">
<el-card class="ml-3" :gutter="12" shadow="hover">
- <div ref="usedmemory" class="h-88"></div>
+ <Echart :options="usedmemoryEchartChika" :height="420" />
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</template>
-<script setup lang="ts" name="InfraRedis">
-import * as echarts from 'echarts'
+<script setup lang="ts">
+import echarts from '@/plugins/echarts'
+import { GaugeChart } from 'echarts/charts'
+import { ToolboxComponent } from 'echarts/components'
import * as RedisApi from '@/api/infra/redis'
import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
-
+echarts.use([ToolboxComponent])
+echarts.use([GaugeChart])
const cache = ref<RedisMonitorInfoVO>()
// 基本信息
const readRedisInfo = async () => {
const data = await RedisApi.getCache()
cache.value = data
- loadEchartOptions(data.commandStats)
}
-// 图表
-const commandStatsRef = ref<HTMLElement>()
-const usedmemory = ref<HTMLDivElement>()
-const loadEchartOptions = (stats) => {
- const commandStats = [] as any[]
- const nameList = [] as string[]
- stats.forEach((row) => {
- commandStats.push({
- name: row.command,
- value: row.calls
- })
- nameList.push(row.command)
- })
-
- const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
-
- commandStatsInstance.setOption({
- title: {
- text: '命令统计',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- type: 'scroll',
- orient: 'vertical',
- right: 30,
- top: 10,
- bottom: 20,
- data: nameList,
- textStyle: {
- color: '#a1a1a1'
+// 内存使用情况
+const usedmemoryEchartChika = reactive({
+ title: {
+ // 仪表盘标题。
+ text: '内存使用情况',
+ left: 'center',
+ show: true, // 是否显示标题,默认 true。
+ offsetCenter: [0, '20%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
+ color: 'yellow', // 文字的颜色,默认 #333。
+ fontSize: 20 // 文字的字体大小,默认 15。
+ },
+ toolbox: {
+ show: false,
+ feature: {
+ restore: { show: true },
+ saveAsImage: { show: true }
+ }
+ },
+ series: [
+ {
+ name: '峰值',
+ type: 'gauge',
+ min: 0,
+ max: 50,
+ splitNumber: 10,
+ //这是指针的颜色
+ color: '#F5C74E',
+ radius: '85%',
+ center: ['50%', '50%'],
+ startAngle: 225,
+ endAngle: -45,
+ axisLine: {
+ // 坐标轴线
+ lineStyle: {
+ // 属性lineStyle控制线条样式
+ color: [
+ [0.2, '#7FFF00'],
+ [0.8, '#00FFFF'],
+ [1, '#FF0000']
+ ],
+ //width: 6 外框的大小（环的宽度）
+ width: 10
+ }
+ },
+ axisTick: {
+ // 坐标轴小标记
+ //里面的线长是5（短线）
+ length: 5, // 属性length控制线长
+ lineStyle: {
+ // 属性lineStyle控制线条样式
+ color: '#76D9D7'
+ }
+ },
+ splitLine: {
+ // 分隔线
+ length: 20, // 属性length控制线长
+ lineStyle: {
+ // 属性lineStyle（详见lineStyle）控制线条样式
+ color: '#76D9D7'
+ }
+ },
+ axisLabel: {
+ color: '#76D9D7',
+ distance: 15,
+ fontSize: 15
+ },
+ pointer: {
+ //指针的大小
+ width: 7,
+ show: true
+ },
+ detail: {
+ textStyle: {
+ fontWeight: 'normal',
+ //里面文字下的数值大小（50）
+ fontSize: 15,
+ color: '#FFFFFF'
+ },
+ valueAnimation: true
+ },
+ progress: {
+ show: true
}
- },
- series: [
- {
- name: '命令',
- type: 'pie',
- radius: [20, 120],
- center: ['40%', '60%'],
- data: commandStats,
- roseType: 'radius',
+ }
+ ]
+})
+
+// 指令使用情况
+const commandStatsRefChika = reactive({
+ title: {
+ text: '命令统计',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ type: 'scroll',
+ orient: 'vertical',
+ right: 30,
+ top: 10,
+ bottom: 20,
+ data: [] as any[],
+ textStyle: {
+ color: '#a1a1a1'
+ }
+ },
+ series: [
+ {
+ name: '命令',
+ type: 'pie',
+ radius: [20, 120],
+ center: ['40%', '60%'],
+ data: [] as any[],
+ roseType: 'radius',
+ label: {
+ show: true
+ },
+ emphasis: {
label: {
show: true
},
- emphasis: {
- label: {
- show: true
- },
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
- ]
- })
+ }
+ ]
+})
- const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
- usedMemoryInstance.setOption({
- title: {
- text: '内存使用情况',
- left: 'center'
- },
- tooltip: {
- formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
- },
- series: [
- {
- name: '峰值',
- type: 'gauge',
- min: 0,
- max: 100,
- progress: {
- show: true
- },
- detail: {
- formatter: cache.value!.info.used_memory_human
- },
- data: [
- {
- value: parseFloat(cache.value!.info.used_memory_human),
- name: '内存消耗'
- }
- ]
- }
- ]
- })
+/** 加载数据 */
+const getSummary = () => {
+ //初始化命令图表
+ initcommandStatsChart()
+ usedMemoryInstance()
}
-onBeforeMount(() => {
+/** 命令使用情况 */
+const initcommandStatsChart = async () => {
+ usedmemoryEchartChika.series[0].data = []
+ // 发起请求
+ try {
+ const data = await RedisApi.getCache()
+ cache.value = data
+ // 处理数据
+ const commandStats = [] as any[]
+ const nameList = [] as string[]
+ data.commandStats.forEach((row) => {
+ commandStats.push({
+ name: row.command,
+ value: row.calls
+ })
+ nameList.push(row.command)
+ })
+ commandStatsRefChika.legend.data = nameList
+ commandStatsRefChika.series[0].data = commandStats
+ } catch {}
+}
+const usedMemoryInstance = async () => {
+ try {
+ const data = await RedisApi.getCache()
+ cache.value = data
+ // 仪表盘详情，用于显示数据。
+ usedmemoryEchartChika.series[0].detail = {
+ show: true, // 是否显示详情,默认 true。
+ offsetCenter: [0, '50%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
+ color: 'auto', // 文字的颜色,默认 auto。
+ fontSize: 30, // 文字的字体大小,默认 15。
+ formatter: cache.value!.info.used_memory_human // 格式化函数或者字符串
+ }
+
+ usedmemoryEchartChika.series[0].data[0] = {
+ value: cache.value!.info.used_memory_human,
+ name: '内存消耗'
+ }
+ usedmemoryEchartChika.tooltip = {
+ formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
+ }
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
readRedisInfo()
+ // 加载数据
+ getSummary()
})
</script>