缓存监控

ruoyi-admin-vue/src/views/monitor/cache/index.vue

 <template>
   <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%">
-              <tbody>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
+    <div class="page-container-noback flex1">
+       <el-row :gutter="10" >
+          <el-col :span="24" class="card-box">
+            <el-card>
+              <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
+              <div class="el-table el-table--enable-row-hover el-table--medium">
+                <table cellspacing="0" style="width: 100%">
+                  <tbody>
+                    <tr>
+                      <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
+                    </tr>
+                    <tr>
+                      <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
+                    </tr>
+                    <tr>
+                      <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
+                      <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </el-card>
+          </el-col>
 
-      <el-col :span="12" class="card-box">
-        <el-card>
-          <div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="commandstats" style="height: 420px" />
-          </div>
-        </el-card>
-      </el-col>
+         
+        </el-row>
+        <el-row :gutter="10" style="flex: 1;">
+           <el-col :span="12" class="card-box" style="height: 100%;">
+            <el-card  style="height: 100%;">
+              <div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div>
+              <div class="el-table el-table--enable-row-hover el-table--medium">
+                <div ref="commandstats" style="height: 420px" />
+              </div>
+            </el-card>
+          </el-col>
 
-      <el-col :span="12" class="card-box">
-        <el-card>
-          <div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="usedmemory" style="height: 420px" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
+          <el-col :span="12" class="card-box" style="height: 100%;">
+            <el-card  style="height: 100%;">
+              <div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div>
+              <div class="el-table el-table--enable-row-hover el-table--medium">
+                <div ref="usedmemory" style="height: 420px" />
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+    </div>
+   
   </div>
 </template>