工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
3     <el-row>
4       <!-- 基本信息 -->
5       <el-col :span="24" class="card-box" shadow="hover">
6         <el-card>
7           <el-descriptions title="基本信息" :column="6" border>
8             <el-descriptions-item label="Redis版本 :">
9               {{ cache?.info?.redis_version }}
10             </el-descriptions-item>
11             <el-descriptions-item label="运行模式 :">
12               {{ cache?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
13             </el-descriptions-item>
14             <el-descriptions-item label="端口 :">
15               {{ cache?.info?.tcp_port }}
16             </el-descriptions-item>
17             <el-descriptions-item label="客户端数 :">
18               {{ cache?.info?.connected_clients }}
19             </el-descriptions-item>
20             <el-descriptions-item label="运行时间(天) :">
21               {{ cache?.info?.uptime_in_days }}
22             </el-descriptions-item>
23             <el-descriptions-item label="使用内存 :">
24               {{ cache?.info?.used_memory_human }}
25             </el-descriptions-item>
26             <el-descriptions-item label="使用CPU :">
27               {{ cache?.info ? parseFloat(cache?.info?.used_cpu_user_children).toFixed(2) : '' }}
28             </el-descriptions-item>
29             <el-descriptions-item label="内存配置 :">
30               {{ cache?.info?.maxmemory_human }}
31             </el-descriptions-item>
32             <el-descriptions-item label="AOF是否开启 :">
33               {{ cache?.info?.aof_enabled == '0' ? '否' : '是' }}
34             </el-descriptions-item>
35             <el-descriptions-item label="RDB是否成功 :">
36               {{ cache?.info?.rdb_last_bgsave_status }}
37             </el-descriptions-item>
38             <el-descriptions-item label="Key数量 :">
39               {{ cache?.dbSize }}
40             </el-descriptions-item>
41             <el-descriptions-item label="网络入口/出口 :">
42               {{ cache?.info?.instantaneous_input_kbps }}kps/
43               {{ cache?.info?.instantaneous_output_kbps }}kps
44             </el-descriptions-item>
45           </el-descriptions>
46         </el-card>
47       </el-col>
48       <!-- 命令统计 -->
49       <el-col :span="12" class="mt-3">
50         <el-card :gutter="12" shadow="hover">
51           <Echart :options="commandStatsRefChika" :height="420" />
52         </el-card>
53       </el-col>
54       <!-- 内存使用量统计 -->
55       <el-col :span="12" class="mt-3">
56         <el-card class="ml-3" :gutter="12" shadow="hover">
57           <Echart :options="usedmemoryEchartChika" :height="420" />
58         </el-card>
59       </el-col>
60     </el-row>
61   </el-scrollbar>
62 </template>
63 <script lang="ts" setup>
64 import * as RedisApi from '@/api/infra/redis'
65 import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
66 const cache = ref<RedisMonitorInfoVO>()
67
68 // 基本信息
69 const readRedisInfo = async () => {
70   const data = await RedisApi.getCache()
71   cache.value = data
72 }
73
74 // 内存使用情况
75 const usedmemoryEchartChika = reactive<any>({
76   title: {
77     // 仪表盘标题。
78     text: '内存使用情况',
79     left: 'center',
80     show: true, // 是否显示标题,默认 true。
81     offsetCenter: [0, '20%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
82     color: 'yellow', // 文字的颜色,默认 #333。
83     fontSize: 20 // 文字的字体大小,默认 15。
84   },
85   toolbox: {
86     show: false,
87     feature: {
88       restore: { show: true },
89       saveAsImage: { show: true }
90     }
91   },
92   series: [
93     {
94       name: '峰值',
95       type: 'gauge',
96       min: 0,
97       max: 50,
98       splitNumber: 10,
99       //这是指针的颜色
100       color: '#F5C74E',
101       radius: '85%',
102       center: ['50%', '50%'],
103       startAngle: 225,
104       endAngle: -45,
105       axisLine: {
106         // 坐标轴线
107         lineStyle: {
108           // 属性lineStyle控制线条样式
109           color: [
110             [0.2, '#7FFF00'],
111             [0.8, '#00FFFF'],
112             [1, '#FF0000']
113           ],
114           //width: 6 外框的大小（环的宽度）
115           width: 10
116         }
117       },
118       axisTick: {
119         // 坐标轴小标记
120         //里面的线长是5（短线）
121         length: 5, // 属性length控制线长
122         lineStyle: {
123           // 属性lineStyle控制线条样式
124           color: '#76D9D7'
125         }
126       },
127       splitLine: {
128         // 分隔线
129         length: 20, // 属性length控制线长
130         lineStyle: {
131           // 属性lineStyle（详见lineStyle）控制线条样式
132           color: '#76D9D7'
133         }
134       },
135       axisLabel: {
136         color: '#76D9D7',
137         distance: 15,
138         fontSize: 15
139       },
140       pointer: {
141         // 指针的大小
142         width: 7,
143         show: true
144       },
145       detail: {
146         textStyle: {
147           fontWeight: 'normal',
148           // 里面文字下的数值大小（50）
149           fontSize: 15,
150           color: '#FFFFFF'
151         },
152         valueAnimation: true
153       },
154       progress: {
155         show: true
156       }
157     }
158   ]
159 })
160
161 // 指令使用情况
162 const commandStatsRefChika = reactive({
163   title: {
164     text: '命令统计',
165     left: 'center'
166   },
167   tooltip: {
168     trigger: 'item',
169     formatter: '{a} <br/>{b} : {c} ({d}%)'
170   },
171   legend: {
172     type: 'scroll',
173     orient: 'vertical',
174     right: 30,
175     top: 10,
176     bottom: 20,
177     data: [] as any[],
178     textStyle: {
179       color: '#a1a1a1'
180     }
181   },
182   series: [
183     {
184       name: '命令',
185       type: 'pie',
186       radius: [20, 120],
187       center: ['40%', '60%'],
188       data: [] as any[],
189       roseType: 'radius',
190       label: {
191         show: true
192       },
193       emphasis: {
194         label: {
195           show: true
196         },
197         itemStyle: {
198           shadowBlur: 10,
199           shadowOffsetX: 0,
200           shadowColor: 'rgba(0, 0, 0, 0.5)'
201         }
202       }
203     }
204   ]
205 })
206
207 /** 加载数据 */
208 const getSummary = () => {
209   // 初始化命令图表
210   initCommandStatsChart()
211   usedMemoryInstance()
212 }
213
214 /** 命令使用情况 */
215 const initCommandStatsChart = async () => {
216   usedmemoryEchartChika.series[0].data = []
217   // 发起请求
218   try {
219     const data = await RedisApi.getCache()
220     cache.value = data
221     // 处理数据
222     const commandStats = [] as any[]
223     const nameList = [] as string[]
224     data.commandStats.forEach((row) => {
225       commandStats.push({
226         name: row.command,
227         value: row.calls
228       })
229       nameList.push(row.command)
230     })
231     commandStatsRefChika.legend.data = nameList
232     commandStatsRefChika.series[0].data = commandStats
233   } catch {}
234 }
235 const usedMemoryInstance = async () => {
236   try {
237     const data = await RedisApi.getCache()
238     cache.value = data
239     // 仪表盘详情，用于显示数据。
240     usedmemoryEchartChika.series[0].detail = {
241       show: true, // 是否显示详情,默认 true。
242       offsetCenter: [0, '50%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
243       color: 'auto', // 文字的颜色,默认 auto。
244       fontSize: 30, // 文字的字体大小,默认 15。
245       formatter: cache.value!.info.used_memory_human // 格式化函数或者字符串
246     }
247
248     usedmemoryEchartChika.series[0].data[0] = {
249       value: cache.value!.info.used_memory_human,
250       name: '内存消耗'
251     }
252     console.log(cache.value!.info)
253     usedmemoryEchartChika.tooltip = {
254       formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
255     }
256   } catch {}
257 }
258
259 /** 初始化 **/
260 onMounted(() => {
261   // 读取 redis 信息
262   readRedisInfo()
263   // 加载数据
264   getSummary()
265 })
266 </script>