Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
99fddfec by 蔡俊立
Options

主机监控

1 parent 9304bc85
Inline Side-by-side
Showing 2 changed files with 177 additions and 11 deletions
...@@ -23,3 +23,14 @@ export function getOperationLogList (data) { ...@@ -23,3 +23,14 @@ export function getOperationLogList (data) {
23 showLoading: true 23 showLoading: true
24 }) 24 })
25 } 25 }
26
27 /*
28 系统监控 -主机监控
29 */
30 export function getServerInfo () {
31 return request({
32 url: SERVER.SERVERAPI + '/rest/xtjk/view/getServerInfo',
33 method: 'get',
34 showLoading: true
35 })
36 }
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <el-row :gutter="20"> 3 <el-row :gutter="20">
4 <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> 4 <el-col :span="12">
5 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> 5 <el-card class="box-card">
6 <div slot="header" class="clearfix">
7 <span class="font-border">CPU</span>
8 </div>
9 <div class="flex-display">
10 <div class="width-50 font-border">属性</div>
11 <div class="font-border">值</div>
12 </div>
13 <div class="flex-display">
14 <div class="width-50">核心数</div>
15 <div>{{serverData.xtjkCpu.cpuNum}}</div>
16 </div>
17 <div class="flex-display">
18 <div class="width-50">用户使用率</div>
19 <div>{{serverData.xtjkCpu.used}}%</div>
20 </div>
21 <div class="flex-display">
22 <div class="width-50">系统使用率</div>
23 <div>{{serverData.xtjkCpu.sys}}%</div>
24 </div>
25 <div class="flex-display">
26 <div class="width-50">当前空闲率</div>
27 <div>{{serverData.xtjkCpu.free}}%</div>
28 </div>
29 </el-card>
30 </el-col>
31 <el-col :span="12">
32 <el-card class="box-card">
33 <div slot="header" class="clearfix">
34 <span class="font-border">内存</span>
35 </div>
36 <div class="flex-display">
37 <div class="width-33 font-border">属性</div>
38 <div class="width-33 font-border">内存</div>
39 <div class="font-border">JVM</div>
40 </div>
41 <div class="flex-display">
42 <div class="width-33">总内存</div>
43 <div class="width-33">{{serverData.xtjkMem.total}}G</div>
44 <div>{{serverData.xtjkJvm.total}}M</div>
45 </div>
46 <div class="flex-display">
47 <div class="width-33">已用内存</div>
48 <div class="width-33">{{serverData.xtjkMem.used}}G</div>
49 <div>{{serverData.xtjkJvm.used}}M</div>
50 </div>
51 <div class="flex-display">
52 <div class="width-33">剩余内存</div>
53 <div class="width-33">{{serverData.xtjkMem.free}}G</div>
54 <div>{{serverData.xtjkJvm.free}}M</div>
55 </div>
56 <div class="flex-display">
57 <div class="width-33">使用率</div>
58 <div class="width-33">{{serverData.xtjkMem.usage}}%</div>
59 <div>{{serverData.xtjkJvm.usage}}%</div>
60 </div>
61 </el-card>
62 </el-col>
6 </el-row> 63 </el-row>
7 <el-row :gutter="20"> 64 <el-row :gutter="20">
8 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> 65 <el-col :span="24">
9 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> 66 <el-card class="box-card">
10 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 67 <div slot="header" class="clearfix">
11 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 68 <span class=" font-border">服务器信息</span>
69 </div>
70 <div class="flex-display">
71 <div class="width-25 font-border">服务器名称</div>
72 <div class="width-25">{{serverData.xtjkSys.computerName}}</div>
73 <div class="width-25 font-border">操作系统</div>
74 <div>{{serverData.xtjkSys.osName}}</div>
75 </div>
76 <div class="flex-display">
77 <div class="width-25 font-border">服务器IP</div>
78 <div class="width-25">{{serverData.xtjkSys.computerIp}}</div>
79 <div class="width-25 font-border">系统架构</div>
80 <div>{{serverData.xtjkSys.osArch}}</div>
81 </div>
82 </el-card>
83 </el-col>
12 </el-row> 84 </el-row>
13 <el-row :gutter="20"> 85 <el-row :gutter="20">
14 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 86 <el-col :span="24">
15 <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> 87 <el-card class="box-card">
16 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 88 <div slot="header" class="clearfix">
89 <span class=" font-border">Java虚拟机信息</span>
90 </div>
91 <div class="flex-display">
92 <div class="width-25 font-border">Java名称</div>
93 <div class="width-25">{{serverData.xtjkJvm.name}}</div>
94 <div class="width-25 font-border">Java版本</div>
95 <div>{{serverData.xtjkJvm.version}}</div>
96 </div>
97 <div class="flex-display">
98 <div class="width-25 font-border">启动时间</div>
99 <div class="width-25">{{serverData.xtjkSys.computerName}}</div>
100 <div class="width-25 font-border">运行时长</div>
101 <div>{{serverData.xtjkSys.osName}}</div>
102 </div>
103 <div class="flex-display">
104 <div class="width-25 font-border">安装路径</div>
105 <div>{{serverData.xtjkJvm.home}}</div>
106 </div>
107 <div class="flex-display">
108 <div class="width-25 font-border">项目路径</div>
109 <div>{{serverData.xtjkSys.userDir}}</div>
110 </div>
111 </el-card>
112 </el-col>
113 </el-row>
114 <el-row :gutter="20">
115 <el-col :span="24">
116 <el-card class="box-card">
117 <div slot="header" class="clearfix">
118 <span class=" font-border">磁盘信息</span>
119 </div>
120 <div>
121 <el-table :data="serverData.sysFiles" stripe style="width: 100%">
122 <el-table-column prop="dirName" label="盘符路径" width="180"></el-table-column>
123 <el-table-column prop="sysTypeName" label="文件系统" width="180"></el-table-column>
124 <el-table-column prop="typeName" label="盘符类型"></el-table-column>
125 <el-table-column prop="total" label="总大小"></el-table-column>
126 <el-table-column prop="free" label="可用大小"></el-table-column>
127 <el-table-column prop="used" label="已用大小"></el-table-column>
128 <el-table-column prop="usage" label="已用百分比"></el-table-column>
129 </el-table>
130 </div>
131 </el-card>
132 </el-col>
17 </el-row> 133 </el-row>
18 </div> 134 </div>
19 </template> 135 </template>
20 <script> 136 <script>
137 import table from "@/utils/mixin/table"
138 import { getServerInfo } from "@/api/xtjk.js"
21 export default { 139 export default {
22 name: "zjjk", 140 name: "zjjk",
23 components: { }, 141 components: { },
142 mixins: [table],
143 mounted () {
144 //sendThis(this);
145 },
24 computed: { 146 computed: {
25 }, 147 },
26 data () { 148 data () {
27 return { 149 return {
28 150 serverData: {}
29 }; 151 };
30 }, 152 },
31 methods: { 153 methods: {
32 154 init (e) {
155 this.fetchData()
156 },
157 // 列表渲染接口
158 fetchData () {
159 getServerInfo().then(res => {
160 if (res.code === 200) {
161 this.serverData = res.result
162 }
163 })
164 },
33 } 165 }
34 }; 166 };
35 </script> 167 </script>
36 <style scoped lang="scss"> 168 <style scoped lang="scss">
37 @import "~@/styles/public.scss"; 169 @import "~@/styles/public.scss";
170 .box-card{
171 margin: 5px 10px 10px 5px;
172 }
173 .flex-display {
174 display: flex;
175 margin-bottom: 10px;
176 border-bottom: 1px solid #e6ebf5;
177 }
178 .width-50 {
179 width: 50%;
180 padding-bottom: 10px;
181 }
182 .width-33 {
183 width: 33%;
184 padding-bottom: 10px;
185 }
186 .width-25 {
187 width: 25%;
188 padding-bottom: 10px;
189 }
190 .font-border {
191 font-weight: bolder
192 }
38 </style> 193 </style>
39 194
......