徐福静0235668 1 день тому
батько
коміт
487e5c3049

+ 16 - 0
src/app/pages/customer-service/project-list/project-list.html

@@ -29,6 +29,7 @@
           <div class="view-toggle">
             <button [class.active]="viewMode() === 'card'" (click)="toggleView('card')">卡片</button>
             <button [class.active]="viewMode() === 'list'" (click)="toggleView('list')">列表</button>
+            <button [class.active]="viewMode() === 'dashboard'" (click)="toggleView('dashboard')">监控大盘</button>
           </div>
           <button class="add-project-btn" (click)="openCreateProjectModal()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -279,5 +280,20 @@
           </div>
         </div>
       }
+
+      <!-- 视图:监控大盘模式 -->
+      @if (viewMode() === 'dashboard') {
+        <div class="dashboard-container">
+          <!-- 使用iframe嵌入组长端监控大盘,保持样式和功能完整 -->
+          <iframe 
+            src="/team-leader/dashboard" 
+            frameborder="0" 
+            width="100%" 
+            height="100%"
+            style="min-height: 800px;"
+            title="项目监控大盘">
+          </iframe>
+        </div>
+      }
     </div>
 </div>

+ 38 - 0
src/app/pages/customer-service/project-list/project-list.scss

@@ -1158,4 +1158,42 @@ $transition: all 0.3s ease;
 
 .modal .modal-footer .btn-primary:active {
   background: #0E42CB;
+}
+
+// 监控大盘视图样式
+.dashboard-container {
+  width: 100%;
+  height: 100%;
+  min-height: 800px;
+  border: none;
+  
+  iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 800px;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// 视图切换按钮样式优化
+.view-toggle-buttons {
+  .btn-view-toggle {
+    &.active {
+      background-color: $primary-color;
+      color: white;
+      
+      // 监控大盘按钮特殊样式
+      &[data-view="dashboard"] {
+        background-color: #9c27b0; // 紫色主题色
+        border-color: #9c27b0;
+        
+        &:hover {
+          background-color: #7b1fa2;
+          border-color: #7b1fa2;
+        }
+      }
+    }
+  }
 }

+ 5 - 5
src/app/pages/customer-service/project-list/project-list.ts

@@ -27,8 +27,8 @@ export class ProjectList implements OnInit {
   // 原始项目数据(用于筛选)
   allProjects = signal<Project[]>([]);
 
-  // 视图模式:卡片 / 列表(默认卡片)
-  viewMode = signal<'card' | 'list'>('card');
+  // 视图模式:卡片 / 列表 / 监控大盘(默认卡片)
+  viewMode = signal<'card' | 'list' | 'dashboard'>('card');
 
   // 看板列配置
   columns = [
@@ -106,14 +106,14 @@ export class ProjectList implements OnInit {
   ngOnInit(): void {
     // 读取上次的视图记忆
     const saved = localStorage.getItem('cs.viewMode');
-    if (saved === 'card' || saved === 'list') {
-      this.viewMode.set(saved);
+    if (saved === 'card' || saved === 'list' || saved === 'dashboard') {
+      this.viewMode.set(saved as 'card' | 'list' | 'dashboard');
     }
     this.loadProjects();
   }
   
   // 视图切换
-  toggleView(mode: 'card' | 'list') {
+  toggleView(mode: 'card' | 'list' | 'dashboard') {
     if (this.viewMode() !== mode) {
       this.viewMode.set(mode);
       localStorage.setItem('cs.viewMode', mode);