项目基于oshi库快速搭建一个cpu监控面板
后端：
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId><artifactId>oshi-core</artifactId><version>5.8.5</version></dependency>
package org.example.cputest;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import oshi.SystemInfo;
import oshi.hardware.CentralProcessor;
import oshi.hardware.HardwareAbstractionLayer;import java.util.Comparator;
import java.util.Map;
import java.util.TreeMap;@CrossOrigin("*")
@RestController
@RequestMapping("/api/cpu")
public class CpuUsageController {private final SystemInfo systemInfo = new SystemInfo();private final HardwareAbstractionLayer hardware = systemInfo.getHardware();private final CentralProcessor processor = hardware.getProcessor();private long[][] prevTicks = processor.getProcessorCpuLoadTicks();@GetMapping("/usage")public String getCpuUsage() throws JsonProcessingException {// 获取当前的 tick 数long[][] ticks = processor.getProcessorCpuLoadTicks();// 获取 CPU 核心数int logicalProcessorCount = processor.getLogicalProcessorCount();// 计算每个核心的 CPU 使用率Map<String, Double> cpuUsages = new TreeMap<>(new Comparator<String>() {@Overridepublic int compare(String core1, String core2) {int num1 = Integer.parseInt(core1.replace("Core ", ""));int num2 = Integer.parseInt(core2.replace("Core ", ""));return Integer.compare(num1, num2);}});for (int i = 0; i < logicalProcessorCount; i++) {long user = ticks[i][CentralProcessor.TickType.USER.getIndex()] - prevTicks[i][CentralProcessor.TickType.USER.getIndex()];long nice = ticks[i][CentralProcessor.TickType.NICE.getIndex()] - prevTicks[i][CentralProcessor.TickType.NICE.getIndex()];long sys = ticks[i][CentralProcessor.TickType.SYSTEM.getIndex()] - prevTicks[i][CentralProcessor.TickType.SYSTEM.getIndex()];long idle = ticks[i][CentralProcessor.TickType.IDLE.getIndex()] - prevTicks[i][CentralProcessor.TickType.IDLE.getIndex()];long iowait = ticks[i][CentralProcessor.TickType.IOWAIT.getIndex()] - prevTicks[i][CentralProcessor.TickType.IOWAIT.getIndex()];long irq = ticks[i][CentralProcessor.TickType.IRQ.getIndex()] - prevTicks[i][CentralProcessor.TickType.IRQ.getIndex()];long softirq = ticks[i][CentralProcessor.TickType.SOFTIRQ.getIndex()] - prevTicks[i][CentralProcessor.TickType.SOFTIRQ.getIndex()];long steal = ticks[i][CentralProcessor.TickType.STEAL.getIndex()] - prevTicks[i][CentralProcessor.TickType.STEAL.getIndex()];long totalCpu = user + nice + sys + idle + iowait + irq + softirq + steal;// 检查 totalCpu 是否为零if (totalCpu == 0) {cpuUsages.put("Core " + i, 0.0);} else {double cpuUsage = (totalCpu - idle) * 100.0 / totalCpu;cpuUsages.put("Core " + i, cpuUsage);}}// 更新 prevTicksSystem.arraycopy(ticks, 0, prevTicks, 0, ticks.length);// 将结果转换为 JSON 字符串ObjectMapper objectMapper = new ObjectMapper();return objectMapper.writeValueAsString(cpuUsages);}
}
前端
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic CPU Performance Monitor 🖥️</title><!-- Vue and ECharts CDN --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;text-align: center;}#app {display: flex;flex-wrap: wrap;justify-content: space-around;max-width: 1200px;margin: 0 auto;padding: 20px;}.chart-container {width: 300px;height: 350px;margin: 10px;background-color: white;border-radius: 10px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);padding: 10px;position: relative;}.core-status {position: absolute;top: 10px;right: 10px;font-size: 24px;}h1 {color: #333;display: flex;align-items: center;justify-content: center;}h1 span {margin: 0 10px;}</style>
</head>
<body>
<h1><span>🖥️</span>CPU Performance Monitoring Dashboard<span>📊</span>
</h1>
<div id="app"><div v-for="(usage, core) in cpuUsageData" :key="core" class="chart-container"><div class="core-status"><span v-if="usage < 30">😎</span><span v-else-if="usage < 60">😓</span><span v-else-if="usage < 80">🥵</span><span v-else>🔥</span></div><div :ref="`chart-${core}`" style="width: 100%; height: 280px;"></div></div>
</div><script>// Create Vue instancenew Vue({el: '#app',data: {cpuUsageData: {},timeStamps: Array.from({length: 7}, () => 0)},mounted() {// Start timer to update data every secondthis.updateChart();},methods: {async updateChart() {try {// Fetch CPU usage dataconst response = await fetch('http://localhost:8080/api/cpu/usage');const data = await response.json();// Update CPU usage datathis.cpuUsageData = data;// Update timestampsthis.timeStamps.shift();this.timeStamps.push(new Date().toLocaleTimeString());// Iterate through each core, initialize or update EChartsObject.keys(this.cpuUsageData).forEach(core => {const usage = this.cpuUsageData[core];const chartContainer = this.$refs[`chart-${core}`][0];// Initialize chart if not existsif (!chartContainer.__chart) {chartContainer.__chart = echarts.init(chartContainer);chartContainer.__chart.setOption({title: {text: `Core ${core}`,left: 'center'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: this.timeStamps},yAxis: {type: 'value',axisLabel: {formatter: '{value} %'},min: 0,max: 100},series: [{name: 'CPU Usage',type: 'line',smooth: true, // 使线条平滑areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(58,77,233,0.8)'},{offset: 1, color: 'rgba(58,77,233,0.3)'}])},data: Array.from({length: 7}, () => 0)}]});}// Update chart dataconst seriesData = chartContainer.__chart.getOption().series[0].data;seriesData.shift();seriesData.push(usage);chartContainer.__chart.setOption({xAxis: {data: this.timeStamps},series: [{data: seriesData}]});});} catch (error) {console.error('Error fetching CPU usage data:', error);}// Update every secondsetTimeout(this.updateChart, 1000);}}});
</script>
</body>
</html>
相关文章：
项目基于oshi库快速搭建一个cpu监控面板
后端： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId><artifactId>oshi-…...
【c语言】指针3
1、字符指针变量 指针类型中我们知道有一种为字符指针char*的指针类型，其使用方法如下： 上面我们是先将字符使用一个变量，然后将变量的地址传给一个字符指针变量，通过指针变 量实现了对这个字符的打印。还有下面的这种…...
【开源】A063—基于Spring Boot的农产品直卖平台的设计与实现
🙊作者简介：在校研究生，拥有计算机专业的研究生开发团队，分享技术代码帮助学生学习，独立完成自己的网站项目。 代码可以查看项目链接获取⬇️，记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...
Can‘t find variable: token（token is not defined）
文章目录 例子 1：使用 var例子 2：使用 let 或 const例子 3：异步操作你的代码中的情况 Cant find variable: tokentoken is not defined源代码 // index.jsPage({data: {products:[],cardLayout: grid, // 默认卡片布局为网格模式isGrid: tr…...
【JavaEE 初阶】⽹络编程套接字
一、⽹络编程基础 1.应用层 操作系统提供的一组 api >socket api(传输层给应用层提供) 2.传输层 两个核心协议. TCPUDP 差别非常大,编写代码的时候,也是不同的风格 因此, socket api 提供了两套 TCP 有连接, 可靠传输, 面向字节流, 全双工 UDP …...
【Linux内核】Hello word程序
创建测试目录 mkdir -p ~/develop/kernel/hello-1 cd ~/develop/kernel/hello-1 创建MakeFile文件和内核.c文件 nano Makefile nano hello-1.c 编写内容 /* * hello-1.c - The simplest kernel module. */ #include <linux/module.h> /* Needed by all modules */…...
PHP 与 MySQL 搭配的优势
一、PHP 与 MySQL 搭配的优势 强大的动态网页开发能力 PHP 是一种服务器端脚本语言，能够生成动态网页内容。它可以根据用户的请求、数据库中的数据等因素，实时地生成 HTML 页面返回给客户端浏览器。而 MySQL 是一个流行的关系型数据库管理系统…...
深入浅出：PHP中的变量与常量全解析
文章目录 引言理解变量普通变量赋值操作变量间赋值引用赋值取消引用 可变变量预定义变量 理解常量声明常量使用define()函数const关键字 使用常量预定义常量 扩展话题：作用域与生命周期实战案例总结与展望参考资料 引言 在编程的世界里，变量和常量是两种…...
初步简单的理解什么是库，什么是静态库，什么是动态库
库是什么 库根据名字我们应该很容易理解，在我们日常生活种，包含库的东西有很多，像仓库，库房那些，库是拿来存放，方便管理东西的，在我们编程当中，库的定义也是如此 那么为什么要有库…...
从ctfwiki开始的pwn之旅 3.ret2syscall
ret2syscall 原理 ret2syscall，即控制程序执行系统调用，获取 shell。 那么ret2text——程序中有system("/bin/sh")代码段，控制流执行 那么ret2shellcode——程序中不存在system("/bin/sh/")的代码段，自己…...
使用 httputils + protostuff 实现高性能 rpc
1、先讲讲 protostuf protostuf 一直是高性能序列化的代表之一。但是用起来，可难受了，你得先申明 protostuf 配置文件，并且要把这个配置文件转成类。所以必然要学习新语法、新工具。 可能真的太难受了！于是乎，&#…...
系统思考—战略共识
最近与和一位企业创始人深度交流时，他告诉我：“虽然公司在制定战略时总是非常明确，但在执行过程中，经常发现不同层级对战略的理解偏差，甚至部分团队的执行效果与预期大相径庭。每次开会讨论时，大家都说得头…...
Java版-速通数据结构-树基础知识
现在面试问mysql,红黑树好像都是必备问题了。动不动就让手写红黑树或者简单介绍下红黑树。然而，我们如果直接去看红黑树，可能会一下子蒙了。在看红黑树之前，需要先了解下树的基础知识，从简单到复杂，看看红黑树是在什么…...
详尽的oracle sql函数
1，CHR 输入整数，返回对应字符。 用法：select chr(65),chr(78) from dual; 2，ASCII 输入字符，返回对应ASCII码。 用法：select ascii(A),ascii(B) from dual; 3，CONCAT 输入两个字符串，…...
SAP IDOC Error VG205
今天在做IDOC 入栈处理销售订单的时候，一直报错VG205 There is no article description for item 000030 这个问题在通过WE19 前台显示的时候就不会遇见， 只有在接口传输的时候才会遇到 搜索发现，可以通过配置忽略此消息号 配置路径如下…...
DSP 的 CV 算子调用
01 前言 DSP 是 征程 5 上的数字信号处理器，专用于处理视觉、图像等信息。在 OE 包的 ddk/samples/vdsp_rpc_sample 路径下，提供了 DSP 使用示例，包括 nn 和 CV 两部分。 nn 示例涵盖了深度学习模型的相关算子，包括量化、反量化、…...
WMI攻击-基础篇（一）
#WMI攻击-基础篇（一） 这篇文章是关于WMI攻击系列文章的第一部分，面向新手。如果对Powershell有一定了解会对阅读本文有所帮助，但这并不是必需的，我们直接上干货。 #1、概述 为什么是WMI？ WMI 是 Microso…...
使用Pygame创建一个简单的消消乐游戏
消消乐游戏是一种经典的益智游戏，玩家通过交换相邻的方块来形成三个或更多相同颜色的连续方块，从而消除它们。本文将介绍如何使用Python的Pygame库来创建一个简单的消消乐游戏。 准备工作 在开始之前，请确保已安装Pygame库。可以通过以下命…...
证明直纹面是可展曲面沿着直母线，曲面的切平面不变
目录 证明直纹面是可展曲面的当且仅当沿着直母线，曲面的切平面不变 证明直纹面是可展曲面的当且仅当沿着直母线，曲面的切平面不变 直纹面是可展曲面当且仅当沿着直母线，曲面的切平面不变. 证明：设直纹面 S S S的参数式为 r ( u …...
Chrome控制台 网站性能优化指标一览
打开chrome-》f12/右键查看元素-》NetWrok/网络 ctrlF5 刷新网页，可以看到从输入url到页面资源请求并加载网页，用于查看资源加载，接口请求，评估网页、网站性能等，如下图： request、stransferred、resour…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
【Java】Ajax 技术详解
文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤：1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现：客户端实现：4. Axi…...