mirror of
				https://gitee.com/hhyykk/ipms-sjy-ui.git
				synced 2025-10-31 02:08:45 +08:00 
			
		
		
		
	!148 【重构】Vue3 管理后台:[基础管理 -> Redis监控] 使用Echart组件实现
This commit is contained in:
		| @@ -330,28 +330,6 @@ 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', |     path: '/property', | ||||||
|     component: Layout, |     component: Layout, | ||||||
|   | |||||||
| @@ -68,8 +68,6 @@ import { GaugeChart } from 'echarts/charts' | |||||||
| import { ToolboxComponent } from 'echarts/components' | import { ToolboxComponent } from 'echarts/components' | ||||||
| import * as RedisApi from '@/api/infra/redis' | import * as RedisApi from '@/api/infra/redis' | ||||||
| import { RedisMonitorInfoVO } from '@/api/infra/redis/types' | import { RedisMonitorInfoVO } from '@/api/infra/redis/types' | ||||||
| echarts.use([ToolboxComponent]) |  | ||||||
| echarts.use([GaugeChart]) |  | ||||||
| const cache = ref<RedisMonitorInfoVO>() | const cache = ref<RedisMonitorInfoVO>() | ||||||
|  |  | ||||||
| // 基本信息 | // 基本信息 | ||||||
| @@ -145,14 +143,14 @@ const usedmemoryEchartChika = reactive({ | |||||||
|         fontSize: 15 |         fontSize: 15 | ||||||
|       }, |       }, | ||||||
|       pointer: { |       pointer: { | ||||||
|         //指针的大小 |         // 指针的大小 | ||||||
|         width: 7, |         width: 7, | ||||||
|         show: true |         show: true | ||||||
|       }, |       }, | ||||||
|       detail: { |       detail: { | ||||||
|         textStyle: { |         textStyle: { | ||||||
|           fontWeight: 'normal', |           fontWeight: 'normal', | ||||||
|           //里面文字下的数值大小(50) |           // 里面文字下的数值大小(50) | ||||||
|           fontSize: 15, |           fontSize: 15, | ||||||
|           color: '#FFFFFF' |           color: '#FFFFFF' | ||||||
|         }, |         }, | ||||||
| @@ -213,13 +211,13 @@ const commandStatsRefChika = reactive({ | |||||||
|  |  | ||||||
| /** 加载数据 */ | /** 加载数据 */ | ||||||
| const getSummary = () => { | const getSummary = () => { | ||||||
|   //初始化命令图表 |   // 初始化命令图表 | ||||||
|   initcommandStatsChart() |   initCommandStatsChart() | ||||||
|   usedMemoryInstance() |   usedMemoryInstance() | ||||||
| } | } | ||||||
|  |  | ||||||
| /** 命令使用情况 */ | /** 命令使用情况 */ | ||||||
| const initcommandStatsChart = async () => { | const initCommandStatsChart = async () => { | ||||||
|   usedmemoryEchartChika.series[0].data = [] |   usedmemoryEchartChika.series[0].data = [] | ||||||
|   // 发起请求 |   // 发起请求 | ||||||
|   try { |   try { | ||||||
| @@ -265,6 +263,9 @@ const usedMemoryInstance = async () => { | |||||||
|  |  | ||||||
| /** 初始化 **/ | /** 初始化 **/ | ||||||
| onMounted(() => { | onMounted(() => { | ||||||
|  |   echarts.use([ToolboxComponent]) | ||||||
|  |   echarts.use([GaugeChart]) | ||||||
|  |   // 读取 redis 信息 | ||||||
|   readRedisInfo() |   readRedisInfo() | ||||||
|   // 加载数据 |   // 加载数据 | ||||||
|   getSummary() |   getSummary() | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 YunaiV
					YunaiV