# vue-gantt-chart

**Repository Path**: atlantisholic/vue-gantt-chart

## Basic Information

- **Project Name**: vue-gantt-chart
- **Description**: Vue任务管理甘特图示例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-11
- **Last Updated**: 2025-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 甘特图项目

基于 Vue 3 + Element Plus 的现代化甘特图项目管理系统，提供完整的任务管理、时间轴显示、依赖关系管理等功能。

## ✨ 功能特性

### 🎯 核心功能
- **任务管理**: 创建、编辑、删除任务，支持任务层级结构
- **甘特图显示**: 直观的时间轴视图，支持日视图和周视图
- **依赖关系**: 任务间的依赖连线，支持前置任务设置
- **拖拽交互**: 支持任务拖拽调整时间和大小
- **缩放控制**: 时间轴缩放功能（25% - 200%）
- **全屏模式**: 支持甘特图全屏显示

### 📊 数据管理
- **任务属性**: 名称、时间、进度、负责人、优先级、状态、颜色
- **层级结构**: 支持父子任务关系，最多支持4级嵌套
- **状态管理**: 待开始、进行中、已完成、已取消
- **优先级**: 高、中、低三个等级
- **统计面板**: 实时显示任务统计信息

### 🎨 界面特性
- **响应式设计**: 适配不同屏幕尺寸
- **自定义样式**: 任务颜色和进度条自定义
- **时间段选择**: 预设时间段和自定义时间范围
- **导出功能**: 支持导出为图片、Excel、JSON格式
- **工具提示**: 鼠标悬停显示任务详细信息

## 🛠 技术栈

- **Vue 3**: 使用 Composition API 构建
- **Element Plus**: 现代化 UI 组件库
- **Day.js**: 轻量级日期处理库
- **Vite**: 快速构建工具
- **html2canvas**: 图片导出功能
- **xlsx**: Excel文件处理
- **UUID**: 唯一标识符生成

## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

开发服务器将在 `http://localhost:3000` 启动，并自动打开浏览器。

### 构建生产版本

```bash
npm run build
```

构建产物将输出到 `dist` 目录。

### 预览生产版本

```bash
npm run preview
```

## 📁 项目结构

```
vue-gantt-chart/
├── src/
│   ├── components/
│   │   ├── GanttChart.vue          # 甘特图主组件
│   │   ├── TaskEditDialog.vue      # 任务编辑对话框
│   │   ├── TimeRangeSelector.vue   # 时间段选择器
│   │   └── ExportDialog.vue        # 导出对话框
│   ├── utils/
│   │   └── excelExport.js          # Excel导出工具
│   ├── App.vue                     # 主应用组件
│   └── main.js                     # 应用入口
├── public/
│   └── index.html                  # HTML 模板
├── dist/                           # 构建输出目录
├── package.json                    # 项目配置和依赖
├── vite.config.js                  # Vite 构建配置
└── README.md                       # 项目说明文档
```

## 🧩 组件详解

### GanttChart.vue - 甘特图核心组件

**功能特性:**
- 时间轴渲染和同步滚动
- 任务条显示和交互
- 依赖连线绘制
- 拖拽调整功能
- 全屏模式支持
- 图片导出功能

**Props:**
```javascript
{
  tasks: Array,                    // 任务数据数组
  zoomLevel: Number,               // 缩放级别 (0.25-2.0)
  showToday: Boolean,              // 是否显示今天标记
  showDependencyLines: Boolean,    // 是否显示依赖连线
  timeRange: Array,                // 时间范围 [start, end]
  viewType: String                 // 视图类型 'day' | 'week'
}
```

**Events:**
```javascript
{
  'update-task': Function,         // 更新任务
  'delete-task': Function,         // 删除任务
  'edit-task': Function           // 编辑任务
}
```

### TaskEditDialog.vue - 任务编辑对话框

**功能特性:**
- 任务基本信息编辑
- 时间范围设置
- 进度和状态管理
- 优先级和颜色设置
- 上级任务和前置任务选择
- 表单验证

**Props:**
```javascript
{
  modelValue: Boolean,             // 对话框显示状态
  task: Object,                    // 编辑的任务对象
  allTasks: Array                  // 所有任务列表
}
```

**Events:**
```javascript
{
  'update:modelValue': Function,   // 更新显示状态
  'save': Function                 // 保存任务
}
```

### TimeRangeSelector.vue - 时间段选择器

**功能特性:**
- 预设时间段选择（今天、本周、本月等）
- 自定义时间范围设置
- 时间范围统计信息
- 响应式抽屉界面

**Props:**
```javascript
{
  modelValue: Boolean,             // 选择器显示状态
  currentRange: Array              // 当前时间范围
}
```

**Events:**
```javascript
{
  'update:modelValue': Function,   // 更新显示状态
  'range-change': Function         // 时间范围变化
}
```

### ExportDialog.vue - 导出对话框

**功能特性:**
- 多种导出格式选择（Excel、JSON）
- 导出设置配置
- 实时预览信息
- 支持自定义文件名

**Props:**
```javascript
{
  modelValue: Boolean,             // 对话框显示状态
  tasks: Array,                    // 任务数据数组
  filteredTasks: Array,            // 筛选后的任务数组
  timeline: Object,                // 时间轴信息
  statistics: Object               // 统计信息
}
```

**Events:**
```javascript
{
  'update:modelValue': Function,   // 更新显示状态
  'export-success': Function       // 导出成功回调
}
```

## 📋 任务数据格式

```javascript
{
  id: String,                      // 任务唯一标识
  name: String,                    // 任务名称
  startDate: Dayjs,                // 开始时间
  endDate: Dayjs,                  // 结束时间
  progress: Number,                // 进度百分比 (0-100)
  color: String,                   // 任务颜色
  assignee: String,                // 负责人
  priority: String,                // 优先级 'high' | 'medium' | 'low'
  status: String,                  // 状态 'pending' | 'in-progress' | 'completed' | 'cancelled'
  level: Number,                   // 层级深度 (0-4)
  parentId: String,                // 父任务ID
  dependencies: Array              // 前置任务ID数组
}
```

## 🎮 使用指南

### 基本操作

1. **添加任务**: 点击工具栏的"添加任务"按钮
2. **编辑任务**: 双击任务条或任务行进行编辑
3. **删除任务**: 在编辑对话框中点击删除按钮
4. **调整时间**: 拖拽任务条两端调整开始和结束时间
5. **移动任务**: 拖拽任务条中间部分移动整个任务

### 高级功能

1. **设置依赖关系**: 在任务编辑对话框中选择前置任务
2. **调整缩放**: 使用缩放下拉菜单调整时间轴显示比例
3. **切换视图**: 使用日视图/周视图按钮切换显示模式
4. **选择时间段**: 点击"时间段选择"按钮设置显示范围
5. **导出数据**: 点击"导出数据"按钮选择导出格式（Excel、JSON、图片）

## 📤 导出功能

### 支持的导出格式

#### 1. 基础Excel格式
- **文件格式**: `.xlsx`
- **包含内容**: 任务列表、统计信息
- **适用场景**: 基础数据导出、任务清单

#### 2. 时间线Excel格式
- **文件格式**: `.xlsx`
- **包含内容**: 按时间顺序排列的任务时间线
- **适用场景**: 项目进度报告、时间线分析

#### 3. 项目报告Excel格式
- **文件格式**: `.xlsx`
- **包含内容**: 项目概览、任务详情、多维度统计
- **工作表**: 项目概览、任务详情、负责人统计、优先级统计、状态统计
- **适用场景**: 完整项目报告、管理层汇报

#### 4. JSON数据格式
- **文件格式**: `.json`
- **包含内容**: 原始数据、时间轴信息、统计信息、导出设置
- **适用场景**: 数据迁移、系统集成、备份恢复

#### 5. 图片格式
- **文件格式**: `.png`
- **包含内容**: 甘特图当前视图截图
- **适用场景**: 演示文档、分享展示

### 导出设置

- **文件名**: 支持自定义文件名，自动添加时间戳
- **数据范围**: 全部任务、仅显示任务、按筛选条件
- **包含内容**: 可选择包含任务列表、统计信息、时间轴信息
- **预览信息**: 实时显示任务数量、时间范围、预估文件大小

### 导出步骤

1. 点击工具栏的"导出数据"按钮
2. 选择导出格式（基础Excel、时间线Excel、项目报告、JSON）
3. 配置导出设置（可选）
4. 查看预览信息
5. 点击"开始导出"按钮
6. 文件将自动下载到本地

### 快捷键

- `Ctrl + N`: 新建任务
- `Ctrl + S`: 保存任务
- `Delete`: 删除选中任务
- `F11`: 切换全屏模式

## 🔧 开发指南

### 添加新功能

1. **创建组件**: 在 `src/components/` 目录下创建新组件
2. **注册组件**: 在 `App.vue` 中导入并注册组件
3. **添加路由**: 如需要，在 `main.js` 中配置路由
4. **更新文档**: 在 README.md 中添加功能说明

### 自定义样式

项目使用 CSS 变量进行主题定制，主要变量包括：

```css
:root {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  --border-color: #DCDFE6;
  --background-color: #F5F7FA;
}
```

### 数据持久化

当前版本使用内存存储，如需持久化可以：

1. 集成 localStorage/sessionStorage
2. 连接后端 API
3. 使用 IndexedDB 进行本地存储

## 🐛 常见问题

### Q: 任务拖拽不生效？
A: 确保任务条没有被其他元素遮挡，检查浏览器控制台是否有错误信息。

### Q: 依赖连线显示异常？
A: 检查任务的时间设置是否正确，前置任务必须在当前任务之前结束。

### Q: 导出图片失败？
A: 确保页面完全加载完成，并且没有跨域资源访问限制。

### Q: 性能问题？
A: 当任务数量超过100个时，建议使用虚拟滚动或分页加载。

## 📈 开发计划

### 即将推出
- [ ] 任务分组和折叠功能
- [ ] 批量操作支持
- [ ] 任务模板功能
- [ ] 实时协作编辑

### 计划中
- [x] 导出功能增强 (Excel, JSON, 图片)
- [ ] 导出功能增强 (PDF, MS Project)
- [ ] 移动端适配优化
- [ ] 主题切换功能
- [ ] 数据导入功能
- [ ] 甘特图打印支持

### 长期规划
- [ ] 多项目管理
- [ ] 资源管理功能
- [ ] 成本管理
- [ ] 报表分析
- [ ] 工作流集成

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 如何贡献

1. **Fork** 项目到你的 GitHub 账户
2. **Clone** 项目到本地
3. **创建** 功能分支 (`git checkout -b feature/AmazingFeature`)
4. **提交** 你的更改 (`git commit -m 'Add some AmazingFeature'`)
5. **推送** 到分支 (`git push origin feature/AmazingFeature`)
6. **创建** Pull Request

### 代码规范

- 使用 ESLint 进行代码检查
- 遵循 Vue 3 官方风格指南
- 组件名使用 PascalCase
- 文件名使用 kebab-case
- 添加适当的注释和文档

### 提交规范

使用 [Conventional Commits](https://www.conventionalcommits.org/) 规范：

```
feat: 添加新功能
fix: 修复bug
docs: 更新文档
style: 代码格式调整
refactor: 代码重构
test: 添加测试
chore: 构建过程或辅助工具的变动
```

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Element Plus](https://element-plus.org/) - Vue 3 组件库
- [Day.js](https://day.js.org/) - 现代日期处理库
- [Vite](https://vitejs.dev/) - 下一代前端构建工具

## 📞 联系我们

- 项目主页: [GitHub Repository](https://github.com/atlantisholic/vue-gantt-chart)
- 问题反馈: [Issues](https://github.com/atlantisholic/vue-gantt-chart/issues)
- 功能建议: [Discussions](https://github.com/atlantisholic/vue-gantt-chart/discussions)

---

⭐ 如果这个项目对你有帮助，请给我们一个星标！