yss-project/src/app/pages/team-leader/project-timeline/project-progress-modal.html

<!-- 弹窗遮罩 -->
<div class="modal-overlay" *ngIf="visible" (click)="onClose()">
  <!-- 弹窗内容 -->
  <div class="modal-content" (click)="onContentClick($event)">
    <!-- 标题栏 -->
    <div class="modal-header">
      <h2 class="modal-title">
        <span class="icon">📊</span>
        项目进度详情
      </h2>
      <button class="close-btn" (click)="onClose()" aria-label="关闭">
        <span>✕</span>
      </button>
    </div>

    <!-- 项目基本信息 -->
    <div class="project-info" *ngIf="summary">
      <div class="info-row">
        <span class="label">项目名称：</span>
        <span class="value">{{ summary.projectName }}</span>
      </div>
      <div class="info-row">
        <span class="label">空间总数：</span>
        <span class="value">{{ summary.totalSpaces }} 个</span>
      </div>
      <div class="info-row">
        <span class="label">已完成空间：</span>
        <span class="value">{{ summary.spacesWithDeliverables }} / {{ summary.totalSpaces }}</span>
      </div>
    </div>

    <!-- 整体进度 -->
    <div class="overall-progress" *ngIf="summary">
      <div class="progress-header">
        <span class="label">整体完成率</span>
        <span class="percentage" [style.color]="getOverallProgressColor()">
          {{ summary.overallCompletionRate }}%
        </span>
        <span class="status-badge" [style.background-color]="getOverallProgressColor()">
          {{ getOverallStatusLabel() }}
        </span>
      </div>
      <div class="progress-bar-container">
        <div class="progress-bar-bg">
          <div 
            class="progress-bar-fill"
            [style.width.%]="summary.overallCompletionRate"
            [style.background-color]="getOverallProgressColor()">
          </div>
        </div>
      </div>
    </div>

    <!-- 文件统计 -->
    <div class="file-stats" *ngIf="summary">
      <div class="stats-title">交付文件统计</div>
      <div class="stats-grid">
        <div class="stat-item">
          <span class="stat-icon">🏗️</span>
          <span class="stat-label">白模</span>
          <span class="stat-value">{{ summary.totalByType.whiteModel }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">🎨</span>
          <span class="stat-label">软装</span>
          <span class="stat-value">{{ summary.totalByType.softDecor }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">🖼️</span>
          <span class="stat-label">渲染</span>
          <span class="stat-value">{{ summary.totalByType.rendering }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">✨</span>
          <span class="stat-label">后期</span>
          <span class="stat-value">{{ summary.totalByType.postProcess }}</span>
        </div>
      </div>
      <div class="stats-total">
        总计：<strong>{{ summary.totalDeliverableFiles }}</strong> 个文件
      </div>
    </div>

    <!-- ✅ 应用方案：未完成任务汇总（按设计师分组）- 仅显示当前项目 -->
    <div class="incomplete-tasks-summary" *ngIf="summary">
      <div class="summary-header">
        <div class="summary-title-section">
          <span class="summary-icon">⚠️</span>
          <h3 class="summary-title">未完成任务汇总</h3>
          <span class="summary-badge" *ngIf="hasIncompleteTasks()">{{ getTotalIncompleteTasks() }} 个任务</span>
          <span class="summary-badge success" *ngIf="!hasIncompleteTasks()">全部完成</span>
        </div>
        <div class="summary-subtitle">
          当前项目：{{ summary.projectName }} - 按设计师分组查看未完成任务
        </div>
      </div>

      <!-- 有未完成任务时显示 -->
      <div class="designer-tasks-list" *ngIf="hasIncompleteTasks()">
        <div 
          *ngFor="let designerGroup of getIncompleteTasksByDesigner()"
          class="designer-group"
          [class.unassigned]="designerGroup.designerName === '未分配'">
          
          <div class="designer-header">
            <div class="designer-info">
              <span class="designer-icon">👤</span>
              <span class="designer-name" [class.unassigned-text]="designerGroup.designerName === '未分配'">
                {{ designerGroup.designerName }}
              </span>
              <span class="task-count-badge">{{ designerGroup.taskCount }} 个未完成</span>
            </div>
          </div>

          <div class="tasks-list">
            <div 
              *ngFor="let task of designerGroup.tasks"
              class="task-item">
              <span class="task-phase-badge" [style.background-color]="getPhaseProgressColor(0)">
                {{ task.phaseLabel }}
              </span>
              <span class="task-space-name">{{ task.spaceName }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 全部完成时显示 -->
      <div class="all-completed-message" *ngIf="!hasIncompleteTasks()">
        <span class="success-icon-large">✅</span>
        <div class="message-content">
          <h4>恭喜！所有任务已完成</h4>
          <p>该项目所有空间的交付任务均已完成，无需跟进。</p>
        </div>
      </div>

      <div class="summary-footer" *ngIf="getUnassignedTaskCount() > 0">
        <span class="warning-icon">⚠️</span>
        <span class="warning-text">
          有 {{ getUnassignedTaskCount() }} 个任务未分配负责人，请及时分配
        </span>
      </div>
    </div>

    <!-- 各阶段进度详情 -->
    <div class="phase-progress" *ngIf="summary">
      <div class="section-title">各阶段进度明细</div>
      
      <div class="phase-list">
        <div 
          *ngFor="let phase of getPhases()"
          class="phase-item"
          [class.expanded]="isPhaseExpanded(phase.name)">
          
          <!-- 阶段概览（可点击展开/收起） -->
          <div class="phase-overview" (click)="togglePhase(phase.name)">
            <div class="phase-header">
              <span class="phase-icon">{{ PHASE_INFO[phase.name].icon }}</span>
              <span class="phase-label">{{ phase.info.phaseLabel }}</span>
              <span class="phase-progress-badge" [style.background-color]="getPhaseProgressColor(phase.info.completionRate)">
                {{ phase.info.completionRate }}%
              </span>
              <span class="expand-icon">{{ isPhaseExpanded(phase.name) ? '▼' : '▶' }}</span>
            </div>
            
            <div class="phase-summary">
              <span class="summary-text">
                已完成 {{ phase.info.completedSpaces }} / {{ phase.info.requiredSpaces }} 个空间
                （{{ phase.info.totalFiles }} 个文件）
              </span>
            </div>
            
            <!-- 阶段进度条 -->
            <div class="phase-progress-bar">
              <div class="progress-bar-bg">
                <div 
                  class="progress-bar-fill"
                  [style.width.%]="phase.info.completionRate"
                  [style.background-color]="getPhaseProgressColor(phase.info.completionRate)">
                </div>
              </div>
            </div>
          </div>

          <!-- 未完成空间详情（展开时显示） -->
          <div class="phase-details" *ngIf="isPhaseExpanded(phase.name)">
            <div class="details-header">
              <span class="details-title">未完成空间列表</span>
              <span class="details-count">({{ phase.info.incompleteSpaces.length }} 个)</span>
            </div>
            
            <div class="incomplete-spaces" *ngIf="phase.info.incompleteSpaces.length > 0">
              <div 
                *ngFor="let space of phase.info.incompleteSpaces"
                class="space-item"
                [class.no-assignee]="!space.assignee || space.assignee === '未分配'">
                <span class="space-icon">📦</span>
                <span class="space-name">{{ space.spaceName }}</span>
                <!-- ✅ 优化：右侧显示设计师名字 -->
                <span class="assignee-wrapper">
                  <!-- 有设计师且不是"未分配"时显示 -->
                  <span class="assignee" *ngIf="space.assignee && space.assignee !== '未分配'">
                    <span class="assignee-icon">👤</span>
                    <span class="assignee-name">{{ space.assignee }}</span>
                  </span>
                  <!-- 没有设计师或为"未分配"时显示 -->
                  <span class="assignee unassigned-badge" *ngIf="!space.assignee || space.assignee === '未分配'">
                    <span class="warning-icon-small">⚠️</span>
                    <span>未分配</span>
                  </span>
                </span>
              </div>
            </div>
            
            <div class="no-incomplete" *ngIf="phase.info.incompleteSpaces.length === 0">
              <span class="success-icon">✅</span>
              <span>所有空间已完成此阶段交付</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="modal-footer">
      <button class="btn btn-secondary" (click)="onClose()">
        关闭
      </button>
      <button class="btn btn-primary" (click)="onReportIssue()">
        <span class="btn-icon">🐛</span>
        提交问题
      </button>
    </div>
  </div>
</div>