工业零件管理系统（化名）

企业服务行业细分软件案例ID：250050

有聊

1 年经验· 天津易架构科技有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

1. 组件概述
DataCollectionMonitor.vue 是一个基于 Vue 3 和 Element Plus 框架开发的数据采集监控页面组件。该组件主要用于实时监控网关设备的运行状态，展示设备的基本信息、性能指标和在线状态，并提供设备详情查看功能。

组件采用响应式设计，能够自适应不同的屏幕尺寸，同时支持自动刷新机制，确保用户能够及时获取最新的设备状态信息。

2. 核心功能
2.1 设备状态监控
组件实时展示所有网关设备的运行状态，包括以下关键指标：

设备名称：显示设备的标识名称
在线状态：通过颜色标签区分在线和离线状态
CPU 使用率：以进度条形式直观展示 CPU 占用百分比
内存使用率：以进度条形式展示 RAM 占用百分比
所属工程：显示设备所属的项目或工程名称
最后更新时间：记录设备状态最后同步的时间戳
2.2 统计信息展示
页面顶部设有三个统计标签，实时显示设备总数、在线设备数量和离线设备数量。这些数据来源于后端 API 返回的汇总信息，或通过前端计算获得。

2.3 分页管理
组件内置分页功能，支持以下特性：

可选择每页显示 8、12 或 16 个设备卡片
支持跳转页码功能
平滑的页面切换动画效果