cl
2024-02-28 26c51e363815011b09411ae74eb8c5f9d2ea8404
提交 | 用户 | 时间
e57a89 1 <template>
2   <div class="app-container">
3     <el-row>
4       <el-col :span="12" class="card-box">
5         <el-card>
6           <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
7           <div class="el-table el-table--enable-row-hover el-table--medium">
8             <table cellspacing="0" style="width: 100%;">
9               <thead>
10                 <tr>
11                   <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
12                   <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
13                 </tr>
14               </thead>
15               <tbody>
16                 <tr>
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="server.cpu">{{ server.cpu.cpuNum }}</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="server.cpu">{{ server.cpu.used }}%</div></td>
23                 </tr>
24                 <tr>
25                   <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
26                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
27                 </tr>
28                 <tr>
29                   <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
30                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
31                 </tr>
32               </tbody>
33             </table>
34           </div>
35         </el-card>
36       </el-col>
37
38       <el-col :span="12" class="card-box">
39         <el-card>
40           <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
41           <div class="el-table el-table--enable-row-hover el-table--medium">
42             <table cellspacing="0" style="width: 100%;">
43               <thead>
44                 <tr>
45                   <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
46                   <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
47                   <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
48                 </tr>
49               </thead>
50               <tbody>
51                 <tr>
52                   <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
53                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
54                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
55                 </tr>
56                 <tr>
57                   <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
58                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
59                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
60                 </tr>
61                 <tr>
62                   <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
63                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
64                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
65                 </tr>
66                 <tr>
67                   <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
68                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
69                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
70                 </tr>
71               </tbody>
72             </table>
73           </div>
74         </el-card>
75       </el-col>
76
77       <el-col :span="24" class="card-box">
78         <el-card>
79           <div slot="header">
80             <span><i class="el-icon-monitor"></i> 服务器信息</span>
81           </div>
82           <div class="el-table el-table--enable-row-hover el-table--medium">
83             <table cellspacing="0" style="width: 100%;">
84               <tbody>
85                 <tr>
86                   <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
87                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
88                   <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
89                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
90                 </tr>
91                 <tr>
92                   <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
93                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
94                   <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
95                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
96                 </tr>
97               </tbody>
98             </table>
99           </div>
100         </el-card>
101       </el-col>
102
103       <el-col :span="24" class="card-box">
104         <el-card>
105           <div slot="header">
106             <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>
107           </div>
108           <div class="el-table el-table--enable-row-hover el-table--medium">
109             <table cellspacing="0" style="width: 100%;table-layout:fixed;">
110               <tbody>
111                 <tr>
112                   <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
113                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
114                   <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
115                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
116                 </tr>
117                 <tr>
118                   <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
119                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
120                   <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
121                   <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
122                 </tr>
123                 <tr>
124                   <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
125                   <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
126                 </tr>
127                 <tr>
128                   <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
129                   <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
130                 </tr>
131                 <tr>
132                   <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
133                   <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
134                 </tr>
135               </tbody>
136             </table>
137           </div>
138         </el-card>
139       </el-col>
140
141       <el-col :span="24" class="card-box">
142         <el-card>
143           <div slot="header">
144             <span><i class="el-icon-receiving"></i> 磁盘状态</span>
145           </div>
146           <div class="el-table el-table--enable-row-hover el-table--medium">
147             <table cellspacing="0" style="width: 100%;">
148               <thead>
149                 <tr>
150                   <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
151                   <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
152                   <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
153                   <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
154                   <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
155                   <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
156                   <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
157                 </tr>
158               </thead>
159               <tbody v-if="server.sysFiles">
160                 <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
161                   <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
162                   <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
163                   <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
164                   <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
165                   <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
166                   <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
167                   <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
168                 </tr>
169               </tbody>
170             </table>
171           </div>
172         </el-card>
173       </el-col>
174     </el-row>
175   </div>
176 </template>
177
178 <script>
179 import { getServer } from "@/api/monitor/server";
180
181 export default {
182   name: "Server",
183   data() {
184     return {
185       // 服务器信息
186       server: []
187     };
188   },
189   created() {
190     this.getList();
191     this.openLoading();
192   },
193   methods: {
194     /** 查询服务器信息 */
195     getList() {
196       getServer().then(response => {
197         this.server = response.data;
198         this.$modal.closeLoading();
199       });
200     },
201     // 打开加载层
202     openLoading() {
203       this.$modal.loading("正在加载服务监控数据,请稍候!");
204     }
205   }
206 };
207 </script>