Skip to content

Repository files navigation

升级指挥大屏

实时系统升级任务指挥大屏,用于在升级、割接、迁移、发布等窗口期统一展示任务计划、依赖关系、执行进度和风险状态。项目采用 React + Vite 构建,支持 Excel/CSV/JSON 导入导出,适合在大屏、会议室或指挥中心浏览器中运行。

主要能力

  • 甘特图总览:按阶段展示计划时间、实际开始/结束、当前时间线、延期风险和超时状态。
  • 依赖管理:任务可配置前置依赖,未满足依赖时阻止启动并展示阻塞原因。
  • 进度监控:展示总体进度、阶段进度、当前任务、下一步任务、即将开始提醒和操作记录。
  • 数据导入导出:支持 Excel、CSV、JSON 导入,支持下载 Excel 模板,支持导出含实际执行数据的 Excel。
  • 大屏操作:支持甘特图全屏、自适应缩放、定位当前任务、定位当前时间、批量启动/完成任务。
  • 现场辅助:支持演示时间、庆功页、操作记录折叠、已完成任务超时效果开关。
  • 本地持久化:任务、日志、窗口时间和开关项保存在浏览器 localStorage

在线体验地址

https://dashboard.dougge.top/

系统演示截图

大屏总览

升级指挥大屏总览

配置与任务计划

升级指挥大屏配置与任务计划

甘特图与任务状态

升级指挥大屏甘特图与任务状态

全屏与现场展示

升级指挥大屏全屏与现场展示

技术栈

  • React 19
  • Vite 7
  • Tailwind CSS 4
  • SheetJS xlsx
  • ESLint 9

快速启动

npm install
npm run dev

构建生产包:

npm run build

构建完成后会生成 dist/,并通过脚本压缩为 dist.zip。生产部署时将 dist/ 内文件发布到 Nginx 站点目录即可。

常用脚本

命令 说明
npm run dev 启动 Vite 开发服务
npm run build 构建生产包并生成 dist.zip
npm run preview 本地预览生产构建
npm run lint 执行 ESLint 检查
npm run zip 单独压缩 dist/dist.zip

目录结构

ioa-wall/
├── docs/                         # Markdown 说明文档
│   ├── PROJECT_STRUCTURE.md       # 文档目录与代码结构说明
│   ├── DEPLOYMENT.md              # Windows / 麒麟 Linux 部署说明
│   ├── CHANGELOG.md               # 更新记录
│   └── assets/screenshots/        # 系统演示截图
├── public/
│   ├── celebration-bg.png         # 庆功页背景图
│   └── vite.svg                   # Vite 默认静态资源
├── src/
│   ├── App.jsx                    # 主应用、任务调度、导入导出、甘特图和交互逻辑
│   ├── index.css                  # Tailwind 引入、全局滚动条和任务状态样式
│   ├── App.css                    # 甘特图相关补充样式
│   └── main.jsx                   # React 入口
├── index.html                     # Vite HTML 入口
├── package.json                   # 依赖与脚本
├── vite.config.js                 # Vite 配置
└── README.md                      # 项目入口说明

更详细的文档和代码结构见 docs/PROJECT_STRUCTURE.md

使用流程

  1. 进入配置区。
  2. 下载 Excel 模板。
  3. 按模板维护任务计划、计划时间、责任人、检查人和依赖关系。
  4. 导入 Excel、CSV 或 JSON 文件。
  5. 配置升级窗口开始/结束时间和项目标题。
  6. 返回大屏进行现场指挥。
  7. 执行过程中启动任务、完成任务、查看阻塞原因和操作记录。
  8. 升级结束后导出 Excel,留存计划与实际执行数据。

导入模板字段

字段 必填 说明
序号 任务唯一 ID
阶段 任务所属阶段
工作项 任务名称
预计耗时(分钟) 预计执行时长
计划开始 支持 YYYY-MM-DD HH:mm 等常见格式
计划结束 为空时按计划开始 + 预计耗时计算
牵头人 牵头负责人
执行人 实际执行负责人
检查人 验证或复核负责人
依赖 前置任务 ID,多个任务用逗号分隔
状态 导入执行数据时可使用
实际开始 导入执行数据时可使用
实际结束 导入执行数据时可使用

部署文档

更新记录

更新记录维护在 docs/CHANGELOG.md

浏览器建议

推荐使用 Chrome 或 Edge。大屏场景建议分辨率不低于 1920x1080。

About

实时系统升级任务指挥大屏,提供甘特图可视化、任务依赖管理和进度监控功能。支持Excel导入导出,适用于各类系统升级和部署场景。

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages