|
@@ -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 getSummary = () => {
|
|
|
+ //初始化命令图表
|
|
|
+ initcommandStatsChart()
|
|
|
+ usedMemoryInstance()
|
|
|
+}
|
|
|
+
|
|
|
+/** 命令使用情况 */
|
|
|
+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 // 格式化函数或者字符串
|
|
|
+ }
|
|
|
|
|
|
- const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
|
|
|
- usedMemoryInstance.setOption({
|
|
|
- title: {
|
|
|
- text: '内存使用情况',
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
+ 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
|
|
|
- },
|
|
|
- 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: '内存消耗'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
+ }
|
|
|
+ } catch {}
|
|
|
}
|
|
|
|
|
|
-onBeforeMount(() => {
|
|
|
+/** 初始化 **/
|
|
|
+onMounted(() => {
|
|
|
readRedisInfo()
|
|
|
+ // 加载数据
|
|
|
+ getSummary()
|
|
|
})
|
|
|
</script>
|