| 提交 | 用户 | 时间 | ||
| 759b1c | 1 | <template> |
| H | 2 | <div class="app-container"> |
| 3 | <el-row> | |
| 4 | <el-col :span="24" class="card-box"> | |
| 5 | <el-card> | |
| 6 | <div slot="header"><span>基本信息</span></div> | |
| 7 | <div class="el-table el-table--enable-row-hover el-table--medium"> | |
| 8 | <table cellspacing="0" style="width: 100%"> | |
| 9 | <tbody> | |
| 10 | <tr> | |
| 11 | <td><div class="cell">Redis版本</div></td> | |
| 12 | <td><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td> | |
| 13 | <td><div class="cell">运行模式</div></td> | |
| 14 | <td><div class="cell" v-if="cache.info">{{ cache.info.redis_mode === "standalone" ? "单机" : "集群" }}</div></td> | |
| 15 | <td><div class="cell">端口</div></td> | |
| 16 | <td><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td> | |
| 17 | <td><div class="cell">客户端数</div></td> | |
| 18 | <td><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td> | |
| 19 | </tr> | |
| 20 | <tr> | |
| 21 | <td><div class="cell">运行时间(天)</div></td> | |
| 22 | <td><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td> | |
| 23 | <td><div class="cell">使用内存</div></td> | |
| 24 | <td><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td> | |
| 25 | <td><div class="cell">使用CPU</div></td> | |
| 26 | <td><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td> | |
| 27 | <td><div class="cell">内存配置</div></td> | |
| 28 | <td><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td> | |
| 29 | </tr> | |
| 30 | <tr> | |
| 31 | <td><div class="cell">AOF是否开启</div></td> | |
| 32 | <td><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled === "0" ? "否" : "是" }}</div></td> | |
| 33 | <td><div class="cell">RDB是否成功</div></td> | |
| 34 | <td><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td> | |
| 35 | <td><div class="cell">Key数量</div></td> | |
| 36 | <td><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td> | |
| 37 | <td><div class="cell">网络入口/出口</div></td> | |
| 38 | <td><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td> | |
| 39 | </tr> | |
| 40 | </tbody> | |
| 41 | </table> | |
| 42 | </div> | |
| 43 | </el-card> | |
| 44 | </el-col> | |
| 45 | ||
| 46 | <el-col :span="12" class="card-box"> | |
| 47 | <el-card> | |
| 48 | <div slot="header"><span>命令统计</span></div> | |
| 49 | <div class="el-table el-table--enable-row-hover el-table--medium"> | |
| 50 | <div ref="commandstats" style="height: 420px" /> | |
| 51 | </div> | |
| 52 | </el-card> | |
| 53 | </el-col> | |
| 54 | ||
| 55 | <el-col :span="12" class="card-box"> | |
| 56 | <el-card> | |
| 57 | <div slot="header"> | |
| 58 | <span>内存信息</span> | |
| 59 | </div> | |
| 60 | <div class="el-table el-table--enable-row-hover el-table--medium"> | |
| 61 | <div ref="usedmemory" style="height: 420px" /> | |
| 62 | </div> | |
| 63 | </el-card> | |
| 64 | </el-col> | |
| 65 | </el-row> | |
| 66 | </div> | |
| 67 | </template> | |
| 68 | ||
| 69 | <script> | |
| 70 | import { getCache } from "@/api/infra/redis"; | |
| 71 | import * as echarts from 'echarts' | |
| 72 | require('echarts/theme/macarons') // echarts theme | |
| 73 | export default { | |
| 74 | name: "InfraRedis", | |
| 75 | data () { | |
| 76 | return { | |
| 77 | // 统计命令信息 | |
| 78 | commandstats: null, | |
| 79 | // 使用内存 | |
| 80 | usedmemory: null, | |
| 81 | // cache 信息 | |
| 82 | cache: [] | |
| 83 | }; | |
| 84 | }, | |
| 85 | created () { | |
| 86 | this.getList(); | |
| 87 | this.openLoading(); | |
| 88 | }, | |
| 89 | methods: { | |
| 90 | /** 查缓存询信息 */ | |
| 91 | getList () { | |
| 92 | // 查询 Redis 监控信息 | |
| 93 | getCache().then((response) => { | |
| 94 | this.cache = response.data; | |
| 95 | this.$modal.closeLoading(); | |
| 96 | ||
| 97 | this.commandstats = echarts.init(this.$refs.commandstats, "macarons"); | |
| 98 | const commandStats = []; | |
| 99 | response.data.commandStats.forEach(row => { | |
| 100 | commandStats.push({ | |
| 101 | name: row.command, | |
| 102 | value: row.calls | |
| 103 | }); | |
| 104 | }) | |
| 105 | this.commandstats.setOption({ | |
| 106 | tooltip: { | |
| 107 | trigger: "item", | |
| 108 | formatter: "{a} <br/>{b} : {c} ({d}%)", | |
| 109 | }, | |
| 110 | series: [ | |
| 111 | { | |
| 112 | name: "命令", | |
| 113 | type: "pie", | |
| 114 | roseType: "radius", | |
| 115 | radius: [15, 95], | |
| 116 | center: ["50%", "38%"], | |
| 117 | data: commandStats, | |
| 118 | animationEasing: "cubicInOut", | |
| 119 | animationDuration: 1000, | |
| 120 | }, | |
| 121 | ], | |
| 122 | }); | |
| 123 | this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons"); | |
| 124 | this.usedmemory.setOption({ | |
| 125 | tooltip: { | |
| 126 | formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human, | |
| 127 | }, | |
| 128 | series: [ | |
| 129 | { | |
| 130 | name: "峰值", | |
| 131 | type: "gauge", | |
| 132 | min: 0, | |
| 133 | max: 1000, | |
| 134 | detail: { | |
| 135 | formatter: this.cache.info.used_memory_human, | |
| 136 | }, | |
| 137 | data: [ | |
| 138 | { | |
| 139 | value: parseFloat(this.cache.info.used_memory_human), | |
| 140 | name: "内存消耗", | |
| 141 | }, | |
| 142 | ], | |
| 143 | }, | |
| 144 | ], | |
| 145 | }); | |
| 146 | }); | |
| 147 | }, | |
| 148 | ||
| 149 | // 打开加载层 | |
| 150 | openLoading () { | |
| 151 | this.$modal.loading("正在加载缓存监控数据，请稍后！"); | |
| 152 | } | |
| 153 | }, | |
| 154 | }; | |
| 155 | </script> | |
