分布式算力监控平台演示系统

Distributed Computing Monitoring Platform Demo

一个用于客户演示的分布式算力监控平台Web系统，模拟监控分布在香港、泉州、吉隆坡、东京四个城市的算力节点（每个节点100个GPU服务器）。

功能特性

🌍 全球节点监控

• 实时显示四个城市的算力节点状态
• 交互式世界地图展示节点分布
• 节点状态颜色编码（绿色：正常，黄色：警告，红色：故障）

📊 实时数据可视化

• GPU利用率趋势图表
• 温度监控图表
• 关键性能指标实时更新
• ECharts图表库集成

🖥️ 服务器状态管理

• 详细的服务器状态表格
• 实时数据更新（每30秒）
• 按节点筛选和搜索功能
• 服务器健康状态监控

🚨 智能告警系统

• 实时告警通知
• 多级别告警（紧急、警告、信息）
• 告警历史记录
• 自动故障检测

🎬 自动演示功能

• 一键启动自动演示
• 智能字幕系统（中英双语）
• 自动操作流程展示
• 适合客户参观演示

📱 响应式设计

• 适配大屏投屏显示
• 4K/8K超高分辨率支持
• 移动端友好界面
• 现代化深色主题

快速开始

方法一：Python HTTP服务器（推荐）

# 在项目目录中运行
python3 -m http.server 8000

# 访问 http://localhost:8000

方法二：Node.js HTTP服务器

# 安装http-server（如未安装）
npm install -g http-server

# 启动服务器
http-server -p 8000

# 访问 http://localhost:8000

方法三：直接打开文件

# 直接在浏览器中打开 index.html
open index.html

演示操作指南

🎯 自动演示模式

1. 点击右上角"开始自动演示"按钮
2. 系统将自动运行10步演示流程
3. 包含中英文字幕讲解
4. 总时长约35秒
5. 可随时点击"停止演示"中断

🖱️ 手动操作

• 节点选择：左侧面板点击不同城市节点
• 地图交互：点击地图上的节点标记
• 表格筛选：使用下拉菜单和搜索框
• 语言切换：右上角中/EN按钮
• 系统操作：右侧操作按钮（演示用）

系统架构

技术栈

• 前端框架：原生JavaScript + HTML5 + CSS3
• 图表库：ECharts 5.4.3
• 字体：Inter + Microsoft YaHei
• 图标：Font Awesome 6.0
• 响应式：CSS Grid + Flexbox

文件结构

DistributedComputingMonitoringPlatform/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 核心逻辑
└── README.md          # 说明文档

数据模拟

• 服务器数据：每个节点100台服务器的虚拟数据
• 实时更新：多个时间间隔的数据刷新
• 历史数据：24小时趋势图表数据
• 告警数据：随机生成的系统告警

演示场景

💼 客户参观演示

1. 环境准备：监控室大屏投屏
2. 演示启动：点击自动演示按钮
3. 讲解配合：跟随字幕进行讲解
4. 互动展示：演示结束后手动操作

📈 功能展示重点

• 实时监控能力：数据实时更新
• 全球分布管理：多城市节点协调
• 智能告警系统：自动故障检测
• 用户友好界面：现代化操作体验

自定义配置

节点信息修改

// 在 script.js 中修改节点位置和名称
const nodeLocations = {
    hongkong: { x: '75%', y: '45%', name: '香港', nameEn: 'Hong Kong' },
    // ... 其他节点
};

演示脚本调整

// 修改演示步骤和字幕
const demoScript = [
    {
        duration: 3000,  // 持续时间（毫秒）
        subtitle: '中文字幕',
        subtitleEn: 'English subtitle',
        action: () => {
            // 演示动作
        }
    }
    // ... 更多步骤
];

更新频率调整

// 在 startRealTimeUpdates() 函数中调整
updateIntervals.stats = setInterval(updateSystemStats, 3000);    // 3秒
updateIntervals.charts = setInterval(updateCharts, 10000);       // 10秒
updateIntervals.servers = setInterval(() => {...}, 30000);       // 30秒

浏览器兼容性

推荐浏览器

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

必需功能支持

• ES6+ JavaScript
• CSS Grid & Flexbox
• SVG 渲染
• WebSocket（未来扩展）

性能优化

大屏显示优化

• 高DPI屏幕支持
• 硬件加速渲染
• 内存使用优化
• CPU占用控制

数据更新策略

• 页面可见性检测
• 智能更新暂停
• 内存泄漏防护
• 资源清理机制

扩展说明

此演示系统设计为模块化架构，可以轻松扩展以下功能：

🔮 未来功能

• WebSocket实时数据连接
• 用户权限管理系统
• 历史数据存储
• 告警规则配置
• 多语言国际化
• 移动端APP集成

🔧 技术升级

• React/Vue框架迁移
• TypeScript类型支持
• 后端API集成
• 数据库连接
• 微服务架构

技术支持

故障排除

1. 页面不显示：检查HTTP服务器是否启动
2. 图表不渲染：确认ECharts CDN连接
3. 数据不更新：检查JavaScript控制台错误
4. 样式异常：清除浏览器缓存

开发调试

// 打开浏览器开发者工具查看日志
console.log('System initialized successfully');

// 检查全局对象
window.charts      // 图表实例
window.demoMode    // 演示模式状态

---

版本信息：v2.1.3 | 创建时间：2024-08-25 | 适用场景：客户演示、产品展示