#  device-dashboard

**Repository Path**: genvex/device-dashboard

## Basic Information

- **Project Name**:  device-dashboard
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-09
- **Last Updated**: 2026-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Device Dashboard

基于 MagicMirror² 架构思想开发的轻量级设备监控看板，专为 ARM64 开发板（Jetson / Radxa）设计。

## 特性

- **模块化架构** — 继承 MagicMirror 的通知分发与生命周期管理模式
- **实时数据推送** — Socket.IO 双向通信，秒级刷新
- **多设备支持** — 本地采集 + 远程 JSON 数据源
- **ARM64 友好** — 无 Electron，纯 Node.js + Express，低内存占用
- **9 区布局** — 经典 MagicMirror 位置系统（top/bottom, left/center/right）

## 技术栈

| 组件 | 版本 | 用途 |
|------|------|------|
| Node.js | ≥ 18 | 运行环境 |
| Express | 5.x | HTTP 服务 |
| Socket.IO | 4.x | 实时通信 |
| systeminformation | latest | 硬件信息采集 |
| croner | latest | 定时任务调度 |
| Nunjucks | 3.x | 模板引擎（预留） |

## 快速开始

### 1. 安装依赖

```bash
cd device-dashboard
npm install
```

### 2. 启动服务

```bash
PORT=3150 npm start
```

默认监听 `http://localhost:3150`。

### 3. 验证

浏览器访问 `http://localhost:3150`，应显示：
- 顶部时钟模块
- 中央设备卡片网格
- 右侧系统详情面板

## 项目结构

```
device-dashboard/
├── index.html              # 前端入口（9 区布局容器）
├── package.json            # 项目配置
├── .gitignore
├── README.md               # 本文件
├── server/
│   └── app.js              # Express + Socket.IO + cron 采集
├── css/
│   └── main.css            # 暗色主题 + 进度条样式
├── js/
│   ├── socket-client.js    # Socket.IO 客户端封装
│   ├── module-base.js      # 模块基类（所有插件继承）
│   ├── renderer.js         # 渲染引擎（DOM 挂载/通知分发）
│   ├── main.js             # 前端初始化 + 模块注册
│   └── modules/
│       ├── clock.js        # 时钟模块
│       ├── device-monitor.js   # 设备卡片网格
│       └── system-info.js      # 本机详情面板
├── templates/
│   └── index.njk           # Nunjucks 模板占位
└── demo-collect.js         # 独立采集演示脚本
```

## 架构图

### 数据流

```
[systeminformation] → [server/app.js] → [Socket.IO] → [Browser]
       ↑                      ↓                    ↑
  定时轮询 (cron)     本地采集/远程 JSON    实时渲染更新
```

### 布局系统

```
┌─────────────────────────────────────────────────────┐
│                  top-center                           │
├──────────┬────────────────────┬─────────────────────┤
│          │                    │                     │
│ left     │    center          │     right           │
│          │                    │                     │
├──────────┴────────────────────┴─────────────────────┤
│                 bottom-center                         │
└─────────────────────────────────────────────────────┘
```

### 模块生命周期

```
init() → start() → getDom() → notificationReceived()
                                    ↑
                              socketNotificationReceived()
```

## 配置说明

### 环境变量

| 变量 | 默认值 | 说明 |
|------|--------|------|
| `PORT` | `3150` | 服务端口 |
| `REMOTE_COLLECT_PATH` | `/srv/samba/share/github-scan/.agent-audit/` | 远程设备数据目录 |
| `COLLECT_INTERVAL` | `*/10 * * * *` | cron 采集频率 |

### 远程设备数据

远程设备通过 JSON 文件提供数据，路径由 `REMOTE_COLLECT_PATH` 指定。每个设备一个 `.json` 文件，文件名即设备 ID。

**数据格式：**
```json
{
  "hostname": "radxa-cubie-a7s",
  "cpuPercent": "4.0",
  "cpuTemp": "0.0",
  "memUsedMB": 7659,
  "memTotalMB": 7931,
  "diskUsedGB": 48,
  "diskTotalGB": 57,
  "uptime": 130598
}
```

## 开发指南

### 创建新模块

1. 在 `js/modules/` 下新建文件（如 `my-module.js`）
2. 继承 `Module` 基类，实现标准钩子：

```javascript
class MyModule extends Module {
  constructor() {
    super('my-module');
    this.config = { /* 模块配置 */ };
  }

  start() {
    // 模块启动逻辑
  }

  getDom() {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = '<h3>My Module</h3>';
    return wrapper;
  }

  socketNotificationReceived(notification, payload) {
    // 处理服务端通知
  }
}

// 注册模块
window.DD_MODULES.push(new MyModule());
```

3. 在 `index.html` 中引入：

```html
<script src="js/modules/my-module.js"></script>
```

### 模块间通信

```javascript
// 发送通知
this.sendNotification('MY_EVENT', { data: 'value' });

// 接收通知
socketNotificationReceived(notification, payload) {
  if (notification === 'MY_EVENT') {
    console.log(payload);
  }
}
```

## 部署方式

### systemd（推荐）

```ini
[Unit]
Description=Device Dashboard
After=network.target

[Service]
Type=simple
User=radxa
WorkingDirectory=/srv/samba/share/github-scan/device-dashboard
ExecStart=/usr/bin/node server/app.js
Restart=on-failure
Environment=PORT=3150

[Install]
WantedBy=multi-user.target
```

```bash
sudo cp device-dashboard.service /etc/systemd/system/
sudo systemctl enable --now device-dashboard
```

### Docker

```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3150
CMD ["node", "server/app.js"]
```

```bash
docker build -t device-dashboard .
docker run -d -p 3150:3150 device-dashboard
```

### 后台运行

```bash
nohup node server/app.js > dashboard.log 2>&1 &
```

## 兼容性

| 平台 | 状态 | 说明 |
|------|------|------|
| Linux x86_64 | ✅ | 完整支持 |
| Linux ARM64 | ✅ | Jetson / Radxa 已验证 |
| macOS | ✅ | 开发测试可用 |
| Windows | ⚠️ | 部分依赖可能需要调整 |

## 与水质监测项目的关系

Device Dashboard 是独立项目，与 water-monitor（水质监测）不耦合。如需集成：

1. **统一前端** — 将 device-dashboard 作为 water-monitor 的前端模块之一
2. **统一后端** — 让 device-dashboard 也写 InfluxDB，water-monitor 的 dashboard 同时查水质和主机数据

## License

MIT