灵境万象 · 疲劳岗位检测告警中心

基于 Vue3 + Vite 的疲劳驾驶检测系统前端展示 Dashboard

快速开始

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

项目将在以下地址运行：

• 本地访问：http://localhost:3005
• 远程访问：http://[你的IP地址]:3005

3. 构建生产版本

npm run build

项目特性

技术栈

• Vue 3 (Composition API + script setup)
• Vite
• SCSS

核心功能（一屏专业布局）

1. 顶部导航栏

• 品牌 Logo 和标题
• 线路/班次/风险级别筛选器
• 实时时间显示（每秒更新）
• AI 疲劳助手快捷入口

2. 左侧面板（紧凑版）

• 整体风险概况：监控司机总数、高危/中等风险人数统计
• 司机风险排名：压缩版列表，可点击切换查看详情，按疲劳指数排序

3. 中间核心区域（三合一专业图表）

• 当前司机概要栏：显示关注司机的基本信息和风险标签
• 图表1 - 疲劳评分趋势：
  • SVG 折线图 + 面积渐变
  • 背景分区：安全区/警戒区/高危区
  • 彩色数据点动态显示
• 图表2 - 多维体征监测：
  • 心率（bpm）- 青绿渐变条
  • 压力指数 - 紫红渐变条
  • PERCLOS（闭眼比例）- 黄橙渐变条
  • 三维数据叠加，专业级展示
• 图表3 - 疲劳区段剖面：
  • 彩色区段标尺（0-60安全 / 60-80警戒 / 80-100高危）
  • 呼吸动画标记点实时显示当前位置
  • 类似飞机高度剖面图的专业风格

4. 右侧告警流

• 实时告警列表：分级颜色条、紧凑卡片式布局
• 支持滚动，高危告警置顶

5. 底部横向三栏

• 班次风险分布：早班/白班/夜班堆叠条形图
• 设备在线情况：穿戴设备和摄像头在线率进度条
• AI 运营建议：2条核心建议卡片

设计亮点

• 一屏呈现 · 无需滚动：采用 Grid + Flexbox 精确布局，所有核心信息一屏显示
• 中间区域专业化：三合一图表占据最大视觉面积，类似监控指挥中心风格
• 深色科技风：深蓝-紫色渐变背景，青色/紫色/橙红高亮
• SVG 原生图表：纯 CSS + SVG 实现，无需第三方图表库，性能极佳
• 响应式交互：点击司机列表项实时切换详情面板，图表数据联动更新
• 动态动画：
  • 实时时钟（每秒更新）
  • 呼吸动画标记点（2s循环）
  • 渐变进度条（0.5s过渡）
  • SVG 折线图流畅绘制
• 视觉层次：卡片毛玻璃效果、发光边框、hover 平滑动效
• 信息密度优化：高密度但清晰分区，适合 1920x1080 / 2560x1440 大屏展示

数据说明

所有数据均为本地 mock，包括：

• 8 名虚拟司机的完整体征和行为数据
• 5 条不同级别的实时告警
• 3 个班次的风险分布统计
• 设备在线状态

截图建议

为获得最佳展示效果，建议：

1. 使用 1920x1080 分辨率浏览器窗口
2. 确保页面完全加载（时钟开始跳动）
3. 点击不同司机查看面板变化效果
4. 尝试使用顶部筛选器过滤数据

项目结构

ai_bus/
├── index.html          # 入口 HTML
├── package.json        # 依赖配置
├── vite.config.js      # Vite 配置
└── src/
    ├── main.js         # 应用入口
    ├── App.vue         # 主应用组件（包含所有逻辑和样式）
    └── style.css       # 全局样式重置

浏览器兼容性

推荐使用现代浏览器：

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