春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
jiang
2024-01-24 ed7f09e0376d542bfddb05268f0081ba89a86868
提交 | 用户 | 时间
fd2207 1 <template>
懒 2   <div class="app-container">
3     <el-row>
4       <el-col :span="24" class="card-box">
5         <el-card>
6           <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</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 class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
12                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
13                   <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
14                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
15                   <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
16                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
17                   <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
18                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
19                 </tr>
20                 <tr>
21                   <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
22                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
23                   <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
24                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
25                   <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
26                   <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>
27                   <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
28                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
29                 </tr>
30                 <tr>
31                   <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
32                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
33                   <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
34                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
35                   <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
36                   <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
37                   <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
38                   <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>
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><i class="el-icon-pie-chart"></i> 命令统计</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"><span><i class="el-icon-odometer"></i> 内存信息</span></div>
58           <div class="el-table el-table--enable-row-hover el-table--medium">
59             <div ref="usedmemory" style="height: 420px" />
60           </div>
61         </el-card>
62       </el-col>
63     </el-row>
64   </div>
65 </template>
66
67 <script>
68 import { getCache } from "@/api/monitor/cache";
69 import * as echarts from "echarts";
70
71 export default {
72   name: "Cache",
73   data() {
74     return {
75       // 统计命令信息
76       commandstats: null,
77       // 使用内存
78       usedmemory: null,
79       // cache信息
80       cache: []
81     }
82   },
83   created() {
84     this.getList();
85     this.openLoading();
86   },
87   methods: {
88     /** 查缓存询信息 */
89     getList() {
90       getCache().then((response) => {
91         this.cache = response.data;
92         this.$modal.closeLoading();
93
94         this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
95         this.commandstats.setOption({
96           tooltip: {
97             trigger: "item",
98             formatter: "{a} <br/>{b} : {c} ({d}%)",
99           },
100           series: [
101             {
102               name: "命令",
103               type: "pie",
104               roseType: "radius",
105               radius: [15, 95],
106               center: ["50%", "38%"],
107               data: response.data.commandStats,
108               animationEasing: "cubicInOut",
109               animationDuration: 1000,
110             }
111           ]
112         });
113         this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
114         this.usedmemory.setOption({
115           tooltip: {
116             formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
117           },
118           series: [
119             {
120               name: "峰值",
121               type: "gauge",
122               min: 0,
123               max: 1000,
124               detail: {
125                 formatter: this.cache.info.used_memory_human,
126               },
127               data: [
128                 {
129                   value: parseFloat(this.cache.info.used_memory_human),
130                   name: "内存消耗",
131                 }
132               ]
133             }
134           ]
135         });
136         window.addEventListener("resize", () => {
137           this.commandstats.resize();
138           this.usedmemory.resize();
139         });
140       });
141     },
142     // 打开加载层
143     openLoading() {
144       this.$modal.loading("正在加载缓存监控数据，请稍候！");
145     }
146   }
147 };
148 </script>