Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
0235668
/
recycle3
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

feat:5

徐福静0235668 4 ngày trước cách đây
mục cha
4f7404bfeb
commit
1129b4d7a6
50 tập tin đã thay đổi với 11077 bổ sung và 103 xóa
Split View Hiển thị tình trạng sai khác
  1. 948 3
      package-lock.json
  2. 1 0
      package.json
  3. 810 0
      src/Bdingdan.html
  4. 3 3
      src/app/app.routes.ts
  5. 2 1
      src/app/app.ts
  6. 72 7
      src/app/auth/login/login.ts
  7. 55 8
      src/app/auth/register/register.ts
  8. 1 0
      src/app/business/ai-operations-assistant/ai-operations-assistant.ts
  9. 6 3
      src/app/business/dashboard/dashboard.html
  10. 1 1
      src/app/business/dashboard/dashboard.scss
  11. 1 0
      src/app/business/dashboard/dashboard.ts
  12. 380 3
      src/app/business/data-reports/data-reports.html
  13. 986 0
      src/app/business/data-reports/data-reports.scss
  14. 164 1
      src/app/business/data-reports/data-reports.ts
  15. 311 3
      src/app/business/device-management/device-management.html
  16. 718 0
      src/app/business/device-management/device-management.scss
  17. 171 1
      src/app/business/device-management/device-management.ts
  18. 424 3
      src/app/business/enterprise-center/enterprise-center.html
  19. 953 0
      src/app/business/enterprise-center/enterprise-center.scss
  20. 123 1
      src/app/business/enterprise-center/enterprise-center.ts
  21. 279 3
      src/app/business/order-management/order-management.html
  22. 603 0
      src/app/business/order-management/order-management.scss
  23. 182 1
      src/app/business/order-management/order-management.ts
  24. 21 1
      src/app/consumer/booking-recycle/booking-recycle.html
  25. 76 0
      src/app/consumer/booking-recycle/booking-recycle.scss
  26. 22 7
      src/app/consumer/booking-recycle/booking-recycle.ts
  27. 27 5
      src/app/consumer/home/activities/activities.html
  28. 113 0
      src/app/consumer/home/activities/activities.scss
  29. 34 9
      src/app/consumer/home/activities/activities.ts
  30. 17 1
      src/app/consumer/home/home.html
  31. 80 0
      src/app/consumer/home/home.scss
  32. 21 0
      src/app/consumer/home/home.ts
  33. 4 6
      src/app/consumer/home/notifications/notifications.html
  34. 39 0
      src/app/consumer/home/notifications/notifications.scss
  35. 98 6
      src/app/government/ai-decision-assistant/ai-decision-assistant.html
  36. 241 0
      src/app/government/ai-decision-assistant/ai-decision-assistant.scss
  37. 48 2
      src/app/government/ai-decision-assistant/ai-decision-assistant.ts
  38. 83 5
      src/app/government/government-center/government-center.html
  39. 253 0
      src/app/government/government-center/government-center.scss
  40. 46 0
      src/app/government/government-center/government-center.ts
  41. 2 2
      src/app/government/government-routing-module.ts
  42. 81 5
      src/app/government/industry-analysis/industry-analysis.html
  43. 220 0
      src/app/government/industry-analysis/industry-analysis.scss
  44. 46 1
      src/app/government/industry-analysis/industry-analysis.ts
  45. 199 4
      src/app/government/subsidy-management/subsidy-management.html
  46. 652 0
      src/app/government/subsidy-management/subsidy-management.scss
  47. 175 1
      src/app/government/subsidy-management/subsidy-management.ts
  48. 250 3
      src/app/government/supervision-overview/supervision-overview.html
  49. 858 0
      src/app/government/supervision-overview/supervision-overview.scss
  50. 177 3
      src/app/government/supervision-overview/supervision-overview.ts

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 948 - 3
package-lock.json


+ 1 - 0
package.json
Xem Tập Tin 

@@ -30,6 +30,7 @@
 
     "@angular/router": "^20.3.0",
 
     "@fortawesome/fontawesome-free": "^7.0.1",
 
     "chart.js": "^4.5.0",
 
+    "fmode-ng": "^0.0.209",
 
     "rxjs": "~7.8.0",
 
     "tslib": "^2.3.0",
 
     "zone.js": "~0.15.0"

+ 810 - 0
src/Bdingdan.html
Xem Tập Tin 

@@ -0,0 +1,810 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>智回回收 - 订单管理</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <style>
 
+        :root {
 
+            --primary-color: #2ecc71;
 
+            --primary-dark: #27ae60;
 
+            --primary-light: #a9dfbf;
 
+            --secondary-color: #3498db;
 
+            --accent-color: #f39c12;
 
+            --warning-color: #e74c3c;
 
+            --light-bg: #f8f9fa;
 
+            --dark-text: #2c3e50;
 
+            --light-text: #7f8c8d;
 
+            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+            --border-radius: 12px;
 
+        }
 
+        
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f7fa;
 
+            color: var(--dark-text);
 
+            line-height: 1.6;
 
+        }
 
+        
+        .container {
 
+            max-width: 100%;
 
+            margin: 0 auto;
 
+            padding: 0 15px;
 
+        }
 
+        
+        /* 顶部导航 */
 
+        .header {
 
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+            color: white;
 
+            padding: 15px 0;
 
+            position: sticky;
 
+            top: 0;
 
+            z-index: 100;
 
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .header-content {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .logo {
 
+            display: flex;
 
+            align-items: center;
 
+            font-weight: bold;
 
+            font-size: 20px;
 
+        }
 
+        
+        .logo-icon {
 
+            margin-right: 10px;
 
+            font-size: 24px;
 
+        }
 
+        
+        .user-info {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .avatar {
 
+            width: 36px;
 
+            height: 36px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.3);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-left: 10px;
 
+        }
 
+        
+        /* 底部导航 */
 
+        .bottom-nav {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background-color: white;
 
+            display: flex;
 
+            justify-content: space-around;
 
+            padding: 10px 0;
 
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+            z-index: 100;
 
+        }
 
+        
+        .nav-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            font-size: 12px;
 
+            color: var(--light-text);
 
+            flex: 1;
 
+        }
 
+        
+        .nav-item.active {
 
+            color: var(--primary-color);
 
+        }
 
+        
+        .nav-icon {
 
+            font-size: 20px;
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        /* 内容区域 */
 
+        .content {
 
+            padding: 20px 0 80px;
 
+        }
 
+        
+        .section-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 15px;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .more-link {
 
+            font-size: 14px;
 
+            color: var(--primary-color);
 
+            font-weight: normal;
 
+        }
 
+        
+        /* 卡片样式 */
 
+        .card {
 
+            background-color: white;
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--card-shadow);
 
+            padding: 16px;
 
+            margin-bottom: 16px;
 
+        }
 
+        
+        /* 筛选和搜索栏 */
 
+        .filter-search-bar {
 
+            display: flex;
 
+            gap: 12px;
 
+            margin-bottom: 16px;
 
+        }
 
+        
+        .search-box {
 
+            flex: 1;
 
+            position: relative;
 
+        }
 
+        
+        .search-input {
 
+            width: 100%;
 
+            padding: 12px 40px 12px 16px;
 
+            border: 1px solid #e0e0e0;
 
+            border-radius: var(--border-radius);
 
+            font-size: 14px;
 
+            background-color: white;
 
+        }
 
+        
+        .search-icon {
 
+            position: absolute;
 
+            right: 12px;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            color: var(--light-text);
 
+        }
 
+        
+        .filter-btn {
 
+            padding: 12px 16px;
 
+            background-color: white;
 
+            border: 1px solid #e0e0e0;
 
+            border-radius: var(--border-radius);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+            color: var(--dark-text);
 
+        }
 
+        
+        /* 订单状态标签 */
 
+        .order-tabs {
 
+            display: flex;
 
+            background-color: white;
 
+            border-radius: var(--border-radius);
 
+            overflow: hidden;
 
+            margin-bottom: 16px;
 
+            box-shadow: var(--card-shadow);
 
+        }
 
+        
+        .order-tab {
 
+            flex: 1;
 
+            text-align: center;
 
+            padding: 14px 0;
 
+            font-size: 14px;
 
+            font-weight: 500;
 
+            color: var(--light-text);
 
+            position: relative;
 
+            cursor: pointer;
 
+        }
 
+        
+        .order-tab.active {
 
+            color: var(--primary-color);
 
+        }
 
+        
+        .order-tab.active::after {
 
+            content: '';
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: 20%;
 
+            right: 20%;
 
+            height: 3px;
 
+            background-color: var(--primary-color);
 
+            border-radius: 3px;
 
+        }
 
+        
+        .order-count {
 
+            background-color: #f0f0f0;
 
+            color: var(--dark-text);
 
+            border-radius: 10px;
 
+            padding: 2px 6px;
 
+            font-size: 12px;
 
+            margin-left: 4px;
 
+        }
 
+        
+        .order-tab.active .order-count {
 
+            background-color: var(--primary-light);
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        /* 订单列表 */
 
+        .order-list {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 12px;
 
+        }
 
+        
+        .order-item {
 
+            background-color: white;
 
+            border-radius: var(--border-radius);
 
+            padding: 16px;
 
+            box-shadow: var(--card-shadow);
 
+        }
 
+        
+        .order-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 12px;
 
+            padding-bottom: 12px;
 
+            border-bottom: 1px solid #f0f0f0;
 
+        }
 
+        
+        .order-id {
 
+            font-weight: 600;
 
+            color: var(--dark-text);
 
+        }
 
+        
+        .order-status {
 
+            padding: 4px 10px;
 
+            border-radius: 20px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .status-pending {
 
+            background-color: #fff8e6;
 
+            color: #e6a700;
 
+        }
 
+        
+        .status-in-progress {
 
+            background-color: #e6f7ff;
 
+            color: var(--secondary-color);
 
+        }
 
+        
+        .status-completed {
 
+            background-color: #e6f7e6;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        .status-cancelled {
 
+            background-color: #ffe6e6;
 
+            color: var(--warning-color);
 
+        }
 
+        
+        .order-content {
 
+            display: grid;
 
+            grid-template-columns: 1fr 1fr;
 
+            gap: 12px;
 
+            margin-bottom: 16px;
 
+        }
 
+        
+        .order-info {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 6px;
 
+        }
 
+        
+        .info-item {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+            font-size: 14px;
 
+        }
 
+        
+        .info-label {
 
+            color: var(--light-text);
 
+            min-width: 60px;
 
+        }
 
+        
+        .info-value {
 
+            color: var(--dark-text);
 
+            font-weight: 500;
 
+        }
 
+        
+        .order-actions {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .action-btn {
 
+            flex: 1;
 
+            padding: 8px 12px;
 
+            border-radius: 6px;
 
+            font-size: 14px;
 
+            font-weight: 500;
 
+            text-align: center;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: var(--primary-color);
 
+            color: white;
 
+        }
 
+        
+        .btn-secondary {
 
+            background-color: #f0f0f0;
 
+            color: var(--dark-text);
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #fff8e6;
 
+            color: #e6a700;
 
+        }
 
+        
+        /* 订单详情弹层 */
 
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 1000;
 
+            padding: 20px;
 
+            display: none;
 
+        }
 
+        
+        .modal-content {
 
+            background-color: white;
 
+            border-radius: var(--border-radius);
 
+            width: 100%;
 
+            max-width: 500px;
 
+            max-height: 90vh;
 
+            overflow-y: auto;
 
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 20px;
 
+            border-bottom: 1px solid #f0f0f0;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .close-btn {
 
+            background: none;
 
+            border: none;
 
+            font-size: 20px;
 
+            color: var(--light-text);
 
+            cursor: pointer;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 20px;
 
+        }
 
+        
+        .detail-section {
 
+            margin-bottom: 24px;
 
+        }
 
+        
+        .detail-title {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            margin-bottom: 12px;
 
+            padding-bottom: 8px;
 
+            border-bottom: 1px solid #f0f0f0;
 
+        }
 
+        
+        .detail-grid {
 
+            display: grid;
 
+            grid-template-columns: 1fr 1fr;
 
+            gap: 12px;
 
+        }
 
+        
+        .detail-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 4px;
 
+        }
 
+        
+        .detail-label {
 
+            font-size: 14px;
 
+            color: var(--light-text);
 
+        }
 
+        
+        .detail-value {
 
+            font-size: 14px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .photo-gallery {
 
+            display: grid;
 
+            grid-template-columns: repeat(3, 1fr);
 
+            gap: 8px;
 
+        }
 
+        
+        .photo-item {
 
+            aspect-ratio: 1;
 
+            background-color: #f0f0f0;
 
+            border-radius: 8px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--light-text);
 
+        }
 
+        
+        .map-container {
 
+            height: 150px;
 
+            background-color: #f0f0f0;
 
+            border-radius: 8px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--light-text);
 
+            margin-top: 8px;
 
+        }
 
+        
+        /* 响应式调整 */
 
+        @media (min-width: 768px) {
 
+            .container {
 
+                max-width: 750px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 顶部导航 -->
 
+    <header class="header">
 
+        <div class="container">
 
+            <div class="header-content">
 
+                <div class="logo">
 
+                    <span class="logo-icon">♻️</span>
 
+                    <span>智回回收</span>
 
+                </div>
 
+                <div class="user-info">
 
+                    <span>企业管理员</span>
 
+                    <div class="avatar">
 
+                        <span>管</span>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </header>
 
+    
+    <!-- 主要内容 -->
 
+    <main class="content">
 
+        <div class="container">
 
+            <!-- 订单管理页 -->
 
+            <section id="order-management">
 
+                <h2 class="section-title">订单管理</h2>
 
+                
+                <!-- 筛选和搜索栏 -->
 
+                <div class="filter-search-bar">
 
+                    <div class="search-box">
 
+                        <input type="text" class="search-input" placeholder="搜索订单编号、客户姓名...">
 
+                        <i class="fas fa-search search-icon"></i>
 
+                    </div>
 
+                    <button class="filter-btn">
 
+                        <i class="fas fa-filter"></i>
 
+                        <span>筛选</span>
 
+                    </button>
 
+                </div>
 
+                
+                <!-- 订单状态标签 -->
 
+                <div class="order-tabs">
 
+                    <div class="order-tab active">
 
+                        待分配 <span class="order-count">5</span>
 
+                    </div>
 
+                    <div class="order-tab">
 
+                        回收中 <span class="order-count">12</span>
 
+                    </div>
 
+                    <div class="order-tab">
 
+                        已完成 <span class="order-count">28</span>
 
+                    </div>
 
+                    <div class="order-tab">
 
+                        已取消 <span class="order-count">3</span>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 订单列表 -->
 
+                <div class="order-list">
 
+                    <!-- 订单项1 -->
 
+                    <div class="order-item" onclick="openOrderDetail()">
 
+                        <div class="order-header">
 
+                            <div class="order-id">ORD-20230520-001</div>
 
+                            <div class="order-status status-pending">待分配</div>
 
+                        </div>
 
+                        <div class="order-content">
 
+                            <div class="order-info">
 
+                                <div class="info-item">
 
+                                    <span class="info-label">品类:</span>
 
+                                    <span class="info-value">废纸</span>
 
+                                </div>
 
+                                <div class="info-item">
 
+                                    <span class="info-label">重量:</span>
 
+                                    <span class="info-value">45 kg</span>
 
+                                </div>
 
+                            </div>
 
+                            <div class="order-info">
 
+                                <div class="info-item">
 
+                                    <span class="info-label">客户:</span>
 
+                                    <span class="info-value">张先生</span>
 
+                                </div>
 
+                                <div class="info-item">
 
+                                    <span class="info-label">电话:</span>
 
+                                    <span class="info-value">138****5678</span>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="order-actions">
 
+                            <button class="action-btn btn-primary">分配</button>
 
+                            <button class="action-btn btn-secondary">查看</button>
 
+                            <button class="action-btn btn-warning">取消</button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <!-- 订单项2 -->
 
+                    <div class="order-item" onclick="openOrderDetail()">
 
+                        <div class="order-header">
 
+                            <div class="order-id">ORD-20230520-002</div>
 
+                            <div class="order-status status-pending">待分配</div>
 
+                        </div>
 
+                        <div class="order-content">
 
+                            <div class="order-info">
 
+                                <div class="info-item">
 
+                                    <span class="info-label">品类:</span>
 
+                                    <span class="info-value">塑料瓶</span>
 
+                                </div>
 
+                                <div class="info-item">
 
+                                    <span class="info-label">重量:</span>
 
+                                    <span class="info-value">32 kg</span>
 
+                                </div>
 
+                            </div>
 
+                            <div class="order-info">
 
+                                <div class="info-item">
 
+                                    <span class="info-label">客户:</span>
 
+                                    <span class="info-value">李女士</span>
 
+                                </div>
 
+                                <div class="info-item">
 
+                                    <span class="info-label">电话:</span>
 
+                                    <span class="info-value">139****1234</span>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="order-actions">
 
+                            <button class="action-btn btn-primary">分配</button>
 
+                            <button class="action-btn btn-secondary">查看</button>
 
+                            <button class="action-btn btn-warning">取消</button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <!-- 订单项3 -->
 
+                    <div class="order-item" onclick="openOrderDetail()">
 
+                        <div class="order-header">
 
+                            <div class="order-id">ORD-20230520-003</div>
 
+                            <div class="order-status status-pending">待分配</div>
 
+                        </div>
 
+                        <div class="order-content">
 
+                            <div class="order-info">
 
+                                <div class="info-item">
 
+                                    <span class="info-label">品类:</span>
 
+                                    <span class="info-value">金属</span>
 
+                                </div>
 
+                                <div class="info-item">
 
+                                    <span class="info-label">重量:</span>
 
+                                    <span class="info-value">68 kg</span>
 
+                                </div>
 
+                            </div>
 
+                            <div class="order-info">
 
+                                <div class="info-item">
 
+                                    <span class="info-label">客户:</span>
 
+                                    <span class="info-value">王先生</span>
 
+                                </div>
 
+                                <div class="info-item">
 
+                                    <span class="info-label">电话:</span>
 
+                                    <span class="info-value">137****8765</span>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="order-actions">
 
+                            <button class="action-btn btn-primary">分配</button>
 
+                            <button class="action-btn btn-secondary">查看</button>
 
+                            <button class="action-btn btn-warning">取消</button>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </section>
 
+        </div>
 
+    </main>
 
+    
+    <!-- 订单详情弹层 -->
 
+    <div class="modal-overlay" id="orderDetailModal">
 
+        <div class="modal-content">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">订单详情</h3>
 
+                <button class="close-btn" onclick="closeOrderDetail()">&times;</button>
 
+            </div>
 
+            <div class="modal-body">
 
+                <!-- 订单基本信息 -->
 
+                <div class="detail-section">
 
+                    <h4 class="detail-title">订单信息</h4>
 
+                    <div class="detail-grid">
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">订单编号</span>
 
+                            <span class="detail-value">ORD-20230520-001</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">创建时间</span>
 
+                            <span class="detail-value">2023-05-20 09:30</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">回收品类</span>
 
+                            <span class="detail-value">废纸</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">回收重量</span>
 
+                            <span class="detail-value">45 kg</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">订单状态</span>
 
+                            <span class="detail-value">待分配</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">预计产值</span>
 
+                            <span class="detail-value">¥ 135.00</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 客户信息 -->
 
+                <div class="detail-section">
 
+                    <h4 class="detail-title">客户信息</h4>
 
+                    <div class="detail-grid">
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">客户姓名</span>
 
+                            <span class="detail-value">张先生</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">联系电话</span>
 
+                            <span class="detail-value">138****5678</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">所在区域</span>
 
+                            <span class="detail-value">朝阳区</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">详细地址</span>
 
+                            <span class="detail-value">朝阳区建国路88号SOHO现代城A座1506室</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 废品照片 -->
 
+                <div class="detail-section">
 
+                    <h4 class="detail-title">废品照片</h4>
 
+                    <div class="photo-gallery">
 
+                        <div class="photo-item">
 
+                            <i class="fas fa-image"></i>
 
+                        </div>
 
+                        <div class="photo-item">
 
+                            <i class="fas fa-image"></i>
 
+                        </div>
 
+                        <div class="photo-item">
 
+                            <i class="fas fa-image"></i>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 回收员信息 -->
 
+                <div class="detail-section">
 
+                    <h4 class="detail-title">回收员信息</h4>
 
+                    <div class="detail-grid">
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">回收员</span>
 
+                            <span class="detail-value">未分配</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">联系电话</span>
 
+                            <span class="detail-value">-</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 回收轨迹 -->
 
+                <div class="detail-section">
 
+                    <h4 class="detail-title">回收轨迹</h4>
 
+                    <div class="map-container">
 
+                        <i class="fas fa-map-marked-alt"></i>
 
+                        <span>暂无轨迹信息</span>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 结算信息 -->
 
+                <div class="detail-section">
 
+                    <h4 class="detail-title">结算信息</h4>
 
+                    <div class="detail-grid">
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">结算金额</span>
 
+                            <span class="detail-value">¥ 0.00</span>
 
+                        </div>
 
+                        <div class="detail-item">
 
+                            <span class="detail-label">结算状态</span>
 
+                            <span class="detail-value">未结算</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 底部导航 -->
 
+    <nav class="bottom-nav">
 
+        <div class="nav-item">
 
+            <div class="nav-icon">🏠</div>
 
+            <div>工作台</div>
 
+        </div>
 
+        <div class="nav-item active">
 
+            <div class="nav-icon">📦</div>
 
+            <div>订单</div>
 
+        </div>
 
+        <div class="nav-item">
 
+            <div class="nav-icon">⚙️</div>
 
+            <div>设备</div>
 
+        </div>
 
+        <div class="nav-item">
 
+            <div class="nav-icon">📊</div>
 
+            <div>报表</div>
 
+        </div>
 
+        <div class="nav-item">
 
+            <div class="nav-icon">👤</div>
 
+            <div>我的</div>
 
+        </div>
 
+    </nav>
 
+    
+    <script>
 
+        // 打开订单详情弹层
 
+        function openOrderDetail() {
 
+            document.getElementById('orderDetailModal').style.display = 'flex';
 
+        }
 
+        
+        // 关闭订单详情弹层
 
+        function closeOrderDetail() {
 
+            document.getElementById('orderDetailModal').style.display = 'none';
 
+        }
 
+        
+        // 点击弹层外部关闭弹层
 
+        document.getElementById('orderDetailModal').addEventListener('click', function(e) {
 
+            if (e.target === this) {
 
+                closeOrderDetail();
 
+            }
 
+        });
 
+        
+        // 切换订单状态标签
 
+        document.querySelectorAll('.order-tab').forEach(tab => {
 
+            tab.addEventListener('click', function() {
 
+                document.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active'));
 
+                this.classList.add('active');
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 3 - 3
src/app/app.routes.ts
Xem Tập Tin 

@@ -18,11 +18,11 @@ export const routes: Routes = [
 
     // canActivate: [authGuard] // 临时注释掉用于测试
 
   },
 
   
-  // B端企业用户路由 - 需要认证
 
+  // B端企业用户路由 - 开发阶段临时移除认证守卫
 
   {
 
     path: 'business',
 
-    loadChildren: () => import('./business/business-module').then(m => m.BusinessModule),
 
-    canActivate: [authGuard]
 
+    loadChildren: () => import('./business/business-module').then(m => m.BusinessModule)
 
+    // canActivate: [authGuard]
 
   },
 
   
   // G端政府用户路由 - 需要认证

+ 2 - 1
src/app/app.ts
Xem Tập Tin 

@@ -1,6 +1,7 @@
 
 import { Component, signal } from '@angular/core';
 
 import { RouterOutlet } from '@angular/router';
 
-
 
+import { FmodeParse } from 'fmode-ng'
 
+FmodeParse.initialize('dev');
 
 @Component({
 
   selector: 'app-root',
 
   imports: [RouterOutlet],

+ 72 - 7
src/app/auth/login/login.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { FormsModule } from '@angular/forms';
 
 import { Router, RouterModule } from '@angular/router';
 
-
 
+import { FmodeParse } from 'fmode-ng';
 
 // 定义登录表单接口
 
 interface LoginForm {
 
   account: string;
 
@@ -16,6 +16,7 @@ interface User {
 
   account: string;
 
   password: string;
 
   name: string;
 
+  identity?: string; // 添加身份类型字段
 
 }
 
 
 @Component({
 
@@ -50,19 +51,22 @@ export class LoginComponent {
 
       id: '1',
 
       account: '13800138000',
 
       password: '123456',
 
-      name: '张三'
 
+      name: '张三',
 
+      identity: 'user'
 
     },
 
     {
 
       id: '2',
 
       account: 'user@example.com',
 
       password: 'password',
 
-      name: '李四'
 
+      name: '李四',
 
+      identity: 'business'
 
     },
 
     {
 
       id: '3',
 
       account: 'admin',
 
       password: 'admin123',
 
-      name: '管理员'
 
+      name: '管理员',
 
+      identity: 'government'
 
     }
 
   ];
 
 
@@ -128,9 +132,9 @@ export class LoginComponent {
 
           localStorage.setItem('rememberLogin', 'true');
 
         }
 
 
-        // 跳转到主页面（这里可以根据实际需要修改路由）
 
-        alert('登录成功！');
 
-        // this.router.navigate(['/dashboard']); // 实际项目中取消注释
 
+        // 显示成功消息并根据用户身份跳转
 
+        alert('登录成功！即将跳转到对应首页。');
 
+        this.navigateToHomePage(user.identity || 'user');
 
         
       } else {
 
         // 登录失败
 
@@ -143,11 +147,72 @@ export class LoginComponent {
 
 
   // 验证用户凭据
 
   private authenticateUser(account: string, password: string): User | null {
 
+    FmodeParse.User.logIn(account, password).then(user => {
 
+      console.log('FmodeParse login success', user);
 
+      
+      // 如果FmodeParse登录成功，尝试从localStorage获取用户身份信息
 
+      const storedUser = localStorage.getItem('currentUser');
 
+      if (storedUser) {
 
+        const userData = JSON.parse(storedUser);
 
+        // 合并FmodeParse用户信息和本地存储的身份信息
 
+        const mergedUser = {
 
+          ...userData,
 
+          fmodeUser: user
 
+        };
 
+        localStorage.setItem('currentUser', JSON.stringify(mergedUser));
 
+      }
 
+      
+    }).catch(err => {
 
+      console.log('FmodeParse login failed', err);
 
+    });
 
+    
+    // 首先检查是否有注册用户信息
 
+    const registeredUser = localStorage.getItem('registeredUser');
 
+    if (registeredUser) {
 
+      const userData = JSON.parse(registeredUser);
 
+      // 检查账号密码是否匹配注册的用户
 
+      if (userData.account === account) {
 
+        // 将注册用户信息转移到当前用户
 
+        localStorage.setItem('currentUser', JSON.stringify(userData));
 
+        localStorage.removeItem('registeredUser'); // 清除注册临时数据
 
+        return {
 
+          id: userData.id,
 
+          account: userData.account,
 
+          password: password,
 
+          name: userData.account, // 使用账号作为名称
 
+          identity: userData.identity
 
+        };
 
+      }
 
+    }
 
+    
+    // 如果没有匹配的注册用户，则使用Mock用户数据进行验证
 
     return this.mockUsers.find(user => 
       user.account === account && user.password === password
 
     ) || null;
 
   }
 
 
+  // 根据用户身份类型导航到对应首页
 
+  private navigateToHomePage(identity: string) {
 
+    switch (identity) {
 
+      case 'user':
 
+        // C端用户跳转到consumer首页
 
+        this.router.navigate(['/consumer']);
 
+        break;
 
+      case 'business':
 
+        // B端企业跳转到business dashboard
 
+        this.router.navigate(['/business/dashboard']);
 
+        break;
 
+      case 'government':
 
+        // G端政府跳转到government首页
 
+        this.router.navigate(['/government']);
 
+        break;
 
+      default:
 
+        // 默认跳转到consumer首页
 
+        this.router.navigate(['/consumer']);
 
+        break;
 
+    }
 
+  }
 
+
 
   // 社交登录
 
   socialLogin(platform: string): void {
 
     alert(`即将通过${platform}登录`);

+ 55 - 8
src/app/auth/register/register.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { FormsModule } from '@angular/forms';
 
 import { Router, RouterModule } from '@angular/router';
 
-
 
+import{FmodeParse} from 'fmode-ng'    ;
 
 interface RegisterForm {
 
   identity: string;
 
   account: string;
 
@@ -143,16 +143,63 @@ export class Register {
 
         }
 
       };
 
 
-      console.log('Mock 注册响应:', mockResponse);
 
-      
-      // 显示成功消息
 
-      alert('注册成功！即将跳转到登录页面。');
 
-      
-      // 跳转到登录页面
 
-      this.router.navigate(['/auth/login']);
 
+      FmodeParse.User.signUp(this.registerForm.account, this.registerForm.password).then(user => {
 
+        console.log('FmodeParse 注册成功:', user);
 
+        console.log('Mock 注册响应:', mockResponse);
 
+        
+        // 保存用户信息到localStorage，包含注册时的身份信息
 
+        const userInfo = {
 
+          ...mockResponse.user,
 
+          fmodeUser: user
 
+        };
 
+        localStorage.setItem('registeredUser', JSON.stringify(userInfo));
 
+        
+        // 显示成功消息
 
+        alert('注册成功！请使用刚注册的账号登录。');
 
+        
+        // 跳转到登录页面
 
+        this.router.navigate(['/auth/login']);
 
+        
+      }).catch(err => {
 
+        console.log('FmodeParse 注册失败:', err);
 
+        
+        // 即使FmodeParse失败，也使用Mock数据继续流程
 
+        console.log('使用Mock数据继续注册流程');
 
+        
+        // 保存用户信息到localStorage，包含注册时的身份信息
 
+        localStorage.setItem('registeredUser', JSON.stringify(mockResponse.user));
 
+        
+        // 显示成功消息
 
+        alert('注册成功！请使用刚注册的账号登录。');
 
+        
+        // 跳转到登录页面
 
+        this.router.navigate(['/auth/login']);
 
+      });
 
     }, 1000);
 
   }
 
 
+  // 根据用户身份类型导航到对应首页
 
+  private navigateToHomePage(identity: string) {
 
+    switch (identity) {
 
+      case 'user':
 
+        // C端用户跳转到consumer首页
 
+        this.router.navigate(['/consumer']);
 
+        break;
 
+      case 'business':
 
+        // B端企业跳转到business dashboard
 
+        this.router.navigate(['/business/dashboard']);
 
+        break;
 
+      case 'government':
 
+        // G端政府跳转到government首页
 
+        this.router.navigate(['/government']);
 
+        break;
 
+      default:
 
+        // 默认跳转到登录页面
 
+        this.router.navigate(['/auth/login']);
 
+        break;
 
+    }
 
+  }
 
+
 
   // 返回上一页
 
   goBack() {
 
     this.router.navigate(['/auth/login']);

+ 1 - 0
src/app/business/ai-operations-assistant/ai-operations-assistant.ts
Xem Tập Tin 

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 
 
 @Component({
 
   selector: 'app-ai-operations-assistant',
 
+  standalone: true,
 
   imports: [CommonModule, RouterModule],
 
   templateUrl: './ai-operations-assistant.html',
 
   styleUrl: './ai-operations-assistant.scss'

+ 6 - 3
src/app/business/dashboard/dashboard.html
Xem Tập Tin 

@@ -8,7 +8,7 @@
 
       </div>
 
       <div class="user-info">
 
         <span>企业管理员</span>
 
-        <div class="avatar">
 
+        <div class="avatar" (click)="onUserAvatarClick()" title="查看企业中心">
 
           <span>管</span>
 
         </div>
 
       </div>
 
@@ -35,8 +35,11 @@
 
       <!-- 预警信息卡片 -->
 
       <div class="card alert-card" *ngIf="alertInfo.content.length > 0">
 
         <div class="alert-title">
 
-          <span class="alert-icon">{{alertInfo.icon}}</span>
 
-          <span>{{alertInfo.title}}</span>
 
+          <div>
 
+            <span class="alert-icon">{{alertInfo.icon}}</span>
 
+            <span>{{alertInfo.title}}</span>
 
+          </div>
 
+          <span class="more-link" (click)="onViewMoreClick('alerts')">查看全部</span>
 
         </div>
 
         <div class="alert-content">
 
           <p *ngFor="let content of alertInfo.content">• {{content}}</p>

+ 1 - 1
src/app/business/dashboard/dashboard.scss
Xem Tập Tin 

@@ -176,7 +176,7 @@ body {
 
 }
 
 
 .data-card:nth-child(3) {
 
-  background: linear-gradient(135deg, var(--accent-color), #e67e22);
 
+  background: linear-gradient(135deg, #e67e22, #d35400);
 
 }
 
 
 .data-card:nth-child(4) {

+ 1 - 0
src/app/business/dashboard/dashboard.ts
Xem Tập Tin 

@@ -37,6 +37,7 @@ interface AISuggestion {
 
 
 @Component({
 
   selector: 'app-dashboard',
 
+  standalone: true,
 
   imports: [CommonModule, RouterModule],
 
   templateUrl: './dashboard.html',
 
   styleUrl: './dashboard.scss'

+ 380 - 3
src/app/business/data-reports/data-reports.html
Xem Tập Tin 

@@ -1,6 +1,383 @@
 
 <div class="data-reports-container">
 
-  <div class="reports-header">
 
-    <h1>数据报表</h1>
 
+  <!-- 顶部导航 -->
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo">
 
+        <span class="logo-icon">♻️</span>
 
+        <span>智回回收</span>
 
+      </div>
 
+      <div class="user-info">
 
+        <span>企业管理员</span>
 
+        <div class="avatar">
 
+          <span>管</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 主要内容 -->
 
+  <main class="content">
 
+    <div class="container">
 
+      <section id="data-reports">
 
+        <h2 class="section-title">数据报表</h2>
 
+
 
+        <!-- 预警通知栏 -->
 
+        <div class="alert-banner" *ngIf="criticalLocations.length > 0 || warningLocations.length > 0">
 
+          <div class="alert-icon">
 
+            <i class="fas fa-exclamation-triangle"></i>
 
+          </div>
 
+          <div class="alert-content">
 
+            <div class="alert-title">垃圾量预警</div>
 
+            <div class="alert-desc">
 
+              {{ criticalLocations.length }}个地点严重，{{ warningLocations.length }}个地点预警
 
+            </div>
 
+          </div>
 
+          <button class="alert-btn" (click)="openMonitorView()">
 
+            查看详情 <i class="fas fa-chevron-right"></i>
 
+          </button>
 
+        </div>
 
+
 
+        <!-- 报表类型选择器 -->
 
+        <div class="report-tabs">
 
+          <div 
+            class="report-tab" 
+            [class.active]="reportType === 'business'"
 
+            (click)="reportType = 'business'">
 
+            <i class="fas fa-chart-line"></i>
 
+            经营报表
 
+          </div>
 
+          <div 
+            class="report-tab" 
+            [class.active]="reportType === 'environmental'"
 
+            (click)="reportType = 'environmental'">
 
+            <i class="fas fa-leaf"></i>
 
+            环保报表
 
+          </div>
 
+          <div 
+            class="report-tab" 
+            [class.active]="reportType === 'government'"
 
+            (click)="reportType = 'government'">
 
+            <i class="fas fa-file-alt"></i>
 
+            政府申报
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 时间范围选择器 -->
 
+        <div class="time-range-selector">
 
+          <button 
+            class="time-btn" 
+            [class.active]="timeRange === 'today'"
 
+            (click)="timeRange = 'today'">
 
+            今日
 
+          </button>
 
+          <button 
+            class="time-btn" 
+            [class.active]="timeRange === 'week'"
 
+            (click)="timeRange = 'week'">
 
+            本周
 
+          </button>
 
+          <button 
+            class="time-btn" 
+            [class.active]="timeRange === 'month'"
 
+            (click)="timeRange = 'month'">
 
+            本月
 
+          </button>
 
+          <button 
+            class="time-btn" 
+            [class.active]="timeRange === 'year'"
 
+            (click)="timeRange = 'year'">
 
+            本年
 
+          </button>
 
+        </div>
 
+
 
+        <!-- 数据可视化图表区 - 经营报表 -->
 
+        <div *ngIf="reportType === 'business'" class="chart-section">
 
+          <div class="chart-card">
 
+            <h3 class="chart-title">回收品类分布</h3>
 
+            <div class="chart-content">
 
+              <div class="pie-chart">
 
+                <div class="chart-legend">
 
+                  <div *ngFor="let item of businessData" class="legend-item">
 
+                    <span class="legend-color" [style.background-color]="item.color"></span>
 
+                    <span class="legend-label">{{ item.label }}</span>
 
+                    <span class="legend-value">{{ item.value }}%</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="chart-card">
 
+            <h3 class="chart-title">月度回收趋势</h3>
 
+            <div class="trend-chart">
 
+              <div class="chart-bars">
 
+                <div class="bar-item" *ngFor="let month of [1,2,3,4,5,6]">
 
+                  <div class="bar" [style.height.%]="month * 15"></div>
 
+                  <span class="bar-label">{{ month }}月</span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="stats-row">
 
+            <div class="stat-box">
 
+              <div class="stat-value">15,680</div>
 
+              <div class="stat-label">总回收量(kg)</div>
 
+            </div>
 
+            <div class="stat-box">
 
+              <div class="stat-value">¥47,040</div>
 
+              <div class="stat-label">营收金额</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 数据可视化图表区 - 环保报表 -->
 
+        <div *ngIf="reportType === 'environmental'" class="chart-section">
 
+          <div class="env-cards">
 
+            <div *ngFor="let item of environmentalData" class="env-card">
 
+              <div class="env-icon" [style.background-color]="item.color">
 
+                <i class="fas" 
+                   [ngClass]="{
 
+                     'fa-cloud': item.label === '碳减排',
 
+                     'fa-tint': item.label === '节水量',
 
+                     'fa-bolt': item.label === '节电量'
 
+                   }"></i>
 
+              </div>
 
+              <div class="env-info">
 
+                <div class="env-value">{{ item.value }}</div>
 
+                <div class="env-label">{{ item.label }}(kg)</div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="chart-card">
 
+            <h3 class="chart-title">环保贡献趋势</h3>
 
+            <div class="line-chart">
 
+              <div class="chart-placeholder">
 
+                <i class="fas fa-chart-area"></i>
 
+                <p>环保数据趋势图</p>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 数据可视化图表区 - 政府申报 -->
 
+        <div *ngIf="reportType === 'government'" class="chart-section">
 
+          <div class="gov-report-card">
 
+            <div class="report-info">
 
+              <div class="info-row">
 
+                <span class="info-label">报告周期:</span>
 
+                <span class="info-value">2023年5月</span>
 
+              </div>
 
+              <div class="info-row">
 
+                <span class="info-label">企业名称:</span>
 
+                <span class="info-value">智回环保科技有限公司</span>
 
+              </div>
 
+              <div class="info-row">
 
+                <span class="info-label">回收总量:</span>
 
+                <span class="info-value">15,680 kg</span>
 
+              </div>
 
+              <div class="info-row">
 
+                <span class="info-label">环保贡献:</span>
 
+                <span class="info-value">碳减排 1250kg</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 地点垃圾量监控卡片 -->
 
+        <div class="monitor-section">
 
+          <div class="section-header">
 
+            <h3>地点监控</h3>
 
+            <button class="view-all-btn" (click)="openMonitorView()">
 
+              查看全部 <i class="fas fa-chevron-right"></i>
 
+            </button>
 
+          </div>
 
+          
+          <div class="location-cards">
 
+            <div 
+              *ngFor="let location of locations.slice(0, 4)" 
+              class="location-card"
 
+              [class.critical]="location.status === 'critical'"
 
+              [class.warning]="location.status === 'warning'">
 
+              <div class="location-header">
 
+                <div class="location-icon">{{ getLocationIcon(location.type) }}</div>
 
+                <div class="location-info">
 
+                  <div class="location-name">{{ location.name }}</div>
 
+                  <div class="location-update">{{ location.lastUpdate }}</div>
 
+                </div>
 
+                <div class="location-status" [ngClass]="getStatusClass(location.status)">
 
+                  {{ getStatusText(location.status) }}
 
+                </div>
 
+              </div>
 
+              
+              <div class="location-progress">
 
+                <div class="progress-bar">
 
+                  <div 
+                    class="progress-fill" 
+                    [style.width.%]="getCapacityPercent(location)"
 
+                    [ngClass]="getStatusClass(location.status)">
 
+                  </div>
 
+                </div>
 
+                <div class="progress-text">
 
+                  {{ location.wasteVolume }}/{{ location.capacity }}kg
 
+                  ({{ getCapacityPercent(location) }}%)
 
+                </div>
 
+              </div>
 
+
 
+              <div class="location-stats">
 
+                <div class="stat-item">
 
+                  <span class="stat-label">垃圾量</span>
 
+                  <span class="stat-value">{{ location.wasteVolume }}kg</span>
 
+                </div>
 
+                <div class="stat-item">
 
+                  <span class="stat-label">已回收</span>
 
+                  <span class="stat-value">{{ location.recycleVolume }}kg</span>
 
+                </div>
 
+              </div>
 
+
 
+              <button 
+                *ngIf="location.status === 'critical'" 
+                class="dispatch-btn"
 
+                (click)="dispatchWorkers(location)">
 
+                <i class="fas fa-user-plus"></i> 急派人手
 
+              </button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 报表生成与导出区 -->
 
+        <div class="export-section">
 
+          <h3 class="section-subtitle">报表导出</h3>
 
+          <div class="export-buttons">
 
+            <button class="export-btn" (click)="exportReport('pdf')">
 
+              <i class="fas fa-file-pdf"></i>
 
+              导出PDF
 
+            </button>
 
+            <button class="export-btn" (click)="exportReport('excel')">
 
+              <i class="fas fa-file-excel"></i>
 
+              导出Excel
 
+            </button>
 
+            <button 
+              *ngIf="reportType === 'government'" 
+              class="submit-btn"
 
+              (click)="submitToGov()">
 
+              <i class="fas fa-paper-plane"></i>
 
+              一键申报
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  </main>
 
+
 
+  <!-- 监控详情弹层 -->
 
+  <div class="modal-overlay" [class.show]="showMonitorModal" (click)="closeMonitorView()">
 
+    <div class="modal-content monitor-modal" (click)="$event.stopPropagation()">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">实时监控 - 全部地点</h3>
 
+        <button class="close-btn" (click)="closeMonitorView()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <!-- 严重预警 -->
 
+        <div *ngIf="criticalLocations.length > 0" class="alert-section critical">
 
+          <h4 class="alert-section-title">
 
+            <i class="fas fa-exclamation-circle"></i>
 
+            严重预警 ({{ criticalLocations.length }})
 
+          </h4>
 
+          <div class="location-list">
 
+            <div *ngFor="let location of criticalLocations" class="location-item critical">
 
+              <div class="location-main">
 
+                <div class="location-icon">{{ getLocationIcon(location.type) }}</div>
 
+                <div class="location-details">
 
+                  <div class="location-name">{{ location.name }}</div>
 
+                  <div class="location-meta">
 
+                    {{ location.wasteVolume }}/{{ location.capacity }}kg 
+                    ({{ getCapacityPercent(location) }}%)
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <button class="action-btn critical" (click)="dispatchWorkers(location)">
 
+                急派
 
+              </button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 一般预警 -->
 
+        <div *ngIf="warningLocations.length > 0" class="alert-section warning">
 
+          <h4 class="alert-section-title">
 
+            <i class="fas fa-exclamation-triangle"></i>
 
+            一般预警 ({{ warningLocations.length }})
 
+          </h4>
 
+          <div class="location-list">
 
+            <div *ngFor="let location of warningLocations" class="location-item warning">
 
+              <div class="location-main">
 
+                <div class="location-icon">{{ getLocationIcon(location.type) }}</div>
 
+                <div class="location-details">
 
+                  <div class="location-name">{{ location.name }}</div>
 
+                  <div class="location-meta">
 
+                    {{ location.wasteVolume }}/{{ location.capacity }}kg 
+                    ({{ getCapacityPercent(location) }}%)
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <button class="action-btn warning" (click)="dispatchWorkers(location)">
 
+                派遣
 
+              </button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 全部地点 -->
 
+        <div class="alert-section">
 
+          <h4 class="alert-section-title">
 
+            <i class="fas fa-map-marker-alt"></i>
 
+            全部地点 ({{ locations.length }})
 
+          </h4>
 
+          <div class="location-list">
 
+            <div *ngFor="let location of locations" class="location-item" [ngClass]="getStatusClass(location.status)">
 
+              <div class="location-main">
 
+                <div class="location-icon">{{ getLocationIcon(location.type) }}</div>
 
+                <div class="location-details">
 
+                  <div class="location-name">{{ location.name }}</div>
 
+                  <div class="location-meta">
 
+                    {{ location.wasteVolume }}/{{ location.capacity }}kg 
+                    · {{ location.lastUpdate }}
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="location-status-badge" [ngClass]="getStatusClass(location.status)">
 
+                {{ getStatusText(location.status) }}
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
   </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
+
 
+  <!-- 底部导航 -->
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/business/dashboard">
 
+      <div class="nav-icon">🏠</div>
 
+      <div>工作台</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/order-management">
 
+      <div class="nav-icon">📦</div>
 
+      <div>订单</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/device-management">
 
+      <div class="nav-icon">⚙️</div>
 
+      <div>设备</div>
 
+    </div>
 
+    <div class="nav-item active">
 
+      <div class="nav-icon">📊</div>
 
+      <div>报表</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/enterprise-center">
 
+      <div class="nav-icon">👤</div>
 
+      <div>我的</div>
 
+    </div>
 
+  </nav>
 
 </div>

+ 986 - 0
src/app/business/data-reports/data-reports.scss
Xem Tập Tin 

@@ -0,0 +1,986 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --primary-light: #a9dfbf;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --light-bg: #f8f9fa;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  --border-radius: 12px;
 
+}
 
+
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.data-reports-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  color: var(--dark-text);
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+  line-height: 1.6;
 
+}
 
+
 
+.container {
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+  padding: 0 15px;
 
+}
 
+
 
+/* 顶部导航 */
 
+.header {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+}
 
+
 
+.logo-icon {
 
+  margin-right: 10px;
 
+  font-size: 24px;
 
+}
 
+
 
+.user-info {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.avatar {
 
+  width: 36px;
 
+  height: 36px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.3);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-left: 10px;
 
+}
 
+
 
+/* 内容区域 */
 
+.content {
 
+  padding: 20px 0 80px;
 
+}
 
+
 
+.section-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 15px;
 
+}
 
+
 
+/* 预警通知栏 */
 
+.alert-banner {
 
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
 
+  color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  margin-bottom: 20px;
 
+  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
 
+  animation: pulse 2s infinite;
 
+}
 
+
 
+@keyframes pulse {
 
+  0%, 100% { transform: scale(1); }
 
+  50% { transform: scale(1.02); }
 
+}
 
+
 
+.alert-icon {
 
+  font-size: 28px;
 
+  animation: shake 0.5s infinite;
 
+}
 
+
 
+@keyframes shake {
 
+  0%, 100% { transform: translateX(0); }
 
+  25% { transform: translateX(-2px); }
 
+  75% { transform: translateX(2px); }
 
+}
 
+
 
+.alert-content {
 
+  flex: 1;
 
+}
 
+
 
+.alert-title {
 
+  font-weight: 600;
 
+  font-size: 16px;
 
+  margin-bottom: 2px;
 
+}
 
+
 
+.alert-desc {
 
+  font-size: 13px;
 
+  opacity: 0.9;
 
+}
 
+
 
+.alert-btn {
 
+  background-color: rgba(255, 255, 255, 0.2);
 
+  color: white;
 
+  border: 1px solid rgba(255, 255, 255, 0.3);
 
+  padding: 8px 16px;
 
+  border-radius: 20px;
 
+  font-size: 13px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 6px;
 
+
 
+  &:hover {
 
+    background-color: rgba(255, 255, 255, 0.3);
 
+  }
 
+}
 
+
 
+/* 报表类型选择器 */
 
+.report-tabs {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 12px;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.report-tab {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  gap: 8px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  box-shadow: var(--card-shadow);
 
+  color: var(--light-text);
 
+
 
+  i {
 
+    font-size: 24px;
 
+  }
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+
 
+  &.active {
 
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+    color: white;
 
+  }
 
+}
 
+
 
+/* 时间范围选择器 */
 
+.time-range-selector {
 
+  display: flex;
 
+  gap: 8px;
 
+  margin-bottom: 20px;
 
+  background-color: white;
 
+  padding: 6px;
 
+  border-radius: var(--border-radius);
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.time-btn {
 
+  flex: 1;
 
+  padding: 10px;
 
+  background-color: transparent;
 
+  border: none;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  color: var(--dark-text);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: var(--light-bg);
 
+  }
 
+
 
+  &.active {
 
+    background-color: var(--primary-color);
 
+    color: white;
 
+  }
 
+}
 
+
 
+/* 图表区域 */
 
+.chart-section {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 16px;
 
+}
 
+
 
+.chart-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.chart-title {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  margin-bottom: 16px;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.chart-content {
 
+  min-height: 200px;
 
+}
 
+
 
+.pie-chart {
 
+  padding: 20px 0;
 
+}
 
+
 
+.chart-legend {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.legend-item {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.legend-color {
 
+  width: 16px;
 
+  height: 16px;
 
+  border-radius: 4px;
 
+}
 
+
 
+.legend-label {
 
+  flex: 1;
 
+  font-size: 14px;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.legend-value {
 
+  font-weight: 600;
 
+  font-size: 14px;
 
+  color: var(--dark-text);
 
+}
 
+
 
+/* 趋势图 */
 
+.trend-chart {
 
+  padding: 20px 0;
 
+}
 
+
 
+.chart-bars {
 
+  display: flex;
 
+  align-items: flex-end;
 
+  justify-content: space-around;
 
+  height: 150px;
 
+  gap: 8px;
 
+}
 
+
 
+.bar-item {
 
+  flex: 1;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  gap: 8px;
 
+}
 
+
 
+.bar {
 
+  width: 100%;
 
+  background: linear-gradient(to top, var(--primary-color), var(--primary-light));
 
+  border-radius: 4px 4px 0 0;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    opacity: 0.8;
 
+  }
 
+}
 
+
 
+.bar-label {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+}
 
+
 
+/* 统计行 */
 
+.stats-row {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 12px;
 
+}
 
+
 
+.stat-box {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  text-align: center;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.stat-value {
 
+  font-size: 28px;
 
+  font-weight: bold;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 14px;
 
+  opacity: 0.9;
 
+}
 
+
 
+/* 环保卡片 */
 
+.env-cards {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.env-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 16px;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.env-icon {
 
+  width: 60px;
 
+  height: 60px;
 
+  border-radius: 12px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: white;
 
+  font-size: 28px;
 
+}
 
+
 
+.env-info {
 
+  flex: 1;
 
+}
 
+
 
+.env-value {
 
+  font-size: 32px;
 
+  font-weight: bold;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.env-label {
 
+  font-size: 14px;
 
+  color: var(--light-text);
 
+  margin-top: 4px;
 
+}
 
+
 
+/* 图表占位符 */
 
+.chart-placeholder,
 
+.line-chart {
 
+  height: 200px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  background-color: #f8f9fa;
 
+  border-radius: 8px;
 
+  color: var(--light-text);
 
+
 
+  i {
 
+    font-size: 48px;
 
+    margin-bottom: 12px;
 
+  }
 
+
 
+  p {
 
+    font-size: 14px;
 
+  }
 
+}
 
+
 
+/* 政府报告卡片 */
 
+.gov-report-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.report-info {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 16px;
 
+}
 
+
 
+.info-row {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  padding-bottom: 12px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+
 
+  &:last-child {
 
+    border-bottom: none;
 
+    padding-bottom: 0;
 
+  }
 
+}
 
+
 
+.info-label {
 
+  font-size: 14px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.info-value {
 
+  font-size: 14px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+/* 地点监控区域 */
 
+.monitor-section {
 
+  margin-top: 24px;
 
+}
 
+
 
+.section-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 16px;
 
+
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+  }
 
+}
 
+
 
+.view-all-btn {
 
+  background: none;
 
+  border: none;
 
+  color: var(--primary-color);
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 4px;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--primary-dark);
 
+  }
 
+}
 
+
 
+.location-cards {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.location-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  box-shadow: var(--card-shadow);
 
+  transition: all 0.3s;
 
+  border-left: 4px solid transparent;
 
+
 
+  &.warning {
 
+    border-left-color: #f39c12;
 
+    background: linear-gradient(to right, #fff8e6 0%, white 20%);
 
+  }
 
+
 
+  &.critical {
 
+    border-left-color: var(--warning-color);
 
+    background: linear-gradient(to right, #ffe6e6 0%, white 20%);
 
+    animation: criticalPulse 2s infinite;
 
+  }
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+@keyframes criticalPulse {
 
+  0%, 100% { box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2); }
 
+  50% { box-shadow: 0 4px 20px rgba(231, 76, 60, 0.4); }
 
+}
 
+
 
+.location-header {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.location-icon {
 
+  font-size: 32px;
 
+}
 
+
 
+.location-info {
 
+  flex: 1;
 
+}
 
+
 
+.location-name {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.location-update {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  margin-top: 2px;
 
+}
 
+
 
+.location-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+}
 
+
 
+.status-normal {
 
+  background-color: #e6f7e6;
 
+  color: var(--primary-dark);
 
+}
 
+
 
+.status-warning {
 
+  background-color: #fff8e6;
 
+  color: #e6a700;
 
+}
 
+
 
+.status-critical {
 
+  background-color: #ffe6e6;
 
+  color: var(--warning-color);
 
+}
 
+
 
+/* 进度条 */
 
+.location-progress {
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.progress-bar {
 
+  height: 8px;
 
+  background-color: #f0f0f0;
 
+  border-radius: 4px;
 
+  overflow: hidden;
 
+  margin-bottom: 6px;
 
+}
 
+
 
+.progress-fill {
 
+  height: 100%;
 
+  transition: all 0.3s;
 
+
 
+  &.status-normal {
 
+    background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
 
+  }
 
+
 
+  &.status-warning {
 
+    background: linear-gradient(to right, #f39c12, #e67e22);
 
+  }
 
+
 
+  &.status-critical {
 
+    background: linear-gradient(to right, var(--warning-color), #c0392b);
 
+  }
 
+}
 
+
 
+.progress-text {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  text-align: right;
 
+}
 
+
 
+.location-stats {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 12px;
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.stat-item {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  padding: 8px 12px;
 
+  background-color: #f8f9fa;
 
+  border-radius: 6px;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.stat-value {
 
+  font-size: 13px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+/* 派遣按钮 */
 
+.dispatch-btn {
 
+  width: 100%;
 
+  padding: 12px;
 
+  background: linear-gradient(135deg, var(--warning-color), #c0392b);
 
+  color: white;
 
+  border: none;
 
+  border-radius: 8px;
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+  animation: buttonPulse 1.5s infinite;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
 
+  }
 
+
 
+  i {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+@keyframes buttonPulse {
 
+  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
 
+  50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
 
+}
 
+
 
+/* 导出区域 */
 
+.export-section {
 
+  margin-top: 24px;
 
+}
 
+
 
+.section-subtitle {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.export-buttons {
 
+  display: flex;
 
+  gap: 12px;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.export-btn,
 
+.submit-btn {
 
+  flex: 1;
 
+  min-width: 140px;
 
+  padding: 14px 20px;
 
+  border-radius: var(--border-radius);
 
+  font-size: 15px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border: none;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+
 
+  i {
 
+    font-size: 16px;
 
+  }
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
+  }
 
+}
 
+
 
+.export-btn {
 
+  background-color: white;
 
+  color: var(--dark-text);
 
+  border: 1px solid #e0e0e0;
 
+
 
+  &:hover {
 
+    border-color: var(--primary-color);
 
+    color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.submit-btn {
 
+  background: linear-gradient(135deg, var(--secondary-color), #2980b9);
 
+  color: white;
 
+
 
+  &:hover {
 
+    background: linear-gradient(135deg, #2980b9, #21618c);
 
+  }
 
+}
 
+
 
+/* 监控弹层 */
 
+.modal-overlay {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  z-index: 1000;
 
+  padding: 20px;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 0.3s;
 
+
 
+  &.show {
 
+    opacity: 1;
 
+    visibility: visible;
 
+
 
+    .modal-content {
 
+      transform: scale(1);
 
+    }
 
+  }
 
+}
 
+
 
+.modal-content {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  width: 100%;
 
+  max-width: 600px;
 
+  max-height: 90vh;
 
+  overflow-y: auto;
 
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 
+  transform: scale(0.9);
 
+  transition: transform 0.3s;
 
+}
 
+
 
+.modal-header {
 
+  padding: 20px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  position: sticky;
 
+  top: 0;
 
+  background-color: white;
 
+  z-index: 10;
 
+}
 
+
 
+.modal-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+}
 
+
 
+.close-btn {
 
+  background: none;
 
+  border: none;
 
+  font-size: 24px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  width: 32px;
 
+  height: 32px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  border-radius: 50%;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: #f0f0f0;
 
+    color: var(--dark-text);
 
+  }
 
+}
 
+
 
+.modal-body {
 
+  padding: 20px;
 
+}
 
+
 
+/* 预警区域 */
 
+.alert-section {
 
+  margin-bottom: 24px;
 
+
 
+  &.critical {
 
+    .alert-section-title {
 
+      color: var(--warning-color);
 
+    }
 
+  }
 
+
 
+  &.warning {
 
+    .alert-section-title {
 
+      color: #f39c12;
 
+    }
 
+  }
 
+}
 
+
 
+.alert-section-title {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  margin-bottom: 12px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 8px;
 
+
 
+  i {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+.location-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 8px;
 
+}
 
+
 
+.location-item {
 
+  background-color: #f8f9fa;
 
+  border-radius: 8px;
 
+  padding: 12px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  gap: 12px;
 
+
 
+  &.critical {
 
+    background: linear-gradient(to right, #ffe6e6, #f8f9fa);
 
+    border-left: 3px solid var(--warning-color);
 
+  }
 
+
 
+  &.warning {
 
+    background: linear-gradient(to right, #fff8e6, #f8f9fa);
 
+    border-left: 3px solid #f39c12;
 
+  }
 
+}
 
+
 
+.location-main {
 
+  flex: 1;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.location-details {
 
+  flex: 1;
 
+}
 
+
 
+.location-name {
 
+  font-size: 14px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.location-meta {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  margin-top: 2px;
 
+}
 
+
 
+.location-status-badge {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+}
 
+
 
+.action-btn {
 
+  padding: 6px 16px;
 
+  border-radius: 20px;
 
+  font-size: 13px;
 
+  font-weight: 500;
 
+  border: none;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  white-space: nowrap;
 
+
 
+  &.critical {
 
+    background-color: var(--warning-color);
 
+    color: white;
 
+
 
+    &:hover {
 
+      background-color: #c0392b;
 
+    }
 
+  }
 
+
 
+  &.warning {
 
+    background-color: #f39c12;
 
+    color: white;
 
+
 
+    &:hover {
 
+      background-color: #e67e22;
 
+    }
 
+  }
 
+}
 
+
 
+/* 底部导航 */
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--primary-color);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.nav-icon {
 
+  font-size: 20px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+/* 响应式调整 */
 
+@media (min-width: 768px) {
 
+  .container {
 
+    max-width: 750px;
 
+  }
 
+
 
+  .location-cards {
 
+    display: grid;
 
+    grid-template-columns: repeat(2, 1fr);
 
+  }
 
+}
 
+
 
+@media (max-width: 576px) {
 
+  .report-tabs {
 
+    grid-template-columns: 1fr;
 
+  }
 
+
 
+  .export-buttons {
 
+    flex-direction: column;
 
+
 
+    .export-btn,
 
+    .submit-btn {
 
+      width: 100%;
 
+    }
 
+  }
 
+}
 
+
 
+

+ 164 - 1
src/app/business/data-reports/data-reports.ts
Xem Tập Tin 

@@ -1,13 +1,176 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+interface LocationData {
 
+  id: string;
 
+  name: string;
 
+  type: 'community' | 'mall' | 'school' | 'office';
 
+  wasteVolume: number;
 
+  recycleVolume: number;
 
+  capacity: number;
 
+  status: 'normal' | 'warning' | 'critical';
 
+  lastUpdate: string;
 
+}
 
+
 
+interface ChartData {
 
+  label: string;
 
+  value: number;
 
+  color?: string;
 
+}
 
 
 @Component({
 
   selector: 'app-data-reports',
 
-  imports: [CommonModule, RouterModule],
 
+  standalone: true,
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './data-reports.html',
 
   styleUrl: './data-reports.scss'
 
 })
 
 export class DataReports {
 
+  reportType: 'business' | 'environmental' | 'government' = 'business';
 
+  timeRange: 'today' | 'week' | 'month' | 'year' = 'month';
 
+  showMonitorModal = false;
 
+
 
+  // 地点监控数据
 
+  locations: LocationData[] = [
 
+    {
 
+      id: 'LOC-001',
 
+      name: '望京社区A区',
 
+      type: 'community',
 
+      wasteVolume: 850,
 
+      recycleVolume: 680,
 
+      capacity: 1000,
 
+      status: 'warning',
 
+      lastUpdate: '2分钟前'
 
+    },
 
+    {
 
+      id: 'LOC-002',
 
+      name: '朝阳大悦城',
 
+      type: 'mall',
 
+      wasteVolume: 920,
 
+      recycleVolume: 750,
 
+      capacity: 1000,
 
+      status: 'critical',
 
+      lastUpdate: '5分钟前'
 
+    },
 
+    {
 
+      id: 'LOC-003',
 
+      name: '中关村创业大街',
 
+      type: 'office',
 
+      wasteVolume: 450,
 
+      recycleVolume: 380,
 
+      capacity: 1000,
 
+      status: 'normal',
 
+      lastUpdate: '10分钟前'
 
+    },
 
+    {
 
+      id: 'LOC-004',
 
+      name: '北京实验学校',
 
+      type: 'school',
 
+      wasteVolume: 680,
 
+      recycleVolume: 580,
 
+      capacity: 1000,
 
+      status: 'normal',
 
+      lastUpdate: '15分钟前'
 
+    },
 
+    {
 
+      id: 'LOC-005',
 
+      name: '国贸CBD商圈',
 
+      type: 'mall',
 
+      wasteVolume: 950,
 
+      recycleVolume: 820,
 
+      capacity: 1000,
 
+      status: 'critical',
 
+      lastUpdate: '3分钟前'
 
+    },
 
+    {
 
+      id: 'LOC-006',
 
+      name: '海淀区社区B区',
 
+      type: 'community',
 
+      wasteVolume: 720,
 
+      recycleVolume: 600,
 
+      capacity: 1000,
 
+      status: 'normal',
 
+      lastUpdate: '8分钟前'
 
+    }
 
+  ];
 
+
 
+  // 报表数据
 
+  get businessData(): ChartData[] {
 
+    return [
 
+      { label: '纸类', value: 35, color: '#3498db' },
 
+      { label: '塑料', value: 28, color: '#2ecc71' },
 
+      { label: '金属', value: 18, color: '#f39c12' },
 
+      { label: '玻璃', value: 12, color: '#9b59b6' },
 
+      { label: '其他', value: 7, color: '#95a5a6' }
 
+    ];
 
+  }
 
+
 
+  get environmentalData(): ChartData[] {
 
+    return [
 
+      { label: '碳减排', value: 1250, color: '#2ecc71' },
 
+      { label: '节水量', value: 3200, color: '#3498db' },
 
+      { label: '节电量', value: 5800, color: '#f39c12' }
 
+    ];
 
+  }
 
+
 
+  get criticalLocations(): LocationData[] {
 
+    return this.locations.filter(loc => loc.status === 'critical');
 
+  }
 
+
 
+  get warningLocations(): LocationData[] {
 
+    return this.locations.filter(loc => loc.status === 'warning');
 
+  }
 
+
 
+  getLocationIcon(type: string): string {
 
+    const icons: {[key: string]: string} = {
 
+      'community': '🏘️',
 
+      'mall': '🏬',
 
+      'school': '🏫',
 
+      'office': '🏢'
 
+    };
 
+    return icons[type] || '📍';
 
+  }
 
+
 
+  getStatusText(status: string): string {
 
+    const statusMap: {[key: string]: string} = {
 
+      'normal': '正常',
 
+      'warning': '预警',
 
+      'critical': '严重'
 
+    };
 
+    return statusMap[status] || status;
 
+  }
 
+
 
+  getStatusClass(status: string): string {
 
+    return `status-${status}`;
 
+  }
 
+
 
+  getCapacityPercent(location: LocationData): number {
 
+    return Math.round((location.wasteVolume / location.capacity) * 100);
 
+  }
 
+
 
+  openMonitorView(): void {
 
+    this.showMonitorModal = true;
 
+  }
 
+
 
+  closeMonitorView(): void {
 
+    this.showMonitorModal = false;
 
+  }
 
+
 
+  dispatchWorkers(location: LocationData): void {
 
+    alert(`正在为 ${location.name} 派遣回收人员...\n当前垃圾量: ${location.wasteVolume}kg`);
 
+  }
 
+
 
+  exportReport(format: string): void {
 
+    alert(`正在导出${format.toUpperCase()}格式报表...`);
 
+  }
 
+
 
+  submitToGov(): void {
 
+    if (confirm('确定要提交政府申报报表吗？')) {
 
+      alert('报表已成功提交！');
 
+    }
 
+  }
 
+
 
   constructor() {}
 
 }

+ 311 - 3
src/app/business/device-management/device-management.html
Xem Tập Tin 

@@ -1,6 +1,314 @@
 
 <div class="device-management-container">
 
-  <div class="device-header">
 
-    <h1>设备管理</h1>
 
+  <!-- 顶部导航 -->
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo">
 
+        <span class="logo-icon">♻️</span>
 
+        <span>智回回收</span>
 
+      </div>
 
+      <div class="user-info">
 
+        <span>企业管理员</span>
 
+        <div class="avatar">
 
+          <span>管</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 主要内容 -->
 
+  <main class="content">
 
+    <div class="container">
 
+      <section id="device-management">
 
+        <h2 class="section-title">设备管理</h2>
 
+
 
+        <!-- 设备总览状态卡片 -->
 
+        <div class="stats-cards">
 
+          <div class="stat-card">
 
+            <div class="stat-icon" style="background: linear-gradient(135deg, #2ecc71, #27ae60);">
 
+              <i class="fas fa-cogs"></i>
 
+            </div>
 
+            <div class="stat-info">
 
+              <div class="stat-value">{{ deviceStats.total }}</div>
 
+              <div class="stat-label">设备总数</div>
 
+            </div>
 
+          </div>
 
+          <div class="stat-card">
 
+            <div class="stat-icon" style="background: linear-gradient(135deg, #3498db, #2980b9);">
 
+              <i class="fas fa-play-circle"></i>
 
+            </div>
 
+            <div class="stat-info">
 
+              <div class="stat-value">{{ deviceStats.online }}</div>
 
+              <div class="stat-label">运行中</div>
 
+            </div>
 
+          </div>
 
+          <div class="stat-card">
 
+            <div class="stat-icon" style="background: linear-gradient(135deg, #f39c12, #e67e22);">
 
+              <i class="fas fa-exclamation-triangle"></i>
 
+            </div>
 
+            <div class="stat-info">
 
+              <div class="stat-value">{{ deviceStats.warning }}</div>
 
+              <div class="stat-label">预警</div>
 
+            </div>
 
+          </div>
 
+          <div class="stat-card">
 
+            <div class="stat-icon" style="background: linear-gradient(135deg, #95a5a6, #7f8c8d);">
 
+              <i class="fas fa-wrench"></i>
 
+            </div>
 
+            <div class="stat-info">
 
+              <div class="stat-value">{{ deviceStats.maintenance }}</div>
 
+              <div class="stat-label">维护中</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 搜索和筛选栏 -->
 
+        <div class="filter-search-bar">
 
+          <div class="search-box">
 
+            <input 
+              type="text" 
+              class="search-input" 
+              placeholder="搜索设备名称、编号、位置..."
 
+              [(ngModel)]="searchQuery">
 
+            <i class="fas fa-search search-icon"></i>
 
+          </div>
 
+          <div class="filter-dropdown">
 
+            <select class="filter-select" [(ngModel)]="filterStatus">
 
+              <option value="all">全部状态</option>
 
+              <option value="online">运行中</option>
 
+              <option value="offline">离线</option>
 
+              <option value="maintenance">维护中</option>
 
+              <option value="warning">预警</option>
 
+            </select>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 设备列表 -->
 
+        <div class="device-list">
 
+          <div 
+            *ngFor="let device of filteredDevices" 
+            class="device-item"
 
+            (click)="openDeviceDetail(device)">
 
+            <div class="device-header">
 
+              <div class="device-info-main">
 
+                <div class="device-name">{{ device.name }}</div>
 
+                <div class="device-meta">
 
+                  <span class="device-id">{{ device.id }}</span>
 
+                  <span class="device-type">{{ device.type }}</span>
 
+                </div>
 
+              </div>
 
+              <div class="device-status" [ngClass]="getStatusClass(device.status)">
 
+                {{ getStatusText(device.status) }}
 
+              </div>
 
+            </div>
 
+            
+            <div class="device-body">
 
+              <div class="device-stats-row">
 
+                <div class="device-stat">
 
+                  <i class="fas fa-clock"></i>
 
+                  <span>{{ device.runningTime }}h</span>
 
+                </div>
 
+                <div class="device-stat">
 
+                  <i class="fas fa-box"></i>
 
+                  <span>{{ device.processedVolume }}kg</span>
 
+                </div>
 
+                <div class="device-stat">
 
+                  <i class="fas fa-map-marker-alt"></i>
 
+                  <span>{{ device.location }}</span>
 
+                </div>
 
+                <div class="device-stat">
 
+                  <i class="fas fa-chart-line"></i>
 
+                  <span>{{ device.efficiency }}%</span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="device-actions">
 
+              <button class="action-btn btn-primary" (click)="openDeviceDetail(device)">
 
+                <i class="fas fa-info-circle"></i> 详情
 
+              </button>
 
+              <button 
+                class="action-btn btn-secondary" 
+                (click)="startMaintenance(device, $event)"
 
+                *ngIf="device.status === 'online' || device.status === 'warning'">
 
+                <i class="fas fa-tools"></i> 维护
 
+              </button>
 
+              <button 
+                class="action-btn btn-warning" 
+                (click)="reportIssue(device, $event)">
 
+                <i class="fas fa-bug"></i> 报修
 
+              </button>
 
+              <button 
+                class="action-btn btn-ar" 
+                (click)="viewARGuide(device, $event)"
 
+                *ngIf="device.status !== 'offline'">
 
+                <i class="fas fa-cube"></i> AR
 
+              </button>
 
+            </div>
 
+          </div>
 
+
 
+          <!-- 空状态 -->
 
+          <div *ngIf="filteredDevices.length === 0" class="empty-state">
 
+            <i class="fas fa-inbox"></i>
 
+            <p>暂无设备</p>
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  </main>
 
+
 
+  <!-- 设备详情弹层 -->
 
+  <div class="modal-overlay" [class.show]="showDetailModal" (click)="closeDeviceDetail()">
 
+    <div class="modal-content" (click)="$event.stopPropagation()" *ngIf="selectedDevice">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">{{ selectedDevice.name }}</h3>
 
+        <button class="close-btn" (click)="closeDeviceDetail()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <!-- 设备基本信息 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">设备信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">设备编号</span>
 
+              <span class="detail-value">{{ selectedDevice.id }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">设备类型</span>
 
+              <span class="detail-value">{{ selectedDevice.type }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">所在位置</span>
 
+              <span class="detail-value">{{ selectedDevice.location }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">设备状态</span>
 
+              <span class="detail-value" [ngClass]="getStatusClass(selectedDevice.status)">
 
+                {{ getStatusText(selectedDevice.status) }}
 
+              </span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 实时运行参数监控 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">实时运行参数</h4>
 
+          <div class="params-monitor">
 
+            <div class="param-card">
 
+              <div class="param-icon">🌡️</div>
 
+              <div class="param-info">
 
+                <div class="param-label">温度</div>
 
+                <div class="param-value">{{ selectedDevice.temperature }}°C</div>
 
+              </div>
 
+              <div class="param-status" [class.normal]="selectedDevice.temperature! < 60" [class.warning]="selectedDevice.temperature! >= 60">
 
+                {{ selectedDevice.temperature! < 60 ? '正常' : '偏高' }}
 
+              </div>
 
+            </div>
 
+            <div class="param-card">
 
+              <div class="param-icon">⚡</div>
 
+              <div class="param-info">
 
+                <div class="param-label">压力</div>
 
+                <div class="param-value">{{ selectedDevice.pressure }} MPa</div>
 
+              </div>
 
+              <div class="param-status normal">正常</div>
 
+            </div>
 
+            <div class="param-card">
 
+              <div class="param-icon">📊</div>
 
+              <div class="param-info">
 
+                <div class="param-label">效率</div>
 
+                <div class="param-value">{{ selectedDevice.efficiency }}%</div>
 
+              </div>
 
+              <div class="param-status" [class.normal]="selectedDevice.efficiency >= 80" [class.warning]="selectedDevice.efficiency < 80">
 
+                {{ selectedDevice.efficiency >= 80 ? '良好' : '待优化' }}
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 运行统计 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">运行统计</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">运行时长</span>
 
+              <span class="detail-value">{{ selectedDevice.runningTime }} 小时</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">处理总量</span>
 
+              <span class="detail-value">{{ selectedDevice.processedVolume }} kg</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 维护保养记录 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">维护保养</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">上次维护</span>
 
+              <span class="detail-value">{{ selectedDevice.lastMaintenance }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">下次维护</span>
 
+              <span class="detail-value">{{ selectedDevice.nextMaintenance }}</span>
 
+            </div>
 
+          </div>
 
+          <div class="maintenance-history">
 
+            <div class="history-item">
 
+              <div class="history-date">2023-05-10</div>
 
+              <div class="history-content">定期保养 - 更换滤芯</div>
 
+              <div class="history-operator">张师傅</div>
 
+            </div>
 
+            <div class="history-item">
 
+              <div class="history-date">2023-04-10</div>
 
+              <div class="history-content">故障维修 - 电机异响</div>
 
+              <div class="history-operator">李师傅</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- AR参数调节指引 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">AR参数调节</h4>
 
+          <div class="ar-guide-card" (click)="viewARGuide(selectedDevice)">
 
+            <i class="fas fa-cube"></i>
 
+            <span>启动AR调节指引</span>
 
+            <i class="fas fa-chevron-right"></i>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 报修申请 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">报修申请</h4>
 
+          <button class="report-btn" (click)="reportIssue(selectedDevice)">
 
+            <i class="fas fa-wrench"></i>
 
+            提交报修申请
 
+          </button>
 
+        </div>
 
+      </div>
 
+    </div>
 
   </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
+
 
+  <!-- 底部导航 -->
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/business/dashboard">
 
+      <div class="nav-icon">🏠</div>
 
+      <div>工作台</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/order-management">
 
+      <div class="nav-icon">📦</div>
 
+      <div>订单</div>
 
+    </div>
 
+    <div class="nav-item active">
 
+      <div class="nav-icon">⚙️</div>
 
+      <div>设备</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/data-reports">
 
+      <div class="nav-icon">📊</div>
 
+      <div>报表</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/enterprise-center">
 
+      <div class="nav-icon">👤</div>
 
+      <div>我的</div>
 
+    </div>
 
+  </nav>
 
 </div>

+ 718 - 0
src/app/business/device-management/device-management.scss
Xem Tập Tin 

@@ -0,0 +1,718 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --primary-light: #a9dfbf;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --light-bg: #f8f9fa;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  --border-radius: 12px;
 
+}
 
+
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.device-management-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  color: var(--dark-text);
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+  line-height: 1.6;
 
+}
 
+
 
+.container {
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+  padding: 0 15px;
 
+}
 
+
 
+/* 顶部导航 */
 
+.header {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+}
 
+
 
+.logo-icon {
 
+  margin-right: 10px;
 
+  font-size: 24px;
 
+}
 
+
 
+.user-info {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.avatar {
 
+  width: 36px;
 
+  height: 36px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.3);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-left: 10px;
 
+}
 
+
 
+/* 内容区域 */
 
+.content {
 
+  padding: 20px 0 80px;
 
+}
 
+
 
+.section-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 15px;
 
+}
 
+
 
+/* 设备统计卡片 */
 
+.stats-cards {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 12px;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.stat-card {
 
+  background: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  box-shadow: var(--card-shadow);
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.stat-icon {
 
+  width: 48px;
 
+  height: 48px;
 
+  border-radius: 12px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: white;
 
+  font-size: 24px;
 
+}
 
+
 
+.stat-info {
 
+  flex: 1;
 
+}
 
+
 
+.stat-value {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+  color: var(--dark-text);
 
+  line-height: 1.2;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  margin-top: 2px;
 
+}
 
+
 
+/* 搜索和筛选栏 */
 
+.filter-search-bar {
 
+  display: flex;
 
+  gap: 12px;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.search-box {
 
+  flex: 1;
 
+  position: relative;
 
+}
 
+
 
+.search-input {
 
+  width: 100%;
 
+  padding: 12px 40px 12px 16px;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: var(--border-radius);
 
+  font-size: 14px;
 
+  background-color: white;
 
+  outline: none;
 
+  transition: border-color 0.3s;
 
+
 
+  &:focus {
 
+    border-color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.search-icon {
 
+  position: absolute;
 
+  right: 12px;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  color: var(--light-text);
 
+}
 
+
 
+.filter-dropdown {
 
+  min-width: 120px;
 
+}
 
+
 
+.filter-select {
 
+  width: 100%;
 
+  padding: 12px 16px;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: var(--border-radius);
 
+  font-size: 14px;
 
+  background-color: white;
 
+  outline: none;
 
+  cursor: pointer;
 
+  transition: border-color 0.3s;
 
+
 
+  &:focus {
 
+    border-color: var(--primary-color);
 
+  }
 
+}
 
+
 
+/* 设备列表 */
 
+.device-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.device-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  box-shadow: var(--card-shadow);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.device-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: flex-start;
 
+  margin-bottom: 12px;
 
+  padding-bottom: 12px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+}
 
+
 
+.device-info-main {
 
+  flex: 1;
 
+}
 
+
 
+.device-name {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.device-meta {
 
+  display: flex;
 
+  gap: 12px;
 
+  font-size: 13px;
 
+}
 
+
 
+.device-id {
 
+  color: var(--light-text);
 
+}
 
+
 
+.device-type {
 
+  color: var(--secondary-color);
 
+}
 
+
 
+.device-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+  white-space: nowrap;
 
+}
 
+
 
+.status-online {
 
+  background-color: #e6f7e6;
 
+  color: var(--primary-dark);
 
+}
 
+
 
+.status-offline {
 
+  background-color: #f0f0f0;
 
+  color: #95a5a6;
 
+}
 
+
 
+.status-maintenance {
 
+  background-color: #e6f7ff;
 
+  color: var(--secondary-color);
 
+}
 
+
 
+.status-warning {
 
+  background-color: #fff8e6;
 
+  color: #e6a700;
 
+}
 
+
 
+.device-body {
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.device-stats-row {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 8px;
 
+}
 
+
 
+.device-stat {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 6px;
 
+  font-size: 14px;
 
+  color: var(--dark-text);
 
+
 
+  i {
 
+    color: var(--light-text);
 
+    font-size: 14px;
 
+  }
 
+}
 
+
 
+.device-actions {
 
+  display: flex;
 
+  gap: 8px;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.action-btn {
 
+  flex: 1;
 
+  min-width: 70px;
 
+  padding: 8px 12px;
 
+  border-radius: 6px;
 
+  font-size: 13px;
 
+  font-weight: 500;
 
+  text-align: center;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border: none;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 4px;
 
+
 
+  i {
 
+    font-size: 12px;
 
+  }
 
+
 
+  &:hover {
 
+    transform: translateY(-1px);
 
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
+  }
 
+
 
+  &:active {
 
+    transform: translateY(0);
 
+  }
 
+}
 
+
 
+.btn-primary {
 
+  background-color: var(--primary-color);
 
+  color: white;
 
+
 
+  &:hover {
 
+    background-color: var(--primary-dark);
 
+  }
 
+}
 
+
 
+.btn-secondary {
 
+  background-color: #f0f0f0;
 
+  color: var(--dark-text);
 
+
 
+  &:hover {
 
+    background-color: #e0e0e0;
 
+  }
 
+}
 
+
 
+.btn-warning {
 
+  background-color: #fff8e6;
 
+  color: #e6a700;
 
+
 
+  &:hover {
 
+    background-color: #ffe6b3;
 
+  }
 
+}
 
+
 
+.btn-ar {
 
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
 
+  color: white;
 
+
 
+  &:hover {
 
+    background: linear-gradient(135deg, #8e44ad, #7d3c98);
 
+  }
 
+}
 
+
 
+/* 空状态 */
 
+.empty-state {
 
+  text-align: center;
 
+  padding: 60px 20px;
 
+  color: var(--light-text);
 
+
 
+  i {
 
+    font-size: 48px;
 
+    margin-bottom: 16px;
 
+    opacity: 0.5;
 
+  }
 
+
 
+  p {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+/* 设备详情弹层 */
 
+.modal-overlay {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  z-index: 1000;
 
+  padding: 20px;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 0.3s;
 
+
 
+  &.show {
 
+    opacity: 1;
 
+    visibility: visible;
 
+
 
+    .modal-content {
 
+      transform: scale(1);
 
+    }
 
+  }
 
+}
 
+
 
+.modal-content {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  width: 100%;
 
+  max-width: 500px;
 
+  max-height: 90vh;
 
+  overflow-y: auto;
 
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 
+  transform: scale(0.9);
 
+  transition: transform 0.3s;
 
+}
 
+
 
+.modal-header {
 
+  padding: 20px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  position: sticky;
 
+  top: 0;
 
+  background-color: white;
 
+  z-index: 10;
 
+}
 
+
 
+.modal-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+}
 
+
 
+.close-btn {
 
+  background: none;
 
+  border: none;
 
+  font-size: 24px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  width: 32px;
 
+  height: 32px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  border-radius: 50%;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: #f0f0f0;
 
+    color: var(--dark-text);
 
+  }
 
+}
 
+
 
+.modal-body {
 
+  padding: 20px;
 
+}
 
+
 
+.detail-section {
 
+  margin-bottom: 24px;
 
+
 
+  &:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+}
 
+
 
+.detail-title {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  margin-bottom: 12px;
 
+  padding-bottom: 8px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+}
 
+
 
+.detail-grid {
 
+  display: grid;
 
+  grid-template-columns: 1fr 1fr;
 
+  gap: 12px;
 
+}
 
+
 
+.detail-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 4px;
 
+}
 
+
 
+.detail-label {
 
+  font-size: 14px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.detail-value {
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+}
 
+
 
+/* 参数监控卡片 */
 
+.params-monitor {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.param-card {
 
+  background-color: #f8f9fa;
 
+  border-radius: 8px;
 
+  padding: 12px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+}
 
+
 
+.param-icon {
 
+  font-size: 24px;
 
+}
 
+
 
+.param-info {
 
+  flex: 1;
 
+}
 
+
 
+.param-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.param-value {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.param-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+
 
+  &.normal {
 
+    background-color: #e6f7e6;
 
+    color: var(--primary-dark);
 
+  }
 
+
 
+  &.warning {
 
+    background-color: #fff8e6;
 
+    color: #e6a700;
 
+  }
 
+}
 
+
 
+/* 维护记录 */
 
+.maintenance-history {
 
+  margin-top: 12px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 8px;
 
+}
 
+
 
+.history-item {
 
+  background-color: #f8f9fa;
 
+  border-radius: 8px;
 
+  padding: 12px;
 
+  display: grid;
 
+  grid-template-columns: auto 1fr auto;
 
+  gap: 12px;
 
+  align-items: center;
 
+}
 
+
 
+.history-date {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.history-content {
 
+  font-size: 14px;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.history-operator {
 
+  font-size: 13px;
 
+  color: var(--secondary-color);
 
+}
 
+
 
+/* AR指引卡片 */
 
+.ar-guide-card {
 
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
 
+  color: white;
 
+  border-radius: 8px;
 
+  padding: 16px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.3);
 
+  }
 
+
 
+  i:first-child {
 
+    font-size: 24px;
 
+  }
 
+
 
+  span {
 
+    flex: 1;
 
+    margin: 0 12px;
 
+    font-weight: 500;
 
+  }
 
+
 
+  i:last-child {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+/* 报修按钮 */
 
+.report-btn {
 
+  width: 100%;
 
+  padding: 14px;
 
+  background-color: var(--accent-color);
 
+  color: white;
 
+  border: none;
 
+  border-radius: 8px;
 
+  font-size: 16px;
 
+  font-weight: 500;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: #e67e22;
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
 
+  }
 
+
 
+  i {
 
+    font-size: 18px;
 
+  }
 
+}
 
+
 
+/* 底部导航 */
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--primary-color);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.nav-icon {
 
+  font-size: 20px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+/* 响应式调整 */
 
+@media (min-width: 768px) {
 
+  .container {
 
+    max-width: 750px;
 
+  }
 
+
 
+  .stats-cards {
 
+    grid-template-columns: repeat(4, 1fr);
 
+  }
 
+}
 
+
 
+@media (max-width: 576px) {
 
+  .device-stats-row {
 
+    grid-template-columns: 1fr;
 
+  }
 
+
 
+  .device-actions {
 
+    .action-btn {
 
+      min-width: 60px;
 
+      font-size: 12px;
 
+    }
 
+  }
 
+}
 
+
 
+

+ 171 - 1
src/app/business/device-management/device-management.ts
Xem Tập Tin 

@@ -1,13 +1,183 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+interface Device {
 
+  id: string;
 
+  name: string;
 
+  type: string;
 
+  status: 'online' | 'offline' | 'maintenance' | 'warning';
 
+  location: string;
 
+  runningTime: number;
 
+  processedVolume: number;
 
+  lastMaintenance: string;
 
+  nextMaintenance: string;
 
+  efficiency: number;
 
+  temperature?: number;
 
+  pressure?: number;
 
+}
 
 
 @Component({
 
   selector: 'app-device-management',
 
-  imports: [CommonModule, RouterModule],
 
+  standalone: true,
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './device-management.html',
 
   styleUrl: './device-management.scss'
 
 })
 
 export class DeviceManagement {
 
+  searchQuery = '';
 
+  selectedDevice: Device | null = null;
 
+  showDetailModal = false;
 
+  filterStatus: string = 'all';
 
+
 
+  devices: Device[] = [
 
+    {
 
+      id: 'DEV-001',
 
+      name: '智能分拣机A1',
 
+      type: '分拣设备',
 
+      status: 'online',
 
+      location: '朝阳区回收站',
 
+      runningTime: 2340,
 
+      processedVolume: 15800,
 
+      lastMaintenance: '2023-05-10',
 
+      nextMaintenance: '2023-06-10',
 
+      efficiency: 95,
 
+      temperature: 45,
 
+      pressure: 1.2
 
+    },
 
+    {
 
+      id: 'DEV-002',
 
+      name: '压缩打包机B2',
 
+      type: '压缩设备',
 
+      status: 'online',
 
+      location: '海淀区回收站',
 
+      runningTime: 1890,
 
+      processedVolume: 12500,
 
+      lastMaintenance: '2023-05-15',
 
+      nextMaintenance: '2023-06-15',
 
+      efficiency: 88,
 
+      temperature: 52,
 
+      pressure: 2.5
 
+    },
 
+    {
 
+      id: 'DEV-003',
 
+      name: '塑料粉碎机C1',
 
+      type: '粉碎设备',
 
+      status: 'warning',
 
+      location: '朝阳区回收站',
 
+      runningTime: 3200,
 
+      processedVolume: 18900,
 
+      lastMaintenance: '2023-04-20',
 
+      nextMaintenance: '2023-05-20',
 
+      efficiency: 72,
 
+      temperature: 68,
 
+      pressure: 1.8
 
+    },
 
+    {
 
+      id: 'DEV-004',
 
+      name: '金属分选机D3',
 
+      type: '分选设备',
 
+      status: 'maintenance',
 
+      location: '西城区回收站',
 
+      runningTime: 1520,
 
+      processedVolume: 8600,
 
+      lastMaintenance: '2023-05-18',
 
+      nextMaintenance: '2023-06-18',
 
+      efficiency: 0,
 
+      temperature: 25,
 
+      pressure: 0
 
+    },
 
+    {
 
+      id: 'DEV-005',
 
+      name: '纸张打包机E1',
 
+      type: '打包设备',
 
+      status: 'offline',
 
+      location: '东城区回收站',
 
+      runningTime: 980,
 
+      processedVolume: 6200,
 
+      lastMaintenance: '2023-05-01',
 
+      nextMaintenance: '2023-06-01',
 
+      efficiency: 0,
 
+      temperature: 28,
 
+      pressure: 0
 
+    }
 
+  ];
 
+
 
+  get deviceStats() {
 
+    return {
 
+      total: this.devices.length,
 
+      online: this.devices.filter(d => d.status === 'online').length,
 
+      offline: this.devices.filter(d => d.status === 'offline').length,
 
+      maintenance: this.devices.filter(d => d.status === 'maintenance').length,
 
+      warning: this.devices.filter(d => d.status === 'warning').length
 
+    };
 
+  }
 
+
 
+  get filteredDevices(): Device[] {
 
+    let filtered = this.devices;
 
+    
+    if (this.filterStatus !== 'all') {
 
+      filtered = filtered.filter(d => d.status === this.filterStatus);
 
+    }
 
+    
+    if (this.searchQuery.trim()) {
 
+      const query = this.searchQuery.toLowerCase();
 
+      filtered = filtered.filter(d => 
+        d.name.toLowerCase().includes(query) ||
 
+        d.id.toLowerCase().includes(query) ||
 
+        d.location.toLowerCase().includes(query)
 
+      );
 
+    }
 
+    
+    return filtered;
 
+  }
 
+
 
+  getStatusText(status: string): string {
 
+    const statusMap: {[key: string]: string} = {
 
+      'online': '运行中',
 
+      'offline': '离线',
 
+      'maintenance': '维护中',
 
+      'warning': '预警'
 
+    };
 
+    return statusMap[status] || status;
 
+  }
 
+
 
+  getStatusClass(status: string): string {
 
+    return `status-${status}`;
 
+  }
 
+
 
+  openDeviceDetail(device: Device): void {
 
+    this.selectedDevice = device;
 
+    this.showDetailModal = true;
 
+  }
 
+
 
+  closeDeviceDetail(): void {
 
+    this.showDetailModal = false;
 
+    this.selectedDevice = null;
 
+  }
 
+
 
+  startMaintenance(device: Device, event?: Event): void {
 
+    if (event) event.stopPropagation();
 
+    if (confirm(`确定要对设备 ${device.name} 进行维护吗？`)) {
 
+      device.status = 'maintenance';
 
+      alert('设备已进入维护状态');
 
+    }
 
+  }
 
+
 
+  reportIssue(device: Device, event?: Event): void {
 
+    if (event) event.stopPropagation();
 
+    alert(`报修设备: ${device.name}\n请描述具体问题...`);
 
+  }
 
+
 
+  viewARGuide(device: Device, event?: Event): void {
 
+    if (event) event.stopPropagation();
 
+    alert(`正在启动AR参数调节指引...\n设备: ${device.name}`);
 
+  }
 
+
 
+  setFilter(status: string): void {
 
+    this.filterStatus = status;
 
+  }
 
+
 
   constructor() {}
 
 }

+ 424 - 3
src/app/business/enterprise-center/enterprise-center.html
Xem Tập Tin 

@@ -1,6 +1,427 @@
 
 <div class="enterprise-center-container">
 
-  <div class="enterprise-header">
 
-    <h1>企业中心</h1>
 
+  <!-- 顶部导航 -->
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo">
 
+        <span class="logo-icon">♻️</span>
 
+        <span>智回回收</span>
 
+      </div>
 
+      <div class="user-info">
 
+        <span>企业管理员</span>
 
+        <div class="avatar">
 
+          <span>管</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 主要内容 -->
 
+  <main class="content">
 
+    <div class="container">
 
+      <section id="enterprise-center">
 
+        <h2 class="section-title">企业中心</h2>
 
+
 
+        <!-- 功能卡片 -->
 
+        <div class="quick-stats">
 
+          <div class="quick-stat-card">
 
+            <div class="stat-icon">
 
+              <i class="fas fa-users"></i>
 
+            </div>
 
+            <div class="stat-content">
 
+              <div class="stat-value">{{ getEmployeeCount() }}</div>
 
+              <div class="stat-label">在职员工</div>
 
+            </div>
 
+          </div>
 
+          <div class="quick-stat-card">
 
+            <div class="stat-icon">
 
+              <i class="fas fa-file-contract"></i>
 
+            </div>
 
+            <div class="stat-content">
 
+              <div class="stat-value">{{ getActiveContractCount() }}</div>
 
+              <div class="stat-label">活跃合同</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 功能导航标签 -->
 
+        <div class="function-tabs">
 
+          <div 
+            class="function-tab" 
+            [class.active]="activeTab === 'info'"
 
+            (click)="switchTab('info')">
 
+            <i class="fas fa-building"></i>
 
+            <span>企业信息</span>
 
+          </div>
 
+          <div 
+            class="function-tab" 
+            [class.active]="activeTab === 'employee'"
 
+            (click)="switchTab('employee')">
 
+            <i class="fas fa-users"></i>
 
+            <span>员工管理</span>
 
+          </div>
 
+          <div 
+            class="function-tab" 
+            [class.active]="activeTab === 'contract'"
 
+            (click)="switchTab('contract')">
 
+            <i class="fas fa-file-contract"></i>
 
+            <span>合同发票</span>
 
+          </div>
 
+          <div 
+            class="function-tab" 
+            [class.active]="activeTab === 'subscription'"
 
+            (click)="switchTab('subscription')">
 
+            <i class="fas fa-crown"></i>
 
+            <span>订阅付费</span>
 
+          </div>
 
+          <div 
+            class="function-tab" 
+            [class.active]="activeTab === 'settings'"
 
+            (click)="switchTab('settings')">
 
+            <i class="fas fa-cog"></i>
 
+            <span>系统设置</span>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 企业信息 -->
 
+        <div *ngIf="activeTab === 'info'" class="tab-content">
 
+          <div class="info-card">
 
+            <div class="card-header">
 
+              <h3>企业基本信息</h3>
 
+              <button class="edit-btn" (click)="editInfo()">
 
+                <i class="fas fa-edit"></i> 编辑
 
+              </button>
 
+            </div>
 
+            <div class="info-grid">
 
+              <div class="info-item">
 
+                <span class="info-label">企业名称</span>
 
+                <span class="info-value">{{ enterpriseInfo.name }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">统一社会信用代码</span>
 
+                <span class="info-value">{{ enterpriseInfo.code }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">企业类型</span>
 
+                <span class="info-value">{{ enterpriseInfo.type }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">法定代表人</span>
 
+                <span class="info-value">{{ enterpriseInfo.legalPerson }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">联系电话</span>
 
+                <span class="info-value">{{ enterpriseInfo.phone }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">企业邮箱</span>
 
+                <span class="info-value">{{ enterpriseInfo.email }}</span>
 
+              </div>
 
+              <div class="info-item full-width">
 
+                <span class="info-label">企业地址</span>
 
+                <span class="info-value">{{ enterpriseInfo.address }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">注册资本</span>
 
+                <span class="info-value">{{ enterpriseInfo.registeredCapital }}</span>
 
+              </div>
 
+              <div class="info-item">
 
+                <span class="info-label">成立日期</span>
 
+                <span class="info-value">{{ enterpriseInfo.establishDate }}</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 员工管理 -->
 
+        <div *ngIf="activeTab === 'employee'" class="tab-content">
 
+          <div class="employee-section">
 
+            <div class="section-header">
 
+              <h3>员工列表</h3>
 
+              <button class="add-btn" (click)="addEmployee()">
 
+                <i class="fas fa-plus"></i> 添加员工
 
+              </button>
 
+            </div>
 
+            <div class="employee-list">
 
+              <div *ngFor="let employee of employees" class="employee-item">
 
+                <div class="employee-info">
 
+                  <div class="employee-avatar">
 
+                    {{ employee.name.charAt(0) }}
 
+                  </div>
 
+                  <div class="employee-details">
 
+                    <div class="employee-name">{{ employee.name }}</div>
 
+                    <div class="employee-meta">
 
+                      {{ employee.id }} · {{ employee.role }} · {{ employee.phone }}
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="employee-actions">
 
+                  <span class="employee-status" [ngClass]="getStatusClass(employee.status)">
 
+                    {{ getStatusText(employee.status) }}
 
+                  </span>
 
+                  <button class="icon-btn" (click)="editEmployee(employee)">
 
+                    <i class="fas fa-edit"></i>
 
+                  </button>
 
+                  <button class="icon-btn danger" (click)="deleteEmployee(employee)">
 
+                    <i class="fas fa-trash"></i>
 
+                  </button>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 合同发票 -->
 
+        <div *ngIf="activeTab === 'contract'" class="tab-content">
 
+          <div class="contract-section">
 
+            <div class="section-header">
 
+              <h3>合同列表</h3>
 
+            </div>
 
+            <div class="contract-list">
 
+              <div *ngFor="let contract of contracts" class="contract-item">
 
+                <div class="contract-header">
 
+                  <div class="contract-title">{{ contract.title }}</div>
 
+                  <div class="contract-status" [ngClass]="getStatusClass(contract.status)">
 
+                    {{ getStatusText(contract.status) }}
 
+                  </div>
 
+                </div>
 
+                <div class="contract-details">
 
+                  <div class="detail-row">
 
+                    <span class="detail-label">合同编号:</span>
 
+                    <span class="detail-value">{{ contract.id }}</span>
 
+                  </div>
 
+                  <div class="detail-row">
 
+                    <span class="detail-label">合同金额:</span>
 
+                    <span class="detail-value">¥{{ contract.amount.toLocaleString() }}</span>
 
+                  </div>
 
+                  <div class="detail-row">
 
+                    <span class="detail-label">合同期限:</span>
 
+                    <span class="detail-value">{{ contract.startDate }} 至 {{ contract.endDate }}</span>
 
+                  </div>
 
+                </div>
 
+                <div class="contract-actions">
 
+                  <button class="action-btn btn-primary" (click)="viewContract(contract)">
 
+                    <i class="fas fa-eye"></i> 查看
 
+                  </button>
 
+                  <button 
+                    *ngIf="contract.status === 'active'" 
+                    class="action-btn btn-secondary"
 
+                    (click)="renewContract(contract)">
 
+                    <i class="fas fa-redo"></i> 续签
 
+                  </button>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- 发票管理 -->
 
+            <div class="invoice-section">
 
+              <h3>发票管理</h3>
 
+              <div class="invoice-card">
 
+                <div class="invoice-info">
 
+                  <i class="fas fa-receipt"></i>
 
+                  <span>查看和管理企业发票</span>
 
+                </div>
 
+                <button class="view-invoice-btn">
 
+                  查看发票 <i class="fas fa-chevron-right"></i>
 
+                </button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 订阅付费 -->
 
+        <div *ngIf="activeTab === 'subscription'" class="tab-content">
 
+          <div class="subscription-section">
 
+            <div class="subscription-card">
 
+              <div class="subscription-header">
 
+                <div class="plan-badge">
 
+                  <i class="fas fa-crown"></i>
 
+                  {{ subscription.plan }}
 
+                </div>
 
+                <div class="expire-info">
 
+                  到期时间: {{ subscription.expireDate }}
 
+                </div>
 
+              </div>
 
+              
+              <div class="usage-stats">
 
+                <div class="usage-item">
 
+                  <div class="usage-header">
 
+                    <span class="usage-label">用户数</span>
 
+                    <span class="usage-value">{{ subscription.usedUsers }}/{{ subscription.users }}</span>
 
+                  </div>
 
+                  <div class="usage-bar">
 
+                    <div 
+                      class="usage-fill" 
+                      [style.width.%]="(subscription.usedUsers / subscription.users) * 100">
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="usage-item">
 
+                  <div class="usage-header">
 
+                    <span class="usage-label">存储空间</span>
 
+                    <span class="usage-value">{{ subscription.usedStorage }}/{{ subscription.storage }}</span>
 
+                  </div>
 
+                  <div class="usage-bar">
 
+                    <div class="usage-fill" style="width: 25%"></div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+
 
+              <button class="upgrade-btn" (click)="upgradePlan()">
 
+                <i class="fas fa-arrow-up"></i> 升级套餐
 
+              </button>
 
+            </div>
 
+
 
+            <!-- 套餐对比 -->
 
+            <div class="plan-comparison">
 
+              <h3>套餐对比</h3>
 
+              <div class="plan-cards">
 
+                <div class="plan-card">
 
+                  <div class="plan-name">基础版</div>
 
+                  <div class="plan-price">¥999<span>/月</span></div>
 
+                  <ul class="plan-features">
 
+                    <li><i class="fas fa-check"></i> 10个用户</li>
 
+                    <li><i class="fas fa-check"></i> 100GB存储</li>
 
+                    <li><i class="fas fa-check"></i> 基础功能</li>
 
+                  </ul>
 
+                </div>
 
+                <div class="plan-card featured">
 
+                  <div class="plan-badge">当前</div>
 
+                  <div class="plan-name">专业版</div>
 
+                  <div class="plan-price">¥2999<span>/月</span></div>
 
+                  <ul class="plan-features">
 
+                    <li><i class="fas fa-check"></i> 50个用户</li>
 
+                    <li><i class="fas fa-check"></i> 500GB存储</li>
 
+                    <li><i class="fas fa-check"></i> 高级功能</li>
 
+                    <li><i class="fas fa-check"></i> AI助手</li>
 
+                  </ul>
 
+                </div>
 
+                <div class="plan-card">
 
+                  <div class="plan-name">企业版</div>
 
+                  <div class="plan-price">¥9999<span>/月</span></div>
 
+                  <ul class="plan-features">
 
+                    <li><i class="fas fa-check"></i> 不限用户</li>
 
+                    <li><i class="fas fa-check"></i> 2TB存储</li>
 
+                    <li><i class="fas fa-check"></i> 全部功能</li>
 
+                    <li><i class="fas fa-check"></i> 专属服务</li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 系统设置 -->
 
+        <div *ngIf="activeTab === 'settings'" class="tab-content">
 
+          <div class="settings-section">
 
+            <div class="settings-group">
 
+              <h3>账号设置</h3>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-key"></i>
 
+                  <span>修改密码</span>
 
+                </div>
 
+                <button class="setting-action">
 
+                  <i class="fas fa-chevron-right"></i>
 
+                </button>
 
+              </div>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-shield-alt"></i>
 
+                  <span>安全设置</span>
 
+                </div>
 
+                <button class="setting-action">
 
+                  <i class="fas fa-chevron-right"></i>
 
+                </button>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="settings-group">
 
+              <h3>通知设置</h3>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-bell"></i>
 
+                  <span>订单通知</span>
 
+                </div>
 
+                <label class="switch">
 
+                  <input type="checkbox" checked>
 
+                  <span class="slider"></span>
 
+                </label>
 
+              </div>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-exclamation-circle"></i>
 
+                  <span>预警通知</span>
 
+                </div>
 
+                <label class="switch">
 
+                  <input type="checkbox" checked>
 
+                  <span class="slider"></span>
 
+                </label>
 
+              </div>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-envelope"></i>
 
+                  <span>邮件通知</span>
 
+                </div>
 
+                <label class="switch">
 
+                  <input type="checkbox">
 
+                  <span class="slider"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="settings-group">
 
+              <h3>其他</h3>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-question-circle"></i>
 
+                  <span>帮助中心</span>
 
+                </div>
 
+                <button class="setting-action">
 
+                  <i class="fas fa-chevron-right"></i>
 
+                </button>
 
+              </div>
 
+              <div class="setting-item">
 
+                <div class="setting-info">
 
+                  <i class="fas fa-info-circle"></i>
 
+                  <span>关于我们</span>
 
+                </div>
 
+                <button class="setting-action">
 
+                  <i class="fas fa-chevron-right"></i>
 
+                </button>
 
+              </div>
 
+            </div>
 
+
 
+            <button class="logout-btn" (click)="logout()">
 
+              <i class="fas fa-sign-out-alt"></i>
 
+              退出登录
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  </main>
 
+
 
+  <!-- 底部导航 -->
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/business/dashboard">
 
+      <div class="nav-icon">🏠</div>
 
+      <div>工作台</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/order-management">
 
+      <div class="nav-icon">📦</div>
 
+      <div>订单</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/device-management">
 
+      <div class="nav-icon">⚙️</div>
 
+      <div>设备</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/data-reports">
 
+      <div class="nav-icon">📊</div>
 
+      <div>报表</div>
 
+    </div>
 
+    <div class="nav-item active">
 
+      <div class="nav-icon">👤</div>
 
+      <div>我的</div>
 
   </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
+  </nav>
 
 </div>

+ 953 - 0
src/app/business/enterprise-center/enterprise-center.scss
Xem Tập Tin 

@@ -0,0 +1,953 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --primary-light: #a9dfbf;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --light-bg: #f8f9fa;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  --border-radius: 12px;
 
+}
 
+
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.enterprise-center-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  color: var(--dark-text);
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+  line-height: 1.6;
 
+}
 
+
 
+.container {
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+  padding: 0 15px;
 
+}
 
+
 
+/* 顶部导航 */
 
+.header {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+}
 
+
 
+.logo-icon {
 
+  margin-right: 10px;
 
+  font-size: 24px;
 
+}
 
+
 
+.user-info {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.avatar {
 
+  width: 36px;
 
+  height: 36px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.3);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-left: 10px;
 
+}
 
+
 
+/* 内容区域 */
 
+.content {
 
+  padding: 20px 0 80px;
 
+}
 
+
 
+.section-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 15px;
 
+}
 
+
 
+/* 快速统计卡片 */
 
+.quick-stats {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 12px;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.quick-stat-card {
 
+  background: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.stat-icon {
 
+  width: 48px;
 
+  height: 48px;
 
+  border-radius: 12px;
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 24px;
 
+}
 
+
 
+.stat-content {
 
+  flex: 1;
 
+}
 
+
 
+.stat-value {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+  color: var(--dark-text);
 
+  line-height: 1.2;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  margin-top: 2px;
 
+}
 
+
 
+/* 功能导航标签 */
 
+.function-tabs {
 
+  display: flex;
 
+  overflow-x: auto;
 
+  gap: 8px;
 
+  margin-bottom: 20px;
 
+  padding-bottom: 2px;
 
+  -webkit-overflow-scrolling: touch;
 
+
 
+  &::-webkit-scrollbar {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.function-tab {
 
+  flex: 0 0 auto;
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 12px 16px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  gap: 6px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  box-shadow: var(--card-shadow);
 
+  color: var(--light-text);
 
+  min-width: 80px;
 
+
 
+  i {
 
+    font-size: 20px;
 
+  }
 
+
 
+  span {
 
+    font-size: 13px;
 
+    white-space: nowrap;
 
+  }
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+  }
 
+
 
+  &.active {
 
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+    color: white;
 
+  }
 
+}
 
+
 
+/* 标签页内容 */
 
+.tab-content {
 
+  animation: fadeIn 0.3s ease-in-out;
 
+}
 
+
 
+@keyframes fadeIn {
 
+  from {
 
+    opacity: 0;
 
+    transform: translateY(10px);
 
+  }
 
+  to {
 
+    opacity: 1;
 
+    transform: translateY(0);
 
+  }
 
+}
 
+
 
+/* 信息卡片 */
 
+.info-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.card-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 20px;
 
+  padding-bottom: 16px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+  }
 
+}
 
+
 
+.edit-btn {
 
+  background-color: var(--primary-color);
 
+  color: white;
 
+  border: none;
 
+  padding: 8px 16px;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 6px;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: var(--primary-dark);
 
+    transform: translateY(-1px);
 
+  }
 
+}
 
+
 
+.info-grid {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 20px;
 
+}
 
+
 
+.info-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 6px;
 
+
 
+  &.full-width {
 
+    grid-column: 1 / -1;
 
+  }
 
+}
 
+
 
+.info-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.info-value {
 
+  font-size: 15px;
 
+  font-weight: 500;
 
+  color: var(--dark-text);
 
+}
 
+
 
+/* 员工管理 */
 
+.employee-section,
 
+.contract-section,
 
+.subscription-section,
 
+.settings-section {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 16px;
 
+}
 
+
 
+.section-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 12px;
 
+
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+  }
 
+}
 
+
 
+.add-btn {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  border: none;
 
+  padding: 10px 20px;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 6px;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
 
+  }
 
+}
 
+
 
+.employee-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.employee-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  gap: 16px;
 
+  box-shadow: var(--card-shadow);
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.employee-info {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  flex: 1;
 
+}
 
+
 
+.employee-avatar {
 
+  width: 48px;
 
+  height: 48px;
 
+  border-radius: 50%;
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+}
 
+
 
+.employee-details {
 
+  flex: 1;
 
+}
 
+
 
+.employee-name {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.employee-meta {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  margin-top: 2px;
 
+}
 
+
 
+.employee-actions {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 8px;
 
+}
 
+
 
+.employee-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+}
 
+
 
+.status-active {
 
+  background-color: #e6f7e6;
 
+  color: var(--primary-dark);
 
+}
 
+
 
+.status-inactive {
 
+  background-color: #f0f0f0;
 
+  color: #95a5a6;
 
+}
 
+
 
+.icon-btn {
 
+  width: 32px;
 
+  height: 32px;
 
+  border-radius: 8px;
 
+  border: none;
 
+  background-color: #f0f0f0;
 
+  color: var(--dark-text);
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: #e0e0e0;
 
+  }
 
+
 
+  &.danger:hover {
 
+    background-color: var(--warning-color);
 
+    color: white;
 
+  }
 
+}
 
+
 
+/* 合同列表 */
 
+.contract-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.contract-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  box-shadow: var(--card-shadow);
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.contract-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 12px;
 
+  padding-bottom: 12px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+}
 
+
 
+.contract-title {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.contract-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+}
 
+
 
+.status-expired {
 
+  background-color: #f0f0f0;
 
+  color: #95a5a6;
 
+}
 
+
 
+.contract-details {
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.detail-row {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-bottom: 8px;
 
+  font-size: 14px;
 
+
 
+  &:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+}
 
+
 
+.detail-label {
 
+  color: var(--light-text);
 
+}
 
+
 
+.detail-value {
 
+  color: var(--dark-text);
 
+  font-weight: 500;
 
+}
 
+
 
+.contract-actions {
 
+  display: flex;
 
+  gap: 8px;
 
+}
 
+
 
+.action-btn {
 
+  flex: 1;
 
+  padding: 10px 16px;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border: none;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 6px;
 
+
 
+  &:hover {
 
+    transform: translateY(-1px);
 
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
+  }
 
+}
 
+
 
+.btn-primary {
 
+  background-color: var(--primary-color);
 
+  color: white;
 
+
 
+  &:hover {
 
+    background-color: var(--primary-dark);
 
+  }
 
+}
 
+
 
+.btn-secondary {
 
+  background-color: #f0f0f0;
 
+  color: var(--dark-text);
 
+
 
+  &:hover {
 
+    background-color: #e0e0e0;
 
+  }
 
+}
 
+
 
+/* 发票管理 */
 
+.invoice-section {
 
+  margin-top: 20px;
 
+
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+    margin-bottom: 12px;
 
+  }
 
+}
 
+
 
+.invoice-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.invoice-info {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  font-size: 15px;
 
+  color: var(--dark-text);
 
+
 
+  i {
 
+    font-size: 24px;
 
+    color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.view-invoice-btn {
 
+  background: none;
 
+  border: none;
 
+  color: var(--primary-color);
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 6px;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--primary-dark);
 
+  }
 
+}
 
+
 
+/* 订阅付费 */
 
+.subscription-card {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 24px;
 
+  box-shadow: var(--card-shadow);
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.subscription-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.plan-badge {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 8px;
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+
 
+  i {
 
+    font-size: 24px;
 
+  }
 
+}
 
+
 
+.expire-info {
 
+  font-size: 13px;
 
+  opacity: 0.9;
 
+}
 
+
 
+.usage-stats {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 16px;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.usage-item {
 
+  background-color: rgba(255, 255, 255, 0.15);
 
+  border-radius: 8px;
 
+  padding: 12px;
 
+}
 
+
 
+.usage-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-bottom: 8px;
 
+  font-size: 14px;
 
+}
 
+
 
+.usage-bar {
 
+  height: 6px;
 
+  background-color: rgba(255, 255, 255, 0.2);
 
+  border-radius: 3px;
 
+  overflow: hidden;
 
+}
 
+
 
+.usage-fill {
 
+  height: 100%;
 
+  background-color: white;
 
+  border-radius: 3px;
 
+  transition: width 0.3s;
 
+}
 
+
 
+.upgrade-btn {
 
+  width: 100%;
 
+  padding: 14px;
 
+  background-color: white;
 
+  color: var(--primary-color);
 
+  border: none;
 
+  border-radius: 8px;
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 
+  }
 
+}
 
+
 
+/* 套餐对比 */
 
+.plan-comparison {
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+    margin-bottom: 12px;
 
+  }
 
+}
 
+
 
+.plan-cards {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.plan-card {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  box-shadow: var(--card-shadow);
 
+  position: relative;
 
+  transition: all 0.3s;
 
+
 
+  &.featured {
 
+    border: 2px solid var(--primary-color);
 
+
 
+    .plan-badge {
 
+      position: absolute;
 
+      top: -12px;
 
+      right: 20px;
 
+      background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+      color: white;
 
+      padding: 4px 12px;
 
+      border-radius: 20px;
 
+      font-size: 12px;
 
+      font-weight: 600;
 
+    }
 
+  }
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.plan-name {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.plan-price {
 
+  font-size: 32px;
 
+  font-weight: bold;
 
+  color: var(--primary-color);
 
+  margin-bottom: 16px;
 
+
 
+  span {
 
+    font-size: 16px;
 
+    color: var(--light-text);
 
+  }
 
+}
 
+
 
+.plan-features {
 
+  list-style: none;
 
+  padding: 0;
 
+  margin: 0;
 
+
 
+  li {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 8px;
 
+    padding: 8px 0;
 
+    font-size: 14px;
 
+    color: var(--dark-text);
 
+
 
+    i {
 
+      color: var(--primary-color);
 
+    }
 
+  }
 
+}
 
+
 
+/* 系统设置 */
 
+.settings-group {
 
+  margin-bottom: 24px;
 
+
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+    margin-bottom: 12px;
 
+  }
 
+}
 
+
 
+.setting-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 8px;
 
+  box-shadow: var(--card-shadow);
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-1px);
 
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
+  }
 
+}
 
+
 
+.setting-info {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  font-size: 15px;
 
+  color: var(--dark-text);
 
+
 
+  i {
 
+    font-size: 20px;
 
+    color: var(--light-text);
 
+  }
 
+}
 
+
 
+.setting-action {
 
+  background: none;
 
+  border: none;
 
+  color: var(--light-text);
 
+  font-size: 16px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--dark-text);
 
+  }
 
+}
 
+
 
+/* 开关按钮 */
 
+.switch {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 48px;
 
+  height: 24px;
 
+
 
+  input {
 
+    opacity: 0;
 
+    width: 0;
 
+    height: 0;
 
+
 
+    &:checked + .slider {
 
+      background-color: var(--primary-color);
 
+
 
+      &:before {
 
+        transform: translateX(24px);
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.slider {
 
+  position: absolute;
 
+  cursor: pointer;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background-color: #ccc;
 
+  transition: .4s;
 
+  border-radius: 24px;
 
+
 
+  &:before {
 
+    position: absolute;
 
+    content: "";
 
+    height: 18px;
 
+    width: 18px;
 
+    left: 3px;
 
+    bottom: 3px;
 
+    background-color: white;
 
+    transition: .4s;
 
+    border-radius: 50%;
 
+  }
 
+}
 
+
 
+/* 退出登录按钮 */
 
+.logout-btn {
 
+  width: 100%;
 
+  padding: 14px;
 
+  background-color: white;
 
+  color: var(--warning-color);
 
+  border: 1px solid var(--warning-color);
 
+  border-radius: var(--border-radius);
 
+  font-size: 16px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+  transition: all 0.3s;
 
+  margin-top: 24px;
 
+
 
+  &:hover {
 
+    background-color: var(--warning-color);
 
+    color: white;
 
+    transform: translateY(-2px);
 
+  }
 
+}
 
+
 
+/* 底部导航 */
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--primary-color);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.nav-icon {
 
+  font-size: 20px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+/* 响应式调整 */
 
+@media (min-width: 768px) {
 
+  .container {
 
+    max-width: 750px;
 
+  }
 
+
 
+  .function-tabs {
 
+    justify-content: flex-start;
 
+  }
 
+
 
+  .plan-cards {
 
+    display: grid;
 
+    grid-template-columns: repeat(3, 1fr);
 
+    gap: 16px;
 
+  }
 
+}
 
+
 
+@media (max-width: 576px) {
 
+  .info-grid {
 
+    grid-template-columns: 1fr;
 
+  }
 
+
 
+  .quick-stats {
 
+    grid-template-columns: 1fr;
 
+  }
 
+
 
+  .employee-item {
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+
 
+    .employee-actions {
 
+      width: 100%;
 
+      justify-content: flex-end;
 
+    }
 
+  }
 
+}
 
+
 
+

+ 123 - 1
src/app/business/enterprise-center/enterprise-center.ts
Xem Tập Tin 

@@ -1,13 +1,135 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+interface Employee {
 
+  id: string;
 
+  name: string;
 
+  role: string;
 
+  phone: string;
 
+  status: 'active' | 'inactive';
 
+}
 
+
 
+interface Contract {
 
+  id: string;
 
+  title: string;
 
+  amount: number;
 
+  startDate: string;
 
+  endDate: string;
 
+  status: 'active' | 'expired' | 'pending';
 
+}
 
 
 @Component({
 
   selector: 'app-enterprise-center',
 
-  imports: [CommonModule, RouterModule],
 
+  standalone: true,
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './enterprise-center.html',
 
   styleUrl: './enterprise-center.scss'
 
 })
 
 export class EnterpriseCenter {
 
+  activeTab: 'info' | 'employee' | 'contract' | 'subscription' | 'settings' = 'info';
 
+
 
+  // 企业信息
 
+  enterpriseInfo = {
 
+    name: '智回环保科技有限公司',
 
+    code: '91110000MA01234567',
 
+    type: '有限责任公司',
 
+    legalPerson: '张三',
 
+    phone: '010-12345678',
 
+    email: 'contact@zhihui-eco.com',
 
+    address: '北京市朝阳区建国路88号SOHO现代城',
 
+    registeredCapital: '1000万元',
 
+    establishDate: '2020-01-15'
 
+  };
 
+
 
+  // 员工列表
 
+  employees: Employee[] = [
 
+    { id: 'EMP-001', name: '张三', role: '管理员', phone: '138****1234', status: 'active' },
 
+    { id: 'EMP-002', name: '李四', role: '回收员', phone: '139****5678', status: 'active' },
 
+    { id: 'EMP-003', name: '王五', role: '回收员', phone: '137****9012', status: 'active' },
 
+    { id: 'EMP-004', name: '赵六', role: '财务', phone: '136****3456', status: 'active' },
 
+    { id: 'EMP-005', name: '孙七', role: '回收员', phone: '135****7890', status: 'inactive' }
 
+  ];
 
+
 
+  // 合同列表
 
+  contracts: Contract[] = [
 
+    { id: 'CON-001', title: '朝阳区回收服务合同', amount: 50000, startDate: '2023-01-01', endDate: '2023-12-31', status: 'active' },
 
+    { id: 'CON-002', title: '海淀区回收服务合同', amount: 80000, startDate: '2023-03-01', endDate: '2024-02-29', status: 'active' },
 
+    { id: 'CON-003', title: '设备采购合同', amount: 120000, startDate: '2022-06-01', endDate: '2022-12-31', status: 'expired' }
 
+  ];
 
+
 
+  // 订阅信息
 
+  subscription = {
 
+    plan: '企业专业版',
 
+    expireDate: '2024-12-31',
 
+    users: 50,
 
+    usedUsers: 12,
 
+    storage: '500GB',
 
+    usedStorage: '125GB'
 
+  };
 
+
 
+  switchTab(tab: 'info' | 'employee' | 'contract' | 'subscription' | 'settings'): void {
 
+    this.activeTab = tab;
 
+  }
 
+
 
+  getEmployeeCount(): number {
 
+    return this.employees.filter(e => e.status === 'active').length;
 
+  }
 
+
 
+  getActiveContractCount(): number {
 
+    return this.contracts.filter(c => c.status === 'active').length;
 
+  }
 
+
 
+  getStatusText(status: string): string {
 
+    const statusMap: {[key: string]: string} = {
 
+      'active': '在职',
 
+      'inactive': '离职',
 
+      'pending': '待确认',
 
+      'expired': '已过期'
 
+    };
 
+    return statusMap[status] || status;
 
+  }
 
+
 
+  getStatusClass(status: string): string {
 
+    return `status-${status}`;
 
+  }
 
+
 
+  editInfo(): void {
 
+    alert('编辑企业信息');
 
+  }
 
+
 
+  addEmployee(): void {
 
+    alert('添加员工');
 
+  }
 
+
 
+  editEmployee(employee: Employee): void {
 
+    alert(`编辑员工: ${employee.name}`);
 
+  }
 
+
 
+  deleteEmployee(employee: Employee): void {
 
+    if (confirm(`确定要删除员工 ${employee.name} 吗？`)) {
 
+      alert('员工已删除');
 
+    }
 
+  }
 
+
 
+  viewContract(contract: Contract): void {
 
+    alert(`查看合同: ${contract.title}`);
 
+  }
 
+
 
+  renewContract(contract: Contract): void {
 
+    alert(`续签合同: ${contract.title}`);
 
+  }
 
+
 
+  upgradePlan(): void {
 
+    alert('升级订阅计划');
 
+  }
 
+
 
+  logout(): void {
 
+    if (confirm('确定要退出登录吗？')) {
 
+      alert('已退出登录');
 
+    }
 
+  }
 
+
 
   constructor() {}
 
 }

+ 279 - 3
src/app/business/order-management/order-management.html
Xem Tập Tin 

@@ -1,6 +1,282 @@
 
 <div class="order-management-container">
 
-  <div class="order-header">
 
-    <h1>订单管理</h1>
 
+  <!-- 顶部导航 -->
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo">
 
+        <span class="logo-icon">♻️</span>
 
+        <span>智回回收</span>
 
+      </div>
 
+      <div class="user-info">
 
+        <span>企业管理员</span>
 
+        <div class="avatar">
 
+          <span>管</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 主要内容 -->
 
+  <main class="content">
 
+    <div class="container">
 
+      <section id="order-management">
 
+        <h2 class="section-title">订单管理</h2>
 
+        
+        <!-- 筛选和搜索栏 -->
 
+        <div class="filter-search-bar">
 
+          <div class="search-box">
 
+            <input 
+              type="text" 
+              class="search-input" 
+              placeholder="搜索订单编号、客户姓名..."
 
+              [(ngModel)]="searchQuery">
 
+            <i class="fas fa-search search-icon"></i>
 
+          </div>
 
+          <button class="filter-btn">
 
+            <i class="fas fa-filter"></i>
 
+            <span>筛选</span>
 
+          </button>
 
+        </div>
 
+        
+        <!-- 订单状态标签 -->
 
+        <div class="order-tabs">
 
+          <div 
+            class="order-tab" 
+            [class.active]="currentTab === 'pending'"
 
+            (click)="switchTab('pending')">
 
+            待分配 <span class="order-count">{{ getOrderCount('pending') }}</span>
 
+          </div>
 
+          <div 
+            class="order-tab" 
+            [class.active]="currentTab === 'in-progress'"
 
+            (click)="switchTab('in-progress')">
 
+            回收中 <span class="order-count">{{ getOrderCount('in-progress') }}</span>
 
+          </div>
 
+          <div 
+            class="order-tab" 
+            [class.active]="currentTab === 'completed'"
 
+            (click)="switchTab('completed')">
 
+            已完成 <span class="order-count">{{ getOrderCount('completed') }}</span>
 
+          </div>
 
+          <div 
+            class="order-tab" 
+            [class.active]="currentTab === 'cancelled'"
 
+            (click)="switchTab('cancelled')">
 
+            已取消 <span class="order-count">{{ getOrderCount('cancelled') }}</span>
 
+          </div>
 
+        </div>
 
+        
+        <!-- 订单列表 -->
 
+        <div class="order-list">
 
+          <div 
+            *ngFor="let order of filteredOrders" 
+            class="order-item"
 
+            (click)="openOrderDetail(order)">
 
+            <div class="order-header">
 
+              <div class="order-id">{{ order.id }}</div>
 
+              <div class="order-status" [ngClass]="getStatusClass(order.status)">
 
+                {{ getStatusText(order.status) }}
 
+              </div>
 
+            </div>
 
+            <div class="order-content">
 
+              <div class="order-info">
 
+                <div class="info-item">
 
+                  <span class="info-label">品类:</span>
 
+                  <span class="info-value">{{ order.category }}</span>
 
+                </div>
 
+                <div class="info-item">
 
+                  <span class="info-label">重量:</span>
 
+                  <span class="info-value">{{ order.weight }} kg</span>
 
+                </div>
 
+              </div>
 
+              <div class="order-info">
 
+                <div class="info-item">
 
+                  <span class="info-label">客户:</span>
 
+                  <span class="info-value">{{ order.customerName }}</span>
 
+                </div>
 
+                <div class="info-item">
 
+                  <span class="info-label">电话:</span>
 
+                  <span class="info-value">{{ order.customerPhone }}</span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="order-actions">
 
+              <button 
+                *ngIf="order.status === 'pending'" 
+                class="action-btn btn-primary"
 
+                (click)="assignOrder(order, $event)">
 
+                分配
 
+              </button>
 
+              <button 
+                *ngIf="order.status === 'in-progress'" 
+                class="action-btn btn-primary"
 
+                (click)="completeOrder(order, $event)">
 
+                完成
 
+              </button>
 
+              <button 
+                class="action-btn btn-secondary"
 
+                (click)="viewOrder(order, $event)">
 
+                查看
 
+              </button>
 
+              <button 
+                *ngIf="order.status !== 'completed' && order.status !== 'cancelled'" 
+                class="action-btn btn-warning"
 
+                (click)="cancelOrder(order, $event)">
 
+                取消
 
+              </button>
 
+            </div>
 
+          </div>
 
+
 
+          <!-- 空状态 -->
 
+          <div *ngIf="filteredOrders.length === 0" class="empty-state">
 
+            <i class="fas fa-inbox"></i>
 
+            <p>暂无订单</p>
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  </main>
 
+
 
+  <!-- 订单详情弹层 -->
 
+  <div class="modal-overlay" [class.show]="showDetailModal" (click)="closeOrderDetail()">
 
+    <div class="modal-content" (click)="$event.stopPropagation()" *ngIf="selectedOrder">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">订单详情</h3>
 
+        <button class="close-btn" (click)="closeOrderDetail()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <!-- 订单基本信息 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">订单信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">订单编号</span>
 
+              <span class="detail-value">{{ selectedOrder.id }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">创建时间</span>
 
+              <span class="detail-value">{{ selectedOrder.createTime }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">回收品类</span>
 
+              <span class="detail-value">{{ selectedOrder.category }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">回收重量</span>
 
+              <span class="detail-value">{{ selectedOrder.weight }} kg</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">订单状态</span>
 
+              <span class="detail-value">{{ getStatusText(selectedOrder.status) }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">预计产值</span>
 
+              <span class="detail-value">¥ {{ selectedOrder.estimatedValue.toFixed(2) }}</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        
+        <!-- 客户信息 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">客户信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">客户姓名</span>
 
+              <span class="detail-value">{{ selectedOrder.customerName }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">联系电话</span>
 
+              <span class="detail-value">{{ selectedOrder.customerPhone }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">所在区域</span>
 
+              <span class="detail-value">{{ selectedOrder.area }}</span>
 
+            </div>
 
+            <div class="detail-item full-width">
 
+              <span class="detail-label">详细地址</span>
 
+              <span class="detail-value">{{ selectedOrder.address }}</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        
+        <!-- 废品照片 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">废品照片</h4>
 
+          <div class="photo-gallery">
 
+            <div class="photo-item">
 
+              <i class="fas fa-image"></i>
 
+            </div>
 
+            <div class="photo-item">
 
+              <i class="fas fa-image"></i>
 
+            </div>
 
+            <div class="photo-item">
 
+              <i class="fas fa-image"></i>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        
+        <!-- 回收员信息 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">回收员信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">回收员</span>
 
+              <span class="detail-value">{{ selectedOrder.collectorName || '未分配' }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">联系电话</span>
 
+              <span class="detail-value">{{ selectedOrder.collectorPhone || '-' }}</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        
+        <!-- 回收轨迹 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">回收轨迹</h4>
 
+          <div class="map-container">
 
+            <i class="fas fa-map-marked-alt"></i>
 
+            <span>{{ selectedOrder.collectorName ? '查看轨迹' : '暂无轨迹信息' }}</span>
 
+          </div>
 
+        </div>
 
+        
+        <!-- 结算信息 -->
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">结算信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item">
 
+              <span class="detail-label">结算金额</span>
 
+              <span class="detail-value">¥ {{ (selectedOrder.settlementAmount || 0).toFixed(2) }}</span>
 
+            </div>
 
+            <div class="detail-item">
 
+              <span class="detail-label">结算状态</span>
 
+              <span class="detail-value">{{ selectedOrder.settlementStatus || '未结算' }}</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
   </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
+
 
+  <!-- 底部导航 -->
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/business/dashboard">
 
+      <div class="nav-icon">🏠</div>
 
+      <div>工作台</div>
 
+    </div>
 
+    <div class="nav-item active">
 
+      <div class="nav-icon">📦</div>
 
+      <div>订单</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/device-management">
 
+      <div class="nav-icon">⚙️</div>
 
+      <div>设备</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/data-reports">
 
+      <div class="nav-icon">📊</div>
 
+      <div>报表</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/business/enterprise-center">
 
+      <div class="nav-icon">👤</div>
 
+      <div>我的</div>
 
+    </div>
 
+  </nav>
 
 </div>

+ 603 - 0
src/app/business/order-management/order-management.scss
Xem Tập Tin 

@@ -0,0 +1,603 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --primary-light: #a9dfbf;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --light-bg: #f8f9fa;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  --border-radius: 12px;
 
+}
 
+
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.order-management-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  color: var(--dark-text);
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+  line-height: 1.6;
 
+}
 
+
 
+.container {
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+  padding: 0 15px;
 
+}
 
+
 
+/* 顶部导航 */
 
+.header {
 
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+}
 
+
 
+.logo-icon {
 
+  margin-right: 10px;
 
+  font-size: 24px;
 
+}
 
+
 
+.user-info {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.avatar {
 
+  width: 36px;
 
+  height: 36px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.3);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-left: 10px;
 
+}
 
+
 
+/* 内容区域 */
 
+.content {
 
+  padding: 20px 0 80px;
 
+}
 
+
 
+.section-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 15px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+/* 筛选和搜索栏 */
 
+.filter-search-bar {
 
+  display: flex;
 
+  gap: 12px;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.search-box {
 
+  flex: 1;
 
+  position: relative;
 
+}
 
+
 
+.search-input {
 
+  width: 100%;
 
+  padding: 12px 40px 12px 16px;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: var(--border-radius);
 
+  font-size: 14px;
 
+  background-color: white;
 
+  outline: none;
 
+  transition: border-color 0.3s;
 
+
 
+  &:focus {
 
+    border-color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.search-icon {
 
+  position: absolute;
 
+  right: 12px;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  color: var(--light-text);
 
+}
 
+
 
+.filter-btn {
 
+  padding: 12px 16px;
 
+  background-color: white;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: var(--border-radius);
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 8px;
 
+  color: var(--dark-text);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: var(--light-bg);
 
+    border-color: var(--primary-color);
 
+  }
 
+}
 
+
 
+/* 订单状态标签 */
 
+.order-tabs {
 
+  display: flex;
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  overflow: hidden;
 
+  margin-bottom: 16px;
 
+  box-shadow: var(--card-shadow);
 
+}
 
+
 
+.order-tab {
 
+  flex: 1;
 
+  text-align: center;
 
+  padding: 14px 0;
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  color: var(--light-text);
 
+  position: relative;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: rgba(46, 204, 113, 0.05);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--primary-color);
 
+
 
+    &::after {
 
+      content: '';
 
+      position: absolute;
 
+      bottom: 0;
 
+      left: 20%;
 
+      right: 20%;
 
+      height: 3px;
 
+      background-color: var(--primary-color);
 
+      border-radius: 3px;
 
+    }
 
+  }
 
+}
 
+
 
+.order-count {
 
+  background-color: #f0f0f0;
 
+  color: var(--dark-text);
 
+  border-radius: 10px;
 
+  padding: 2px 6px;
 
+  font-size: 12px;
 
+  margin-left: 4px;
 
+  transition: all 0.3s;
 
+}
 
+
 
+.order-tab.active .order-count {
 
+  background-color: var(--primary-light);
 
+  color: var(--primary-dark);
 
+}
 
+
 
+/* 订单列表 */
 
+.order-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.order-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  box-shadow: var(--card-shadow);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.order-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 12px;
 
+  padding-bottom: 12px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+}
 
+
 
+.order-id {
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.order-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+}
 
+
 
+.status-pending {
 
+  background-color: #fff8e6;
 
+  color: #e6a700;
 
+}
 
+
 
+.status-in-progress {
 
+  background-color: #e6f7ff;
 
+  color: var(--secondary-color);
 
+}
 
+
 
+.status-completed {
 
+  background-color: #e6f7e6;
 
+  color: var(--primary-dark);
 
+}
 
+
 
+.status-cancelled {
 
+  background-color: #ffe6e6;
 
+  color: var(--warning-color);
 
+}
 
+
 
+.order-content {
 
+  display: grid;
 
+  grid-template-columns: 1fr 1fr;
 
+  gap: 12px;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.order-info {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 6px;
 
+}
 
+
 
+.info-item {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 8px;
 
+  font-size: 14px;
 
+}
 
+
 
+.info-label {
 
+  color: var(--light-text);
 
+  min-width: 60px;
 
+}
 
+
 
+.info-value {
 
+  color: var(--dark-text);
 
+  font-weight: 500;
 
+}
 
+
 
+.order-actions {
 
+  display: flex;
 
+  gap: 8px;
 
+}
 
+
 
+.action-btn {
 
+  flex: 1;
 
+  padding: 8px 12px;
 
+  border-radius: 6px;
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  text-align: center;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border: none;
 
+
 
+  &:hover {
 
+    transform: translateY(-1px);
 
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
+  }
 
+
 
+  &:active {
 
+    transform: translateY(0);
 
+  }
 
+}
 
+
 
+.btn-primary {
 
+  background-color: var(--primary-color);
 
+  color: white;
 
+
 
+  &:hover {
 
+    background-color: var(--primary-dark);
 
+  }
 
+}
 
+
 
+.btn-secondary {
 
+  background-color: #f0f0f0;
 
+  color: var(--dark-text);
 
+
 
+  &:hover {
 
+    background-color: #e0e0e0;
 
+  }
 
+}
 
+
 
+.btn-warning {
 
+  background-color: #fff8e6;
 
+  color: #e6a700;
 
+
 
+  &:hover {
 
+    background-color: #ffe6b3;
 
+  }
 
+}
 
+
 
+/* 空状态 */
 
+.empty-state {
 
+  text-align: center;
 
+  padding: 60px 20px;
 
+  color: var(--light-text);
 
+
 
+  i {
 
+    font-size: 48px;
 
+    margin-bottom: 16px;
 
+    opacity: 0.5;
 
+  }
 
+
 
+  p {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+/* 订单详情弹层 */
 
+.modal-overlay {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  z-index: 1000;
 
+  padding: 20px;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 0.3s;
 
+
 
+  &.show {
 
+    opacity: 1;
 
+    visibility: visible;
 
+
 
+    .modal-content {
 
+      transform: scale(1);
 
+    }
 
+  }
 
+}
 
+
 
+.modal-content {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  width: 100%;
 
+  max-width: 500px;
 
+  max-height: 90vh;
 
+  overflow-y: auto;
 
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 
+  transform: scale(0.9);
 
+  transition: transform 0.3s;
 
+}
 
+
 
+.modal-header {
 
+  padding: 20px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  position: sticky;
 
+  top: 0;
 
+  background-color: white;
 
+  z-index: 10;
 
+}
 
+
 
+.modal-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+}
 
+
 
+.close-btn {
 
+  background: none;
 
+  border: none;
 
+  font-size: 24px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  width: 32px;
 
+  height: 32px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  border-radius: 50%;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: #f0f0f0;
 
+    color: var(--dark-text);
 
+  }
 
+}
 
+
 
+.modal-body {
 
+  padding: 20px;
 
+}
 
+
 
+.detail-section {
 
+  margin-bottom: 24px;
 
+
 
+  &:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+}
 
+
 
+.detail-title {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  margin-bottom: 12px;
 
+  padding-bottom: 8px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+}
 
+
 
+.detail-grid {
 
+  display: grid;
 
+  grid-template-columns: 1fr 1fr;
 
+  gap: 12px;
 
+}
 
+
 
+.detail-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 4px;
 
+
 
+  &.full-width {
 
+    grid-column: 1 / -1;
 
+  }
 
+}
 
+
 
+.detail-label {
 
+  font-size: 14px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.detail-value {
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  word-break: break-word;
 
+}
 
+
 
+.photo-gallery {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 8px;
 
+}
 
+
 
+.photo-item {
 
+  aspect-ratio: 1;
 
+  background-color: #f0f0f0;
 
+  border-radius: 8px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: var(--light-text);
 
+  font-size: 24px;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    background-color: #e0e0e0;
 
+  }
 
+}
 
+
 
+.map-container {
 
+  height: 150px;
 
+  background-color: #f0f0f0;
 
+  border-radius: 8px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: var(--light-text);
 
+  margin-top: 8px;
 
+  gap: 8px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  i {
 
+    font-size: 32px;
 
+  }
 
+
 
+  &:hover {
 
+    background-color: #e0e0e0;
 
+  }
 
+}
 
+
 
+/* 底部导航 */
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--primary-color);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--primary-color);
 
+  }
 
+}
 
+
 
+.nav-icon {
 
+  font-size: 20px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+/* 响应式调整 */
 
+@media (min-width: 768px) {
 
+  .container {
 
+    max-width: 750px;
 
+  }
 
+
 
+  .order-content {
 
+    grid-template-columns: repeat(2, 1fr);
 
+  }
 
+
 
+  .detail-grid {
 
+    grid-template-columns: repeat(2, 1fr);
 
+  }
 
+}
 
+
 
+@media (max-width: 576px) {
 
+  .filter-search-bar {
 
+    flex-direction: column;
 
+  }
 
+
 
+  .filter-btn {
 
+    width: 100%;
 
+  }
 
+
 
+  .order-tabs {
 
+    font-size: 12px;
 
+  }
 
+
 
+  .order-tab {
 
+    padding: 12px 8px;
 
+  }
 
+}
 
+

+ 182 - 1
src/app/business/order-management/order-management.ts
Xem Tập Tin 

@@ -1,13 +1,194 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+interface Order {
 
+  id: string;
 
+  status: 'pending' | 'in-progress' | 'completed' | 'cancelled';
 
+  category: string;
 
+  weight: number;
 
+  customerName: string;
 
+  customerPhone: string;
 
+  createTime: string;
 
+  area: string;
 
+  address: string;
 
+  estimatedValue: number;
 
+  collectorName?: string;
 
+  collectorPhone?: string;
 
+  settlementAmount?: number;
 
+  settlementStatus?: string;
 
+}
 
+
 
+type OrderStatus = 'pending' | 'in-progress' | 'completed' | 'cancelled';
 
 
 @Component({
 
   selector: 'app-order-management',
 
-  imports: [CommonModule, RouterModule],
 
+  standalone: true,
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './order-management.html',
 
   styleUrl: './order-management.scss'
 
 })
 
 export class OrderManagement {
 
+  searchQuery = '';
 
+  currentTab: OrderStatus = 'pending';
 
+  selectedOrder: Order | null = null;
 
+  showDetailModal = false;
 
+
 
+  orders: Order[] = [
 
+    {
 
+      id: 'ORD-20230520-001',
 
+      status: 'pending',
 
+      category: '废纸',
 
+      weight: 45,
 
+      customerName: '张先生',
 
+      customerPhone: '138****5678',
 
+      createTime: '2023-05-20 09:30',
 
+      area: '朝阳区',
 
+      address: '朝阳区建国路88号SOHO现代城A座1506室',
 
+      estimatedValue: 135,
 
+      settlementStatus: '未结算'
 
+    },
 
+    {
 
+      id: 'ORD-20230520-002',
 
+      status: 'pending',
 
+      category: '塑料瓶',
 
+      weight: 32,
 
+      customerName: '李女士',
 
+      customerPhone: '139****1234',
 
+      createTime: '2023-05-20 10:15',
 
+      area: '海淀区',
 
+      address: '海淀区中关村大街1号',
 
+      estimatedValue: 96,
 
+      settlementStatus: '未结算'
 
+    },
 
+    {
 
+      id: 'ORD-20230520-003',
 
+      status: 'pending',
 
+      category: '金属',
 
+      weight: 68,
 
+      customerName: '王先生',
 
+      customerPhone: '137****8765',
 
+      createTime: '2023-05-20 11:20',
 
+      area: '朝阳区',
 
+      address: '朝阳区望京SOHO T2',
 
+      estimatedValue: 272,
 
+      settlementStatus: '未结算'
 
+    },
 
+    {
 
+      id: 'ORD-20230519-015',
 
+      status: 'in-progress',
 
+      category: '纸箱',
 
+      weight: 55,
 
+      customerName: '赵女士',
 
+      customerPhone: '136****5432',
 
+      createTime: '2023-05-19 14:30',
 
+      area: '西城区',
 
+      address: '西城区金融街购物中心',
 
+      estimatedValue: 165,
 
+      collectorName: '刘师傅',
 
+      collectorPhone: '135****7890',
 
+      settlementStatus: '未结算'
 
+    },
 
+    {
 
+      id: 'ORD-20230518-028',
 
+      status: 'completed',
 
+      category: '塑料',
 
+      weight: 42,
 
+      customerName: '陈先生',
 
+      customerPhone: '158****9012',
 
+      createTime: '2023-05-18 16:00',
 
+      area: '东城区',
 
+      address: '东城区王府井大街',
 
+      estimatedValue: 126,
 
+      collectorName: '张师傅',
 
+      collectorPhone: '138****3456',
 
+      settlementAmount: 126,
 
+      settlementStatus: '已结算'
 
+    }
 
+  ];
 
+
 
+  get filteredOrders(): Order[] {
 
+    let filtered = this.orders.filter(order => order.status === this.currentTab);
 
+    
+    if (this.searchQuery.trim()) {
 
+      const query = this.searchQuery.toLowerCase();
 
+      filtered = filtered.filter(order => 
+        order.id.toLowerCase().includes(query) ||
 
+        order.customerName.toLowerCase().includes(query) ||
 
+        order.customerPhone.includes(query)
 
+      );
 
+    }
 
+    
+    return filtered;
 
+  }
 
+
 
+  getOrderCount(status: OrderStatus): number {
 
+    return this.orders.filter(order => order.status === status).length;
 
+  }
 
+
 
+  switchTab(tab: OrderStatus): void {
 
+    this.currentTab = tab;
 
+  }
 
+
 
+  getStatusText(status: OrderStatus): string {
 
+    const statusMap = {
 
+      'pending': '待分配',
 
+      'in-progress': '回收中',
 
+      'completed': '已完成',
 
+      'cancelled': '已取消'
 
+    };
 
+    return statusMap[status];
 
+  }
 
+
 
+  getStatusClass(status: OrderStatus): string {
 
+    return `status-${status}`;
 
+  }
 
+
 
+  openOrderDetail(order: Order): void {
 
+    this.selectedOrder = order;
 
+    this.showDetailModal = true;
 
+  }
 
+
 
+  closeOrderDetail(): void {
 
+    this.showDetailModal = false;
 
+    this.selectedOrder = null;
 
+  }
 
+
 
+  assignOrder(order: Order, event?: Event): void {
 
+    if (event) {
 
+      event.stopPropagation();
 
+    }
 
+    alert(`分配订单: ${order.id}`);
 
+    // TODO: 实现分配逻辑
 
+  }
 
+
 
+  viewOrder(order: Order, event?: Event): void {
 
+    if (event) {
 
+      event.stopPropagation();
 
+    }
 
+    this.openOrderDetail(order);
 
+  }
 
+
 
+  cancelOrder(order: Order, event?: Event): void {
 
+    if (event) {
 
+      event.stopPropagation();
 
+    }
 
+    if (confirm(`确定要取消订单 ${order.id} 吗?`)) {
 
+      order.status = 'cancelled';
 
+      alert('订单已取消');
 
+    }
 
+  }
 
+
 
+  completeOrder(order: Order, event?: Event): void {
 
+    if (event) {
 
+      event.stopPropagation();
 
+    }
 
+    if (confirm(`确定完成订单 ${order.id} 吗?`)) {
 
+      order.status = 'completed';
 
+      alert('订单已完成');
 
+    }
 
+  }
 
+
 
   constructor() {}
 
 }

+ 21 - 1
src/app/consumer/booking-recycle/booking-recycle.html
Xem Tập Tin 

@@ -211,4 +211,24 @@
 
 </div>
 
 
 <!-- 底部导航栏 -->
 
-<app-bottom-nav [activeTab]="'booking'"></app-bottom-nav>
 
+<app-bottom-nav [activeTab]="'booking'"></app-bottom-nav>
 
+
 
+
 
+<!-- 地址选择弹层（简版） -->
 
+<div class="address-panel-overlay" *ngIf="showAddressPanel" (click)="closeAddressPanel()"></div>
 
+<div class="address-panel" *ngIf="showAddressPanel">
 
+  <div class="panel-header">选择地址</div>
 
+  <div class="panel-body">
 
+    <div class="addr-item" (click)="onAddressChosen({address: '北京市朝阳区建国路88号SOHO现代城', name: '张三', phone: '138****8888'})">
 
+      <div class="addr-main">北京市朝阳区建国路88号SOHO现代城</div>
 
+      <div class="addr-sub">张三 138****8888</div>
 
+    </div>
 
+    <div class="addr-item" (click)="onAddressChosen({address: '海淀区中关村大街1号', name: '李四', phone: '139****9999'})">
 
+      <div class="addr-main">海淀区中关村大街1号</div>
 
+      <div class="addr-sub">李四 139****9999</div>
 
+    </div>
 
+  </div>
 
+  <div class="panel-footer">
 
+    <button class="close-btn" (click)="closeAddressPanel()">取消</button>
 
+  </div>
 
+</div>

+ 76 - 0
src/app/consumer/booking-recycle/booking-recycle.scss
Xem Tập Tin 

@@ -712,4 +712,80 @@ input:checked + .slider:before {
 
     padding: 12px 20px;
 
     font-size: 14px;
 
   }
 
+}
 
+
 
+/* 地址选择弹层样式 */
 
+.address-panel-overlay {
 
+  position: fixed;
 
+  inset: 0;
 
+  background: rgba(0,0,0,0.35);
 
+  z-index: 1000;
 
+}
 
+
 
+.address-panel {
 
+  position: fixed;
 
+  left: 50%;
 
+  bottom: 90px; // 上方留出底部导航
 
+  transform: translateX(-50%);
 
+  width: calc(100% - 40px);
 
+  max-width: 480px;
 
+  background: #fff;
 
+  border-radius: 16px;
 
+  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
 
+  z-index: 1001;
 
+  overflow: hidden;
 
+
 
+  .panel-header {
 
+    padding: 12px 16px;
 
+    background: linear-gradient(135deg, #2e7d32, #66bb6a);
 
+    color: #fff;
 
+    font-weight: 600;
 
+  }
 
+
 
+  .panel-body {
 
+    padding: 10px 12px;
 
+
 
+    .addr-item {
 
+      padding: 10px 8px;
 
+      border-radius: 10px;
 
+      background: #f8f9fa;
 
+      border: 1px solid #e9ecef;
 
+      margin-bottom: 8px;
 
+      cursor: pointer;
 
+      transition: all .25s ease;
 
+
 
+      &:hover {
 
+        transform: translateY(-2px);
 
+        box-shadow: 0 6px 14px rgba(0,0,0,0.08);
 
+      }
 
+
 
+      .addr-main {
 
+        font-size: 14px;
 
+        font-weight: 600;
 
+        color: #2e7d32;
 
+        margin-bottom: 4px;
 
+      }
 
+
 
+      .addr-sub {
 
+        font-size: 12px;
 
+        color: #6c757d;
 
+      }
 
+    }
 
+  }
 
+
 
+  .panel-footer {
 
+    padding: 10px 12px 12px;
 
+    display: flex;
 
+    justify-content: flex-end;
 
+
 
+    .close-btn {
 
+      border: none;
 
+      background: #e8f5e9;
 
+      color: #2e7d32;
 
+      padding: 8px 14px;
 
+      border-radius: 12px;
 
+      font-size: 12px;
 
+      cursor: pointer;
 
+    }
 
+  }
 
 }

+ 22 - 7
src/app/consumer/booking-recycle/booking-recycle.ts
Xem Tập Tin 

@@ -60,12 +60,12 @@ export class BookingRecycle implements OnInit {
 
   
   // 废品分类
 
   wasteCategories: WasteCategory[] = [
 
-    { id: 'paper', name: '纸类', icon: 'waste-info', active: true },
 
-    { id: 'plastic', name: '塑料', icon: 'waste-info', active: false },
 
-    { id: 'glass', name: '玻璃', icon: 'waste-info', active: false },
 
+    { id: 'paper', name: '纸类', icon: 'eco', active: true },
 
+    { id: 'plastic', name: '塑料', icon: 'utensils', active: false },
 
+    { id: 'glass', name: '玻璃', icon: 'recycle', active: false },
 
     { id: 'electronic', name: '电子', icon: 'electronics', active: false },
 
-    { id: 'textile', name: '衣物', icon: 'waste-info', active: false },
 
-    { id: 'other', name: '其他', icon: 'waste-info', active: false }
 
+    { id: 'textile', name: '衣物', icon: 'user', active: false },
 
+    { id: 'other', name: '其他', icon: 'trash', active: false }
 
   ];
 
 
   // 回收方式
 
@@ -200,8 +200,23 @@ export class BookingRecycle implements OnInit {
 
 
   // 更改地址
 
   changeAddress(): void {
 
-    // 跳转到地址选择页面
 
-    console.log('更改地址');
 
+    // 打开地址选择面板（复用 profile/addresses 模态）
 
+    this.showAddressPanel = true;
 
+  }
 
+
 
+  // 新增：地址面板状态与选择回调
 
+  showAddressPanel: boolean = false;
 
+  selectedAddressOption: { address: string; name: string; phone: string } | null = null;
 
+
 
+  onAddressChosen(addr: { address: string; name: string; phone: string }): void {
 
+    this.address = addr.address;
 
+    this.contactName = addr.name;
 
+    this.contactPhone = addr.phone;
 
+    this.showAddressPanel = false;
 
+  }
 
+
 
+  closeAddressPanel(): void {
 
+    this.showAddressPanel = false;
 
   }
 
 
   // 导航到投递点

+ 27 - 5
src/app/consumer/home/activities/activities.html
Xem Tập Tin 

@@ -25,7 +25,7 @@
 
 
   <!-- Activities List -->
 
   <div class="activities-list">
 
-    <div class="activity-item" *ngFor="let activity of getCurrentActivities()">
 
+    <div class="activity-item" *ngFor="let activity of getCurrentActivities()" (click)="viewActivityDetails(activity)">
 
       <div class="activity-header">
 
         <div class="activity-image">
 
           <div class="image-placeholder">
 
@@ -52,7 +52,7 @@
 
           <span>{{ formatDate(activity.startDate) }} - {{ formatDate(activity.endDate) }}</span>
 
         </div>
 
         <div class="meta-item">
 
-          <app-svg-icon name="users" class="meta-icon"></app-svg-icon>
 
+          <app-svg-icon name="user" class="meta-icon"></app-svg-icon>
 
           <span>{{ activity.participants }}/{{ activity.maxParticipants }} 人参与</span>
 
         </div>
 
       </div>
 
@@ -91,12 +91,12 @@
 
 
       <div class="activity-rewards">
 
         <div class="rewards-title">
 
-          <app-svg-icon name="gift" class="gift-icon"></app-svg-icon>
 
+          <app-svg-icon name="star" class="gift-icon"></app-svg-icon>
 
           <span>活动奖励</span>
 
         </div>
 
         <div class="rewards-list">
 
           <div class="reward-item" *ngFor="let reward of activity.rewards">
 
-            <app-svg-icon name="check" class="check-icon"></app-svg-icon>
 
+            <app-svg-icon name="success" class="check-icon"></app-svg-icon>
 
             <span>{{ reward }}</span>
 
           </div>
 
         </div>
 
@@ -130,9 +130,31 @@
 
 
     <!-- Empty State -->
 
     <div class="empty-state" *ngIf="getCurrentActivities().length === 0">
 
-      <app-svg-icon name="empty-activity" class="empty-icon"></app-svg-icon>
 
+      <app-svg-icon name="eco" class="empty-icon"></app-svg-icon>
 
       <div class="empty-text">暂无{{ getTabTitle(selectedTab) }}的活动</div>
 
       <div class="empty-sub-text">请关注其他类型的活动或稍后再来查看</div>
 
     </div>
 
   </div>
 
+
 
+  <!-- 详情面板 -->
 
+  <div class="activity-detail" *ngIf="selectedActivity">
 
+    <div class="detail-header">
 
+      <h3>{{ selectedActivity.title }}</h3>
 
+      <span class="status" [style.background]="getStatusColor(selectedActivity.status)">{{ getStatusText(selectedActivity.status) }}</span>
 
+    </div>
 
+    <p class="subtitle">{{ selectedActivity.subtitle }}</p>
 
+    <p class="description">{{ selectedActivity.description }}</p>
 
+    <div class="dates">
 
+      <span>开始：{{ selectedActivity.startDate }}</span>
 
+      <span>结束：{{ selectedActivity.endDate }}</span>
 
+    </div>
 
+    <div class="rewards">
 
+      <span *ngFor="let r of selectedActivity.rewards" class="reward">{{ r }}</span>
 
+    </div>
 
+    <div class="detail-actions">
 
+      <button class="join" (click)="joinActivity(selectedActivity)">立即参与</button>
 
+      <button class="share" (click)="shareActivity(selectedActivity)">分享</button>
 
+      <button class="back" (click)="goBack()">返回首页</button>
 
+    </div>
 
+  </div>
 
 </div>

+ 113 - 0
src/app/consumer/home/activities/activities.scss
Xem Tập Tin 

@@ -500,4 +500,117 @@
 
       }
 
     }
 
   }
 
+}
 
+
 
+// 详情面板样式 */
 
+.activity-detail {
 
+position: fixed;
 
+left: 0;
 
+right: 0;
 
+bottom: 0;
 
+z-index: 200;
 
+background: rgba(255, 255, 255, 0.98);
 
+border-top-left-radius: 20px;
 
+border-top-right-radius: 20px;
 
+box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
 
+padding: 20px 16px 24px;
 
+
 
+.detail-header {
 
+display: flex;
 
+align-items: center;
 
+justify-content: space-between;
 
+margin-bottom: 12px;
 
+
 
+h3 {
 
+font-size: 18px;
 
+font-weight: 700;
 
+color: var(--text-primary);
 
+margin: 0;
 
+}
 
+
 
+.status {
 
+padding: 6px 10px;
 
+color: #fff;
 
+font-size: 12px;
 
+border-radius: 12px;
 
+box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
 
+}
 
+}
 
+
 
+.subtitle {
 
+font-size: 14px;
 
+color: var(--primary-color);
 
+font-weight: 600;
 
+margin-bottom: 8px;
 
+}
 
+
 
+.description {
 
+font-size: 13px;
 
+color: var(--text-secondary);
 
+line-height: 1.6;
 
+background: rgba(0, 0, 0, 0.05);
 
+border-radius: 12px;
 
+padding: 12px;
 
+}
 
+
 
+.dates {
 
+display: flex;
 
+gap: 12px;
 
+margin: 12px 0;
 
+font-size: 12px;
 
+color: var(--text-secondary);
 
+
 
+span {
 
+background: rgba(var(--primary-rgb), 0.08);
 
+padding: 6px 10px;
 
+border-radius: 10px;
 
+}
 
+}
 
+
 
+.rewards {
 
+display: flex;
 
+gap: 8px;
 
+flex-wrap: wrap;
 
+margin-bottom: 12px;
 
+
 
+.reward {
 
+padding: 6px 10px;
 
+background: rgba(var(--success-rgb), 0.12);
 
+color: var(--success-color);
 
+border-radius: 10px;
 
+font-size: 12px;
 
+border: 1px solid rgba(var(--success-rgb), 0.2);
 
+}
 
+}
 
+
 
+.detail-actions {
 
+display: grid;
 
+grid-template-columns: 1fr 1fr 1fr;
 
+gap: 10px;
 
+
 
+button {
 
+padding: 12px 16px;
 
+border-radius: 12px;
 
+border: none;
 
+font-weight: 600;
 
+font-size: 14px;
 
+cursor: pointer;
 
+}
 
+
 
+.join {
 
+background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 
+color: #fff;
 
+}
 
+
 
+.share {
 
+background: rgba(var(--primary-rgb), 0.1);
 
+color: var(--primary-color);
 
+border: 1px solid rgba(var(--primary-rgb), 0.2);
 
+}
 
+
 
+.back {
 
+background: var(--background-secondary);
 
+color: var(--text-secondary);
 
+}
 
+}
 
 }

+ 34 - 9
src/app/consumer/home/activities/activities.ts
Xem Tập Tin 

@@ -104,7 +104,31 @@ export class ActivitiesComponent implements OnInit {
 
 
   constructor(private router: Router) {}
 
 
-  ngOnInit() {}
 
+  // 新增：当前选中的活动详情
 
+  selectedActivity: any | null = null;
 
+
 
+  ngOnInit() {
 
+    // 读取查询参数id，若存在则定位到对应活动并展示详情
 
+    const url = new URL(window.location.href);
 
+    const id = url.searchParams.get('id');
 
+    if (id) {
 
+      this.findAndShowDetail(id);
 
+    }
 
+  }
 
+
 
+  private findAndShowDetail(id: string) {
 
+    const all = [
 
+      ...this.activities.ongoing,
 
+      ...this.activities.upcoming,
 
+      ...this.activities.completed
 
+    ];
 
+    const found = all.find(a => String(a.id) === String(id));
 
+    if (found) {
 
+      this.selectedActivity = found;
 
+      // 切换到该活动所在tab
 
+      this.selectedTab = found.status as 'ongoing' | 'upcoming' | 'completed';
 
+    }
 
+  }
 
 
   goBack() {
 
     this.router.navigate(['/consumer/home']);
 
@@ -144,8 +168,9 @@ export class ActivitiesComponent implements OnInit {
 
   }
 
 
   viewActivityDetails(activity: any) {
 
-    // 可以导航到活动详情页面
 
-    console.log('查看活动详情:', activity);
 
+    // 导航到活动详情（本页），带上id参数
 
+    this.router.navigate(['/consumer/activities'], { queryParams: { id: activity.id } });
 
+    this.selectedActivity = activity;
 
   }
 
 
   shareActivity(activity: any) {
 
@@ -192,17 +217,17 @@ export class ActivitiesComponent implements OnInit {
 
   getCategoryIcon(category: string): string {
 
     switch (category) {
 
       case 'challenge':
 
-        return 'challenge';
 
+        return 'leaf';
 
       case 'community':
 
-        return 'community';
 
+        return 'location';
 
       case 'special':
 
-        return 'special';
 
+        return 'star';
 
       case 'contest':
 
-        return 'contest';
 
+        return 'star-filled';
 
       case 'goal':
 
-        return 'goal';
 
+        return 'energy';
 
       default:
 
-        return 'activity';
 
+        return 'eco';
 
     }
 
   }

+ 17 - 1
src/app/consumer/home/home.html
Xem Tập Tin 

@@ -75,7 +75,7 @@
 
       <a (click)="viewMoreActivities()" class="more-link">查看更多</a>
 
     </div>
 
     <div class="activity-carousel">
 
-      <div class="activity-card" *ngFor="let activity of activities">
 
+      <div class="activity-card" *ngFor="let activity of activities" (click)="openActivity(activity)">
 
         <div class="activity-tag">{{ activity.tag }}</div>
 
         <div class="activity-title">{{ activity.title }}</div>
 
         <div class="activity-desc">{{ activity.description }}</div>
 
@@ -84,6 +84,22 @@
 
   </div>
 
 </div>
 
 
+<!-- 新增：活动详情模态框 -->
 
+<div class="activity-modal-overlay" *ngIf="selectedActivity" (click)="closeActivityModal()"></div>
 
+<div class="activity-modal" *ngIf="selectedActivity">
 
+  <div class="modal-header">
 
+    <div class="title">{{ selectedActivity?.title }}</div>
 
+    <div class="actions">
 
+      <button class="view-more" (click)="viewFullActivity()">查看更多</button>
 
+      <button class="close" (click)="closeActivityModal()">关闭</button>
 
+    </div>
 
+  </div>
 
+  <div class="modal-body">
 
+    <div class="tag">{{ selectedActivity?.tag }}</div>
 
+    <div class="description">{{ selectedActivity?.description }}</div>
 
+  </div>
 
+</div>
 
+
 
 <!-- AI助手入口 -->
 
 <div class="ai-assistant" (click)="openAIAssistant()">
 
   <i class="fas fa-robot"></i>

+ 80 - 0
src/app/consumer/home/home.scss
Xem Tập Tin 

@@ -647,4 +647,84 @@
 
 
 ::-webkit-scrollbar-thumb:hover {
 
   background: #2e7d32;
 
+}
 
+
 
+// 新增：活动详情模态框样式
 
+.activity-modal-overlay {
 
+  position: fixed;
 
+  inset: 0;
 
+  background: rgba(0,0,0,0.35);
 
+  z-index: 1000;
 
+}
 
+
 
+.activity-modal {
 
+  position: fixed;
 
+  left: 50%;
 
+  bottom: 90px; // 底部导航上方
 
+  transform: translateX(-50%);
 
+  width: calc(100% - 40px);
 
+  max-width: 480px;
 
+  background: #ffffff;
 
+  border-radius: 16px;
 
+  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
 
+  z-index: 1001;
 
+  overflow: hidden;
 
+
 
+  .modal-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    padding: 12px 16px;
 
+    background: linear-gradient(135deg, #2e7d32, #66bb6a);
 
+    color: #fff;
 
+
 
+    .title {
 
+      font-size: 16px;
 
+      font-weight: 600;
 
+    }
 
+
 
+    .actions {
 
+      display: flex;
 
+      gap: 8px;
 
+
 
+      button {
 
+        border: none;
 
+        border-radius: 12px;
 
+        padding: 6px 10px;
 
+        font-size: 12px;
 
+        cursor: pointer;
 
+      }
 
+
 
+      .view-more {
 
+        background: #ffffff;
 
+        color: #2e7d32;
 
+      }
 
+
 
+      .close {
 
+        background: rgba(255,255,255,0.25);
 
+        color: #ffffff;
 
+      }
 
+    }
 
+  }
 
+
 
+  .modal-body {
 
+    padding: 14px 16px 16px;
 
+
 
+    .tag {
 
+      display: inline-block;
 
+      font-size: 12px;
 
+      color: #2e7d32;
 
+      background: #e8f5e9;
 
+      border-radius: 10px;
 
+      padding: 2px 8px;
 
+      margin-bottom: 8px;
 
+      font-weight: 500;
 
+    }
 
+
 
+    .description {
 
+      font-size: 14px;
 
+      color: #333;
 
+      line-height: 1.6;
 
+    }
 
+  }
 
 }

+ 21 - 0
src/app/consumer/home/home.ts
Xem Tập Tin 

@@ -41,6 +41,8 @@ export class HomeComponent implements OnInit {
 
   // 当前选中的底部导航标签
 
   currentTab: string = 'home';
 
   
+  // 新增：首页活动详情模态框所选活动
 
+  selectedActivity: Activity | null = null;
 
   // 附近回收员数据
 
   nearbyCollectors: Collector[] = [
 
     {
 
@@ -176,6 +178,25 @@ export class HomeComponent implements OnInit {
 
     console.log('Viewing more activities...');
 
     this.router.navigate(['/consumer/activities']);
 
   }
 
+  
+  // 新增：点击首页活动卡片打开活动详情（弹框）
 
+  openActivity(activity: Activity): void {
 
+    console.log('Opening activity detail (modal)...', activity);
 
+    this.selectedActivity = activity;
 
+  }
 
+  
+  // 新增：关闭活动详情模态框
 
+  closeActivityModal(): void {
 
+    this.selectedActivity = null;
 
+  }
 
+  
+  // 新增：在弹框中跳转到活动列表的详情
 
+  viewFullActivity(): void {
 
+    if (this.selectedActivity) {
 
+      this.router.navigate(['/consumer/activities'], { queryParams: { id: this.selectedActivity.id } });
 
+      this.selectedActivity = null;
 
+    }
 
+  }
 
 
   // 打开AI助手
 
   openAIAssistant(): void {

+ 4 - 6
src/app/consumer/home/notifications/notifications.html
Xem Tập Tin 

@@ -1,16 +1,14 @@
 
 <div class="notifications-container">
 
-  <!-- Header -->
 
   <div class="header">
 
-    <div class="header-left" (click)="goBack()">
 
-      <app-svg-icon name="arrow-left" class="back-icon"></app-svg-icon>
 
+    <div class="header-left">
 
+      <button class="back-icon" (click)="goBack()">←</button>
 
     </div>
 
     <div class="header-title">消息通知</div>
 
-    <div class="header-right" (click)="markAllAsRead()">
 
-      <span class="mark-all-read">全部已读</span>
 
+    <div class="header-right top-actions">
 
+      <button class="mark-all-read" (click)="markAllAsRead()">全部已读</button>
 
     </div>
 
   </div>
 
 
-  <!-- Notifications List -->
 
   <div class="notifications-list">
 
     <div 
       class="notification-item"

+ 39 - 0
src/app/consumer/home/notifications/notifications.scss
Xem Tập Tin 

@@ -422,4 +422,43 @@
 
       }
 
     }
 
   }
 
+}
 
+
 
+:host {
 
+  display: block;
 
+  min-height: 100vh;
 
+  background: linear-gradient(180deg, #f5fff5 0%, #eaffea 100%);
 
+}
 
+
 
+.notifications-container {
 
+  // 移除紫色背景，采用与首页一致的浅绿色风格
 
+  background: transparent;
 
+  padding: 12px;
 
+}
 
+
 
+.top-actions {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+  align-items: center;
 
+  margin-bottom: 8px;
 
+
 
+  .mark-all-read-btn {
 
+    display: inline-flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    gap: 6px;
 
+    padding: 8px 12px;
 
+    max-width: 160px;
 
+    border-radius: 20px;
 
+    background: #4CAF50;
 
+    color: #fff;
 
+    border: none;
 
+    cursor: pointer;
 
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 
+    &:active { transform: scale(0.98); }
 
+  }
 
+}
 
+
 
+.notification-list {
 
+  // 保持列表卡片样式
 
 }

+ 98 - 6
src/app/government/ai-decision-assistant/ai-decision-assistant.html
Xem Tập Tin 

@@ -1,6 +1,98 @@
 
-<div class="ai-decision-assistant-container">
 
-  <div class="decision-header">
 
-    <h1>AI决策助手</h1>
 
-  </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
-</div>
 
+<div class="ai-assistant-container">
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo"><span class="logo-icon">🏛️</span><span>智回监管</span></div>
 
+      <div class="user-info"><span>政府管理员</span><div class="avatar"><span>政</span></div></div>
 
+    </div>
 
+  </header>
 
+
 
+  <main class="content">
 
+    <div class="container">
 
+      <h2 class="section-title">AI决策助手</h2>
 
+
 
+      <div class="tab-navigation">
 
+        <div class="tab-item" [class.active]="activeTab === 'simulator'" (click)="switchTab('simulator')">政策模拟</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'qa'" (click)="switchTab('qa')">数据问答</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'compliance'" (click)="switchTab('compliance')">合规洞察</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'report'" (click)="switchTab('report')">报告生成</div>
 
+      </div>
 
+
 
+      <!-- 政策模拟器 -->
 
+      <div *ngIf="activeTab === 'simulator'" class="simulator-panel">
 
+        <div class="input-group">
 
+          <label>补贴金额(元/kg)</label>
 
+          <input type="number" [(ngModel)]="subsidyAmount" class="input-field">
 
+        </div>
 
+        <div class="input-group">
 
+          <label>模拟时间(月)</label>
 
+          <select [(ngModel)]="timeRange" class="input-field">
 
+            <option value="3">3个月</option>
 
+            <option value="6">6个月</option>
 
+            <option value="12">12个月</option>
 
+          </select>
 
+        </div>
 
+        <button class="run-btn" (click)="runSimulation()">运行模拟</button>
 
+        
+        <div *ngIf="simulationResult" class="result-panel">
 
+          <h4>预测结果</h4>
 
+          <div class="result-grid">
 
+            <div class="result-item"><span>回收量增长</span><span class="result-value">+{{ simulationResult.recycleIncrease }}%</span></div>
 
+            <div class="result-item"><span>财政支出</span><span class="result-value">¥{{ simulationResult.budgetCost.toLocaleString() }}</span></div>
 
+            <div class="result-item"><span>碳减排</span><span class="result-value">{{ simulationResult.carbonReduction }}kg</span></div>
 
+            <div class="result-item"><span>企业参与度</span><span class="result-value">{{ simulationResult.participation }}%</span></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 数据问答 -->
 
+      <div *ngIf="activeTab === 'qa'" class="qa-panel">
 
+        <div class="qa-input">
 
+          <textarea [(ngModel)]="question" placeholder="请输入您的问题，例如：展示各区准确率排名" class="qa-textarea"></textarea>
 
+          <button class="ask-btn" (click)="askQuestion()">提问</button>
 
+        </div>
 
+        <div *ngIf="qaResult" class="qa-result">
 
+          <h4>AI回答</h4>
 
+          <p>{{ qaResult }}</p>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 合规监管洞察 -->
 
+      <div *ngIf="activeTab === 'compliance'" class="compliance-panel">
 
+        <div *ngFor="let item of complianceResults" class="compliance-item" [ngClass]="getRiskClass(item.risk)">
 
+          <div class="compliance-header">
 
+            <span>{{ item.company }}</span>
 
+            <span class="risk-badge">{{ item.risk === 'high' ? '高风险' : '中风险' }}</span>
 
+          </div>
 
+          <div class="compliance-pattern">识别模式: {{ item.pattern }}</div>
 
+          <div class="compliance-suggestion">建议: {{ item.suggestion }}</div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 报告生成 -->
 
+      <div *ngIf="activeTab === 'report'" class="report-panel">
 
+        <div class="report-template">
 
+          <div class="template-item" (click)="generateReport()">
 
+            <i class="fas fa-file-alt"></i>
 
+            <span>月度监管分析报告</span>
 
+          </div>
 
+          <div class="template-item" (click)="generateReport()">
 
+            <i class="fas fa-chart-bar"></i>
 
+            <span>产业发展评估报告</span>
 
+          </div>
 
+          <div class="template-item" (click)="generateReport()">
 
+            <i class="fas fa-clipboard-check"></i>
 
+            <span>政策效果评估报告</span>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/government/supervision-overview"><div class="nav-icon">📊</div><div>监管</div></div>
 
+    <div class="nav-item" routerLink="/government/subsidy-management"><div class="nav-icon">💰</div><div>补贴</div></div>
 
+    <div class="nav-item" routerLink="/government/industry-analysis"><div class="nav-icon">📈</div><div>分析</div></div>
 
+    <div class="nav-item active"><div class="nav-icon">🤖</div><div>AI助手</div></div>
 
+    <div class="nav-item" routerLink="/government/government-center"><div class="nav-icon">⚙️</div><div>政务</div></div>
 
+  </nav>
 
+</div>

+ 241 - 0
src/app/government/ai-decision-assistant/ai-decision-assistant.scss
Xem Tập Tin 

@@ -0,0 +1,241 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --secondary-color: #3498db;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --warning-color: #e74c3c;
 
+  --accent-color: #f39c12;
 
+}
 
+
 
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
+
 
+.ai-assistant-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+}
 
+
 
+.container { padding: 0 15px; }
 
+.content { padding: 20px 0 80px; }
 
+.section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
 
+
 
+.header {
 
+  background: linear-gradient(135deg, #3498db, #2980b9);
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+}
 
+
 
+.header-content { display: flex; justify-content: space-between; align-items: center; }
 
+.logo { display: flex; align-items: center; font-weight: bold; font-size: 20px; }
 
+.logo-icon { margin-right: 10px; font-size: 24px; }
 
+.user-info { display: flex; align-items: center; }
 
+.avatar { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; margin-left: 10px; }
 
+
 
+.tab-navigation {
 
+  display: flex;
 
+  background: white;
 
+  border-radius: 12px;
 
+  margin-bottom: 16px;
 
+  overflow: hidden;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+}
 
+
 
+.tab-item {
 
+  flex: 1;
 
+  text-align: center;
 
+  padding: 14px 8px;
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  position: relative;
 
+  &.active {
 
+    color: var(--secondary-color);
 
+    &::after {
 
+      content: '';
 
+      position: absolute;
 
+      bottom: 0;
 
+      left: 20%;
 
+      right: 20%;
 
+      height: 3px;
 
+      background: var(--secondary-color);
 
+    }
 
+  }
 
+}
 
+
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  &:hover { color: var(--secondary-color); }
 
+  &.active { color: var(--secondary-color); }
 
+}
 
+
 
+.nav-icon { font-size: 20px; margin-bottom: 4px; }
 
+
 
+.simulator-panel, .qa-panel, .compliance-panel, .report-panel {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 20px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+}
 
+
 
+.input-group {
 
+  margin-bottom: 16px;
 
+  label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--dark-text); font-weight: 500; }
 
+}
 
+
 
+.input-field {
 
+  width: 100%;
 
+  padding: 12px;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  &:focus { outline: none; border-color: var(--secondary-color); }
 
+}
 
+
 
+.run-btn, .ask-btn {
 
+  width: 100%;
 
+  padding: 14px;
 
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
 
+  color: white;
 
+  border: none;
 
+  border-radius: 8px;
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3); }
 
+}
 
+
 
+.result-panel, .qa-result {
 
+  margin-top: 20px;
 
+  padding: 16px;
 
+  background: #f8f9fa;
 
+  border-radius: 8px;
 
+  h4 { margin-bottom: 12px; font-size: 16px; }
 
+}
 
+
 
+.result-grid {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 12px;
 
+}
 
+
 
+.result-item {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  padding: 12px;
 
+  background: white;
 
+  border-radius: 8px;
 
+  span:first-child { font-size: 13px; color: var(--light-text); }
 
+}
 
+
 
+.result-value {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  color: var(--primary-color);
 
+}
 
+
 
+.qa-input {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.qa-textarea {
 
+  width: 100%;
 
+  min-height: 100px;
 
+  padding: 12px;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  resize: vertical;
 
+  &:focus { outline: none; border-color: var(--secondary-color); }
 
+}
 
+
 
+.qa-result p {
 
+  font-size: 14px;
 
+  line-height: 1.6;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.compliance-panel {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.compliance-item {
 
+  padding: 16px;
 
+  background: #f8f9fa;
 
+  border-radius: 8px;
 
+  border-left: 4px solid;
 
+  &.risk-high { border-left-color: var(--warning-color); }
 
+  &.risk-medium { border-left-color: var(--accent-color); }
 
+}
 
+
 
+.compliance-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-bottom: 8px;
 
+  font-weight: 600;
 
+}
 
+
 
+.risk-badge {
 
+  padding: 2px 8px;
 
+  border-radius: 12px;
 
+  font-size: 12px;
 
+  background: #ffe6e6;
 
+  color: var(--warning-color);
 
+}
 
+
 
+.compliance-pattern, .compliance-suggestion {
 
+  font-size: 13px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.compliance-suggestion {
 
+  color: var(--primary-color);
 
+}
 
+
 
+.report-template {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.template-item {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  padding: 16px;
 
+  background: #f8f9fa;
 
+  border-radius: 8px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  i { font-size: 24px; color: var(--secondary-color); }
 
+  span { font-size: 15px; font-weight: 500; }
 
+  &:hover { background: #e6f7ff; transform: translateX(4px); }
 
+}
 
+
 
+

+ 48 - 2
src/app/government/ai-decision-assistant/ai-decision-assistant.ts
Xem Tập Tin 

@@ -1,13 +1,59 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
 
 @Component({
 
   selector: 'app-ai-decision-assistant',
 
-  imports: [CommonModule, RouterModule],
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './ai-decision-assistant.html',
 
   styleUrl: './ai-decision-assistant.scss'
 
 })
 
-export class AiDecisionAssistant {
 
+export class AIDecisionAssistant {
 
+  activeTab: 'simulator' | 'qa' | 'compliance' | 'report' = 'simulator';
 
+  
+  question = '';
 
+  subsidyAmount = 5000;
 
+  timeRange = '3';
 
+  
+  simulationResult: {
 
+    recycleIncrease: number;
 
+    budgetCost: number;
 
+    carbonReduction: number;
 
+    participation: number;
 
+  } | null = null;
 
+  qaResult = '';
 
+  complianceResults = [
 
+    { company: '某环保企业', risk: 'high', pattern: '异常资金流向', suggestion: '加强监管' },
 
+    { company: '绿色回收公司', risk: 'medium', pattern: '回收量波动', suggestion: '核查数据' }
 
+  ];
 
+
 
+  switchTab(tab: 'simulator' | 'qa' | 'compliance' | 'report'): void {
 
+    this.activeTab = tab;
 
+  }
 
+
 
+  runSimulation(): void {
 
+    this.simulationResult = {
 
+      recycleIncrease: 25,
 
+      budgetCost: this.subsidyAmount * 100,
 
+      carbonReduction: 1500,
 
+      participation: 89
 
+    };
 
+  }
 
+
 
+  askQuestion(): void {
 
+    if (this.question.trim()) {
 
+      this.qaResult = `AI分析结果: ${this.question} - 朝阳区准确率最高达95%，海淀区为88%，建议加强海淀区培训力度。`;
 
+    }
 
+  }
 
+
 
+  generateReport(): void {
 
+    alert('正在生成综合分析报告...');
 
+  }
 
+
 
+  getRiskClass(risk: string): string {
 
+    return `risk-${risk}`;
 
+  }
 
+
 
   constructor() {}
 
 }

+ 83 - 5
src/app/government/government-center/government-center.html
Xem Tập Tin 

@@ -1,6 +1,84 @@
 
 <div class="government-center-container">
 
-  <div class="government-header">
 
-    <h1>政府中心</h1>
 
-  </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
-</div>
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo"><span class="logo-icon">🏛️</span><span>智回监管</span></div>
 
+      <div class="user-info"><span>政府管理员</span><div class="avatar"><span>政</span></div></div>
 
+    </div>
 
+  </header>
 
+
 
+  <main class="content">
 
+    <div class="container">
 
+      <h2 class="section-title">政务中心</h2>
 
+
 
+      <div class="tab-navigation">
 
+        <div class="tab-item" [class.active]="activeTab === 'region'" (click)="switchTab('region')">辖区管理</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'user'" (click)="switchTab('user')">用户权限</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'notice'" (click)="switchTab('notice')">公告发布</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'log'" (click)="switchTab('log')">操作日志</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'settings'" (click)="switchTab('settings')">系统设置</div>
 
+      </div>
 
+
 
+      <!-- 辖区管理 -->
 
+      <div *ngIf="activeTab === 'region'" class="region-list">
 
+        <div *ngFor="let region of regions" class="region-item" (click)="manageRegion(region)">
 
+          <div class="region-info">
 
+            <div class="region-name">{{ region.name }}</div>
 
+            <div class="region-manager">负责人: {{ region.manager }}</div>
 
+            <div class="region-contact">{{ region.contact }}</div>
 
+          </div>
 
+          <i class="fas fa-chevron-right"></i>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 用户权限管理 -->
 
+      <div *ngIf="activeTab === 'user'" class="user-list">
 
+        <div *ngFor="let user of users" class="user-item" (click)="manageUser(user)">
 
+          <div class="user-avatar">{{ user.name.charAt(0) }}</div>
 
+          <div class="user-info">
 
+            <div class="user-name">{{ user.name }}</div>
 
+            <div class="user-role">{{ user.role }}</div>
 
+          </div>
 
+          <span class="user-status" [class.active]="user.status === 'active'">{{ user.status === 'active' ? '在职' : '离职' }}</span>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 公告发布 -->
 
+      <div *ngIf="activeTab === 'notice'" class="notice-list">
 
+        <div *ngFor="let notice of notices" class="notice-item" (click)="publishNotice(notice)">
 
+          <div class="notice-title">{{ notice.title }}</div>
 
+          <div class="notice-meta">
 
+            <span>{{ notice.date }}</span>
 
+            <span class="notice-status" [class.published]="notice.status === 'published'">{{ notice.status === 'published' ? '已发布' : '草稿' }}</span>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 操作日志 -->
 
+      <div *ngIf="activeTab === 'log'" class="log-list">
 
+        <div *ngFor="let log of logs" class="log-item">
 
+          <div class="log-content">
 
+            <div class="log-user">{{ log.user }}</div>
 
+            <div class="log-action">{{ log.action }}</div>
 
+          </div>
 
+          <div class="log-time">{{ log.time }}</div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 系统设置 -->
 
+      <div *ngIf="activeTab === 'settings'" class="settings-list">
 
+        <div class="setting-item"><i class="fas fa-key"></i><span>修改密码</span><i class="fas fa-chevron-right"></i></div>
 
+        <div class="setting-item"><i class="fas fa-bell"></i><span>通知设置</span><i class="fas fa-chevron-right"></i></div>
 
+        <div class="setting-item"><i class="fas fa-question-circle"></i><span>帮助中心</span><i class="fas fa-chevron-right"></i></div>
 
+        <button class="logout-btn" (click)="logout()"><i class="fas fa-sign-out-alt"></i>退出登录</button>
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/government/supervision-overview"><div class="nav-icon">📊</div><div>监管</div></div>
 
+    <div class="nav-item" routerLink="/government/subsidy-management"><div class="nav-icon">💰</div><div>补贴</div></div>
 
+    <div class="nav-item" routerLink="/government/industry-analysis"><div class="nav-icon">📈</div><div>分析</div></div>
 
+    <div class="nav-item" routerLink="/government/ai-decision-assistant"><div class="nav-icon">🤖</div><div>AI助手</div></div>
 
+    <div class="nav-item active"><div class="nav-icon">⚙️</div><div>政务</div></div>
 
+  </nav>
 
+</div>

+ 253 - 0
src/app/government/government-center/government-center.scss
Xem Tập Tin 

@@ -0,0 +1,253 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --secondary-color: #3498db;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --warning-color: #e74c3c;
 
+}
 
+
 
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
+
 
+.government-center-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+}
 
+
 
+.container { padding: 0 15px; }
 
+.content { padding: 20px 0 80px; }
 
+.section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
 
+
 
+.header {
 
+  background: linear-gradient(135deg, #3498db, #2980b9);
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+}
 
+
 
+.header-content { display: flex; justify-content: space-between; align-items: center; }
 
+.logo { display: flex; align-items: center; font-weight: bold; font-size: 20px; }
 
+.logo-icon { margin-right: 10px; font-size: 24px; }
 
+.user-info { display: flex; align-items: center; }
 
+.avatar { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; margin-left: 10px; }
 
+
 
+.tab-navigation {
 
+  display: flex;
 
+  background: white;
 
+  border-radius: 12px;
 
+  margin-bottom: 16px;
 
+  overflow-x: auto;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  &::-webkit-scrollbar { display: none; }
 
+}
 
+
 
+.tab-item {
 
+  flex: 1;
 
+  min-width: 60px;
 
+  text-align: center;
 
+  padding: 14px 8px;
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  position: relative;
 
+  white-space: nowrap;
 
+  &.active {
 
+    color: var(--secondary-color);
 
+    &::after {
 
+      content: '';
 
+      position: absolute;
 
+      bottom: 0;
 
+      left: 20%;
 
+      right: 20%;
 
+      height: 3px;
 
+      background: var(--secondary-color);
 
+    }
 
+  }
 
+}
 
+
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  &:hover { color: var(--secondary-color); }
 
+  &.active { color: var(--secondary-color); }
 
+}
 
+
 
+.nav-icon { font-size: 20px; margin-bottom: 4px; }
 
+
 
+.region-list, .user-list, .notice-list, .log-list, .settings-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.region-item, .user-item, .notice-item, .log-item, .setting-item {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 16px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  &:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
 
+}
 
+
 
+.region-item {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  i { color: var(--light-text); font-size: 16px; }
 
+}
 
+
 
+.region-info {
 
+  flex: 1;
 
+}
 
+
 
+.region-name {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.region-manager, .region-contact {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.user-item {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+}
 
+
 
+.user-avatar {
 
+  width: 48px;
 
+  height: 48px;
 
+  border-radius: 50%;
 
+  background: linear-gradient(135deg, var(--secondary-color), #2980b9);
 
+  color: white;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+}
 
+
 
+.user-info {
 
+  flex: 1;
 
+}
 
+
 
+.user-name {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  margin-bottom: 2px;
 
+}
 
+
 
+.user-role {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.user-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  background: #f0f0f0;
 
+  color: #95a5a6;
 
+  &.active { background: #e6f7e6; color: var(--primary-dark); }
 
+}
 
+
 
+.notice-item {
 
+  padding: 16px;
 
+}
 
+
 
+.notice-title {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.notice-meta {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.notice-status {
 
+  &.published { color: var(--primary-color); }
 
+}
 
+
 
+.log-item {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.log-content {
 
+  flex: 1;
 
+}
 
+
 
+.log-user {
 
+  font-weight: 600;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.log-action {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.log-time {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.setting-item {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 12px;
 
+  i:first-child { font-size: 20px; color: var(--light-text); }
 
+  span { flex: 1; font-size: 15px; }
 
+  i:last-child { color: var(--light-text); }
 
+}
 
+
 
+.logout-btn {
 
+  width: 100%;
 
+  padding: 14px;
 
+  background: white;
 
+  color: var(--warning-color);
 
+  border: 1px solid var(--warning-color);
 
+  border-radius: 12px;
 
+  font-size: 16px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+  margin-top: 24px;
 
+  transition: all 0.3s;
 
+  &:hover { background: var(--warning-color); color: white; transform: translateY(-2px); }
 
+}
 
+
 
+

+ 46 - 0
src/app/government/government-center/government-center.ts
Xem Tập Tin 

@@ -9,5 +9,51 @@ import { RouterModule } from '@angular/router';
 
   styleUrl: './government-center.scss'
 
 })
 
 export class GovernmentCenter {
 
+  activeTab: 'region' | 'user' | 'notice' | 'log' | 'settings' = 'region';
 
+
 
+  regions = [
 
+    { name: '朝阳区', manager: '张主任', contact: '138****1234', status: 'active' },
 
+    { name: '海淀区', manager: '李主任', contact: '139****5678', status: 'active' },
 
+    { name: '西城区', manager: '王主任', contact: '137****9012', status: 'active' }
 
+  ];
 
+
 
+  users = [
 
+    { name: '赵专员', role: '数据分析员', status: 'active' },
 
+    { name: '钱专员', role: '政策审核员', status: 'active' },
 
+    { name: '孙专员', role: '监管员', status: 'inactive' }
 
+  ];
 
+
 
+  notices = [
 
+    { title: '新版补贴政策发布', date: '2023-05-20', status: 'published' },
 
+    { title: '环保标准更新通知', date: '2023-05-18', status: 'draft' }
 
+  ];
 
+
 
+  logs = [
 
+    { user: '张主任', action: '审批补贴申请', time: '2023-05-20 10:30' },
 
+    { user: '李主任', action: '发布政策公告', time: '2023-05-20 09:15' }
 
+  ];
 
+
 
+  switchTab(tab: 'region' | 'user' | 'notice' | 'log' | 'settings'): void {
 
+    this.activeTab = tab;
 
+  }
 
+
 
+  manageRegion(region: any): void {
 
+    alert(`管理辖区: ${region.name}`);
 
+  }
 
+
 
+  manageUser(user: any): void {
 
+    alert(`管理用户: ${user.name}`);
 
+  }
 
+
 
+  publishNotice(notice: any): void {
 
+    alert(`发布公告: ${notice.title}`);
 
+  }
 
+
 
+  logout(): void {
 
+    if (confirm('确定要退出登录吗？')) {
 
+      alert('已退出登录');
 
+    }
 
+  }
 
+
 
   constructor() {}
 
 }

+ 2 - 2
src/app/government/government-routing-module.ts
Xem Tập Tin 

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { SupervisionOverview } from './supervision-overview/supervision-overview';
 
 import { SubsidyManagement } from './subsidy-management/subsidy-management';
 
 import { IndustryAnalysis } from './industry-analysis/industry-analysis';
 
-import { AiDecisionAssistant } from './ai-decision-assistant/ai-decision-assistant';
 
+import { AIDecisionAssistant } from './ai-decision-assistant/ai-decision-assistant';
 
 import { GovernmentCenter } from './government-center/government-center';
 
 
 const routes: Routes = [
 
@@ -11,7 +11,7 @@ const routes: Routes = [
 
   { path: 'supervision-overview', component: SupervisionOverview },
 
   { path: 'subsidy-management', component: SubsidyManagement },
 
   { path: 'industry-analysis', component: IndustryAnalysis },
 
-  { path: 'ai-decision-assistant', component: AiDecisionAssistant },
 
+  { path: 'ai-decision-assistant', component: AIDecisionAssistant },
 
   { path: 'government-center', component: GovernmentCenter }
 
 ];

+ 81 - 5
src/app/government/industry-analysis/industry-analysis.html
Xem Tập Tin 

@@ -1,6 +1,82 @@
 
 <div class="industry-analysis-container">
 
-  <div class="analysis-header">
 
-    <h1>行业分析</h1>
 
-  </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
-</div>
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo"><span class="logo-icon">🏛️</span><span>智回监管</span></div>
 
+      <div class="user-info"><span>政府管理员</span><div class="avatar"><span>政</span></div></div>
 
+    </div>
 
+  </header>
 
+
 
+  <main class="content">
 
+    <div class="container">
 
+      <h2 class="section-title">行业分析</h2>
 
+
 
+      <div class="tab-navigation">
 
+        <div class="tab-item" [class.active]="activeTab === 'chain'" (click)="switchTab('chain')">产业链</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'region'" (click)="switchTab('region')">区域对比</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'category'" (click)="switchTab('category')">品类分析</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'risk'" (click)="switchTab('risk')">风险预警</div>
 
+      </div>
 
+
 
+      <!-- 产业链分析 -->
 
+      <div *ngIf="activeTab === 'chain'" class="chain-analysis">
 
+        <h3>全产业链数据流</h3>
 
+        <div class="chain-flow">
 
+          <div *ngFor="let item of chainData; let i = index" class="chain-item">
 
+            <div class="chain-stage">{{ item.stage }}</div>
 
+            <div class="chain-volume">{{ item.volume }}kg</div>
 
+            <div class="chain-efficiency">效率: {{ item.efficiency }}%</div>
 
+            <div *ngIf="i < chainData.length - 1" class="chain-arrow"><i class="fas fa-arrow-right"></i></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 区域对比 -->
 
+      <div *ngIf="activeTab === 'region'" class="region-comparison">
 
+        <div *ngFor="let region of regionData" class="region-card">
 
+          <h4>{{ region.region }}</h4>
 
+          <div class="region-stats">
 
+            <div class="stat-item"><span>回收率</span><span>{{ region.recycleRate }}%</span></div>
 
+            <div class="stat-item"><span>再生率</span><span>{{ region.regenerationRate }}%</span></div>
 
+            <div class="stat-item"><span>市场价</span><span>¥{{ region.marketPrice }}/kg</span></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 品类分析 -->
 
+      <div *ngIf="activeTab === 'category'" class="category-analysis">
 
+        <div *ngFor="let cat of categoryData" class="category-card">
 
+          <div class="category-header">
 
+            <span class="category-name">{{ cat.category }}</span>
 
+            <span class="category-trend" [ngClass]="getTrendClass(cat.trend)">
 
+              <i class="fas" [ngClass]="getTrendIcon(cat.trend)"></i>
 
+            </span>
 
+          </div>
 
+          <div class="category-stats">
 
+            <div class="stat-row"><span>回收率</span><span>{{ cat.recycleRate }}%</span></div>
 
+            <div class="stat-row"><span>再生率</span><span>{{ cat.regenerationRate }}%</span></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 风险预警 -->
 
+      <div *ngIf="activeTab === 'risk'" class="risk-warnings">
 
+        <div *ngFor="let risk of risks" class="risk-item" [ngClass]="getRiskClass(risk.level)">
 
+          <div class="risk-header">
 
+            <span class="risk-type">{{ risk.type }}</span>
 
+            <span class="risk-level">{{ risk.level === 'high' ? '高' : risk.level === 'medium' ? '中' : '低' }}</span>
 
+          </div>
 
+          <div class="risk-content">{{ risk.content }}</div>
 
+          <div class="risk-strategy">应对策略: {{ risk.strategy }}</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/government/supervision-overview"><div class="nav-icon">📊</div><div>监管</div></div>
 
+    <div class="nav-item" routerLink="/government/subsidy-management"><div class="nav-icon">💰</div><div>补贴</div></div>
 
+    <div class="nav-item active"><div class="nav-icon">📈</div><div>分析</div></div>
 
+    <div class="nav-item" routerLink="/government/ai-decision-assistant"><div class="nav-icon">🤖</div><div>AI助手</div></div>
 
+    <div class="nav-item" routerLink="/government/government-center"><div class="nav-icon">⚙️</div><div>政务</div></div>
 
+  </nav>
 
+</div>

+ 220 - 0
src/app/government/industry-analysis/industry-analysis.scss
Xem Tập Tin 

@@ -0,0 +1,220 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+}
 
+
 
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
+
 
+.industry-analysis-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+}
 
+
 
+.container { padding: 0 15px; }
 
+.content { padding: 20px 0 80px; }
 
+.section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
 
+
 
+.header {
 
+  background: linear-gradient(135deg, #3498db, #2980b9);
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+}
 
+
 
+.header-content { display: flex; justify-content: space-between; align-items: center; }
 
+.logo { display: flex; align-items: center; font-weight: bold; font-size: 20px; }
 
+.logo-icon { margin-right: 10px; font-size: 24px; }
 
+.user-info { display: flex; align-items: center; }
 
+.avatar { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; margin-left: 10px; }
 
+
 
+.tab-navigation {
 
+  display: flex;
 
+  background: white;
 
+  border-radius: 12px;
 
+  margin-bottom: 16px;
 
+  overflow: hidden;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+}
 
+
 
+.tab-item {
 
+  flex: 1;
 
+  text-align: center;
 
+  padding: 14px;
 
+  font-size: 14px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  position: relative;
 
+  &.active {
 
+    color: var(--secondary-color);
 
+    &::after {
 
+      content: '';
 
+      position: absolute;
 
+      bottom: 0;
 
+      left: 20%;
 
+      right: 20%;
 
+      height: 3px;
 
+      background: var(--secondary-color);
 
+      border-radius: 3px;
 
+    }
 
+  }
 
+}
 
+
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  &:hover { color: var(--secondary-color); }
 
+  &.active { color: var(--secondary-color); }
 
+}
 
+
 
+.nav-icon { font-size: 20px; margin-bottom: 4px; }
 
+
 
+.chain-analysis, .region-comparison, .category-analysis, .risk-warnings {
 
+  h3 { font-size: 16px; margin-bottom: 16px; font-weight: 600; }
 
+}
 
+
 
+.chain-flow {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.chain-item {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 16px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.chain-stage { font-weight: 600; font-size: 16px; }
 
+.chain-volume { color: var(--primary-color); font-weight: 600; }
 
+.chain-efficiency { font-size: 13px; color: var(--light-text); }
 
+.chain-arrow { font-size: 20px; color: var(--light-text); }
 
+
 
+.region-comparison { display: flex; flex-direction: column; gap: 12px; }
 
+
 
+.region-card {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 16px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  h4 { margin-bottom: 12px; }
 
+}
 
+
 
+.region-stats {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 12px;
 
+}
 
+
 
+.stat-item {
 
+  text-align: center;
 
+  padding: 8px;
 
+  background: #f8f9fa;
 
+  border-radius: 8px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 4px;
 
+  span:first-child { font-size: 12px; color: var(--light-text); }
 
+  span:last-child { font-size: 16px; font-weight: 600; color: var(--dark-text); }
 
+}
 
+
 
+.category-analysis { display: flex; flex-direction: column; gap: 12px; }
 
+
 
+.category-card {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 16px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+}
 
+
 
+.category-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.category-name { font-weight: 600; font-size: 16px; }
 
+
 
+.category-trend {
 
+  width: 32px;
 
+  height: 32px;
 
+  border-radius: 50%;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  &.trend-up { background: #e6f7e6; color: var(--primary-color); }
 
+  &.trend-down { background: #ffe6e6; color: var(--warning-color); }
 
+  &.trend-stable { background: #f0f0f0; color: var(--light-text); }
 
+}
 
+
 
+.category-stats { display: flex; flex-direction: column; gap: 8px; }
 
+
 
+.stat-row {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  font-size: 14px;
 
+  span:first-child { color: var(--light-text); }
 
+  span:last-child { font-weight: 600; }
 
+}
 
+
 
+.risk-warnings { display: flex; flex-direction: column; gap: 12px; }
 
+
 
+.risk-item {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 16px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  border-left: 4px solid;
 
+  &.risk-high { border-left-color: var(--warning-color); }
 
+  &.risk-medium { border-left-color: var(--accent-color); }
 
+  &.risk-low { border-left-color: #95a5a6; }
 
+}
 
+
 
+.risk-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.risk-type { font-weight: 600; }
 
+
 
+.risk-level {
 
+  padding: 2px 8px;
 
+  border-radius: 12px;
 
+  font-size: 12px;
 
+}
 
+
 
+.risk-content { font-size: 14px; margin-bottom: 8px; }
 
+.risk-strategy { font-size: 13px; color: var(--light-text); }
 
+
 
+

+ 46 - 1
src/app/government/industry-analysis/industry-analysis.ts
Xem Tập Tin 

@@ -1,13 +1,58 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
 
 @Component({
 
   selector: 'app-industry-analysis',
 
-  imports: [CommonModule, RouterModule],
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './industry-analysis.html',
 
   styleUrl: './industry-analysis.scss'
 
 })
 
 export class IndustryAnalysis {
 
+  activeTab: 'chain' | 'region' | 'category' | 'risk' = 'chain';
 
+  
+  chainData = [
 
+    { stage: '回收', volume: 45680, efficiency: 92 },
 
+    { stage: '分拣', volume: 42130, efficiency: 88 },
 
+    { stage: '加工', volume: 38900, efficiency: 85 },
 
+    { stage: '再生', volume: 35200, efficiency: 82 }
 
+  ];
 
+
 
+  regionData = [
 
+    { region: '朝阳区', recycleRate: 95, regenerationRate: 88, marketPrice: 3.2 },
 
+    { region: '海淀区', recycleRate: 88, regenerationRate: 85, marketPrice: 3.1 },
 
+    { region: '西城区', recycleRate: 93, regenerationRate: 87, marketPrice: 3.3 }
 
+  ];
 
+
 
+  categoryData = [
 
+    { category: '纸类', recycleRate: 95, regenerationRate: 92, trend: 'up' },
 
+    { category: '塑料', recycleRate: 88, regenerationRate: 85, trend: 'stable' },
 
+    { category: '金属', recycleRate: 96, regenerationRate: 94, trend: 'up' },
 
+    { category: '玻璃', recycleRate: 82, regenerationRate: 78, trend: 'down' }
 
+  ];
 
+
 
+  risks = [
 
+    { id: 1, level: 'high', type: '市场风险', content: '再生塑料价格波动较大', strategy: '建立价格调控机制' },
 
+    { id: 2, level: 'medium', type: '政策风险', content: '部分区域政策执行不到位', strategy: '加强监管力度' },
 
+    { id: 3, level: 'low', type: '技术风险', content: '分拣技术需要升级', strategy: '推动技术创新' }
 
+  ];
 
+
 
+  switchTab(tab: 'chain' | 'region' | 'category' | 'risk'): void {
 
+    this.activeTab = tab;
 
+  }
 
+
 
+  getTrendIcon(trend: string): string {
 
+    return trend === 'up' ? 'fa-arrow-up' : trend === 'down' ? 'fa-arrow-down' : 'fa-minus';
 
+  }
 
+
 
+  getTrendClass(trend: string): string {
 
+    return `trend-${trend}`;
 
+  }
 
+
 
+  getRiskClass(level: string): string {
 
+    return `risk-${level}`;
 
+  }
 
+
 
   constructor() {}
 
 }

+ 199 - 4
src/app/government/subsidy-management/subsidy-management.html
Xem Tập Tin 

@@ -1,6 +1,201 @@
 
 <div class="subsidy-management-container">
 
-  <div class="subsidy-header">
 
-    <h1>补贴管理</h1>
 
+  <!-- 顶部导航 -->
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo">
 
+        <span class="logo-icon">🏛️</span>
 
+        <span>智回监管</span>
 
+      </div>
 
+      <div class="user-info">
 
+        <span>政府管理员</span>
 
+        <div class="avatar"><span>政</span></div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <main class="content">
 
+    <div class="container">
 
+      <h2 class="section-title">补贴管理</h2>
 
+
 
+      <!-- 统计卡片 -->
 
+      <div class="stats-cards">
 
+        <div class="stat-card"><div class="stat-value">{{ stats.pending }}</div><div class="stat-label">待审核</div></div>
 
+        <div class="stat-card"><div class="stat-value">{{ stats.approved }}</div><div class="stat-label">已通过</div></div>
 
+        <div class="stat-card"><div class="stat-value">¥{{ (stats.totalAmount / 10000).toFixed(1) }}万</div><div class="stat-label">总发放</div></div>
 
+      </div>
 
+
 
+      <!-- 标签页 -->
 
+      <div class="tab-navigation">
 
+        <div class="tab-item" [class.active]="activeTab === 'applications'" (click)="switchTab('applications')">申请审核</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'payments'" (click)="switchTab('payments')">发放记录</div>
 
+        <div class="tab-item" [class.active]="activeTab === 'evaluation'" (click)="switchTab('evaluation')">效果评估</div>
 
+      </div>
 
+
 
+      <!-- 申请审核列表 -->
 
+      <div *ngIf="activeTab === 'applications'">
 
+        <div class="filter-bar">
 
+          <button class="filter-btn" [class.active]="filterStatus === 'all'" (click)="setFilter('all')">全部</button>
 
+          <button class="filter-btn" [class.active]="filterStatus === 'pending'" (click)="setFilter('pending')">待审核</button>
 
+          <button class="filter-btn" [class.active]="filterStatus === 'approved'" (click)="setFilter('approved')">已通过</button>
 
+          <button class="filter-btn" [class.active]="filterStatus === 'rejected'" (click)="setFilter('rejected')">已驳回</button>
 
+        </div>
 
+
 
+        <div class="application-list">
 
+          <div *ngFor="let app of filteredApplications" class="application-item" (click)="viewApplicationDetail(app)">
 
+            <div class="app-header">
 
+              <div class="app-name">{{ app.enterpriseName }}</div>
 
+              <div class="app-status" [ngClass]="getStatusClass(app.status)">{{ getStatusText(app.status) }}</div>
 
+            </div>
 
+            <div class="app-details">
 
+              <div class="detail-row"><span>申请编号:</span><span>{{ app.id }}</span></div>
 
+              <div class="detail-row"><span>申请类型:</span><span>{{ app.type }}</span></div>
 
+              <div class="detail-row"><span>申请金额:</span><span class="amount">¥{{ app.amount.toLocaleString() }}</span></div>
 
+              <div class="detail-row"><span>申请日期:</span><span>{{ app.applyDate }}</span></div>
 
+              <div class="detail-row"><span>区块链状态:</span><span class="blockchain-status" [ngClass]="getStatusClass(app.blockchainStatus)">{{ getStatusText(app.blockchainStatus) }}</span></div>
 
+            </div>
 
+            <div class="app-actions" *ngIf="app.status === 'pending'">
 
+              <button class="action-btn btn-approve" (click)="approveApplication(app, $event)">通过</button>
 
+              <button class="action-btn btn-reject" (click)="rejectApplication(app, $event)">驳回</button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 发放记录 -->
 
+      <div *ngIf="activeTab === 'payments'">
 
+        <div class="payment-list">
 
+          <div *ngFor="let payment of payments" class="payment-item" (click)="viewPaymentDetail(payment)">
 
+            <div class="payment-header">
 
+              <div class="payment-name">{{ payment.enterpriseName }}</div>
 
+              <div class="payment-amount">¥{{ payment.amount.toLocaleString() }}</div>
 
+            </div>
 
+            <div class="payment-details">
 
+              <div class="detail-row"><span>发放编号:</span><span>{{ payment.id }}</span></div>
 
+              <div class="detail-row"><span>发放日期:</span><span>{{ payment.date }}</span></div>
 
+              <div class="detail-row"><span>资金用途:</span><span>{{ payment.purpose }}</span></div>
 
+              <div class="detail-row"><span>效果评分:</span><span class="effectiveness">{{ payment.effectiveness }}分</span></div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 效果评估 -->
 
+      <div *ngIf="activeTab === 'evaluation'">
 
+        <div class="evaluation-card">
 
+          <h3>补贴效果总体评估</h3>
 
+          <div class="evaluation-metric">
 
+            <div class="metric-item"><div class="metric-label">回收量增长</div><div class="metric-value">+25%</div></div>
 
+            <div class="metric-item"><div class="metric-label">企业参与度</div><div class="metric-value">89%</div></div>
 
+            <div class="metric-item"><div class="metric-label">环保效益</div><div class="metric-value">优秀</div></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <!-- 申请详情弹窗 -->
 
+  <div class="modal-overlay" [class.show]="showDetailModal" (click)="closeDetail()">
 
+    <div class="modal-content" (click)="$event.stopPropagation()" *ngIf="selectedApplication">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">补贴申请详情</h3>
 
+        <button class="close-btn" (click)="closeDetail()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">基本信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item"><span class="detail-label">申请编号</span><span class="detail-value">{{ selectedApplication.id }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">企业名称</span><span class="detail-value">{{ selectedApplication.enterpriseName }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">申请类型</span><span class="detail-value">{{ selectedApplication.type }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">申请日期</span><span class="detail-value">{{ selectedApplication.applyDate }}</span></div>
 
+            <div class="detail-item full-width">
 
+              <span class="detail-label">申请金额</span>
 
+              <span class="detail-value amount-large">¥{{ selectedApplication.amount.toLocaleString() }}</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">审核状态</h4>
 
+          <div class="status-info">
 
+            <div class="status-badge" [ngClass]="getStatusClass(selectedApplication.status)">
 
+              {{ getStatusText(selectedApplication.status) }}
 
+            </div>
 
+            <div class="blockchain-info">
 
+              <span class="blockchain-label">区块链验证:</span>
 
+              <span class="blockchain-badge" [ngClass]="getStatusClass(selectedApplication.blockchainStatus)">
 
+                {{ getStatusText(selectedApplication.blockchainStatus) }}
 
+              </span>
 
+              <button class="verify-btn" *ngIf="selectedApplication.blockchainStatus === 'verifying'" (click)="verifyBlockchain(selectedApplication)">
 
+                <i class="fas fa-sync-alt"></i> 验证
 
+              </button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="modal-actions" *ngIf="selectedApplication.status === 'pending'">
 
+          <button class="action-btn btn-approve" (click)="approveApplication(selectedApplication)">
 
+            <i class="fas fa-check"></i> 通过申请
 
+          </button>
 
+          <button class="action-btn btn-reject" (click)="rejectApplication(selectedApplication)">
 
+            <i class="fas fa-times"></i> 驳回申请
 
+          </button>
 
+        </div>
 
+      </div>
 
+    </div>
 
   </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
-</div>
 
+
 
+  <!-- 付款详情弹窗 -->
 
+  <div class="modal-overlay" [class.show]="showPaymentModal" (click)="closePaymentDetail()">
 
+    <div class="modal-content" (click)="$event.stopPropagation()" *ngIf="selectedPayment">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">发放记录详情</h3>
 
+        <button class="close-btn" (click)="closePaymentDetail()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">发放信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item"><span class="detail-label">发放编号</span><span class="detail-value">{{ selectedPayment.id }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">企业名称</span><span class="detail-value">{{ selectedPayment.enterpriseName }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">发放日期</span><span class="detail-value">{{ selectedPayment.date }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">资金用途</span><span class="detail-value">{{ selectedPayment.purpose }}</span></div>
 
+            <div class="detail-item full-width">
 
+              <span class="detail-label">发放金额</span>
 
+              <span class="detail-value amount-large">¥{{ selectedPayment.amount.toLocaleString() }}</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">效果评估</h4>
 
+          <div class="effectiveness-display">
 
+            <div class="effectiveness-score">
 
+              <span class="score-value">{{ selectedPayment.effectiveness }}</span>
 
+              <span class="score-label">分</span>
 
+            </div>
 
+            <div class="effectiveness-bar">
 
+              <div class="bar-fill" [style.width.%]="selectedPayment.effectiveness"></div>
 
+            </div>
 
+            <div class="effectiveness-text" [class.excellent]="selectedPayment.effectiveness >= 90" 
+                 [class.good]="selectedPayment.effectiveness >= 80 && selectedPayment.effectiveness < 90"
 
+                 [class.average]="selectedPayment.effectiveness < 80">
 
+              {{ selectedPayment.effectiveness >= 90 ? '优秀' : selectedPayment.effectiveness >= 80 ? '良好' : '一般' }}
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="modal-actions">
 
+          <button class="action-btn btn-primary" (click)="exportPaymentReport(selectedPayment)">
 
+            <i class="fas fa-download"></i> 导出报告
 
+          </button>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 底部导航 -->
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item" routerLink="/government/supervision-overview"><div class="nav-icon">📊</div><div>监管</div></div>
 
+    <div class="nav-item active"><div class="nav-icon">💰</div><div>补贴</div></div>
 
+    <div class="nav-item" routerLink="/government/industry-analysis"><div class="nav-icon">📈</div><div>分析</div></div>
 
+    <div class="nav-item" routerLink="/government/ai-decision-assistant"><div class="nav-icon">🤖</div><div>AI助手</div></div>
 
+    <div class="nav-item" routerLink="/government/government-center"><div class="nav-icon">⚙️</div><div>政务</div></div>
 
+  </nav>
 
+</div>

+ 652 - 0
src/app/government/subsidy-management/subsidy-management.scss
Xem Tập Tin 

@@ -0,0 +1,652 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --light-bg: #f8f9fa;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --border-radius: 12px;
 
+}
 
+
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.subsidy-management-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  color: var(--dark-text);
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+}
 
+
 
+.container {
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+  padding: 0 15px;
 
+}
 
+
 
+.header {
 
+  background: linear-gradient(135deg, #3498db, #2980b9);
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+}
 
+
 
+.logo-icon {
 
+  margin-right: 10px;
 
+  font-size: 24px;
 
+}
 
+
 
+.user-info {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.avatar {
 
+  width: 36px;
 
+  height: 36px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.3);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-left: 10px;
 
+}
 
+
 
+.content {
 
+  padding: 20px 0 80px;
 
+}
 
+
 
+.section-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 15px;
 
+}
 
+
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--secondary-color);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--secondary-color);
 
+  }
 
+}
 
+
 
+.nav-icon {
 
+  font-size: 20px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.stats-cards {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 12px;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.stat-card {
 
+  background: white;
 
+  padding: 16px;
 
+  border-radius: 12px;
 
+  text-align: center;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+}
 
+
 
+.stat-value {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+  color: var(--primary-color);
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.tab-navigation {
 
+  display: flex;
 
+  background: white;
 
+  border-radius: 12px;
 
+  margin-bottom: 16px;
 
+  overflow: hidden;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+}
 
+
 
+.tab-item {
 
+  flex: 1;
 
+  text-align: center;
 
+  padding: 14px;
 
+  font-size: 14px;
 
+  color: var(--light-text);
 
+  cursor: pointer;
 
+  position: relative;
 
+  &.active {
 
+    color: var(--secondary-color);
 
+    &::after {
 
+      content: '';
 
+      position: absolute;
 
+      bottom: 0;
 
+      left: 20%;
 
+      right: 20%;
 
+      height: 3px;
 
+      background: var(--secondary-color);
 
+      border-radius: 3px;
 
+    }
 
+  }
 
+}
 
+
 
+.filter-bar {
 
+  display: flex;
 
+  gap: 8px;
 
+  margin-bottom: 16px;
 
+  overflow-x: auto;
 
+}
 
+
 
+.filter-btn {
 
+  padding: 8px 16px;
 
+  background: white;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: 20px;
 
+  font-size: 13px;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  &:hover { border-color: var(--secondary-color); }
 
+  &.active {
 
+    background: var(--secondary-color);
 
+    color: white;
 
+    border-color: var(--secondary-color);
 
+  }
 
+}
 
+
 
+.application-list, .payment-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.application-item, .payment-item {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 16px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.app-header, .payment-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 12px;
 
+  padding-bottom: 12px;
 
+  border-bottom: 1px solid #f0f0f0;
 
+}
 
+
 
+.app-name, .payment-name {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.app-status {
 
+  padding: 4px 10px;
 
+  border-radius: 20px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+  &.status-pending { background: #fff8e6; color: #e6a700; }
 
+  &.status-approved { background: #e6f7e6; color: var(--primary-dark); }
 
+  &.status-rejected { background: #ffe6e6; color: var(--warning-color); }
 
+  &.status-verified { background: #e6f7e6; color: var(--primary-dark); }
 
+  &.status-verifying { background: #e6f7ff; color: var(--secondary-color); }
 
+  &.status-failed { background: #ffe6e6; color: var(--warning-color); }
 
+}
 
+
 
+.app-details, .payment-details {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 8px;
 
+  margin-bottom: 12px;
 
+}
 
+
 
+.detail-row {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  font-size: 14px;
 
+  span:first-child { color: var(--light-text); }
 
+  span:last-child { color: var(--dark-text); font-weight: 500; }
 
+}
 
+
 
+.amount {
 
+  color: var(--primary-color) !important;
 
+  font-weight: 600 !important;
 
+}
 
+
 
+.app-actions {
 
+  display: flex;
 
+  gap: 8px;
 
+}
 
+
 
+.action-btn {
 
+  flex: 1;
 
+  padding: 10px;
 
+  border: none;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  &.btn-approve {
 
+    background: var(--primary-color);
 
+    color: white;
 
+    &:hover { background: var(--primary-dark); }
 
+  }
 
+  &.btn-reject {
 
+    background: #f0f0f0;
 
+    color: var(--dark-text);
 
+    &:hover { background: #e0e0e0; }
 
+  }
 
+}
 
+
 
+.payment-amount {
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  color: var(--primary-color);
 
+}
 
+
 
+.evaluation-card {
 
+  background: white;
 
+  border-radius: 12px;
 
+  padding: 20px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  h3 { margin-bottom: 16px; font-size: 16px; }
 
+}
 
+
 
+.evaluation-metric {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 16px;
 
+}
 
+
 
+.metric-item {
 
+  text-align: center;
 
+  padding: 16px;
 
+  background: #f8f9fa;
 
+  border-radius: 8px;
 
+}
 
+
 
+.metric-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.metric-value {
 
+  font-size: 24px;
 
+  font-weight: bold;
 
+  color: var(--primary-color);
 
+}
 
+
 
+/* 弹窗样式 */
 
+.modal-overlay {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background: rgba(0, 0, 0, 0.5);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  z-index: 1000;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 0.3s ease;
 
+  backdrop-filter: blur(4px);
 
+  
+  &.show {
 
+    opacity: 1;
 
+    visibility: visible;
 
+    
+    .modal-content {
 
+      transform: translateY(0) scale(1);
 
+    }
 
+  }
 
+  
+  .modal-content {
 
+    background: white;
 
+    border-radius: 16px;
 
+    width: 90%;
 
+    max-width: 500px;
 
+    max-height: 80vh;
 
+    overflow-y: auto;
 
+    transform: translateY(-30px) scale(0.9);
 
+    transition: transform 0.3s ease;
 
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
+  }
 
+  
+  .modal-header {
 
+    padding: 20px;
 
+    border-bottom: 1px solid #e0e0e0;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    background: linear-gradient(135deg, #f5f7fa, #ffffff);
 
+    border-radius: 16px 16px 0 0;
 
+    
+    .modal-title {
 
+      font-size: 18px;
 
+      font-weight: 600;
 
+      color: var(--dark-text);
 
+    }
 
+    
+    .close-btn {
 
+      background: none;
 
+      border: none;
 
+      font-size: 28px;
 
+      color: var(--light-text);
 
+      cursor: pointer;
 
+      line-height: 1;
 
+      padding: 0;
 
+      width: 30px;
 
+      height: 30px;
 
+      transition: all 0.3s;
 
+      border-radius: 50%;
 
+      
+      &:hover {
 
+        color: var(--dark-text);
 
+        background: rgba(0, 0, 0, 0.05);
 
+        transform: rotate(90deg);
 
+      }
 
+    }
 
+  }
 
+  
+  .modal-body {
 
+    padding: 20px;
 
+  }
 
+  
+  .detail-section {
 
+    margin-bottom: 20px;
 
+    
+    &:last-child {
 
+      margin-bottom: 0;
 
+    }
 
+    
+    .detail-title {
 
+      font-size: 14px;
 
+      font-weight: 600;
 
+      color: var(--dark-text);
 
+      margin-bottom: 12px;
 
+      padding-bottom: 8px;
 
+      border-bottom: 2px solid var(--secondary-color);
 
+      display: inline-block;
 
+    }
 
+  }
 
+  
+  .detail-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(2, 1fr);
 
+    gap: 12px;
 
+    
+    .detail-item {
 
+      display: flex;
 
+      flex-direction: column;
 
+      background: #f8f9fa;
 
+      padding: 10px;
 
+      border-radius: 8px;
 
+      
+      &.full-width {
 
+        grid-column: 1 / -1;
 
+      }
 
+      
+      .detail-label {
 
+        font-size: 12px;
 
+        color: var(--light-text);
 
+        margin-bottom: 4px;
 
+      }
 
+      
+      .detail-value {
 
+        font-size: 14px;
 
+        color: var(--dark-text);
 
+        font-weight: 500;
 
+        
+        &.amount-large {
 
+          font-size: 24px;
 
+          color: var(--primary-color);
 
+          font-weight: 600;
 
+        }
 
+      }
 
+    }
 
+  }
 
+  
+  .status-info {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 12px;
 
+  }
 
+  
+  .status-badge {
 
+    padding: 8px 16px;
 
+    border-radius: 20px;
 
+    font-size: 14px;
 
+    font-weight: 600;
 
+    display: inline-block;
 
+    width: fit-content;
 
+    
+    &.status-pending { background: #fff8e6; color: #e6a700; }
 
+    &.status-approved { background: #e6f7e6; color: var(--primary-dark); }
 
+    &.status-rejected { background: #ffe6e6; color: var(--warning-color); }
 
+  }
 
+  
+  .blockchain-info {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 8px;
 
+    padding: 12px;
 
+    background: #f5f7fa;
 
+    border-radius: 8px;
 
+    
+    .blockchain-label {
 
+      font-size: 14px;
 
+      color: var(--dark-text);
 
+    }
 
+    
+    .blockchain-badge {
 
+      padding: 4px 10px;
 
+      border-radius: 12px;
 
+      font-size: 12px;
 
+      font-weight: 500;
 
+      
+      &.status-verified { background: #e6f7e6; color: var(--primary-dark); }
 
+      &.status-verifying { background: #e6f7ff; color: var(--secondary-color); animation: pulse 2s infinite; }
 
+      &.status-failed { background: #ffe6e6; color: var(--warning-color); }
 
+    }
 
+    
+    .verify-btn {
 
+      padding: 4px 12px;
 
+      border: none;
 
+      background: var(--secondary-color);
 
+      color: white;
 
+      border-radius: 12px;
 
+      font-size: 12px;
 
+      cursor: pointer;
 
+      transition: all 0.3s;
 
+      
+      &:hover {
 
+        background: #2980b9;
 
+      }
 
+      
+      i {
 
+        animation: spin 1s linear infinite;
 
+      }
 
+    }
 
+  }
 
+  
+  @keyframes pulse {
 
+    0%, 100% {
 
+      opacity: 1;
 
+    }
 
+    50% {
 
+      opacity: 0.6;
 
+    }
 
+  }
 
+  
+  @keyframes spin {
 
+    0% {
 
+      transform: rotate(0deg);
 
+    }
 
+    100% {
 
+      transform: rotate(360deg);
 
+    }
 
+  }
 
+  
+  .effectiveness-display {
 
+    text-align: center;
 
+    padding: 20px;
 
+    background: linear-gradient(135deg, #f5f7fa, #e8f4f8);
 
+    border-radius: 12px;
 
+    
+    .effectiveness-score {
 
+      margin-bottom: 16px;
 
+      
+      .score-value {
 
+        font-size: 48px;
 
+        font-weight: bold;
 
+        color: var(--primary-color);
 
+      }
 
+      
+      .score-label {
 
+        font-size: 16px;
 
+        color: var(--light-text);
 
+        margin-left: 4px;
 
+      }
 
+    }
 
+    
+    .effectiveness-bar {
 
+      width: 100%;
 
+      height: 12px;
 
+      background: #e0e0e0;
 
+      border-radius: 6px;
 
+      overflow: hidden;
 
+      margin-bottom: 12px;
 
+      
+      .bar-fill {
 
+        height: 100%;
 
+        background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
 
+        transition: width 0.5s ease;
 
+      }
 
+    }
 
+    
+    .effectiveness-text {
 
+      font-size: 18px;
 
+      font-weight: 600;
 
+      
+      &.excellent { color: #2ecc71; }
 
+      &.good { color: #3498db; }
 
+      &.average { color: #f39c12; }
 
+    }
 
+  }
 
+  
+  .modal-actions {
 
+    margin-top: 20px;
 
+    padding-top: 20px;
 
+    border-top: 1px solid #e0e0e0;
 
+    display: flex;
 
+    gap: 12px;
 
+    
+    .action-btn {
 
+      flex: 1;
 
+      padding: 12px;
 
+      border: none;
 
+      border-radius: 8px;
 
+      font-size: 14px;
 
+      font-weight: 600;
 
+      cursor: pointer;
 
+      transition: all 0.3s;
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+      gap: 6px;
 
+      
+      &.btn-approve {
 
+        background: var(--primary-color);
 
+        color: white;
 
+        
+        &:hover {
 
+          background: var(--primary-dark);
 
+          transform: translateY(-2px);
 
+          box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
 
+        }
 
+      }
 
+      
+      &.btn-reject {
 
+        background: #f0f0f0;
 
+        color: var(--dark-text);
 
+        
+        &:hover {
 
+          background: #e0e0e0;
 
+          transform: translateY(-2px);
 
+        }
 
+      }
 
+      
+      &.btn-primary {
 
+        background: var(--secondary-color);
 
+        color: white;
 
+        
+        &:hover {
 
+          background: #2980b9;
 
+          transform: translateY(-2px);
 
+          box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+

+ 175 - 1
src/app/government/subsidy-management/subsidy-management.ts
Xem Tập Tin 

@@ -1,13 +1,187 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { RouterModule } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+interface SubsidyApplication {
 
+  id: string;
 
+  enterpriseName: string;
 
+  type: string;
 
+  amount: number;
 
+  applyDate: string;
 
+  status: 'pending' | 'approved' | 'rejected';
 
+  blockchainStatus: 'verified' | 'verifying' | 'failed';
 
+}
 
+
 
+interface PaymentRecord {
 
+  id: string;
 
+  enterpriseName: string;
 
+  amount: number;
 
+  date: string;
 
+  purpose: string;
 
+  effectiveness: number;
 
+}
 
 
 @Component({
 
   selector: 'app-subsidy-management',
 
-  imports: [CommonModule, RouterModule],
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './subsidy-management.html',
 
   styleUrl: './subsidy-management.scss'
 
 })
 
 export class SubsidyManagement {
 
+  activeTab: 'applications' | 'payments' | 'evaluation' = 'applications';
 
+  filterStatus: 'all' | 'pending' | 'approved' | 'rejected' = 'all';
 
+  selectedApplication: SubsidyApplication | null = null;
 
+  selectedPayment: PaymentRecord | null = null;
 
+  showDetailModal = false;
 
+  showPaymentModal = false;
 
+
 
+  applications: SubsidyApplication[] = [
 
+    {
 
+      id: 'SUB-2023-001',
 
+      enterpriseName: '智回环保科技有限公司',
 
+      type: '回收设备补贴',
 
+      amount: 50000,
 
+      applyDate: '2023-05-20',
 
+      status: 'pending',
 
+      blockchainStatus: 'verified'
 
+    },
 
+    {
 
+      id: 'SUB-2023-002',
 
+      enterpriseName: '绿色循环资源公司',
 
+      type: '环保技术补贴',
 
+      amount: 80000,
 
+      applyDate: '2023-05-19',
 
+      status: 'pending',
 
+      blockchainStatus: 'verifying'
 
+    },
 
+    {
 
+      id: 'SUB-2023-003',
 
+      enterpriseName: '城市再生资源中心',
 
+      type: '运营补贴',
 
+      amount: 120000,
 
+      applyDate: '2023-05-18',
 
+      status: 'approved',
 
+      blockchainStatus: 'verified'
 
+    },
 
+    {
 
+      id: 'SUB-2023-004',
 
+      enterpriseName: '环保回收企业',
 
+      type: '设备采购补贴',
 
+      amount: 30000,
 
+      applyDate: '2023-05-17',
 
+      status: 'rejected',
 
+      blockchainStatus: 'failed'
 
+    }
 
+  ];
 
+
 
+  payments: PaymentRecord[] = [
 
+    {
 
+      id: 'PAY-001',
 
+      enterpriseName: '城市再生资源中心',
 
+      amount: 120000,
 
+      date: '2023-05-15',
 
+      purpose: '运营补贴',
 
+      effectiveness: 92
 
+    },
 
+    {
 
+      id: 'PAY-002',
 
+      enterpriseName: '绿色循环资源公司',
 
+      amount: 60000,
 
+      date: '2023-05-10',
 
+      purpose: '技术升级',
 
+      effectiveness: 88
 
+    }
 
+  ];
 
+
 
+  get filteredApplications(): SubsidyApplication[] {
 
+    if (this.filterStatus === 'all') {
 
+      return this.applications;
 
+    }
 
+    return this.applications.filter(app => app.status === this.filterStatus);
 
+  }
 
+
 
+  get stats() {
 
+    return {
 
+      pending: this.applications.filter(a => a.status === 'pending').length,
 
+      approved: this.applications.filter(a => a.status === 'approved').length,
 
+      rejected: this.applications.filter(a => a.status === 'rejected').length,
 
+      totalAmount: this.payments.reduce((sum, p) => sum + p.amount, 0)
 
+    };
 
+  }
 
+
 
+  switchTab(tab: 'applications' | 'payments' | 'evaluation'): void {
 
+    this.activeTab = tab;
 
+  }
 
+
 
+  setFilter(status: 'all' | 'pending' | 'approved' | 'rejected'): void {
 
+    this.filterStatus = status;
 
+  }
 
+
 
+  getStatusText(status: string): string {
 
+    const statusMap: {[key: string]: string} = {
 
+      'pending': '待审核',
 
+      'approved': '已通过',
 
+      'rejected': '已驳回',
 
+      'verified': '已验证',
 
+      'verifying': '验证中',
 
+      'failed': '验证失败'
 
+    };
 
+    return statusMap[status] || status;
 
+  }
 
+
 
+  getStatusClass(status: string): string {
 
+    return `status-${status}`;
 
+  }
 
+
 
+  viewApplicationDetail(application: SubsidyApplication): void {
 
+    this.selectedApplication = application;
 
+    this.showDetailModal = true;
 
+  }
 
+
 
+  closeDetail(): void {
 
+    this.showDetailModal = false;
 
+    this.selectedApplication = null;
 
+  }
 
+
 
+  approveApplication(application: SubsidyApplication, event?: Event): void {
 
+    if (event) event.stopPropagation();
 
+    if (confirm(`确定通过 ${application.enterpriseName} 的补贴申请吗？`)) {
 
+      application.status = 'approved';
 
+      alert('申请已通过');
 
+    }
 
+  }
 
+
 
+  rejectApplication(application: SubsidyApplication, event?: Event): void {
 
+    if (event) event.stopPropagation();
 
+    const reason = prompt('请输入驳回原因：');
 
+    if (reason) {
 
+      application.status = 'rejected';
 
+      alert('申请已驳回');
 
+    }
 
+  }
 
+
 
+  viewPaymentDetail(payment: PaymentRecord): void {
 
+    this.selectedPayment = payment;
 
+    this.showPaymentModal = true;
 
+  }
 
+
 
+  closePaymentDetail(): void {
 
+    this.showPaymentModal = false;
 
+    this.selectedPayment = null;
 
+  }
 
+
 
+  exportPaymentReport(payment: PaymentRecord): void {
 
+    alert(`导出 ${payment.enterpriseName} 的付款报告`);
 
+  }
 
+
 
+  verifyBlockchain(application: SubsidyApplication): void {
 
+    application.blockchainStatus = 'verifying';
 
+    setTimeout(() => {
 
+      application.blockchainStatus = 'verified';
 
+      alert('区块链验证完成');
 
+    }, 1500);
 
+  }
 
+
 
   constructor() {}
 
 }

+ 250 - 3
src/app/government/supervision-overview/supervision-overview.html
Xem Tập Tin 

@@ -1,6 +1,253 @@
 
 <div class="supervision-overview-container">
 
-  <div class="supervision-header">
 
-    <h1>监管概览</h1>
 
+  <!-- 顶部导航 -->
 
+  <header class="header">
 
+    <div class="header-content">
 
+      <div class="logo">
 
+        <span class="logo-icon">🏛️</span>
 
+        <span>智回监管</span>
 
+      </div>
 
+      <div class="user-info">
 
+        <span>政府管理员</span>
 
+        <div class="avatar">
 
+          <span>政</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 主要内容 -->
 
+  <main class="content">
 
+    <div class="container">
 
+      <section id="supervision-overview">
 
+        <h2 class="section-title">监管总览</h2>
 
+
 
+        <!-- 全域核心指标仪表盘 -->
 
+        <div class="indicators-dashboard">
 
+          <div class="indicator-card">
 
+            <div class="indicator-icon" style="background: linear-gradient(135deg, #2ecc71, #27ae60);">
 
+              <i class="fas fa-recycle"></i>
 
+            </div>
 
+            <div class="indicator-content">
 
+              <div class="indicator-label">当日回收总量</div>
 
+              <div class="indicator-value">{{ indicators.todayRecycle.toLocaleString() }}</div>
 
+              <div class="indicator-unit">kg</div>
 
+              <div class="indicator-trend up">{{ indicators.trend.recycle }}</div>
 
+            </div>
 
+          </div>
 
+          
+          <div class="indicator-card">
 
+            <div class="indicator-icon" style="background: linear-gradient(135deg, #3498db, #2980b9);">
 
+              <i class="fas fa-bullseye"></i>
 
+            </div>
 
+            <div class="indicator-content">
 
+              <div class="indicator-label">分类准确率</div>
 
+              <div class="indicator-value">{{ indicators.accuracyRate }}</div>
 
+              <div class="indicator-unit">%</div>
 
+              <div class="indicator-trend up">{{ indicators.trend.accuracy }}</div>
 
+            </div>
 
+          </div>
 
+          
+          <div class="indicator-card">
 
+            <div class="indicator-icon" style="background: linear-gradient(135deg, #27ae60, #229954);">
 
+              <i class="fas fa-leaf"></i>
 
+            </div>
 
+            <div class="indicator-content">
 
+              <div class="indicator-label">碳减排总量</div>
 
+              <div class="indicator-value">{{ indicators.carbonReduction }}</div>
 
+              <div class="indicator-unit">kg</div>
 
+              <div class="indicator-trend up">{{ indicators.trend.carbon }}</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 多维度监管地图 -->
 
+        <div class="map-section">
 
+          <div class="section-header">
 
+            <h3>区域监管地图</h3>
 
+          </div>
 
+          
+          <!-- 图层切换 -->
 
+          <div class="map-layer-tabs">
 
+            <button 
+              class="layer-tab" 
+              [class.active]="mapLayer === 'sites'"
 
+              (click)="switchMapLayer('sites')">
 
+              <i class="fas fa-map-marker-alt"></i>
 
+              网点分布
 
+            </button>
 
+            <button 
+              class="layer-tab" 
+              [class.active]="mapLayer === 'compliance'"
 
+              (click)="switchMapLayer('compliance')">
 
+              <i class="fas fa-shield-alt"></i>
 
+              合规状态
 
+            </button>
 
+            <button 
+              class="layer-tab" 
+              [class.active]="mapLayer === 'policy'"
 
+              (click)="switchMapLayer('policy')">
 
+              <i class="fas fa-gavel"></i>
 
+              政策覆盖
 
+            </button>
 
+          </div>
 
+
 
+          <!-- 区域列表（模拟地图） -->
 
+          <div class="area-map">
 
+            <div 
+              *ngFor="let area of areas" 
+              class="area-item"
 
+              [ngClass]="getAreaStatusClass(area.status)"
 
+              (click)="viewAreaDetail(area)">
 
+              <div class="area-header">
 
+                <div class="area-name">{{ area.name }}</div>
 
+                <div class="area-indicator">
 
+                  <i class="fas fa-circle"></i>
 
+                </div>
 
+              </div>
 
+              <div class="area-stats">
 
+                <div class="area-stat">
 
+                  <span class="stat-label">回收量</span>
 
+                  <span class="stat-value">{{ area.recycleVolume }}kg</span>
 
+                </div>
 
+                <div class="area-stat">
 
+                  <span class="stat-label">准确率</span>
 
+                  <span class="stat-value">{{ area.accuracy }}%</span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 实时预警列表 -->
 
+        <div class="warning-section">
 
+          <div class="section-header">
 
+            <h3>实时预警</h3>
 
+            <div class="warning-badge">
 
+              <span class="badge-item high">{{ highLevelWarnings }}</span>
 
+              <span class="badge-item total">{{ pendingWarnings }}</span>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="warning-list">
 
+            <div 
+              *ngFor="let warning of warnings" 
+              class="warning-item"
 
+              [ngClass]="getLevelClass(warning.level)"
 
+              (click)="viewWarningDetail(warning)">
 
+              <div class="warning-icon">
 
+                <i class="fas" [ngClass]="getWarningIcon(warning.type)"></i>
 
+              </div>
 
+              <div class="warning-content">
 
+                <div class="warning-header">
 
+                  <div class="warning-type">{{ getWarningTypeText(warning.type) }}</div>
 
+                  <div class="warning-time">{{ warning.time }}</div>
 
+                </div>
 
+                <div class="warning-title">{{ warning.title }}</div>
 
+                <div class="warning-meta">
 
+                  <span class="warning-area">{{ warning.area }}</span>
 
+                  <span class="warning-status" [ngClass]="getStatusClass(warning.status)">
 
+                    {{ getStatusText(warning.status) }}
 
+                  </span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- AI决策助手入口 -->
 
+        <div class="ai-assistant-entry">
 
+          <div class="ai-card" (click)="goToAIAssistant()">
 
+            <div class="ai-icon">
 
+              <i class="fas fa-robot"></i>
 
+            </div>
 
+            <div class="ai-content">
 
+              <div class="ai-title">AI决策助手</div>
 
+              <div class="ai-desc">政策模拟 · 数据问答 · 智能分析</div>
 
+            </div>
 
+            <div class="ai-arrow">
 
+              <i class="fas fa-chevron-right"></i>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  </main>
 
+
 
+  <!-- 预警详情弹窗 -->
 
+  <div class="modal-overlay" [class.show]="showWarningDetailModal" (click)="closeWarningDetail()">
 
+    <div class="modal-content" (click)="$event.stopPropagation()" *ngIf="selectedWarning">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">预警详情</h3>
 
+        <button class="close-btn" (click)="closeWarningDetail()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">基本信息</h4>
 
+          <div class="detail-grid">
 
+            <div class="detail-item"><span class="detail-label">预警编号</span><span class="detail-value">{{ selectedWarning.id }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">预警类型</span><span class="detail-value">{{ getWarningTypeText(selectedWarning.type) }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">所属区域</span><span class="detail-value">{{ selectedWarning.area }}</span></div>
 
+            <div class="detail-item"><span class="detail-label">预警时间</span><span class="detail-value">{{ selectedWarning.time }}</span></div>
 
+            <div class="detail-item full-width"><span class="detail-label">预警内容</span><span class="detail-value">{{ selectedWarning.title }}</span></div>
 
+          </div>
 
+        </div>
 
+        <div class="modal-actions">
 
+          <button class="action-btn btn-primary" (click)="handleWarning(selectedWarning)" *ngIf="selectedWarning.status === 'pending'">开始处理</button>
 
+          <button class="action-btn btn-success" (click)="resolveWarning(selectedWarning)" *ngIf="selectedWarning.status === 'processing'">标记解决</button>
 
+        </div>
 
+      </div>
 
+    </div>
 
   </div>
 
-  <!-- 页面内容已清理，保留基本结构 -->
 
+
 
+  <!-- 区域详情弹窗 -->
 
+  <div class="modal-overlay" [class.show]="showAreaDetailModal" (click)="closeAreaDetail()">
 
+    <div class="modal-content" (click)="$event.stopPropagation()" *ngIf="selectedArea">
 
+      <div class="modal-header">
 
+        <h3 class="modal-title">{{ selectedArea.name }} - 详细数据</h3>
 
+        <button class="close-btn" (click)="closeAreaDetail()">&times;</button>
 
+      </div>
 
+      <div class="modal-body">
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">区域概况</h4>
 
+          <div class="area-overview">
 
+            <div class="overview-item">
 
+              <div class="overview-icon" [ngClass]="getAreaStatusClass(selectedArea.status)"><i class="fas fa-circle"></i></div>
 
+              <div class="overview-text">{{ selectedArea.status === 'good' ? '状态良好' : selectedArea.status === 'warning' ? '需要关注' : '需要重点整改' }}</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="detail-section">
 
+          <h4 class="detail-title">关键指标</h4>
 
+          <div class="metrics-grid">
 
+            <div class="metric-card"><div class="metric-label">回收量</div><div class="metric-value">{{ selectedArea.recycleVolume }}kg</div></div>
 
+            <div class="metric-card"><div class="metric-label">准确率</div><div class="metric-value">{{ selectedArea.accuracy }}%</div></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 底部导航 -->
 
+  <nav class="bottom-nav">
 
+    <div class="nav-item active">
 
+      <div class="nav-icon">📊</div>
 
+      <div>监管</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/government/subsidy-management">
 
+      <div class="nav-icon">💰</div>
 
+      <div>补贴</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/government/industry-analysis">
 
+      <div class="nav-icon">📈</div>
 
+      <div>分析</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/government/ai-decision-assistant">
 
+      <div class="nav-icon">🤖</div>
 
+      <div>AI助手</div>
 
+    </div>
 
+    <div class="nav-item" routerLink="/government/government-center">
 
+      <div class="nav-icon">⚙️</div>
 
+      <div>政务</div>
 
+  </div>
 
+  </nav>
 
 </div>

+ 858 - 0
src/app/government/supervision-overview/supervision-overview.scss
Xem Tập Tin 

@@ -0,0 +1,858 @@
 
+:root {
 
+  --primary-color: #2ecc71;
 
+  --primary-dark: #27ae60;
 
+  --primary-light: #a9dfbf;
 
+  --secondary-color: #3498db;
 
+  --accent-color: #f39c12;
 
+  --warning-color: #e74c3c;
 
+  --light-bg: #f8f9fa;
 
+  --dark-text: #2c3e50;
 
+  --light-text: #7f8c8d;
 
+  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+  --border-radius: 12px;
 
+}
 
+
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.supervision-overview-container {
 
+  min-height: 100vh;
 
+  background-color: #f5f7fa;
 
+  color: var(--dark-text);
 
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+  line-height: 1.6;
 
+}
 
+
 
+.container {
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+  padding: 0 15px;
 
+}
 
+
 
+/* 顶部导航 */
 
+.header {
 
+  background: linear-gradient(135deg, #3498db, #2980b9);
 
+  color: white;
 
+  padding: 15px;
 
+  position: sticky;
 
+  top: 0;
 
+  z-index: 100;
 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+}
 
+
 
+.logo-icon {
 
+  margin-right: 10px;
 
+  font-size: 24px;
 
+}
 
+
 
+.user-info {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.avatar {
 
+  width: 36px;
 
+  height: 36px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.3);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-left: 10px;
 
+}
 
+
 
+/* 内容区域 */
 
+.content {
 
+  padding: 20px 0 80px;
 
+}
 
+
 
+.section-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 15px;
 
+}
 
+
 
+/* 核心指标仪表盘 */
 
+.indicators-dashboard {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+  margin-bottom: 24px;
 
+}
 
+
 
+.indicator-card {
 
+  background: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 16px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 16px;
 
+  box-shadow: var(--card-shadow);
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+}
 
+
 
+.indicator-icon {
 
+  width: 60px;
 
+  height: 60px;
 
+  border-radius: 12px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: white;
 
+  font-size: 28px;
 
+}
 
+
 
+.indicator-content {
 
+  flex: 1;
 
+}
 
+
 
+.indicator-label {
 
+  font-size: 13px;
 
+  color: var(--light-text);
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.indicator-value {
 
+  font-size: 32px;
 
+  font-weight: bold;
 
+  color: var(--dark-text);
 
+  line-height: 1.2;
 
+  display: inline;
 
+}
 
+
 
+.indicator-unit {
 
+  font-size: 16px;
 
+  color: var(--light-text);
 
+  margin-left: 4px;
 
+  display: inline;
 
+}
 
+
 
+/* 地图区域 */
 
+.map-section,
 
+.warning-section {
 
+  margin-bottom: 24px;
 
+}
 
+
 
+.section-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 12px;
 
+
 
+  h3 {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+  }
 
+}
 
+
 
+.map-layer-tabs {
 
+  display: flex;
 
+  gap: 8px;
 
+  margin-bottom: 16px;
 
+  overflow-x: auto;
 
+  -webkit-overflow-scrolling: touch;
 
+
 
+  &::-webkit-scrollbar {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.layer-tab {
 
+  flex: 1;
 
+  min-width: 100px;
 
+  padding: 10px 16px;
 
+  background-color: white;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: var(--border-radius);
 
+  font-size: 13px;
 
+  color: var(--dark-text);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 6px;
 
+
 
+  i {
 
+    font-size: 14px;
 
+  }
 
+
 
+  &:hover {
 
+    border-color: var(--secondary-color);
 
+    color: var(--secondary-color);
 
+  }
 
+
 
+  &.active {
 
+    background: linear-gradient(135deg, var(--secondary-color), #2980b9);
 
+    color: white;
 
+    border-color: var(--secondary-color);
 
+  }
 
+}
 
+
 
+.area-map {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 12px;
 
+}
 
+
 
+.area-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 14px;
 
+  box-shadow: var(--card-shadow);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border-left: 4px solid transparent;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+
 
+  &.area-good {
 
+    border-left-color: var(--primary-color);
 
+    
+    .area-indicator i {
 
+      color: var(--primary-color);
 
+    }
 
+  }
 
+
 
+  &.area-warning {
 
+    border-left-color: var(--accent-color);
 
+    background: linear-gradient(to right, #fff8e6 0%, white 20%);
 
+
 
+    .area-indicator i {
 
+      color: var(--accent-color);
 
+    }
 
+  }
 
+
 
+  &.area-critical {
 
+    border-left-color: var(--warning-color);
 
+    background: linear-gradient(to right, #ffe6e6 0%, white 20%);
 
+
 
+    .area-indicator i {
 
+      color: var(--warning-color);
 
+      animation: blink 1.5s infinite;
 
+    }
 
+  }
 
+}
 
+
 
+@keyframes blink {
 
+  0%, 100% { opacity: 1; }
 
+  50% { opacity: 0.3; }
 
+}
 
+
 
+.area-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.area-name {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+.area-indicator i {
 
+  font-size: 12px;
 
+}
 
+
 
+.area-stats {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  gap: 8px;
 
+}
 
+
 
+.area-stat {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 2px;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.stat-value {
 
+  font-size: 14px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+}
 
+
 
+/* 预警徽章 */
 
+.warning-badge {
 
+  display: flex;
 
+  gap: 8px;
 
+}
 
+
 
+.badge-item {
 
+  padding: 4px 12px;
 
+  border-radius: 20px;
 
+  font-size: 13px;
 
+  font-weight: 600;
 
+
 
+  &.high {
 
+    background-color: #ffe6e6;
 
+    color: var(--warning-color);
 
+  }
 
+
 
+  &.total {
 
+    background-color: #e6f7ff;
 
+    color: var(--secondary-color);
 
+  }
 
+}
 
+
 
+/* 预警列表 */
 
+.warning-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+}
 
+
 
+.warning-item {
 
+  background-color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 14px;
 
+  display: flex;
 
+  gap: 12px;
 
+  box-shadow: var(--card-shadow);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border-left: 4px solid transparent;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 
+  }
 
+
 
+  &.level-high {
 
+    border-left-color: var(--warning-color);
 
+    
+    .warning-icon {
 
+      background-color: #ffe6e6;
 
+      color: var(--warning-color);
 
+    }
 
+  }
 
+
 
+  &.level-medium {
 
+    border-left-color: var(--accent-color);
 
+    
+    .warning-icon {
 
+      background-color: #fff8e6;
 
+      color: var(--accent-color);
 
+    }
 
+  }
 
+
 
+  &.level-low {
 
+    border-left-color: #95a5a6;
 
+    
+    .warning-icon {
 
+      background-color: #f0f0f0;
 
+      color: #95a5a6;
 
+    }
 
+  }
 
+}
 
+
 
+.warning-icon {
 
+  width: 40px;
 
+  height: 40px;
 
+  border-radius: 8px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 18px;
 
+}
 
+
 
+.warning-content {
 
+  flex: 1;
 
+}
 
+
 
+.warning-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 6px;
 
+}
 
+
 
+.warning-type {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.warning-time {
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+}
 
+
 
+.warning-title {
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  color: var(--dark-text);
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.warning-meta {
 
+  display: flex;
 
+  gap: 12px;
 
+  align-items: center;
 
+  font-size: 13px;
 
+}
 
+
 
+.warning-area {
 
+  color: var(--light-text);
 
+}
 
+
 
+.warning-status {
 
+  padding: 2px 8px;
 
+  border-radius: 12px;
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+
 
+  &.status-pending {
 
+    background-color: #fff8e6;
 
+    color: var(--accent-color);
 
+  }
 
+
 
+  &.status-processing {
 
+    background-color: #e6f7ff;
 
+    color: var(--secondary-color);
 
+  }
 
+
 
+  &.status-resolved {
 
+    background-color: #e6f7e6;
 
+    color: var(--primary-dark);
 
+  }
 
+}
 
+
 
+/* AI助手入口 */
 
+.ai-assistant-entry {
 
+  margin-top: 24px;
 
+}
 
+
 
+.ai-card {
 
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
 
+  color: white;
 
+  border-radius: var(--border-radius);
 
+  padding: 20px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 16px;
 
+  box-shadow: 0 4px 16px rgba(155, 89, 182, 0.3);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 24px rgba(155, 89, 182, 0.4);
 
+  }
 
+}
 
+
 
+.ai-icon {
 
+  width: 60px;
 
+  height: 60px;
 
+  background-color: rgba(255, 255, 255, 0.2);
 
+  border-radius: 12px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 32px;
 
+}
 
+
 
+.ai-content {
 
+  flex: 1;
 
+}
 
+
 
+.ai-title {
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.ai-desc {
 
+  font-size: 13px;
 
+  opacity: 0.9;
 
+}
 
+
 
+.ai-arrow {
 
+  font-size: 20px;
 
+}
 
+
 
+/* 底部导航 */
 
+.bottom-nav {
 
+  position: fixed;
 
+  bottom: 0;
 
+  left: 0;
 
+  right: 0;
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 10px 0;
 
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+  z-index: 100;
 
+}
 
+
 
+.nav-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  font-size: 12px;
 
+  color: var(--light-text);
 
+  flex: 1;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+
 
+  &:hover {
 
+    color: var(--secondary-color);
 
+  }
 
+
 
+  &.active {
 
+    color: var(--secondary-color);
 
+  }
 
+}
 
+
 
+.nav-icon {
 
+  font-size: 20px;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+/* 响应式调整 */
 
+@media (min-width: 768px) {
 
+  .container {
 
+    max-width: 750px;
 
+  }
 
+
 
+  .indicators-dashboard {
 
+    display: grid;
 
+    grid-template-columns: repeat(3, 1fr);
 
+    gap: 16px;
 
+  }
 
+
 
+  .area-map {
 
+    grid-template-columns: repeat(3, 1fr);
 
+  }
 
+}
 
+
 
+@media (max-width: 576px) {
 
+  .area-map {
 
+    grid-template-columns: 1fr;
 
+  }
 
+}
 
+
 
+/* 趋势指标样式 */
 
+.indicator-trend {
 
+  font-size: 12px;
 
+  font-weight: 600;
 
+  margin-top: 4px;
 
+  display: inline-block;
 
+  
+  &.up {
 
+    color: #2ecc71;
 
+    
+    &::before {
 
+      content: '↑ ';
 
+      font-size: 14px;
 
+    }
 
+  }
 
+  
+  &.down {
 
+    color: #e74c3c;
 
+    
+    &::before {
 
+      content: '↓ ';
 
+      font-size: 14px;
 
+    }
 
+  }
 
+}
 
+
 
+/* AI卡片动画增强 */
 
+.ai-icon {
 
+  animation: float 3s ease-in-out infinite;
 
+}
 
+
 
+.ai-card:hover .ai-arrow {
 
+  transform: translateX(5px);
 
+  transition: transform 0.3s ease;
 
+}
 
+
 
+@keyframes float {
 
+  0%, 100% {
 
+    transform: translateY(0);
 
+  }
 
+  50% {
 
+    transform: translateY(-5px);
 
+  }
 
+}
 
+
 
+/* 弹窗样式 */
 
+.modal-overlay {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background: rgba(0, 0, 0, 0.5);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  z-index: 1000;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 0.3s ease;
 
+  backdrop-filter: blur(4px);
 
+  
+  &.show {
 
+    opacity: 1;
 
+    visibility: visible;
 
+    
+    .modal-content {
 
+      transform: translateY(0) scale(1);
 
+    }
 
+  }
 
+  
+  .modal-content {
 
+    background: white;
 
+    border-radius: 16px;
 
+    width: 90%;
 
+    max-width: 500px;
 
+    max-height: 80vh;
 
+    overflow-y: auto;
 
+    transform: translateY(-30px) scale(0.9);
 
+    transition: transform 0.3s ease;
 
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
+  }
 
+  
+  .modal-header {
 
+    padding: 20px;
 
+    border-bottom: 1px solid #e0e0e0;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    background: linear-gradient(135deg, #f5f7fa, #ffffff);
 
+    border-radius: 16px 16px 0 0;
 
+    
+    .modal-title {
 
+      font-size: 18px;
 
+      font-weight: 600;
 
+      color: var(--dark-text);
 
+    }
 
+    
+    .close-btn {
 
+      background: none;
 
+      border: none;
 
+      font-size: 28px;
 
+      color: var(--light-text);
 
+      cursor: pointer;
 
+      line-height: 1;
 
+      padding: 0;
 
+      width: 30px;
 
+      height: 30px;
 
+      transition: all 0.3s;
 
+      border-radius: 50%;
 
+      
+      &:hover {
 
+        color: var(--dark-text);
 
+        background: rgba(0, 0, 0, 0.05);
 
+        transform: rotate(90deg);
 
+      }
 
+    }
 
+  }
 
+  
+  .modal-body {
 
+    padding: 20px;
 
+  }
 
+  
+  .detail-section {
 
+    margin-bottom: 20px;
 
+    
+    &:last-child {
 
+      margin-bottom: 0;
 
+    }
 
+    
+    .detail-title {
 
+      font-size: 14px;
 
+      font-weight: 600;
 
+      color: var(--dark-text);
 
+      margin-bottom: 12px;
 
+      padding-bottom: 8px;
 
+      border-bottom: 2px solid var(--secondary-color);
 
+      display: inline-block;
 
+    }
 
+  }
 
+  
+  .detail-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(2, 1fr);
 
+    gap: 12px;
 
+    
+    .detail-item {
 
+      display: flex;
 
+      flex-direction: column;
 
+      background: #f8f9fa;
 
+      padding: 10px;
 
+      border-radius: 8px;
 
+      
+      &.full-width {
 
+        grid-column: 1 / -1;
 
+      }
 
+      
+      .detail-label {
 
+        font-size: 12px;
 
+        color: var(--light-text);
 
+        margin-bottom: 4px;
 
+      }
 
+      
+      .detail-value {
 
+        font-size: 14px;
 
+        color: var(--dark-text);
 
+        font-weight: 500;
 
+      }
 
+    }
 
+  }
 
+  
+  .area-overview {
 
+    .overview-item {
 
+      display: flex;
 
+      align-items: center;
 
+      padding: 12px;
 
+      background: linear-gradient(135deg, #f5f7fa, #e8f4f8);
 
+      border-radius: 8px;
 
+      
+      .overview-icon {
 
+        margin-right: 12px;
 
+        font-size: 20px;
 
+        animation: pulse 2s infinite;
 
+        
+        &.area-good {
 
+          color: #2ecc71;
 
+        }
 
+        
+        &.area-warning {
 
+          color: #f39c12;
 
+        }
 
+        
+        &.area-critical {
 
+          color: #e74c3c;
 
+        }
 
+      }
 
+      
+      .overview-text {
 
+        font-size: 14px;
 
+        font-weight: 500;
 
+        color: var(--dark-text);
 
+      }
 
+    }
 
+  }
 
+  
+  @keyframes pulse {
 
+    0%, 100% {
 
+      transform: scale(1);
 
+    }
 
+    50% {
 
+      transform: scale(1.1);
 
+    }
 
+  }
 
+  
+  .metrics-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(2, 1fr);
 
+    gap: 12px;
 
+    
+    .metric-card {
 
+      background: linear-gradient(135deg, #667eea15, #764ba215);
 
+      padding: 16px;
 
+      border-radius: 10px;
 
+      text-align: center;
 
+      transition: transform 0.3s ease;
 
+      
+      &:hover {
 
+        transform: translateY(-3px);
 
+      }
 
+      
+      .metric-label {
 
+        font-size: 12px;
 
+        color: var(--light-text);
 
+        margin-bottom: 8px;
 
+      }
 
+      
+      .metric-value {
 
+        font-size: 24px;
 
+        font-weight: bold;
 
+        color: var(--secondary-color);
 
+      }
 
+    }
 
+  }
 
+  
+  .modal-actions {
 
+    margin-top: 20px;
 
+    padding-top: 20px;
 
+    border-top: 1px solid #e0e0e0;
 
+    display: flex;
 
+    gap: 12px;
 
+    
+    .action-btn {
 
+      flex: 1;
 
+      padding: 12px;
 
+      border: none;
 
+      border-radius: 8px;
 
+      font-size: 14px;
 
+      font-weight: 600;
 
+      cursor: pointer;
 
+      transition: all 0.3s;
 
+      
+      &.btn-primary {
 
+        background: var(--secondary-color);
 
+        color: white;
 
+        
+        &:hover {
 
+          background: #2980b9;
 
+          transform: translateY(-2px);
 
+          box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
 
+        }
 
+        
+        &:active {
 
+          transform: translateY(0);
 
+        }
 
+      }
 
+      
+      &.btn-success {
 
+        background: var(--primary-color);
 
+        color: white;
 
+        
+        &:hover {
 
+          background: var(--primary-dark);
 
+          transform: translateY(-2px);
 
+          box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
 
+        }
 
+        
+        &:active {
 
+          transform: translateY(0);
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+

+ 177 - 3
src/app/government/supervision-overview/supervision-overview.ts
Xem Tập Tin 

@@ -1,13 +1,187 @@
 
 import { Component } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
-import { RouterModule } from '@angular/router';
 
+import { RouterModule, Router } from '@angular/router';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+interface Warning {
 
+  id: string;
 
+  type: 'violation' | 'anomaly' | 'complaint';
 
+  title: string;
 
+  area: string;
 
+  time: string;
 
+  level: 'high' | 'medium' | 'low';
 
+  status: 'pending' | 'processing' | 'resolved';
 
+}
 
+
 
+interface AreaData {
 
+  name: string;
 
+  status: 'good' | 'warning' | 'critical';
 
+  recycleVolume: number;
 
+  accuracy: number;
 
+}
 
 
 @Component({
 
   selector: 'app-supervision-overview',
 
-  imports: [CommonModule, RouterModule],
 
+  imports: [CommonModule, RouterModule, FormsModule],
 
   templateUrl: './supervision-overview.html',
 
   styleUrl: './supervision-overview.scss'
 
 })
 
 export class SupervisionOverview {
 
-  constructor() {}
 
+  mapLayer: 'sites' | 'compliance' | 'policy' = 'sites';
 
+  showWarningDetailModal = false;
 
+  showAreaDetailModal = false;
 
+  selectedWarning: Warning | null = null;
 
+  selectedArea: AreaData | null = null;
 
+  
+  // 核心指标
 
+  indicators = {
 
+    todayRecycle: 45680,
 
+    accuracyRate: 92.5,
 
+    carbonReduction: 1250,
 
+    trend: {
 
+      recycle: '+12%',
 
+      accuracy: '+2.5%',
 
+      carbon: '+8%'
 
+    }
 
+  };
 
+
 
+  // 区域数据
 
+  areas: AreaData[] = [
 
+    { name: '朝阳区', status: 'good', recycleVolume: 12500, accuracy: 95 },
 
+    { name: '海淀区', status: 'warning', recycleVolume: 10200, accuracy: 88 },
 
+    { name: '西城区', status: 'good', recycleVolume: 8900, accuracy: 93 },
 
+    { name: '东城区', status: 'critical', recycleVolume: 7800, accuracy: 76 },
 
+    { name: '丰台区', status: 'good', recycleVolume: 6280, accuracy: 91 }
 
+  ];
 
+
 
+  // 预警列表
 
+  warnings: Warning[] = [
 
+    {
 
+      id: 'W001',
 
+      type: 'violation',
 
+      title: '某企业未按规定分类处理',
 
+      area: '朝阳区',
 
+      time: '10分钟前',
 
+      level: 'high',
 
+      status: 'pending'
 
+    },
 
+    {
 
+      id: 'W002',
 
+      type: 'anomaly',
 
+      title: '海淀区回收量异常下降',
 
+      area: '海淀区',
 
+      time: '30分钟前',
 
+      level: 'medium',
 
+      status: 'processing'
 
+    },
 
+    {
 
+      id: 'W003',
 
+      type: 'complaint',
 
+      title: '居民投诉回收点脏乱',
 
+      area: '西城区',
 
+      time: '1小时前',
 
+      level: 'low',
 
+      status: 'processing'
 
+    },
 
+    {
 
+      id: 'W004',
 
+      type: 'violation',
 
+      title: '东城区企业超标排放',
 
+      area: '东城区',
 
+      time: '2小时前',
 
+      level: 'high',
 
+      status: 'pending'
 
+    }
 
+  ];
 
+
 
+  get pendingWarnings(): number {
 
+    return this.warnings.filter(w => w.status === 'pending').length;
 
+  }
 
+
 
+  get highLevelWarnings(): number {
 
+    return this.warnings.filter(w => w.level === 'high').length;
 
+  }
 
+
 
+  switchMapLayer(layer: 'sites' | 'compliance' | 'policy'): void {
 
+    this.mapLayer = layer;
 
+  }
 
+
 
+  getWarningIcon(type: string): string {
 
+    const icons: {[key: string]: string} = {
 
+      'violation': 'fa-exclamation-circle',
 
+      'anomaly': 'fa-chart-line',
 
+      'complaint': 'fa-comment-alt'
 
+    };
 
+    return icons[type] || 'fa-bell';
 
+  }
 
+
 
+  getWarningTypeText(type: string): string {
 
+    const types: {[key: string]: string} = {
 
+      'violation': '违规事件',
 
+      'anomaly': '异常波动',
 
+      'complaint': '公众投诉'
 
+    };
 
+    return types[type] || type;
 
+  }
 
+
 
+  getStatusText(status: string): string {
 
+    const statusMap: {[key: string]: string} = {
 
+      'pending': '待处理',
 
+      'processing': '处理中',
 
+      'resolved': '已解决'
 
+    };
 
+    return statusMap[status] || status;
 
+  }
 
+
 
+  getLevelClass(level: string): string {
 
+    return `level-${level}`;
 
+  }
 
+
 
+  getStatusClass(status: string): string {
 
+    return `status-${status}`;
 
+  }
 
+
 
+  getAreaStatusClass(status: string): string {
 
+    return `area-${status}`;
 
+  }
 
+
 
+  viewWarningDetail(warning: Warning): void {
 
+    this.selectedWarning = warning;
 
+    this.showWarningDetailModal = true;
 
+  }
 
+
 
+  closeWarningDetail(): void {
 
+    this.showWarningDetailModal = false;
 
+    this.selectedWarning = null;
 
+  }
 
+
 
+  viewAreaDetail(area: AreaData): void {
 
+    this.selectedArea = area;
 
+    this.showAreaDetailModal = true;
 
+  }
 
+
 
+  closeAreaDetail(): void {
 
+    this.showAreaDetailModal = false;
 
+    this.selectedArea = null;
 
+  }
 
+
 
+  handleWarning(warning: Warning): void {
 
+    if (confirm(`确定要处理预警 "${warning.title}" 吗？`)) {
 
+      warning.status = 'processing';
 
+      alert('预警已标记为处理中');
 
+    }
 
+  }
 
+
 
+  resolveWarning(warning: Warning): void {
 
+    if (confirm(`确定要解决预警 "${warning.title}" 吗？`)) {
 
+      warning.status = 'resolved';
 
+      alert('预警已标记为已解决');
 
+    }
 
+  }
 
+
 
+  goToAIAssistant(): void {
 
+    this.router.navigate(['/government/ai-decision-assistant']);
 
+  }
 
+
 
+  constructor(private router: Router) {}
 
 }

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác