From 1d954e144a487017f5fd65f2676f53e4b115eb5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E8=AF=97=E6=95=8F?= <3130004661@qq.com>
Date: Thu, 14 Aug 2025 14:38:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=9B=E5=BB=BA=E5=9B=A2?=
 =?UTF-8?q?=E9=98=9F=E6=88=90=E5=91=98=E6=97=B6=E7=9A=84=E6=A8=A1=E7=B3=8A?=
 =?UTF-8?q?=E6=9F=A5=E6=89=BE=E5=8A=9F=E8=83=BD=E4=B8=8E=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/system/user.ts                       |    5 +
 src/types/auto-imports.d.ts                   |    2 +-
 .../construction-personnel.vue                |  127 +-
 .../personnel-dispatch/index.vue              |   40 +-
 .../projects/progress/index.vue               | 1766 +++++++++++++----
 5 files changed, 1516 insertions(+), 424 deletions(-)

diff --git a/src/apis/system/user.ts b/src/apis/system/user.ts
index 59257e1..479f7f4 100644
--- a/src/apis/system/user.ts
+++ b/src/apis/system/user.ts
@@ -63,3 +63,8 @@ export function resetUserPwd(data: any, id: string) {
 export function updateUserRole(data: { roleIds: string[] }, id: string) {
   return http.patch(`${BASE_URL}/${id}/role`, data)
 }
+
+/** @desc 按姓名模糊搜索用户 */
+export function searchUserByName(name: string) {
+  return http.get<T.UserNewResp[]>(`${BASE_URL}/searchByName`, { name })
+}
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 369aad4..eab6be6 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -70,6 +70,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/src/views/project-management/personnel-dispatch/construction-personnel.vue b/src/views/project-management/personnel-dispatch/construction-personnel.vue
index c25741e..ef46a07 100644
--- a/src/views/project-management/personnel-dispatch/construction-personnel.vue
+++ b/src/views/project-management/personnel-dispatch/construction-personnel.vue
@@ -180,7 +180,17 @@
         <div class="form-row">
           <div class="form-item">
             <label>姓名 <span class="required">*</span></label>
-            <a-input v-model="memberForm.name" placeholder="请输入姓名" />
+            <a-auto-complete
+              v-model="memberForm.name"
+              placeholder="请输入姓名进行搜索"
+              :data="userSearchOptions"
+              :loading="userSearchLoading"
+              @search="handleUserSearch"
+              @select="handleUserSelect"
+              allow-clear
+              :filter-option="false"
+              :trigger-on-focus="false"
+            />
           </div>
           <div class="form-item">
             <label>联系电话 <span class="required">*</span></label>
@@ -304,7 +314,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { useRoute } from 'vue-router'
 import type { TeamMemberResp, TeamMemberQuery, TeamMemberExportQuery, CreateTeamMemberForm, UpdateTeamMemberForm, BackendTeamMemberResp } from '@/apis/project/type'
@@ -317,6 +327,8 @@ import {
   exportTeamMembers,
   downloadImportTemplate
 } from '@/apis/project/personnel-dispatch'
+import { searchUserByName } from '@/apis/system/user'
+import type { UserNewResp } from '@/apis/system/type'
 
 // 获取路由参数
 const route = useRoute()
@@ -411,6 +423,12 @@ const statusForm = reactive<{
 
 const fileList = ref<any[]>([])
 
+// 用户搜索相关数据
+const userSearchResults = ref<UserNewResp[]>([])
+const userSearchOptions = ref<Array<{ label: string; value: string; user: UserNewResp }>>([])
+const userSearchLoading = ref(false)
+const searchTimeout = ref<NodeJS.Timeout | null>(null)
+
 // 方法
 const loadData = async () => {
   if (!projectId) {
@@ -505,6 +523,70 @@ const openAddModal = () => {
   memberModalVisible.value = true
 }
 
+// 用户搜索处理函数（带防抖）
+const handleUserSearch = async (value: string) => {
+  console.log('开始搜索用户，输入值:', value)
+  
+  // 清除之前的定时器
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value)
+  }
+  
+  // 如果输入为空，清空结果
+  if (!value || value.trim().length < 1) {
+    userSearchResults.value = []
+    console.log('输入为空，清空搜索结果')
+    return
+  }
+  
+  // 设置防抖延迟（300ms）
+  searchTimeout.value = setTimeout(async () => {
+    console.log('执行搜索，搜索值:', value.trim())
+    userSearchLoading.value = true
+    try {
+      const response = await searchUserByName(value.trim())
+      console.log('API响应完整数据:', response)
+      // 根据后端返回的数据结构，使用 response.rows 而不是 response.data
+      const users = response.rows || []
+      userSearchResults.value = users
+      
+      // 转换为 a-auto-complete 需要的格式
+      userSearchOptions.value = users.map(user => ({
+        label: `${user.name} | ${user.deptName || '未分配部门'}`,
+        value: user.name,
+        user: user
+      }))
+      
+      console.log('设置搜索结果:', userSearchResults.value)
+      console.log('设置搜索选项:', userSearchOptions.value)
+    } catch (error) {
+      console.error('搜索用户失败:', error)
+      userSearchResults.value = []
+      userSearchOptions.value = []
+      Message.error('搜索用户失败')
+    } finally {
+      userSearchLoading.value = false
+    }
+  }, 300)
+}
+
+// 用户选择处理函数
+const handleUserSelect = (value: string, option: any) => {
+  const selectedOption = userSearchOptions.value.find(option => option.value === value)
+  if (selectedOption) {
+    const selectedUser = selectedOption.user
+    // 自动填充用户信息
+    memberForm.name = selectedUser.name
+    memberForm.phone = selectedUser.mobile || ''
+    // 后端返回的数据中没有email字段，所以不自动填充邮箱
+    // memberForm.email = selectedUser.email || ''
+    // 清空搜索结果
+    userSearchResults.value = []
+    userSearchOptions.value = []
+    console.log('选择的用户:', selectedUser)
+  }
+}
+
 const openEditModal = (record: TeamMemberResp) => {
   isEdit.value = true
   Object.assign(memberForm, {
@@ -568,6 +650,9 @@ const saveMember = async () => {
 const cancelMember = () => {
   memberModalVisible.value = false
   resetMemberForm()
+  // 清空用户搜索结果
+  userSearchResults.value = []
+  userSearchOptions.value = []
 }
 
 const resetMemberForm = () => {
@@ -582,6 +667,9 @@ const resetMemberForm = () => {
     joinDate: '',
     remark: ''
   })
+  // 清空用户搜索结果
+  userSearchResults.value = []
+  userSearchOptions.value = []
 }
 
 const openStatusModal = (record: TeamMemberResp) => {
@@ -715,11 +803,11 @@ const getRoleTypeText = (roleType: string) => {
 
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    ACTIVE: 'success',
-    SUSPENDEN: 'warning',
-    INACTIVE: 'danger'
+    ACTIVE: '#52c41a',      // 绿色 - 可用
+    SUSPENDEN: '#faad14',   // 橙色 - 忙碌
+    INACTIVE: '#ff4d4f'     // 红色 - 离线
   }
-  return colorMap[status] || 'danger'
+  return colorMap[status] || '#ff4d4f'
 }
 
 const getStatusText = (status: string) => {
@@ -741,6 +829,13 @@ onMounted(() => {
     Message.warning('未获取到项目信息，请从项目详情页面进入')
   }
 })
+
+onUnmounted(() => {
+  // 清理搜索定时器
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value)
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1307,4 +1402,24 @@ onMounted(() => {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 }
+
+// 用户搜索选项样式
+.user-option {
+  .user-name {
+    font-weight: 500;
+    color: var(--color-text-1);
+  }
+}
+
+// 自动完成组件样式优化
+:deep(.arco-auto-complete) {
+  .arco-input {
+    transition: all 0.3s ease;
+    
+    &:focus {
+      border-color: var(--color-primary-6);
+      box-shadow: 0 0 0 2px rgba(var(--color-primary-6), 0.1);
+    }
+  }
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/project-management/personnel-dispatch/index.vue b/src/views/project-management/personnel-dispatch/index.vue
index 2451c01..a0bcbd8 100644
--- a/src/views/project-management/personnel-dispatch/index.vue
+++ b/src/views/project-management/personnel-dispatch/index.vue
@@ -79,7 +79,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -215,7 +215,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -351,7 +351,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -487,7 +487,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -623,7 +623,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -759,7 +759,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -895,7 +895,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1031,7 +1031,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1180,10 +1180,10 @@
                     <icon-user class="detail-icon" />
                     <span>负责人: {{ project.manager || '未指定' }}</span>
                   </div>
-                  <div class="detail-item">
-                    <icon-user-group class="detail-icon" />
-                    <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
-                  </div>
+                  <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
                   <div class="progress-section">
                     <div class="progress-info">
                       <span>项目进度</span>
@@ -1327,7 +1327,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1474,7 +1474,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1621,7 +1621,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1915,7 +1915,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -2062,7 +2062,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -3041,11 +3041,11 @@ const openSiteManagement = (project: any) => {
 }
 
 // 人员管理
-const openPersonnelManagement = () => {
-  if (currentProject.value && currentProject.value.id) {
+const openPersonnelManagement = (project: any) => {
+  if (project && project.id) {
     router.push({
       path: '/project-management/personnel-dispatch/construction-personnel',
-      query: { projectId: currentProject.value.id }
+      query: { projectId: project.id }
     })
   } else {
     Message.error('项目信息不完整，无法进入团队成员管理')
diff --git a/src/views/project-management/projects/progress/index.vue b/src/views/project-management/projects/progress/index.vue
index 812e92c..ae5a12d 100644
--- a/src/views/project-management/projects/progress/index.vue
+++ b/src/views/project-management/projects/progress/index.vue
@@ -1,476 +1,1448 @@
 <template>
-  <GiPageLayout>
-      <!-- 统计卡片区域 -->
-      <div class="statistics-section">
-        <a-row :gutter="16">
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="我的项目" :value="2" suffix="个" />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="进行中任务" :value="2" suffix="个" />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="待审核报告" :value="1" suffix="份" />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="发现缺陷" :value="8" suffix="处" />
-            </a-card>
-          </a-col>
-        </a-row>
+  <div class="project-progress-container">
+    <!-- 侧边栏 -->
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h3>项目状态筛选</h3>
+        <div class="total-count">总计: {{ projects.length }}个项目</div>
+      </div>
+      
+      <div class="sidebar-content">
+        <div 
+          v-for="status in projectStatuses" 
+          :key="status.key"
+          class="status-group"
+        >
+          <div class="status-title">
+            <span class="status-color" :style="{ backgroundColor: status.color }"></span>
+            <span class="status-label">{{ status.label }}</span>
+            <span class="status-count">({{ getProjectCountByStatus(status.key) }})</span>
+          </div>
+          
+          <div class="project-list" v-if="getProjectCountByStatus(status.key) > 0">
+            <div 
+              v-for="project in getProjectsByStatus(status.key)" 
+              :key="project.projectId"
+              class="project-item"
+              :class="{ active: selectedProject?.projectId === project.projectId }"
+              @click="selectProject(project)"
+            >
+              <div class="project-info">
+                <div class="project-name">{{ project.projectName }}</div>
+                <div class="project-code">{{ project.projectCode }}</div>
+                <div class="project-manager">
+                  👤 {{ project.projectManagerName || '未分配' }}
+                </div>
+                <div class="project-progress">
+                  <a-progress 
+                    :percent="project.progress || 0" 
+                    size="small" 
+                    :show-text="false"
+                    :color="getProgressColor(project.progress || 0)"
+                  />
+                  <span class="progress-text">{{ project.progress || 0 }}%</span>
+                </div>
+                <div class="project-dates">
+                  <span class="date-item">
+                    📅 {{ formatShortDate(project.startDate) }}
+                  </span>
+                  <span class="date-item">
+                    📅 {{ formatShortDate(project.endDate) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div v-else class="empty-status">
+            <span class="empty-text">暂无项目</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主内容区域 -->
+    <div class="main-content">
+      <!-- 项目信息头部 -->
+      <div class="project-header" v-if="selectedProject">
+        <div class="project-title">
+          <h2>{{ selectedProject.projectName }}</h2>
+          <div class="project-tags">
+            <a-tag :color="getStatusColor(selectedProject.status)">
+              {{ getStatusText(selectedProject.status) }}
+            </a-tag>
+            <a-tag color="blue">{{ selectedProject.projectCode }}</a-tag>
+          </div>
+        </div>
+        
+        <div class="project-meta">
+          <div class="meta-item">
+            <span class="label">启动日期:</span>
+            <span class="value">{{ formatDate(selectedProject.startDate) }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">项目负责人:</span>
+            <span class="value">@{{ selectedProject.projectManagerName || '未分配' }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">查看工作量:</span>
+            <span class="value">{{ getTotalWorkload() }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">风场名称:</span>
+            <span class="value">{{ selectedProject.farmName }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">委托单位:</span>
+            <span class="value">{{ selectedProject.client || '未指定' }}</span>
+          </div>
+        </div>
+
+        <div class="project-controls">
+          <a-select 
+            v-model="selectedManager" 
+            placeholder="切换人名" 
+            style="width: 150px"
+            @change="handleManagerChange"
+          >
+            <a-option 
+              v-for="manager in projectManagers" 
+              :key="manager.id" 
+              :value="manager.id"
+            >
+              @{{ manager.name }}
+            </a-option>
+          </a-select>
+          
+          <a-select 
+            v-model="selectedWeek" 
+            placeholder="显示第1周" 
+            style="width: 120px"
+            @change="handleWeekChange"
+          >
+            <a-option 
+              v-for="week in availableWeeks" 
+              :key="week.value" 
+              :value="week.value"
+            >
+              {{ week.label }}
+            </a-option>
+          </a-select>
+          
+          <a-button type="primary" @click="refreshProjectData">
+            🔄 刷新数据
+          </a-button>
+        </div>
+
+        <div class="project-features">
+          <span class="feature-text">
+            ✅ 支持自动高亮"今天"为红色
+          </span>
+          <span class="feature-text">
+            ✅ 休假日期自动标识为淡黄色
+          </span>
+          <span class="feature-text">
+            ⬆️ 修改可自动调整右侧时间轴长度
+          </span>
+        </div>
+
+        <div class="project-legend">
+          <span class="legend-item">
+            <span class="legend-color task-color"></span>
+            灰色底色为任务项,白色底色为子任务项
+          </span>
+          <span class="legend-item">
+            <span class="legend-color editable-color"></span>
+            填写绿色区域,灰色底色部分由公式自动计算
+          </span>
+        </div>
+
+        <div class="timeline-status">
+          <a-tag color="blue">待启动</a-tag>
+          <a-tag color="gray">已完成</a-tag>
+        </div>
       </div>
 
-      <!-- 选项卡区域 -->
-      <div class="tabs-section">
-        <a-tabs v-model:active-key="activeTab" type="line">
-          <a-tab-pane key="progress" tab="项目进度" title="项目进度">
-            <div class="progress-content">
-              <!-- 图表区域 -->
-              <a-card class="chart-card" :bordered="false">
-                <div class="chart-header">
-                  <div class="chart-legend">
-                    <span class="legend-item">
-                      <span class="legend-dot completed"></span>
-                      <span class="legend-text">已完成</span>
-                    </span>
-                    <span class="legend-item">
-                      <span class="legend-dot in-progress"></span>
-                      <span class="legend-text">进行中</span>
-                    </span>
-                    <span class="legend-item">
-                      <span class="legend-dot not-started"></span>
-                      <span class="legend-text">未开始</span>
-                    </span>
+      <!-- 甘特图区域 -->
+      <div class="gantt-container" v-if="selectedProject">
+        <div class="gantt-header">
+          <div class="task-info-header">
+            <div class="header-cell">项目</div>
+            <div class="header-cell">项目描述</div>
+            <div class="header-cell">跟进人</div>
+            <div class="header-cell">启动日期</div>
+            <div class="header-cell">完成日期</div>
+            <div class="header-cell">工时自然日</div>
+            <div class="header-cell">完成度 %</div>
+            <div class="header-cell">工时工作日</div>
+          </div>
+          
+          <div class="timeline-header">
+            <div 
+              v-for="week in timelineWeeks" 
+              :key="week.value"
+              class="week-header"
+            >
+              <div class="week-title">{{ week.label }}</div>
+              <div class="days-header">
+                <div 
+                  v-for="day in week.days" 
+                  :key="day.date"
+                  class="day-header"
+                  :class="{ 
+                    'weekend': day.isWeekend,
+                    'today': day.isToday 
+                  }"
+                >
+                  <div class="day-number">{{ day.dayNumber }}</div>
+                  <div class="day-weekday">{{ day.weekday }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="gantt-body">
+          <div 
+            v-for="task in projectTasks" 
+            :key="task.id"
+            class="task-row"
+            :class="{ 'sub-task': task.isSubTask }"
+          >
+            <!-- 任务信息列 -->
+            <div class="task-info">
+              <div class="task-cell">{{ task.name }}</div>
+              <div class="task-cell">{{ task.description }}</div>
+              <div class="task-cell">@{{ task.assignee }}</div>
+              <div class="task-cell editable">{{ formatDate(task.startDate) }}</div>
+              <div class="task-cell editable">{{ formatDate(task.endDate) }}</div>
+              <div class="task-cell calculated">{{ task.naturalDays }}</div>
+              <div class="task-cell calculated">
+                <div class="progress-bar">
+                  <div 
+                    class="progress-fill" 
+                    :style="{ width: task.progress + '%' }"
+                  ></div>
+                </div>
+                {{ task.progress }}%
+              </div>
+              <div class="task-cell calculated">{{ task.workDays }}</div>
+            </div>
+
+            <!-- 时间轴 -->
+            <div class="task-timeline">
+              <div 
+                v-for="week in timelineWeeks" 
+                :key="week.value"
+                class="week-timeline"
+              >
+                <div class="days-timeline">
+                  <div 
+                    v-for="day in week.days" 
+                    :key="day.date"
+                    class="day-timeline"
+                    :class="{ 
+                      'weekend': day.isWeekend,
+                      'today': day.isToday 
+                    }"
+                  >
+                    <div 
+                      v-if="isTaskActiveOnDay(task, day.date)"
+                      class="task-bar"
+                      :class="{
+                        'completed': isTaskCompletedOnDay(task, day.date),
+                        'pending': !isTaskCompletedOnDay(task, day.date)
+                      }"
+                      :style="getTaskBarStyle(task, day.date)"
+                    ></div>
                   </div>
                 </div>
-                
-                <div class="chart-container">
-                  <a-spin :loading="chartLoading">
-                    <Chart v-if="!chartLoading" :option="barChartOption" style="height: 300px" />
-                  </a-spin>
-                </div>
-              </a-card>
-
-              <!-- 我的项目表格 -->
-              <a-card class="table-card" :bordered="false">
-                <template #title>
-                  <span class="table-title">我的项目</span>
-                </template>
-                
-                <a-table 
-                  :columns="projectColumns"
-                  :data="projectData"
-                  :pagination="false"
-                  :scroll="{ x: '100%' }"
-                >
-                  <!-- 状态列 -->
-                  <template #status="{ record }">
-                    <a-tag :color="getStatusColor(record.status)">
-                      {{ record.status }}
-                    </a-tag>
-                  </template>
-
-                  <!-- 进度列 -->
-                  <template #progress="{ record }">
-                    <div class="progress-container">
-                      <a-progress
-                        :percent="record.progress"
-                        :color="getProgressColor(record.progress)"
-                        size="small"
-                        :show-text="false"
-                      />
-                      <span class="progress-text">{{ record.progress }}%</span>
-                    </div>
-                  </template>
-
-                  <!-- 操作列 -->
-                  <template #action="{ record }">
-                    <a-space>
-                      <a-button size="small" @click="viewProject(record)">查看</a-button>
-                      <a-button type="primary" size="small" @click="enterProject(record)">进入</a-button>
-                    </a-space>
-                  </template>
-                </a-table>
-              </a-card>
+              </div>
             </div>
-          </a-tab-pane>
-          
-          <a-tab-pane key="tasks" tab="施工任务" title="施工任务">
-            <div class="tasks-content">
-              <a-empty description="施工任务功能开发中..." />
-            </div>
-          </a-tab-pane>
-          
-          <a-tab-pane key="notifications" tab="消息通知" title="消息通知">
-            <div class="notifications-content">
-              <a-empty description="消息通知功能开发中..." />
-            </div>
-          </a-tab-pane>
-        </a-tabs>
+          </div>
+        </div>
       </div>
-  </GiPageLayout>
+
+      <!-- 无项目选择时的提示 -->
+      <div v-else class="no-project-selected">
+        <a-empty description="请从左侧选择一个项目查看甘特图">
+          <template #image>
+            📊
+          </template>
+          <template #description>
+            <p>从左侧侧边栏选择不同状态的项目</p>
+            <p>查看项目进度和任务甘特图</p>
+          </template>
+        </a-empty>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import type { TableColumnData } from '@arco-design/web-vue'
-import { useChart } from '@/hooks'
 
-// 活动选项卡
-const activeTab = ref('progress')
+// 尝试导入dayjs，如果失败则使用原生Date
+let dayjs: any
+try {
+  dayjs = require('dayjs')
+} catch (error) {
+  console.warn('dayjs导入失败，使用原生Date对象')
+  dayjs = {
+    format: (date: Date, format: string) => {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+      const weekday = weekdays[date.getDay()]
+      
+      if (format === 'YYYY/M/D dddd') {
+        return `${year}/${month}/${day} 星期${weekday}`
+      }
+      if (format === 'YYYY/M/D') {
+        return `${year}/${month}/${day}`
+      }
+      if (format === 'YYYY-MM-DD') {
+        return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
+      }
+      return `${year}/${month}/${day}`
+    },
+    add: (date: Date, amount: number, unit: string) => {
+      const newDate = new Date(date)
+      if (unit === 'day') {
+        newDate.setDate(newDate.getDate() + amount)
+      }
+      return newDate
+    },
+    isSame: (date1: Date, date2: Date, unit: string) => {
+      if (unit === 'day') {
+        return date1.toDateString() === date2.toDateString()
+      }
+      return date1.getTime() === date2.getTime()
+    },
+    diff: (date1: Date, date2: Date, unit: string) => {
+      if (unit === 'day') {
+        const timeDiff = date1.getTime() - date2.getTime()
+        return Math.floor(timeDiff / (1000 * 3600 * 24))
+      }
+      return date1.getTime() - date2.getTime()
+    },
+    isBetween: (date: Date, start: Date, end: Date, unit: string, inclusivity: string) => {
+      const time = date.getTime()
+      const startTime = start.getTime()
+      const endTime = end.getTime()
+      
+      if (inclusivity === '[]') {
+        return time >= startTime && time <= endTime
+      }
+      return time > startTime && time < endTime
+    }
+  }
+}
 
-// 图表加载状态
-const chartLoading = ref(false)
+import type { ProjectResp } from '@/apis/project/type'
 
-// 项目数据
-const projectData = ref([
+// 项目状态定义 - 按照你的要求映射
+const projectStatuses = [
+  { key: 'pending', label: '未开工', color: '#ff4d4f' },
+  { key: 'preparing', label: '筹备中', color: '#faad14' },
+  { key: 'inProgress', label: '开工中', color: '#1890ff' },
+  { key: 'suspended', label: '暂停中', color: '#722ed1' },
+  { key: 'completed', label: '已完工', color: '#52c41a' },
+  { key: 'acceptance', label: '验收中', color: '#13c2c2' },
+  { key: 'collection', label: '回款中', color: '#eb2f96' },
+  { key: 'settled', label: '已结算', color: '#52c41a' }
+]
+
+// 响应式数据
+const selectedProject = ref<ProjectResp | null>(null)
+const selectedManager = ref<string>('')
+const selectedWeek = ref<string>('week1')
+
+// 模拟项目数据 - 包含所有8种状态
+const projects = ref<ProjectResp[]>([
   {
-    id: 1,
-    name: 'A风场2023年检查',
-    turbineCount: 15,
-    startDate: '2023-10-01',
-    endDate: '2023-12-31',
-    status: '进行中',
-    progress: 65
+    projectId: '1',
+    projectName: 'ABC 项目',
+    projectCode: 'ABC001',
+    projectIntro: '风电场检测服务项目',
+    farmName: '华能风电场',
+    farmAddress: '内蒙古呼和浩特',
+    client: '华能新能源股份有限公司',
+    projectManagerId: '1',
+    projectManagerName: '黄泡泡',
+    startDate: '2025-01-10',
+    endDate: '2025-01-30',
+    status: 2, // 开工中
+    progress: 33
   },
   {
-    id: 2,
-    name: 'B风场维修项目',
-    turbineCount: 8,
-    startDate: '2023-09-15',
-    endDate: '2023-11-30',
-    status: '进行中',
-    progress: 45
+    projectId: '2',
+    projectName: 'DEF 项目',
+    projectCode: 'DEF002',
+    projectIntro: '设备维护服务项目',
+    farmName: '大唐风电场',
+    farmAddress: '河北张家口',
+    client: '大唐新能源股份有限公司',
+    projectManagerId: '2',
+    projectManagerName: '周北北',
+    startDate: '2025-01-15',
+    endDate: '2025-02-15',
+    status: 1, // 筹备中
+    progress: 0
+  },
+  {
+    projectId: '3',
+    projectName: 'GHI 项目',
+    projectCode: 'GHI003',
+    projectIntro: '叶片检测项目',
+    farmName: '中广核风电场',
+    farmAddress: '广东阳江',
+    client: '中广核新能源投资有限公司',
+    projectManagerId: '3',
+    projectManagerName: '王小铭',
+    startDate: '2024-12-01',
+    endDate: '2024-12-31',
+    status: 4, // 已完工
+    progress: 100
+  },
+  {
+    projectId: '4',
+    projectName: 'JKL 项目',
+    projectCode: 'JKL004',
+    projectIntro: '塔筒检测项目',
+    farmName: '三峡风电场',
+    farmAddress: '湖北宜昌',
+    client: '三峡新能源有限公司',
+    projectManagerId: '1',
+    projectManagerName: '黄泡泡',
+    startDate: '2025-02-01',
+    endDate: '2025-02-28',
+    status: 0, // 未开工
+    progress: 0
+  },
+  {
+    projectId: '5',
+    projectName: 'MNO 项目',
+    projectCode: 'MNO005',
+    projectIntro: '齿轮箱检测项目',
+    farmName: '国电风电场',
+    farmAddress: '甘肃酒泉',
+    client: '国电电力发展股份有限公司',
+    projectManagerId: '2',
+    projectManagerName: '周北北',
+    startDate: '2025-01-20',
+    endDate: '2025-02-20',
+    status: 3, // 暂停中
+    progress: 25
+  },
+  {
+    projectId: '6',
+    projectName: 'PQR 项目',
+    projectCode: 'PQR006',
+    projectIntro: '发电机检测项目',
+    farmName: '华电风电场',
+    farmAddress: '新疆哈密',
+    client: '华电国际电力股份有限公司',
+    projectManagerId: '3',
+    projectManagerName: '王小铭',
+    startDate: '2024-11-01',
+    endDate: '2024-11-30',
+    status: 5, // 验收中
+    progress: 95
+  },
+  {
+    projectId: '7',
+    projectName: 'STU 项目',
+    projectCode: 'STU007',
+    projectIntro: '控制系统检测项目',
+    farmName: '龙源风电场',
+    farmAddress: '内蒙古锡林郭勒',
+    client: '龙源电力集团股份有限公司',
+    projectManagerId: '1',
+    projectManagerName: '黄泡泡',
+    startDate: '2024-10-01',
+    endDate: '2024-10-31',
+    status: 6, // 回款中
+    progress: 100
+  },
+  {
+    projectId: '8',
+    projectName: 'VWX 项目',
+    projectCode: 'VWX008',
+    projectIntro: '变桨系统检测项目',
+    farmName: '金风风电场',
+    farmAddress: '江苏盐城',
+    client: '金风科技股份有限公司',
+    projectManagerId: '2',
+    projectManagerName: '周北北',
+    startDate: '2024-09-01',
+    endDate: '2024-09-30',
+    status: 7, // 已结算
+    progress: 100
   }
 ])
 
-// 项目表格列配置
-const projectColumns: TableColumnData[] = [
-  { title: '项目名称', dataIndex: 'name', width: 200 },
-  { title: '机组数量', dataIndex: 'turbineCount', width: 100 },
-  { title: '开始日期', dataIndex: 'startDate', width: 120 },
-  { title: '结束日期', dataIndex: 'endDate', width: 120 },
-  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
-  { title: '进度', dataIndex: 'progress', slotName: 'progress', width: 150 },
-  { title: '操作', slotName: 'action', width: 150, fixed: 'right' }
-]
-
-// 图表数据
-const chartData = [
+// 模拟任务数据
+const projectTasks = ref([
   {
-    name: 'D风场',
-    notStarted: 400,
-    inProgress: 0,
-    completed: 0
+    id: '1',
+    name: '1 需求分析',
+    description: '项目需求分析和规划',
+    assignee: '黄泡泡',
+    startDate: '2025-01-10',
+    endDate: '2025-01-22',
+    naturalDays: 35,
+    progress: 33,
+    workDays: 9,
+    isSubTask: false
   },
   {
-    name: 'C风场',
-    notStarted: 0,
-    inProgress: 0,
-    completed: 200
+    id: '1.1',
+    name: '1.1 【用户反馈分析】',
+    description: '收集和分析用户反馈',
+    assignee: '黄泡泡',
+    startDate: '2025-01-10',
+    endDate: '2025-01-11',
+    naturalDays: 2,
+    progress: 100,
+    workDays: 1,
+    isSubTask: true
   },
   {
-    name: 'B风场',
-    notStarted: 0,
-    inProgress: 180,
-    completed: 120
+    id: '1.2',
+    name: '1.2 【用户调研访谈】',
+    description: '进行用户调研和访谈',
+    assignee: '周北北',
+    startDate: '2025-01-11',
+    endDate: '2025-01-12',
+    naturalDays: 2,
+    progress: 60,
+    workDays: 0,
+    isSubTask: true
   },
   {
-    name: 'A风场',
-    notStarted: 0,
-    inProgress: 80,
-    completed: 320
+    id: '1.3',
+    name: '1.3 【竞品体验分析】',
+    description: '分析竞品功能和体验',
+    assignee: '周北北',
+    startDate: '2025-01-12',
+    endDate: '2025-01-15',
+    naturalDays: 4,
+    progress: 50,
+    workDays: 3,
+    isSubTask: true
+  },
+  {
+    id: '1.4',
+    name: '1.4 【功能数据分析】',
+    description: '分析功能需求数据',
+    assignee: '王小铭',
+    startDate: '2025-01-13',
+    endDate: '2025-01-17',
+    naturalDays: 5,
+    progress: 75,
+    workDays: 5,
+    isSubTask: true
+  },
+  {
+    id: '1.5',
+    name: '1.5 【需求目标制定】',
+    description: '制定项目需求目标',
+    assignee: '周北北',
+    startDate: '2025-01-14',
+    endDate: '2025-01-21',
+    naturalDays: 8,
+    progress: 10,
+    workDays: 6,
+    isSubTask: true
+  },
+  {
+    id: '1.6',
+    name: '1.6 【任务xxx】',
+    description: '待定任务内容',
+    assignee: '王小铭',
+    startDate: '2025-01-15',
+    endDate: '2025-01-21',
+    naturalDays: 7,
+    progress: 30,
+    workDays: 5,
+    isSubTask: true
+  },
+  {
+    id: '1.7',
+    name: '1.7 【任务xxx】',
+    description: '待定任务内容',
+    assignee: '黄泡泡',
+    startDate: '2025-01-16',
+    endDate: '2025-01-22',
+    naturalDays: 7,
+    progress: 0,
+    workDays: 5,
+    isSubTask: true
+  },
+  {
+    id: '2',
+    name: '2 产品设计',
+    description: '产品设计和原型制作',
+    assignee: '周北北',
+    startDate: '2025-01-18',
+    endDate: '2025-01-26',
+    naturalDays: 19,
+    progress: 0,
+    workDays: 6,
+    isSubTask: false
+  },
+  {
+    id: '2.1',
+    name: '2.1 【需求战略层和范围层评审】',
+    description: '评审需求战略和范围',
+    assignee: '周北北',
+    startDate: '2025-01-18',
+    endDate: '2025-01-21',
+    naturalDays: 4,
+    progress: 0,
+    workDays: 2,
+    isSubTask: true
   }
-]
+])
 
-// 使用图表hook
-const { chartOption: barChartOption } = useChart(() => {
-  return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
+// 项目经理列表
+const projectManagers = ref([
+  { id: '1', name: '黄泡泡' },
+  { id: '2', name: '周北北' },
+  { id: '3', name: '王小铭' }
+])
+
+// 可用周数
+const availableWeeks = ref([
+  { value: 'week1', label: '第1周' },
+  { value: 'week2', label: '第2周' },
+  { value: 'week3', label: '第3周' },
+  { value: 'week4', label: '第4周' }
+])
+
+// 时间轴周数 - 简化版本
+const timelineWeeks = computed(() => {
+  try {
+    const weeks = []
+    const startDate = new Date('2025-01-06')
+    
+    for (let i = 0; i < 4; i++) {
+      const weekStart = dayjs.add(startDate, i * 7, 'day')
+      const days = []
+      
+      for (let j = 0; j < 7; j++) {
+        const currentDate = dayjs.add(weekStart, j, 'day')
+        const dayNumber = currentDate.getDate()
+        const weekday = ['日', '一', '二', '三', '四', '五', '六'][currentDate.getDay()]
+        const isWeekend = currentDate.getDay() === 0 || currentDate.getDay() === 6
+        const isToday = dayjs.isSame(currentDate, new Date(), 'day')
+        
+        days.push({
+          date: dayjs.format(currentDate, 'YYYY-MM-DD'),
+          dayNumber,
+          weekday,
+          isWeekend,
+          isToday
+        })
       }
-    },
-    legend: {
-      show: false
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      max: 400,
-      axisLabel: {
-        formatter: '{value}'
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: chartData.map(item => item.name),
-      axisLabel: {
-        fontSize: 12
-      }
-    },
-    series: [
-      {
-        name: '已完成',
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-          color: '#52c41a'
-        },
-        data: chartData.map(item => item.completed),
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
-        }
-      },
-      {
-        name: '进行中',
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-          color: '#1890ff'
-        },
-        data: chartData.map(item => item.inProgress),
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
-        }
-      },
-      {
-        name: '未开始',
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-          color: '#8c8c8c'
-        },
-        data: chartData.map(item => item.notStarted),
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
-        }
-      }
-    ]
+      
+      weeks.push({
+        value: `week${i + 1}`,
+        label: `第${i + 1}周`,
+        days
+      })
+    }
+    
+    return weeks
+  } catch (error) {
+    console.error('计算时间轴出错:', error)
+    return []
   }
 })
 
-// 获取状态颜色
-const getStatusColor = (status: string) => {
-  const colorMap: Record<string, string> = {
-    '进行中': 'blue',
-    '已完成': 'green',
-    '未开始': 'gray',
-    '已暂停': 'orange'
+// 计算属性
+const getProjectCountByStatus = (status: string) => {
+  try {
+    return projects.value.filter(p => getStatusKey(p.status) === status).length
+  } catch (error) {
+    console.error('计算项目数量出错:', error)
+    return 0
   }
-  return colorMap[status] || 'gray'
 }
 
-// 获取进度颜色
+const getProjectsByStatus = (status: string) => {
+  try {
+    return projects.value.filter(p => getStatusKey(p.status) === status)
+  } catch (error) {
+    console.error('筛选项目出错:', error)
+    return []
+  }
+}
+
+const getTotalWorkload = () => {
+  try {
+    if (!selectedProject.value) return 0
+    return projectTasks.value
+      .filter(task => !task.isSubTask)
+      .reduce((total, task) => total + (task.workDays || 0), 0)
+  } catch (error) {
+    console.error('计算工作量出错:', error)
+    return 0
+  }
+}
+
+// 方法
+const getStatusKey = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: 'pending',      // 未开工
+    1: 'preparing',    // 筹备中
+    2: 'inProgress',   // 开工中
+    3: 'suspended',    // 暂停中
+    4: 'completed',    // 已完工
+    5: 'acceptance',   // 验收中
+    6: 'collection',   // 回款中
+    7: 'settled'       // 已结算
+  }
+  return statusMap[status] || 'pending'
+}
+
+const getStatusText = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: '未开工',
+    1: '筹备中',
+    2: '开工中',
+    3: '暂停中',
+    4: '已完工',
+    5: '验收中',
+    6: '回款中',
+    7: '已结算'
+  }
+  return statusMap[status] || '未知'
+}
+
+const getStatusColor = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: '#ff4d4f',  // 未开工 - 红色
+    1: '#faad14',  // 筹备中 - 橙色
+    2: '#1890ff',  // 开工中 - 蓝色
+    3: '#722ed1',  // 暂停中 - 紫色
+    4: '#52c41a',  // 已完工 - 绿色
+    5: '#13c2c2',  // 验收中 - 青色
+    6: '#eb2f96',  // 回款中 - 粉色
+    7: '#52c41a'   // 已结算 - 绿色
+  }
+  return statusMap[status] || '#d9d9d9'
+}
+
 const getProgressColor = (progress: number) => {
   if (progress >= 80) return '#52c41a'
-  if (progress >= 60) return '#1890ff'
-  if (progress >= 40) return '#faad14'
+  if (progress >= 50) return '#1890ff'
+  if (progress >= 20) return '#faad14'
   return '#ff4d4f'
 }
 
-// 操作方法
-const viewProject = (record: any) => {
-  Message.info(`查看项目: ${record.name}`)
+const formatDate = (date: string | undefined) => {
+  if (!date) return ''
+  try {
+    return dayjs.format(new Date(date), 'YYYY/M/D dddd')
+  } catch (error) {
+    console.error('格式化日期出错:', error)
+    return date || ''
+  }
 }
 
-const enterProject = (record: any) => {
-  Message.info(`进入项目: ${record.name}`)
+const formatShortDate = (date: string | undefined) => {
+  if (!date) return ''
+  try {
+    return dayjs.format(new Date(date), 'YYYY/M/D')
+  } catch (error) {
+    console.error('格式化短日期出错:', error)
+    return date || ''
+  }
 }
 
-// 加载图表数据
-const loadChartData = async () => {
-  chartLoading.value = true
-  setTimeout(() => {
-    chartLoading.value = false
-  }, 1000)
+const selectProject = (project: ProjectResp) => {
+  selectedProject.value = project
+  selectedManager.value = project.projectManagerId || ''
+  Message.success(`已选择项目: ${project.projectName}`)
 }
 
+const handleManagerChange = (value: string) => {
+  Message.info(`切换到负责人: ${value}`)
+}
+
+const handleWeekChange = (value: string) => {
+  Message.info(`切换到: ${value}`)
+}
+
+const refreshProjectData = () => {
+  Message.info('刷新项目数据')
+}
+
+const isTaskActiveOnDay = (task: any, date: string) => {
+  try {
+    const taskStart = new Date(task.startDate)
+    const taskEnd = new Date(task.endDate)
+    const currentDate = new Date(date)
+    return dayjs.isBetween(currentDate, taskStart, taskEnd, 'day', '[]')
+  } catch (error) {
+    console.error('检查任务活跃状态出错:', error)
+    return false
+  }
+}
+
+const isTaskCompletedOnDay = (task: any, date: string) => {
+  try {
+    if (task.progress >= 100) return true
+    
+    const taskStart = new Date(task.startDate)
+    const taskEnd = new Date(task.endDate)
+    const currentDate = new Date(date)
+    
+    if (!dayjs.isBetween(currentDate, taskStart, taskEnd, 'day', '[]')) return false
+    
+    const totalDays = dayjs.diff(taskEnd, taskStart, 'day') + 1
+    const completedDays = Math.floor((task.progress / 100) * totalDays)
+    const daysFromStart = dayjs.diff(currentDate, taskStart, 'day') + 1
+    
+    return daysFromStart <= completedDays
+  } catch (error) {
+    console.error('检查任务完成状态出错:', error)
+    return false
+  }
+}
+
+const getTaskBarStyle = (task: any, date: string) => {
+  try {
+    const taskStart = new Date(task.startDate)
+    const currentDate = new Date(date)
+    const daysFromStart = dayjs.diff(currentDate, taskStart, 'day')
+    
+    return {
+      left: `${daysFromStart * 40}px`,
+      width: '40px'
+    }
+  } catch (error) {
+    console.error('计算任务条样式出错:', error)
+    return { left: '0px', width: '40px' }
+  }
+}
+
+// 生命周期
 onMounted(() => {
-  loadChartData()
+  try {
+    console.log('项目管理甘特图页面加载中...')
+    
+    // 检查必要的数据
+    console.log('项目数据:', projects.value)
+    console.log('任务数据:', projectTasks.value)
+    
+    // 默认选择第一个项目
+    if (projects.value.length > 0) {
+      selectProject(projects.value[0])
+      console.log('已选择默认项目:', projects.value[0])
+    } else {
+      console.warn('没有可用的项目数据')
+    }
+    
+    console.log('页面加载完成')
+  } catch (error) {
+    console.error('页面加载出错:', error)
+  }
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .project-progress-container {
-  padding: 16px;
-  background: #f5f5f5;
-  min-height: 100vh;
+  display: flex;
+  height: 100vh;
+  background-color: #f5f5f5;
 }
 
-.statistics-section {
-  margin-bottom: 16px;
-}
-
-.stat-card {
-  text-align: center;
+.sidebar {
+  width: 320px;
+  background-color: #fff;
+  border-right: 1px solid #e8e8e8;
+  overflow-y: auto;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
   
-  :deep(.arco-statistic-title) {
-    color: #8c8c8c;
-    font-size: 14px;
-    margin-bottom: 8px;
-  }
-  
-  :deep(.arco-statistic-value) {
-    color: #262626;
-    font-size: 24px;
-    font-weight: 500;
-  }
-}
-
-.tabs-section {
-  background: #fff;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.progress-content {
-  margin-top: 16px;
-}
-
-.chart-card {
-  margin-bottom: 16px;
-  border-radius: 8px;
-  
-  .chart-header {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 16px;
-  }
-  
-  .chart-legend {
-    display: flex;
-    gap: 24px;
+  .sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid #e8e8e8;
+    background-color: #fafafa;
     
-    .legend-item {
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .total-count {
+      font-size: 12px;
+      color: #86909c;
+      margin-top: 4px;
+    }
+  }
+  
+  .sidebar-content {
+    padding: 16px;
+  }
+  
+  .status-group {
+    margin-bottom: 24px;
+    
+    .status-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      font-weight: 600;
+      color: #1d2129;
+      padding: 8px 12px;
+      background-color: #f7f8fa;
+      border-radius: 6px;
+      
+      .status-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-right: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      
+      .status-count {
+        margin-left: auto;
+        font-size: 12px;
+        color: #86909c;
+        font-weight: normal;
+        background-color: #fff;
+        padding: 2px 8px;
+        border-radius: 10px;
+        border: 1px solid #e8e8e8;
+      }
+    }
+    
+    .project-list {
+      .project-item {
+        padding: 12px;
+        margin-bottom: 8px;
+        background-color: #f7f8fa;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: 1px solid transparent;
+        
+        &:hover {
+          background-color: #e8f3ff;
+          border-color: #91d5ff;
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+        }
+        
+        &.active {
+          background-color: #e6f4ff;
+          border: 1px solid #1890ff;
+          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+        }
+        
+        .project-info {
+          .project-name {
+            font-weight: 600;
+            color: #1d2129;
+            margin-bottom: 4px;
+            font-size: 14px;
+            line-height: 1.4;
+          }
+          
+          .project-code {
+            font-size: 12px;
+            color: #86909c;
+            margin-bottom: 4px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+          }
+
+          .project-manager {
+            font-size: 12px;
+            color: #86909c;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          }
+          
+          .project-progress {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            
+            .progress-text {
+              font-size: 12px;
+              color: #86909c;
+              min-width: 30px;
+              font-weight: 500;
+            }
+          }
+
+          .project-dates {
+            display: flex;
+            gap: 12px;
+            margin-top: 8px;
+            font-size: 12px;
+            color: #86909c;
+
+            .date-item {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            }
+          }
+        }
+      }
+    }
+
+    .empty-status {
+      padding: 12px;
+      text-align: center;
+      color: #86909c;
+      font-size: 14px;
+      background-color: #f7f8fa;
+      border-radius: 6px;
+      border: 1px dashed #d9d9d9;
+    }
+  }
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.project-header {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  
+  .project-title {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    
+    h2 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .project-tags {
+      display: flex;
+      gap: 8px;
+    }
+  }
+  
+  .project-meta {
+    display: flex;
+    gap: 32px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    
+    .meta-item {
       display: flex;
       align-items: center;
       gap: 8px;
+      min-width: 200px;
       
-      .legend-dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 2px;
-        
-        &.completed {
-          background-color: #52c41a;
-        }
-        
-        &.in-progress {
-          background-color: #1890ff;
-        }
-        
-        &.not-started {
-          background-color: #8c8c8c;
-        }
+      .label {
+        color: #86909c;
+        font-size: 14px;
+        white-space: nowrap;
       }
       
-      .legend-text {
-        font-size: 14px;
-        color: #595959;
+      .value {
+        color: #1d2129;
+        font-weight: 500;
       }
     }
   }
   
-  .chart-container {
-    height: 300px;
+  .project-controls {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 20px;
+    align-items: center;
   }
-}
-
-.table-card {
-  border-radius: 8px;
   
-  .table-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #262626;
+  .project-features {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+    
+    .feature-text {
+      font-size: 12px;
+      color: #86909c;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      background-color: #f7f8fa;
+      border-radius: 4px;
+    }
+  }
+  
+  .project-legend {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+    
+    .legend-item {
+      font-size: 12px;
+      color: #86909c;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 8px;
+      background-color: #f7f8fa;
+      border-radius: 4px;
+
+      .legend-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+
+      .task-color {
+        background-color: #d9d9d9;
+      }
+
+      .editable-color {
+        background-color: #f6ffed;
+      }
+    }
+  }
+  
+  .timeline-status {
+    display: flex;
+    gap: 12px;
   }
 }
 
-.progress-container {
+.gantt-container {
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  
+  .gantt-header {
+    display: flex;
+    border-bottom: 1px solid #e8e8e8;
+    
+    .task-info-header {
+      display: flex;
+      min-width: 800px;
+      background-color: #fafafa;
+      
+      .header-cell {
+        padding: 12px 8px;
+        border-right: 1px solid #e8e8e8;
+        font-size: 12px;
+        font-weight: 600;
+        color: #1d2129;
+        text-align: center;
+        min-width: 100px;
+        
+        &:first-child {
+          min-width: 80px;
+        }
+        
+        &:nth-child(2) {
+          min-width: 150px;
+        }
+        
+        &:nth-child(3) {
+          min-width: 100px;
+        }
+        
+        &:nth-child(4),
+        &:nth-child(5) {
+          min-width: 120px;
+        }
+        
+        &:nth-child(6),
+        &:nth-child(7),
+        &:nth-child(8) {
+          min-width: 80px;
+        }
+      }
+    }
+    
+    .timeline-header {
+      display: flex;
+      flex: 1;
+      background-color: #fafafa;
+      
+      .week-header {
+        border-right: 1px solid #e8e8e8;
+        
+        .week-title {
+          padding: 8px;
+          text-align: center;
+          font-size: 12px;
+          font-weight: 600;
+          color: #1d2129;
+          background-color: #f0f0f0;
+          border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .days-header {
+          display: flex;
+          
+          .day-header {
+            width: 40px;
+            padding: 4px;
+            text-align: center;
+            border-right: 1px solid #f0f0f0;
+            border-bottom: 1px solid #e8e8e8;
+            
+            &.weekend {
+              background-color: #fff7e6;
+            }
+            
+            &.today {
+              background-color: #ff4d4f;
+              color: #fff;
+            }
+            
+            .day-number {
+              font-size: 12px;
+              font-weight: 600;
+            }
+            
+            .day-weekday {
+              font-size: 10px;
+              color: #86909c;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .gantt-body {
+    .task-row {
+      display: flex;
+      border-bottom: 1px solid #f0f0f0;
+      
+      &.sub-task {
+        background-color: #fff;
+      }
+      
+      &:not(.sub-task) {
+        background-color: #f7f8fa;
+      }
+      
+      .task-info {
+        display: flex;
+        min-width: 800px;
+        
+        .task-cell {
+          padding: 12px 8px;
+          border-right: 1px solid #e8e8e8;
+          font-size: 12px;
+          color: #1d2129;
+          text-align: center;
+          min-width: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          
+          &:first-child {
+            min-width: 80px;
+            font-weight: 600;
+          }
+          
+          &:nth-child(2) {
+            min-width: 150px;
+            text-align: left;
+            justify-content: flex-start;
+          }
+          
+          &:nth-child(3) {
+            min-width: 100px;
+          }
+          
+          &:nth-child(4),
+          &:nth-child(5) {
+            min-width: 120px;
+          }
+          
+          &:nth-child(6),
+          &:nth-child(7),
+          &:nth-child(8) {
+            min-width: 80px;
+          }
+          
+          &.editable {
+            background-color: #f6ffed;
+            border: 1px solid #b7eb8f;
+          }
+          
+          &.calculated {
+            background-color: #f5f5f5;
+            color: #666;
+          }
+          
+          .progress-bar {
+            width: 100%;
+            height: 8px;
+            background-color: #f0f0f0;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-right: 8px;
+            
+            .progress-fill {
+              height: 100%;
+              background-color: #52c41a;
+              transition: width 0.3s ease;
+            }
+          }
+        }
+      }
+      
+      .task-timeline {
+        display: flex;
+        flex: 1;
+        position: relative;
+        
+        .week-timeline {
+          border-right: 1px solid #f0f0f0;
+          
+          .days-timeline {
+            display: flex;
+            
+            .day-timeline {
+              width: 40px;
+              height: 60px;
+              border-right: 1px solid #f0f0f0;
+              border-bottom: 1px solid #f0f0f0;
+              position: relative;
+              
+              &.weekend {
+                background-color: #fff7e6;
+              }
+              
+              &.today {
+                background-color: #ff4d4f;
+              }
+              
+              .task-bar {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                height: 20px;
+                border-radius: 2px;
+                
+                &.completed {
+                  background-color: #d9d9d9;
+                }
+                
+                &.pending {
+                  background-color: #1890ff;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.no-project-selected {
   display: flex;
   align-items: center;
-  gap: 8px;
-  width: 100%;
+  justify-content: center;
+  height: 400px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  text-align: center;
   
-  .progress-text {
-    font-size: 12px;
-    color: #8c8c8c;
-    min-width: 35px;
+  p {
+    margin: 8px 0;
+    color: #86909c;
   }
 }
 
-.tasks-content,
-.notifications-content {
-  padding: 40px;
-  text-align: center;
+// 响应式设计
+@media (max-width: 1200px) {
+  .sidebar {
+    width: 280px;
+  }
+  
+  .gantt-container {
+    .gantt-header {
+      .task-info-header {
+        min-width: 600px;
+        
+        .header-cell {
+          min-width: 80px;
+          font-size: 11px;
+          padding: 8px 4px;
+        }
+      }
+    }
+    
+    .gantt-body {
+      .task-row {
+        .task-info {
+          min-width: 600px;
+          
+          .task-cell {
+            min-width: 80px;
+            font-size: 11px;
+            padding: 8px 4px;
+          }
+        }
+      }
+    }
+  }
 }
 
-:deep(.arco-card) {
-  border: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+@media (max-width: 768px) {
+  .project-progress-container {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 300px;
+  }
+  
+  .main-content {
+    padding: 16px;
+  }
+  
+  .project-header {
+    padding: 16px;
+    
+    .project-meta {
+      gap: 16px;
+      
+      .meta-item {
+        min-width: 150px;
+      }
+    }
+  }
 }
-
-:deep(.arco-card-body) {
-  padding: 20px;
-}
-
-:deep(.arco-tabs-nav) {
-  margin-bottom: 0;
-}
-
-:deep(.arco-tabs-tab) {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-
-:deep(.arco-table-th) {
-  background-color: #fafafa;
-  color: #8c8c8c;
-  font-weight: 500;
-}
-
-:deep(.arco-table-td) {
-  padding: 12px 16px;
-}
-
-:deep(.arco-progress-line) {
-  flex: 1;
-}
-
-:deep(.arco-tag) {
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-:deep(.arco-btn-size-small) {
-  padding: 2px 8px;
-  font-size: 12px;
-}
-</style> 
\ No newline at end of file
+</style>