<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="css/element-ui.css">
<title>平台服务监控中心</title>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/element-ui.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script>
<style type="text/css">
#app {
font-size: 20px;
}
.server_name_tag {
height: 60px;
font-size: 30px;
padding: 10px 20px;
border-radius: 20px;
margin: 0 20px;
color: #5daf34;
}
.el-tag.el-tag--info:hover {
color: #3a8ee6;
}
.server_info {
margin: 40px 0 0 40px;
}
.el-form-item__label {
font-size: 20px;
}
#myChart {
width: 300px;
height: 350px;
}
</style>
</head>
<body>
<div id="app" v-loading="serverLoading">
<div style="margin: 40px;color: #3a8ee6; ">
服务列表：
<span style="font-size: 25px;padding-left: 25px">当前显示服务：{{serverName}}</span>
</div>
<div style="margin: 40px">
<el-button type="primary" round plain v-for="(item,index) in serverNameList" @click="selectServeName(index)">
{{item}}
</el-button>
</div>
<div>
<el-card class="box-card" style="width: 18%;height: 380px;margin-left: 2%;float: left">
<div slot="header" class="clearfix">
<span>CPU</span>
</div>
<div class="text item">
<el-form :model="cpuInfo" label-suffix=":" label-position="left" label-width="120px">
<el-form-item label="核心数">
<span style="font-size: 20px;text-align: center">{{cpuInfo.cpuNum}}</span>
</el-form-item>
<el-form-item label="用户使用率">
<span style="font-size: 20px;text-align: center">{{cpuInfo.used}}%</span>
</el-form-item>
<el-form-item label="系统使用率">
<span style="font-size: 20px;text-align: center">{{cpuInfo.sys}}%</span>
</el-form-item>
<el-form-item label="空间率">
<span style="font-size: 20px;text-align: center">{{cpuInfo.free}}%</span>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="box-card" style="width: 18%;height: 380px;margin-left: 2%;float: left">
<div id="myChart"></div>
</el-card>
<el-card class="box-card" style="width: 18%;height: 380px;margin-left: 2%;float: left">
<div slot="header" class="clearfix">
<span>内存</span>
</div>
<div class="text item">
<el-form :model="cpuInfo" label-suffix=":" label-position="left" label-width="120px">
<el-form-item label="总内存">
<span style="font-size: 20px;text-align: center">{{memInfo.total}}G</span>
</el-form-item>
<el-form-item label="使用内存">
<span style="font-size: 20px;text-align: center">{{memInfo.used}}G</span>
</el-form-item>
<el-form-item label="剩余内存">
<span style="font-size: 20px;text-align: center">{{memInfo.free}}G</span>
</el-form-item>
<el-form-item label="内存使用率">
<span style="font-size: 20px;text-align: center">{{memInfo.usage}}%</span>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: function () {
return {
serverLoading: false,
serverNameList: ['本地测试', '基础平台'],
serverName: '本地测试',
cpuInfo: {},
memInfo: {},
// baseUrl: 'http://192.168.3.103:4712',
baseUrl: 'http://192.168.0.73:4712',
// 实时数据数组
date: [],
yieldRate: [],
// 折线图echarts初始化选项
echartsOption: {
xAxis: {
name: '',
nameTextStyle: {
fontSize: 14
},
type: 'category',
boundaryGap: false,
data: this.date, // 绑定实时数据数组
},
yAxis: {
name: '',
nameTextStyle: {
fontSize: 4
},
type: 'value',
scale: true,
boundaryGap: ['15%', '15%'],
axisLabel: {
padding: [0, 0, 0, 20], // 右边内边距10
interval: 'auto',
}
},
tooltip: {
trigger: 'axis',
},
series: [
{
name: 'CPU使用率',
type: 'line',
smooth: true,
data: this.yieldRate, // 绑定实时数据数组
},
]
}
}
},
created() {
this.yieldRate = [];
this.date = [];
this.getServer()
},
mounted() {
this.myChart = echarts.init(document.getElementById('myChart'), 'light'); // 初始化echarts, theme为light
this.myChart.setOption(this.echartsOption); // echarts设置初始化选项
// setInterval(this.addData, 3000); // 每三秒更新实时数据到折线图
setInterval(this.getServer, 3000); // 每三秒更新实时数据到折线图
},
methods: {
getServer() {
this.serverLoading = false;
var that = this;
$.ajax({
url: this.baseUrl + "/xnqbsoft-monitor/getServer",
method: 'get',
dataType: "json",
success: function (resp) {
that.cpuInfo = resp.data.cpu;
that.memInfo = resp.data.mem;
that.serverLoading = false;
if (that.yieldRate.length > 10) {
that.yieldRate.shift();
}
if (that.date.length > 10) {
that.date.shift();
}
that.yieldRate.push(that.cpuInfo.used);
that.date.push(that.getTime(Math.round(new Date().getTime() / 1000)));
that.echartsOption.xAxis.data = that.date;
that.echartsOption.series[0].data = that.yieldRate;
that.myChart.setOption(that.echartsOption);
}
})
},
selectServeName(index) {
switch (index) {
case 0:
// this.baseUrl = 'http://192.168.3.103:4712';
xnqbsoft-monitor，系统监控，查看服务器CPU内存使用情况 java源码
11 浏览量
2023-07-31
11:14:43
上传
评论
收藏 60.24MB RAR 举报
xnqbsoft-monitor.rar （73个子文件） 
WEB-INF classes 
application.properties 283B templates 
index.html 9KB static js base64.js 2KB echarts.js 2.8MB element-ui.js 573KB vue.js 336KB jquery.js 267KB css element-ui.css 233KB fonts element-icons.woff 28KB element-icons.ttf 55KB com bsoft monitor constant Constants.class 2KB XnqbsoftMonitorApplication.class 768B entry R.class 5KB controller SysController.class 1001B WebController.class 588B core text CharsetKit.class 2KB StrFormatter.class 2KB Convert.class 14KB server Server.class 8KB Jvm.class 2KB Mem.class 1KB Sys.class 1KB Cpu.class 2KB SysFile.class 2KB config WebConfig.class 2KB util DateUtil.class 5KB Arith.class 2KB StringUtil.class 9KB IpUtil.class 4KB CommonUtils.class 2KB ServletInitializer.class 929B lib 
snakeyaml-1.30.jar 324KB log4j-to-slf4j-2.17.2.jar 18KB spring-boot-starter-logging-2.7.0.jar 5KB jackson-databind-2.13.3.jar 1.47MB jna-platform-5.10.0.jar 1.28MB jakarta.annotation-api-1.3.5.jar 24KB spring-boot-starter-thymeleaf-2.7.0.jar 5KB oshi-core-6.1.2.jar 871KB spring-core-5.3.20.jar 1.41MB spring-aop-5.3.20.jar 374KB attoparser-2.0.5.RELEASE.jar 239KB jna-5.10.0.jar 1.68MB jul-to-slf4j-1.7.36.jar 4KB unbescape-1.1.6.RELEASE.jar 170KB commons-lang3-3.12.0.jar 574KB spring-boot-2.7.0.jar 1.38MB spring-boot-starter-web-2.7.0.jar 5KB jackson-datatype-jdk8-2.13.3.jar 34KB jackson-datatype-jsr310-2.13.3.jar 118KB spring-jcl-5.3.20.jar 24KB slf4j-api-1.7.36.jar 40KB spring-web-5.3.20.jar 1.56MB jackson-core-2.13.3.jar 366KB spring-expression-5.3.20.jar 283KB log4j-api-2.17.2.jar 295KB spring-webmvc-5.3.20.jar 1004KB logback-classic-1.2.11.jar 226KB thymeleaf-3.0.15.RELEASE.jar 850KB thymeleaf-extras-java8time-3.0.4.RELEASE.jar 39KB thymeleaf-spring5-3.0.15.RELEASE.jar 178KB spring-boot-starter-2.7.0.jar 5KB spring-boot-starter-json-2.7.0.jar 5KB jackson-module-parameter-names-2.13.3.jar 9KB logback-core-1.2.11.jar 438KB spring-boot-autoconfigure-2.7.0.jar 1.6MB spring-context-5.3.20.jar 1.22MB spring-beans-5.3.20.jar 682KB jackson-annotations-2.13.3.jar 74KB jjwt-0.9.1.jar 111KB META-INF MANIFEST.MF 153B maven com.bsoft xnqbsoft-monitor pom.properties 63B pom.xml 2KB资源评论
