yss-project/src/app/pages/team-leader/quality-management/quality-management.html

<header>
  <h1>质量管理</h1>
</header>

<main class="quality-management-main">
  <!-- 质量验收标准（SOP落地） -->
  <section class="sop-section">
    <div class="section-header">
      <h2>质量验收标准 (SOP)</h2>
      <button (click)="exportSOP()" class="btn-export">导出 PDF</button>
    </div>
    
    <div class="sop-tabs">
      <div class="tab-buttons">
          <button (click)="activeTab = 'modeling'" [class.active]="activeTab === 'modeling'">
            <span>建模阶段</span>
          </button>
          <button (click)="activeTab = 'rendering'" [class.active]="activeTab === 'rendering'">
            <span>渲染阶段</span>
          </button>
          <button (click)="activeTab = 'postProduction'" [class.active]="activeTab === 'postProduction'">
            <span>后期阶段</span>
          </button>
        </div>
      
      <div class="tab-content">
        <!-- 建模阶段标准 -->
        @if (activeTab === 'modeling') {
        <div class="phase-content">
          <div class="sop-section">
            <h3>交付物要求</h3>
            <ul class="requirement-list">
              <li>提交完整的3D模型文件</li>
              <li>提供户型匹配度检查报告，误差≤2%</li>
              <li>材质贴图完整且正确命名</li>
              <li>灯光方案初步设置</li>
            </ul>
          </div>
          
          <div class="sop-section">
            <h3>质量验收指标</h3>
            <table class="quality-table">
              <thead>
                <tr>
                  <th>指标项</th>
                  <th>普通客户</th>
                  <th>优质客户</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>模型精度</td>
                  <td>≥95%</td>
                  <td>≥98%</td>
                </tr>
                <tr>
                  <td>户型匹配度</td>
                  <td>≥98%</td>
                  <td>≥99%</td>
                </tr>
                <tr>
                  <td>材质还原度</td>
                  <td>≥90%</td>
                  <td>≥95%</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="sop-section">
            <h3>整改规则</h3>
            <ul class="rule-list">
              <li>质量不达标项需24小时内修改</li>
              <li>修改超2次需组长复核</li>
              <li>重大错误（如户型严重不符）需重新建模</li>
            </ul>
          </div>
        </div>
        }
        
        
        <!-- 渲染阶段标准 -->
        @if (activeTab === 'rendering') {
        <div class="phase-content">
          <div class="sop-section">
            <h3>交付物要求</h3>
            <ul class="requirement-list">
              <li>提交高清渲染图（PSD+JPG）</li>
              <li>提供多角度渲染预览（至少3个角度）</li>
              <li>保留渲染参数文件</li>
            </ul>
          </div>
          
          <div class="sop-section">
            <h3>质量验收指标</h3>
            <table class="quality-table">
              <thead>
                <tr>
                  <th>指标项</th>
                  <th>普通客户</th>
                  <th>优质客户</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>像素要求</td>
                  <td>≥800px</td>
                  <td>≥1200px</td>
                </tr>
                <tr>
                  <td>真实度</td>
                  <td>≥90%</td>
                  <td>≥95%</td>
                </tr>
                <tr>
                  <td>光影效果</td>
                  <td>自然流畅</td>
                  <td>专业级光影处理</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="sop-section">
            <h3>整改规则</h3>
            <ul class="rule-list">
              <li>渲染效果不满意项需18小时内修改</li>
              <li>修改超3次需重新设计灯光方案</li>
              <li>客户特殊要求需单独确认</li>
            </ul>
          </div>
        </div>
        }
        
        <!-- 后期阶段标准 -->
        @if (activeTab === 'postProduction') {
        <div class="phase-content">
          <div class="sop-section">
            <h3>交付物要求</h3>
            <ul class="requirement-list">
              <li>提交最终效果图（JPG+PNG透明底）</li>
              <li>提供颜色校正前后对比图</li>
              <li>保留PSD源文件</li>
            </ul>
          </div>
          
          <div class="sop-section">
            <h3>质量验收指标</h3>
            <table class="quality-table">
              <thead>
                <tr>
                  <th>指标项</th>
                  <th>普通客户</th>
                  <th>优质客户</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>色彩准确度</td>
                  <td>符合设计稿</td>
                  <td>专业级色彩管理</td>
                </tr>
                <tr>
                  <td>细节处理</td>
                  <td>无明显瑕疵</td>
                  <td>精细处理每一处细节</td>
                </tr>
                <tr>
                  <td>文件格式</td>
                  <td>JPG (300dpi)</td>
                  <td>JPG+PNG (350dpi)</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="sop-section">
            <h3>整改规则</h3>
            <ul class="rule-list">
              <li>后期处理不满意项需12小时内修改</li>
              <li>颜色偏差需重新进行色彩校正</li>
              <li>最终交付需客户确认签字</li>
            </ul>
          </div>
        </div>
        }
      </div>
    </div>
  </section>
  
  <!-- 效果图质量整改跟踪 -->
  <section class="rectification-section">
    <div class="section-header">
      <h2>质量整改跟踪</h2>
      <div class="search-filter">
        <input type="text" placeholder="搜索项目名称..." [(ngModel)]="searchTerm">
        <select [(ngModel)]="filterStatus">
          <option value="all">全部状态</option>
          <option value="pending">待处理</option>
          <option value="processing">处理中</option>
          <option value="review">待审核</option>
          <option value="completed">已完成</option>
        </select>
      </div>
    </div>
    
    <div class="rectification-list">
      @for (task of filteredTasks; track task.id) {
      <div class="rectification-item" [class.priority-high]="task.priority === 'high'" [class.priority-medium]="task.priority === 'medium'" [class.priority-low]="task.priority === 'low'">
        <div class="rectification-header">
          <h4>{{ task.projectName }}</h4>
          <span [class]="'rectification-status status-' + task.status">{{ getStatusText(task.status) }}</span>
        </div>
        
        <div class="rectification-details">
          <div class="detail-item">
            <span class="detail-label">负责组员:</span>
            <span class="detail-value">{{ task.designerName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">问题描述:</span>
            <span class="detail-value">{{ task.issueDescription }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">优先级:</span>
            <span class="detail-value priority-{{ task.priority }}">{{ getPriorityText(task.priority) }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">建议完成时间:</span>
            <span class="detail-value">{{ task.suggestedDeadline | date:'yyyy-MM-dd' }}</span>
          </div>
          
          @if (task.sopComplianceScore !== null) {
          <div class="detail-item">
            <span class="detail-label">SOP符合度评分:</span>
            <span class="detail-value score">{{ task.sopComplianceScore }}/100</span>
          </div>
          }
          
          @if (task.managerComment) {
          <div class="detail-item">
            <span class="detail-label">组长评语:</span>
            <span class="detail-value">{{ task.managerComment }}</span>
          </div>
          }
        </div>
        
        <div class="rectification-actions">
          <button (click)="viewTaskDetails(task.id)" class="btn">查看详情</button>
          
          @if (task.status === 'review') {
          <div>
            <button (click)="approveTask(task.id)" class="btn btn-primary">通过</button>
            <button (click)="rejectTask(task.id)" class="btn">驳回</button>
          </div>
          }
          
          @if (task.status === 'completed') {
          <div>
            <button (click)="syncToProjectReview(task.id)" class="btn btn-primary">同步至项目评审</button>
          </div>
          }
        </div>
      </div>
      }
    </div>
  </section>

  <!-- 能力提升工具集成 -->
  <section class="training-section">
    <div class="section-header">
      <h2>能力提升工具</h2>
      <p class="section-description">通过视频教程和实践作业提升团队技能，确保SOP标准执行</p>
    </div>
    
    <div class="training-content">
      <!-- 视频教程区域 -->
      <div class="video-tutorials">
        <div class="section-subheader">
          <h3>视频教程</h3>
          <button class="btn-view-all">查看全部</button>
        </div>
        <div class="video-grid">
          @for (video of videoTutorials; track video.id) {
          <div class="video-card" (mouseenter)="video.isHovered = true" (mouseleave)="video.isHovered = false">
            <div class="video-thumbnail-container">
              <div class="video-thumbnail">
                <img [src]="video.thumbnailUrl" alt="视频缩略图" class="thumbnail-img">
                <div class="video-duration">{{ video.duration }}</div>
                <div class="play-overlay" [class.visible]="video.isHovered">
                  <button (click)="playVideo(video.id)" class="play-button">
                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="20" cy="20" r="20" fill="rgba(0,0,0,0.6)"/>
                      <path d="M15 13L28 20L15 27V13Z" fill="white"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="video-info">
              <div class="category-badge">{{ video.category }}</div>
              <h4 class="video-title">{{ video.title }}</h4>
              <p class="video-description">{{ video.description }}</p>
              <div class="video-meta">
                <span class="views">{{ video.views }} 次观看</span>
                <span class="date">2天前</span>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
      
      <!-- 实践作业区域 -->
      <div class="practice-assignments">
        <div class="section-subheader">
          <h3>实践作业</h3>
          <div class="assignment-stats">
            <span class="stat">待评审: 2</span>
            <span class="stat">进行中: 3</span>
          </div>
        </div>
        <div class="assignment-list">
          @for (assignment of practiceAssignments; track assignment.id) {
          <div class="assignment-card">
            <div class="assignment-header">
              <div class="assignment-title-section">
                <h4>{{ assignment.title }}</h4>
                <div class="assignment-badges">
                  <span class="badge related-sop">关联SOP: {{ assignment.relatedSOP }}</span>
                </div>
              </div>
              <span [class]="'status-badge status-' + assignment.status">{{ getAssignmentStatusText(assignment.status) }}</span>
            </div>
            <div class="assignment-details">
              <p class="description">{{ assignment.description }}</p>
              <div class="assignment-meta">
                <div class="meta-item">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 2V3M8 13V14M1 8H2M14 8H15M12.5 3.5L13.5 2.5M3.5 13.5L2.5 12.5M12.5 12.5L13.5 13.5M3.5 3.5L2.5 2.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <span>截止日期: {{ assignment.deadline | date:'yyyy-MM-dd' }}</span>
                </div>
                @if (assignment.score !== null) {
                <div class="meta-item score-item">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 1L10.5 5.5L16 6L12 9L13 14L8 12L3 14L4 9L0 6L5.5 5.5L8 1Z" stroke="currentColor" stroke-width="2" fill="none"/>
                  </svg>
                  <span>得分: {{ assignment.score }}/100</span>
                </div>
                }
              </div>
            </div>
            <div class="assignment-actions">
              <button (click)="reviewAssignment(assignment.id)" class="btn-review btn-primary">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 1L10.5 5.5L16 6L12 9L13 14L8 12L3 14L4 9L0 6L5.5 5.5L8 1Z" stroke="white" stroke-width="2" fill="none"/>
                </svg>
                评审作业
              </button>
              <button class="btn-secondary">下载资料</button>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  </section>
</main>