行人摔倒检测系统 - 前端文档（2）

songscsc
0 阅读5分钟

1.项目概述

行人摔倒检测系统是一个基于 Electron + FastAPI 的桌面应用程序，用于实时检测图像和视频中的行人摔倒行为。前端采用原生 JavaScript 开发，无框架依赖，界面采用 Material Design 设计语言。

图像检测.png

主要功能

  • 图像摔倒检测

  • 视频摔倒检测

  • 系统日志管理

  • 资源下载管理

  • 数据可视化大屏

  • 系统监控

  • 数据分析

  • 模型管理

  • 大模型聊天

6.页面架构

1. 图像摔倒检测页面 (ImageDetectionPage)

  • 图像上传（拖拽/点击）

  • 单个图像检测

  • 批量图像检测

  • 图像预览

  • 图像下载

  • 图像删除

{
  render()              
  bindEvents()          
  uploadFiles(files)    
  loadImages()          
  renderImages()        
  toggleSelect()        
  selectAll()           
  detect(filename)      
  detectSelected()      
  download(filename)    
  downloadSelected()    
  delete(filename)      
  preview(filename)     
}

2. 视频摔倒检测页面 (VideoDetectionPage)

  • 视频上传

  • 单个视频检测

  • 视频预览

  • 视频下载

  • 视频删除

3. 系统日志页面 (SystemLogsPage)

  • 日志列表展示

  • 日志预览

  • 日志下载

  • 日志删除

{
  render()              
  loadLogs()            
  renderLogs()          
  preview(filename)     
  download(filename)    
  downloadSelected()    
  delete(filename)      
}

4. 图像资源下载页面 (ImageResourcesPage)

  • 已上传图像管理

  • 检测结果图像管理

  • 标签页切换

  • 批量下载

5. 视频资源下载页面 (VideoResourcesPage)

  • 已上传视频管理

  • 检测结果视频管理

  • 视频对比功能

  • 批量下载

6. 数据可视化大屏页面 (DashboardPage)

  • 统计卡片展示

  • 数据分布饼图

  • 检测结果分布

  • 检测趋势折线图

  • 摔倒检测统计柱状图

  • 最近检测记录表格

7. 系统监控页面 (SystemMonitorPage)

  • CPU 使用率实时监控

  • 内存使用率实时监控

  • 磁盘使用率监控

  • 系统运行时间

  • 网络流量统计

  • 自动刷新（3秒间隔）

8. 数据分析页面 (DataAnalysisPage)

  • 摔倒场景分布分析

  • 检测置信度分布

  • 每日检测量趋势

  • 检测耗时分析

  • 场景排行榜

9. 模型管理页面 (ModelManagementPage)

  • 模型列表展示

  • 模型上传

  • 模型切换

  • 模型下载

  • 模型删除

  • 当前模型状态

10. 大模型聊天页面 (LLMChatPage)

  • 与大语言模型对话

  • 消息历史记录

  • Markdown 渲染

  • 代码高亮

7.API 请求规范

1. API 基础配置

const API_BASE = 'http://localhost:10077';

2. 请求封装

const Utils = {
  async request(url, options = {}) {
    try {
      const response = await fetch(`${API_BASE}${url}`, {
        ...options,
        headers: {
          ...options.headers,
        }
      });
      
      
      if (options.responseType === 'blob') {
        return response.blob();
      }
      
      
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('API Error:', error);
      throw error;
    }
  }
}

4. 响应格式规范

{
  "code": 200,           
  "message": "操作成功",  
  "data": {}             
}

5. 请求示例

5.1 上传图像

async uploadFiles(files) {
  for (const file of files) {
    const formData = new FormData();
    formData.append('file', file);
    
    try {
      const result = await fetch(`${API_BASE}/api/images/upload/${file.name}`, {
        method: 'POST',
        body: formData
      }).then(r => r.json());
      
      if (result.code === 200) {
        Utils.toast(`${file.name} 上传成功`, 'success');
      } else {
        Utils.toast(`${file.name} 上传失败: ${result.message}`, 'error');
      }
    } catch (error) {
      Utils.toast(`${file.name} 上传失败`, 'error');
    }
  }
  
  await this.loadImages();
}

6.组件说明

1. Toast 通知组件

Utils.toast('操作成功', 'success');  
Utils.toast('操作失败', 'error');    
Utils.toast('请注意', 'warning');    
Utils.toast('提示信息', 'info');

2. Modal 模态框组件

Utils.createModal(
  '标题',
  '<p>内容</p>',
  '<button onclick="Utils.closeModal()">关闭</button>'
);


Utils.closeModal();

3. 文件上传组件

uploadArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('drop', (e) => {
  e.preventDefault();
  uploadArea.classList.remove('dragover');
  this.uploadFiles(e.dataTransfer.files);
});

4. 图表组件

4.1 饼图

renderPieChart(containerId, data) {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  const colors = ['#6200EE', '#03DAC6', '#FF9800', '#4CAF50', '#E91E63'];
  
  
  let startAngle = 0;
  data.forEach((item, index) => {
    const angle = (item.value / total) * 360;
    const endAngle = startAngle + angle;
    
  });
}

4.2 折线图

renderLineChart(containerId, data) {
  const maxValue = Math.max(...data.yAxisData, 1);
  const width = 100;
  const height = 40;
  
  
  let points = data.yAxisData.map((v, i) => {
    const x = (i / (data.yAxisData.length - 1)) * width;
    const y = height - (v / maxValue) * height;
    return `${x},${y}`;
  }).join(' ');
  
  
  
}

4.3 柱状图

renderBarChart(containerId, data) {
  const maxValue = Math.max(...data.yAxisData);
  
  
  data.xAxisData.forEach((label, i) => {
    const height = (data.yAxisData[i] / maxValue) * 180;
    
  });
}

5. 选择器组件

selectAll() {
  if (this.selectedImages.size === this.images.length) {
    this.selectedImages.clear();  
  } else {
    this.images.forEach(img => this.selectedImages.add(img.filename));  
  }
  this.renderImages();
}

toggleSelect(filename, event) {
  event.stopPropagation();
  if (this.selectedImages.has(filename)) {
    this.selectedImages.delete(filename);
  } else {
    this.selectedImages.add(filename);
  }
  this.renderImages();
}

8.开发指南

1. 添加新页面

步骤 1: 在 index.html 添加导航项

<li class="nav-item" data-page="new-page">
  <span class="nav-icon">🆕</span>
  <span class="nav-text">新页面</span>
</li>

步骤 2: 在 renderer.js 创建页面类

function NewPage() {
  this.data = [];
}

NewPage.prototype = {
  async render() {
    const container = document.getElementById('page-container');
    container.innerHTML = `
      <div class="page-header">
        <h1 class="page-title">新页面</h1>
        <p class="page-subtitle">页面描述</p>
      </div>
      
      <div class="card">
        <div class="card-header">
          <span class="card-title">卡片标题</span>
        </div>
        <!-- 页面内容 -->
      </div>
    `;
    
    await this.loadData();
    window.newPage = this;
  },
  
  async loadData() {
    
  },
  
  destroy() {
    window.newPage = null;
  }
}

步骤 3: 在 PageManager 注册页面

const PageManager = {
  pages: {
    
    'new-page': NewPage
  }
}

2. 添加新 API

步骤 1: 在后端添加路由

@router.get("/api/new/data")
async def get_data():
    return success_response(data, "获取成功")

步骤 2: 在前端调用

async loadData() {
  try {
    const result = await Utils.request('/api/new/data');
    if (result.code === 200) {
      this.data = result.data;
      this.renderData();
    }
  } catch (error) {
    Utils.toast('加载失败', 'error');
  }
}

3. 样式开发规范

使用 CSS Variables

.my-component {
  background: var(--surface-color);
  color: var(--on-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  transition: var(--transition-normal);
}

响应式设计

.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

4. 错误处理

API 错误处理

try {
  const result = await Utils.request('/api/endpoint');
  if (result.code === 200) {
    
  } else {
    Utils.toast(`操作失败: ${result.message}`, 'error');
  }
} catch (error) {
  console.error('Error:', error);
  Utils.toast('网络错误', 'error');
}

5. 打包发布

开发模式运行

npm start

npm run dev

打包应用

npm run build:win


npm run build:mac


npm run build:linux


npm run build

6. 常见问题

Q1: API 请求失败？

  1. 确保后端服务运行在 http://localhost:10077

  2. 检查 renderer.js 中的 API_BASE 配置

9.总结

本文档详细介绍了行人摔倒检测系统的前端架构、设计原则、核心文件、API 规范和开发指南。

核心特点

  1. 原生 JavaScript: 无框架依赖，轻量高效

  2. Material Design: 现代化的界面设计

  3. 模块化架构: 清晰的代码组织

  4. 统一规范: API、样式、组件统一规范

  5. 安全可靠: Electron 安全最佳实践

技术亮点

  • 单页应用架构

  • 原生 SVG 图表

  • 拖拽上传

  • 实时监控

  • 批量操作

  • 模态框和 Toast

  • 响应式布局

持续改进

  • 添加单元测试

  • 优化性能

  • 增强错误处理

  • 完善文档

  • 用户反馈收集

avatar
文章
阅读
粉丝